From 064c4cb715bdebd611ef8aa9c303bb1eb18a579a Mon Sep 17 00:00:00 2001 From: Lachlan Campbell Date: Thu, 22 Sep 2022 16:02:21 -0400 Subject: [PATCH 1/4] components: Remove style props --- examples/prism/src/layout.js | 4 +- packages/components/src/Box.tsx | 72 +-- packages/components/src/Checkbox.tsx | 11 +- packages/components/src/Embed.tsx | 10 +- packages/components/src/Field.tsx | 10 +- packages/components/src/Message.tsx | 4 +- packages/components/src/Progress.tsx | 2 +- packages/components/src/Select.tsx | 11 +- packages/components/src/Switch.tsx | 5 +- packages/components/src/util.ts | 23 - packages/components/test/Box.spec.tsx | 25 +- packages/components/test/Checkbox.spec.tsx | 50 ++ packages/components/test/Field.spec.tsx | 38 ++ packages/components/test/Select.spec.tsx | 56 ++ packages/components/test/Switch.spec.tsx | 21 +- .../test/__snapshots__/Box.spec.tsx.snap | 1 - .../test/__snapshots__/Checkbox.spec.tsx.snap | 128 +++++ .../test/__snapshots__/Field.spec.tsx.snap | 233 ++++++++ .../test/__snapshots__/Select.spec.tsx.snap | 171 ++++++ .../test/__snapshots__/Switch.spec.tsx.snap | 114 ++++ .../test/__snapshots__/index.tsx.snap | 542 ------------------ packages/components/test/index.tsx | 97 +--- packages/components/test/types.tsx | 69 ++- packages/docs/src/components/components.mdx | 17 +- packages/docs/src/pages/components/alert.mdx | 12 +- packages/docs/src/pages/components/box.mdx | 4 +- packages/docs/src/pages/components/button.mdx | 10 +- .../docs/src/pages/components/container.mdx | 8 +- packages/docs/src/pages/components/flex.mdx | 8 +- packages/docs/src/pages/components/grid.mdx | 36 +- packages/docs/src/pages/components/index.mdx | 42 +- packages/docs/src/pages/index.mdx | 2 +- 32 files changed, 948 insertions(+), 888 deletions(-) create mode 100644 packages/components/test/Checkbox.spec.tsx create mode 100644 packages/components/test/Field.spec.tsx create mode 100644 packages/components/test/Select.spec.tsx create mode 100644 packages/components/test/__snapshots__/Checkbox.spec.tsx.snap create mode 100644 packages/components/test/__snapshots__/Field.spec.tsx.snap create mode 100644 packages/components/test/__snapshots__/Select.spec.tsx.snap create mode 100644 packages/components/test/__snapshots__/Switch.spec.tsx.snap diff --git a/examples/prism/src/layout.js b/examples/prism/src/layout.js index 4bce96735..ccfd271a5 100755 --- a/examples/prism/src/layout.js +++ b/examples/prism/src/layout.js @@ -1,7 +1,7 @@ /** @jsx jsx */ import { jsx, Layout, Header, Main, Container } from 'theme-ui' -const Layout = (props) => ( +const PageLayout = (props) => (

Theme UI Gatsby Example

@@ -12,4 +12,4 @@ const Layout = (props) => ( ) -export default Layout +export default PageLayout diff --git a/packages/components/src/Box.tsx b/packages/components/src/Box.tsx index 1c25466d9..ae9d7bd80 100644 --- a/packages/components/src/Box.tsx +++ b/packages/components/src/Box.tsx @@ -7,56 +7,11 @@ import { useTheme, } from '@emotion/react' import React, { forwardRef } from 'react' -import { - css, - get, - ThemeUICSSProperties, - ThemeUIStyleObject, -} from '@theme-ui/css' +import { css, get, ThemeUIStyleObject } from '@theme-ui/css' import type { Assign } from './types' import type { __ThemeUIComponentsInternalProps } from './util' -const boxSystemProps = [ - // space scale props (inherited from @styled-system/space) - 'margin', - 'marginTop', - 'marginRight', - 'marginBottom', - 'marginLeft', - 'marginX', - 'marginY', - 'm', - 'mt', - 'mr', - 'mb', - 'ml', - 'mx', - 'my', - 'padding', - 'paddingTop', - 'paddingRight', - 'paddingBottom', - 'paddingLeft', - 'paddingX', - 'paddingY', - 'p', - 'pt', - 'pr', - 'pb', - 'pl', - 'px', - 'py', - // color props (inherited from @styled-system/color) - 'color', - 'backgroundColor', - 'bg', - 'opacity', -] as const - -type BoxSystemPropsKeys = typeof boxSystemProps[number] -type BoxSystemProps = Pick - -export interface BoxOwnProps extends BoxSystemProps { +export interface BoxOwnProps { as?: React.ElementType variant?: string css?: Interpolation @@ -69,22 +24,6 @@ export interface BoxProps 'ref' > {} -/** - * @internal - */ -export const __isBoxStyledSystemProp = (prop: string) => - (boxSystemProps as readonly string[]).includes(prop) - -const pickSystemProps = (props: BoxOwnProps) => { - const res: Partial> = {} - for (const key of boxSystemProps) { - // ts2590: union is too large - ;(res as any)[key] = props[key] - } - - return res -} - /** * Use the Box component as a layout primitive to add margin, padding, and colors to content. * @see https://theme-ui.com/components/box @@ -116,20 +55,13 @@ export const Box = forwardRef(function Box(props, ref) { const sxPropStyles = css(sx)(theme) - const systemPropsStyles = css(pickSystemProps(rest))(theme) - const style: ArrayInterpolation = [ baseStyles, __cssStyles, variantStyles, sxPropStyles, - systemPropsStyles, cssProp, ] - boxSystemProps.forEach((name) => { - delete (rest as Record)[name] - }) - return }) diff --git a/packages/components/src/Checkbox.tsx b/packages/components/src/Checkbox.tsx index 27a1d7058..043f93eea 100644 --- a/packages/components/src/Checkbox.tsx +++ b/packages/components/src/Checkbox.tsx @@ -2,7 +2,8 @@ import React from 'react' import { Box, BoxOwnProps } from './Box' import { SVG, SVGProps } from './SVG' -import { Assign, ForwardRef } from './types' +import type { Assign, ForwardRef } from './types' +import type { ThemeUICSSObject } from '@theme-ui/css' import { __internalProps } from './util' const CheckboxChecked = (props: SVGProps) => ( @@ -45,7 +46,9 @@ const CheckboxIcon = (props: SVGProps) => ( ) export interface CheckboxProps - extends Assign, BoxOwnProps> {} + extends Assign, BoxOwnProps> { + containerSx?: ThemeUICSSObject +} /** * Form checkbox input component @@ -56,11 +59,11 @@ export interface CheckboxProps */ export const Checkbox: ForwardRef = React.forwardRef(function Checkbox( - { className, sx, variant = 'checkbox', children, ...props }, + { className, sx, containerSx, variant = 'checkbox', children, ...props }, ref ) { return ( - + !__isBoxStyledSystemProp(str)) +import { __internalProps } from './util' export interface EmbedProps extends Assign, BoxOwnProps> { @@ -47,14 +44,13 @@ export const Embed: ForwardRef = frameBorder, allowFullScreen, allow, - ...getIframeProps(rest), + ...rest, } return ( = FieldOwnProps & @@ -39,6 +40,7 @@ export const Field = React.forwardRef(function Field< label, id, name, + containerSx, ...rest }: FieldProps, ref: React.ForwardedRef @@ -49,11 +51,11 @@ export const Field = React.forwardRef(function Field< ref, name, id: fieldIdentifier, - ...omitMargin(rest), + ...rest, } as React.ComponentPropsWithRef return ( - + diff --git a/packages/components/src/Message.tsx b/packages/components/src/Message.tsx index 2ebd867ba..896bd6cd0 100644 --- a/packages/components/src/Message.tsx +++ b/packages/components/src/Message.tsx @@ -1,8 +1,8 @@ import React from 'react' -import { ThemeUICSSObject } from '@theme-ui/css' +import type { ThemeUICSSObject } from '@theme-ui/css' import { Box, BoxProps } from './Box' -import { ForwardRef } from './types' +import type { ForwardRef } from './types' import { __internalProps } from './util' export type MessageProps = BoxProps diff --git a/packages/components/src/Progress.tsx b/packages/components/src/Progress.tsx index 191b0d393..e0262a406 100644 --- a/packages/components/src/Progress.tsx +++ b/packages/components/src/Progress.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { ThemeUICSSObject } from '@theme-ui/css' +import type { ThemeUICSSObject } from '@theme-ui/css' import { Box, BoxOwnProps, BoxProps } from './Box' import type { Assign, ForwardRef } from './types' diff --git a/packages/components/src/Select.tsx b/packages/components/src/Select.tsx index bf84c9250..a560956fa 100644 --- a/packages/components/src/Select.tsx +++ b/packages/components/src/Select.tsx @@ -4,8 +4,8 @@ import { get, ThemeUICSSObject } from '@theme-ui/css' import { Box, BoxOwnProps, BoxProps } from './Box' import { SVG, SVGProps } from './SVG' -import { getMargin, omitMargin, __internalProps } from './util' -import { Assign, ForwardRef } from './types' +import { __internalProps } from './util' +import type { Assign, ForwardRef } from './types' const DownArrow = (props: SVGProps) => ( @@ -16,6 +16,7 @@ const DownArrow = (props: SVGProps) => ( export interface SelectProps extends Assign, BoxOwnProps> { arrow?: React.ReactElement + containerSx?: ThemeUICSSObject } /** @@ -24,7 +25,7 @@ export interface SelectProps * @see https://theme-ui.com/components/select/ */ export const Select: ForwardRef = - React.forwardRef(function Select({ arrow, ...props }, ref) { + React.forwardRef(function Select({ arrow, containerSx, ...props }, ref) { const __css: ThemeUICSSObject = { display: 'block', width: '100%', @@ -41,16 +42,16 @@ export const Select: ForwardRef = return ( {arrow || ( diff --git a/packages/components/src/Switch.tsx b/packages/components/src/Switch.tsx index 803548edb..2268dd570 100644 --- a/packages/components/src/Switch.tsx +++ b/packages/components/src/Switch.tsx @@ -13,6 +13,7 @@ const SIZE = 18 export interface SwitchProps extends Assign, BoxOwnProps> { label?: string + containerSx?: ThemeUICSSObject } /** @@ -23,7 +24,7 @@ export interface SwitchProps */ export const Switch: ForwardRef = React.forwardRef(function Switch( - { className, label, sx, variant = 'switch', ...rest }, + { className, label, sx, containerSx, variant = 'switch', ...rest }, ref ) { const __css: ThemeUICSSObject = { @@ -59,7 +60,7 @@ export const Switch: ForwardRef = } return ( - + } + /> + + ) + expect(json).toMatchSnapshot() + }) + + test('renders with background-color', () => { + const json = renderJSON( + + + + + +`; diff --git a/packages/components/test/__snapshots__/Field.spec.tsx.snap b/packages/components/test/__snapshots__/Field.spec.tsx.snap new file mode 100644 index 000000000..1a66bc7ed --- /dev/null +++ b/packages/components/test/__snapshots__/Field.spec.tsx.snap @@ -0,0 +1,233 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Field containerSx and sx 1`] = ` +.emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-top: 32px; + margin-bottom: 32px; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: block; + width: 100%; + padding: 8px; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + font-size: inherit; + line-height: inherit; + border: 1px solid; + border-radius: 4px; + color: inherit; + background-color: transparent; + color: primary; +} + +.emotion-2:autofill, +.emotion-2:autofill:hover, +.emotion-2:autofill:focus { + box-shadow: inset 0 0 0 1000px var(--theme-ui-input-autofill-bg); + font-size: inherit; +} + +.emotion-2:autofill:first-line, +.emotion-2:autofill:hover:first-line, +.emotion-2:autofill:focus:first-line { + font-size: 1rem; +} + +.emotion-2:-webkit-autofill, +.emotion-2:-webkit-autofill:hover, +.emotion-2:-webkit-autofill:focus { + box-shadow: inset 0 0 0 1000px var(--theme-ui-input-autofill-bg); + font-size: inherit; +} + +.emotion-2:-webkit-autofill:first-line, +.emotion-2:-webkit-autofill:hover:first-line, +.emotion-2:-webkit-autofill:focus:first-line { + font-size: 1rem; +} + +
+ + +
+`; + +exports[`Field renders 1`] = ` +.emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: block; + width: 100%; + padding: 8px; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + font-size: inherit; + line-height: inherit; + border: 1px solid; + border-radius: 4px; + color: inherit; + background-color: transparent; +} + +.emotion-2:autofill, +.emotion-2:autofill:hover, +.emotion-2:autofill:focus { + box-shadow: inset 0 0 0 1000px var(--theme-ui-input-autofill-bg); + font-size: inherit; +} + +.emotion-2:autofill:first-line, +.emotion-2:autofill:hover:first-line, +.emotion-2:autofill:focus:first-line { + font-size: 1rem; +} + +.emotion-2:-webkit-autofill, +.emotion-2:-webkit-autofill:hover, +.emotion-2:-webkit-autofill:focus { + box-shadow: inset 0 0 0 1000px var(--theme-ui-input-autofill-bg); + font-size: inherit; +} + +.emotion-2:-webkit-autofill:first-line, +.emotion-2:-webkit-autofill:hover:first-line, +.emotion-2:-webkit-autofill:focus:first-line { + font-size: 1rem; +} + +
+
+`; + +exports[`Field renders with id prop 1`] = ` +.emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: block; + width: 100%; + padding: 8px; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + font-size: inherit; + line-height: inherit; + border: 1px solid; + border-radius: 4px; + color: inherit; + background-color: transparent; +} + +.emotion-2:autofill, +.emotion-2:autofill:hover, +.emotion-2:autofill:focus { + box-shadow: inset 0 0 0 1000px var(--theme-ui-input-autofill-bg); + font-size: inherit; +} + +.emotion-2:autofill:first-line, +.emotion-2:autofill:hover:first-line, +.emotion-2:autofill:focus:first-line { + font-size: 1rem; +} + +.emotion-2:-webkit-autofill, +.emotion-2:-webkit-autofill:hover, +.emotion-2:-webkit-autofill:focus { + box-shadow: inset 0 0 0 1000px var(--theme-ui-input-autofill-bg); + font-size: inherit; +} + +.emotion-2:-webkit-autofill:first-line, +.emotion-2:-webkit-autofill:hover:first-line, +.emotion-2:-webkit-autofill:focus:first-line { + font-size: 1rem; +} + +
+
+`; diff --git a/packages/components/test/__snapshots__/Select.spec.tsx.snap b/packages/components/test/__snapshots__/Select.spec.tsx.snap new file mode 100644 index 000000000..c671e8166 --- /dev/null +++ b/packages/components/test/__snapshots__/Select.spec.tsx.snap @@ -0,0 +1,171 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Select renders 1`] = ` +.emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: block; + width: 100%; + padding: 8px; + padding-right: 32px; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + font-size: inherit; + line-height: inherit; + border: 1px solid; + border-radius: 4px; + color: inherit; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-left: -28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + pointer-events: none; +} + +
+ + + + +
+`; + +exports[`Select renders with sx prop 1`] = ` +.emotion-0 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.emotion-1 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: block; + width: 100%; + padding: 8px; + padding-right: 32px; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + font-size: inherit; + line-height: inherit; + border: 1px solid; + border-radius: 4px; + color: inherit; + margin-left: 16px; +} + +.emotion-2 { + box-sizing: border-box; + margin: 0; + min-width: 0; + margin-left: -28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + pointer-events: none; +} + +
+ +
+
+
+ + Subscribe for email updates + + +`; diff --git a/packages/components/test/__snapshots__/index.tsx.snap b/packages/components/test/__snapshots__/index.tsx.snap index 28cee6254..c4b9f9823 100644 --- a/packages/components/test/__snapshots__/index.tsx.snap +++ b/packages/components/test/__snapshots__/index.tsx.snap @@ -180,122 +180,6 @@ exports[`Card renders 1`] = ` /> `; -exports[`Checkbox renders 1`] = ` -.emotion-0 { - box-sizing: border-box; - margin: 0; - min-width: 0; - min-width: -webkit-min-content; - min-width: -moz-min-content; - min-width: min-content; -} - -.emotion-1 { - box-sizing: border-box; - margin: 0; - min-width: 0; - position: absolute; - opacity: 0; - z-index: -1; - width: 1px; - height: 1px; - overflow: hidden; -} - -.emotion-2 { - box-sizing: border-box; - margin: 0; - min-width: 0; - display: none; - box-sizing: border-box; - margin: 0; - min-width: 0; - margin-right: 8px; - border-radius: 4px; - color: gray; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -input:checked~.emotion-2 { - display: block; -} - -input:checked~.emotion-2 { - color: primary; -} - -input:focus~.emotion-2 { - color: primary; - background-color: highlight; -} - -.emotion-3 { - box-sizing: border-box; - margin: 0; - min-width: 0; - display: block; - box-sizing: border-box; - margin: 0; - min-width: 0; - margin-right: 8px; - border-radius: 4px; - color: gray; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; -} - -input:checked~.emotion-3 { - display: none; -} - -input:checked~.emotion-3 { - color: primary; -} - -input:focus~.emotion-3 { - color: primary; - background-color: highlight; -} - -
- - - -
-`; - exports[`Close renders 1`] = ` .emotion-0 { box-sizing: border-box; @@ -501,158 +385,6 @@ exports[`Embed renders with title 1`] = `
`; -exports[`Field renders 1`] = ` -.emotion-0 { - box-sizing: border-box; - margin: 0; - min-width: 0; -} - -.emotion-1 { - box-sizing: border-box; - margin: 0; - min-width: 0; - width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.emotion-2 { - box-sizing: border-box; - margin: 0; - min-width: 0; - display: block; - width: 100%; - padding: 8px; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-size: inherit; - line-height: inherit; - border: 1px solid; - border-radius: 4px; - color: inherit; - background-color: transparent; -} - -.emotion-2:autofill, -.emotion-2:autofill:hover, -.emotion-2:autofill:focus { - box-shadow: inset 0 0 0 1000px var(--theme-ui-input-autofill-bg); - font-size: inherit; -} - -.emotion-2:autofill:first-line, -.emotion-2:autofill:hover:first-line, -.emotion-2:autofill:focus:first-line { - font-size: 1rem; -} - -.emotion-2:-webkit-autofill, -.emotion-2:-webkit-autofill:hover, -.emotion-2:-webkit-autofill:focus { - box-shadow: inset 0 0 0 1000px var(--theme-ui-input-autofill-bg); - font-size: inherit; -} - -.emotion-2:-webkit-autofill:first-line, -.emotion-2:-webkit-autofill:hover:first-line, -.emotion-2:-webkit-autofill:focus:first-line { - font-size: 1rem; -} - -
-
-`; - -exports[`Field renders with id prop 1`] = ` -.emotion-0 { - box-sizing: border-box; - margin: 0; - min-width: 0; -} - -.emotion-1 { - box-sizing: border-box; - margin: 0; - min-width: 0; - width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.emotion-2 { - box-sizing: border-box; - margin: 0; - min-width: 0; - display: block; - width: 100%; - padding: 8px; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-size: inherit; - line-height: inherit; - border: 1px solid; - border-radius: 4px; - color: inherit; - background-color: transparent; -} - -.emotion-2:autofill, -.emotion-2:autofill:hover, -.emotion-2:autofill:focus { - box-shadow: inset 0 0 0 1000px var(--theme-ui-input-autofill-bg); - font-size: inherit; -} - -.emotion-2:autofill:first-line, -.emotion-2:autofill:hover:first-line, -.emotion-2:autofill:focus:first-line { - font-size: 1rem; -} - -.emotion-2:-webkit-autofill, -.emotion-2:-webkit-autofill:hover, -.emotion-2:-webkit-autofill:focus { - box-shadow: inset 0 0 0 1000px var(--theme-ui-input-autofill-bg); - font-size: inherit; -} - -.emotion-2:-webkit-autofill:first-line, -.emotion-2:-webkit-autofill:hover:first-line, -.emotion-2:-webkit-autofill:focus:first-line { - font-size: 1rem; -} - -
-
-`; - exports[`Flex renders 1`] = ` .emotion-0 { box-sizing: border-box; @@ -1091,176 +823,6 @@ input:focus~.emotion-3 {
`; -exports[`Select renders 1`] = ` -.emotion-0 { - box-sizing: border-box; - margin: 0; - min-width: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.emotion-1 { - box-sizing: border-box; - margin: 0; - min-width: 0; - display: block; - width: 100%; - padding: 8px; - padding-right: 32px; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-size: inherit; - line-height: inherit; - border: 1px solid; - border-radius: 4px; - color: inherit; -} - -.emotion-2 { - box-sizing: border-box; - margin: 0; - min-width: 0; - margin-left: -28px; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - pointer-events: none; -} - -
- - - - -
-`; - -exports[`Select renders with style props 1`] = ` -.emotion-0 { - box-sizing: border-box; - margin: 0; - min-width: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - margin-bottom: 16px; -} - -.emotion-1 { - box-sizing: border-box; - margin: 0; - min-width: 0; - display: block; - width: 100%; - padding: 8px; - padding-right: 32px; - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - font-size: inherit; - line-height: inherit; - border: 1px solid; - border-radius: 4px; - color: inherit; -} - -.emotion-2 { - box-sizing: border-box; - margin: 0; - min-width: 0; - margin-left: -28px; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - pointer-events: none; -} - -
- -
-
-
- - -`; - exports[`Text renders 1`] = ` .emotion-0 { box-sizing: border-box; diff --git a/packages/components/test/index.tsx b/packages/components/test/index.tsx index ac18083c4..1c5f1b9f5 100644 --- a/packages/components/test/index.tsx +++ b/packages/components/test/index.tsx @@ -134,12 +134,6 @@ describe('Paragraph', () => { expect(json).toHaveStyleRule('margin', margin) }) - test('renders with space prop overrides', () => { - const margin = '8px' - const json = renderJSON() - expect(json).toHaveStyleRule('margin', margin) - }) - test('renders with theme override', () => { const margin = '8px' const json = renderJSON( @@ -194,54 +188,6 @@ describe('Input', () => { }) }) -describe('Select', () => { - test('renders', () => { - const json = renderJSON( - - - - ) - expect(json).toMatchSnapshot() - }) - - test('renders with custom icon', () => { - const json = renderJSON( - - - - )! - - expect(json.children?.[0]).toHaveStyleRule( - 'background-color', - 'var(--theme-ui-colors-background)' - ) - }) -}) - describe('Textarea', () => { test('renders', () => { const json = renderJSON( @@ -264,17 +210,6 @@ describe('Radio', () => { }) }) -describe('Checkbox', () => { - test('renders', () => { - const json = renderJSON( - - - - ) - expect(json).toMatchSnapshot() - }) -}) - describe('Slider', () => { test('renders', () => { const json = renderJSON( @@ -286,25 +221,6 @@ describe('Slider', () => { }) }) -describe('Field', () => { - test('renders', () => { - const json = renderJSON( - - - - ) - expect(json).toMatchSnapshot() - }) - test('renders with id prop', () => { - const json = renderJSON( - - - - ) - expect(json).toMatchSnapshot() - }) -}) - describe('Progress', () => { test('renders', () => { const json = renderJSON( @@ -397,7 +313,7 @@ describe('Embed', () => { test('renders with box system props', () => { const json = renderJSON( - + ) expect(json).toMatchSnapshot() @@ -489,14 +405,3 @@ describe('MenuButton', () => { expect(json).toMatchSnapshot() }) }) - -describe('Switch', () => { - test('renders', () => { - const json = renderJSON( - - - - ) - expect(json).toMatchSnapshot() - }) -}) diff --git a/packages/components/test/types.tsx b/packages/components/test/types.tsx index 19dc820a3..1a8b1720e 100644 --- a/packages/components/test/types.tsx +++ b/packages/components/test/types.tsx @@ -83,8 +83,7 @@ describe('components type check', () => { const _ = ( { console.log(ref?.style?.alignItems) }} @@ -101,24 +100,24 @@ describe('components type check', () => { { const _ref = ref! type _ = AssertTrue> }} > - primaryBox}> + primaryBox}> Box - Box - Box - Box + Box + Box + Box - - Box - Box - Box - Box + + Box + Box + Box + Box