From 642c4eedd4871499e9c5b23b4bd6cc6dceb8f567 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Wed, 5 May 2021 08:58:35 -0700 Subject: [PATCH 1/3] components: Add Spacer --- docs/manifest.json | 6 + packages/components/src/index.js | 1 + packages/components/src/spacer/README.md | 112 ++++++++++ packages/components/src/spacer/component.ts | 36 ++++ packages/components/src/spacer/hook.ts | 163 ++++++++++++++ packages/components/src/spacer/index.ts | 2 + .../spacer/test/__snapshots__/index.js.snap | 199 ++++++++++++++++++ packages/components/src/spacer/test/index.js | 118 +++++++++++ packages/components/tsconfig.json | 1 + 9 files changed, 638 insertions(+) create mode 100644 packages/components/src/spacer/README.md create mode 100644 packages/components/src/spacer/component.ts create mode 100644 packages/components/src/spacer/hook.ts create mode 100644 packages/components/src/spacer/index.ts create mode 100644 packages/components/src/spacer/test/__snapshots__/index.js.snap create mode 100644 packages/components/src/spacer/test/index.js diff --git a/docs/manifest.json b/docs/manifest.json index 8454aa294683bf..7691b8dcf9c319 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -1067,6 +1067,12 @@ "markdown_source": "../packages/components/src/snackbar/README.md", "parent": "components" }, + { + "title": "Spacer", + "slug": "spacer", + "markdown_source": "../packages/components/src/spacer/README.md", + "parent": "components" + }, { "title": "Spinner", "slug": "spinner", diff --git a/packages/components/src/index.js b/packages/components/src/index.js index afbb7e37db8ae2..3539a38860cddc 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -102,6 +102,7 @@ export { default as SandBox } from './sandbox'; export { default as SelectControl } from './select-control'; export { default as Snackbar } from './snackbar'; export { default as SnackbarList } from './snackbar/list'; +export { Spacer as __experimentalSpacer } from './spacer'; export { default as Spinner } from './spinner'; export { default as TabPanel } from './tab-panel'; export { Text as __experimentalText } from './text'; diff --git a/packages/components/src/spacer/README.md b/packages/components/src/spacer/README.md new file mode 100644 index 00000000000000..74748ae12e1174 --- /dev/null +++ b/packages/components/src/spacer/README.md @@ -0,0 +1,112 @@ +# Spacer + +`Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It can also be used to adaptively provide space within an `HStack` or `VStack`. + +## Table of contents + +## Usage + +`Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props work as a multiplier to the library's grid system (base of `4px`). + +```jsx +import { Spacer } from '@wordpress/components'; + +function Example() { + return ( + + + WordPress.org + + + Code is Poetry + + + ); +} +``` + +## Props + +##### m + +**Type**: `number` + +Adjusts all margins. + +##### mb + +**Type**: `number` + +Adjusts bottom margins. + +##### ml + +**Type**: `number` + +Adjusts left margins. + +##### mr + +**Type**: `number` + +Adjusts right margins. + +##### mt + +**Type**: `number` + +Adjusts top margins. + +##### mx + +**Type**: `number` + +Adjusts left and right margins. + +##### my + +**Type**: `number` + +Adjusts top and bottom margins. + +##### p + +**Type**: `number` + +Adjusts all padding. + +##### pb + +**Type**: `number` + +Adjusts bottom padding. + +##### pl + +**Type**: `number` + +Adjusts left padding. + +##### pr + +**Type**: `number` + +Adjusts right padding. + +##### pt + +**Type**: `number` + +Adjusts top padding. + +##### px + +**Type**: `number` + +Adjusts left and right padding. + +##### py + +**Type**: `number` + +Adjusts top and bottom padding. diff --git a/packages/components/src/spacer/component.ts b/packages/components/src/spacer/component.ts new file mode 100644 index 00000000000000..162029e1cb9c66 --- /dev/null +++ b/packages/components/src/spacer/component.ts @@ -0,0 +1,36 @@ +/** + * Internal dependencies + */ +import { createComponent } from '../ui/utils'; +import { useSpacer } from './hook'; + +/** + * `Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It can also be used to adaptively provide space within an `HStack` or `VStack`. + * + * `Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props work as a multiplier to the library's grid system (base of `4px`). + * + * @example + * ```jsx + * import { Spacer } from `@wordpress/components` + * + * function Example() { + * return ( + * + * + * WordPress.org + * + * + * Code is Poetry + * + * + * ); + * } + * ``` + */ +const Spacer = createComponent( { + as: 'div', + useHook: useSpacer, + name: 'Spacer', +} ); + +export default Spacer; diff --git a/packages/components/src/spacer/hook.ts b/packages/components/src/spacer/hook.ts new file mode 100644 index 00000000000000..95d54e880712f2 --- /dev/null +++ b/packages/components/src/spacer/hook.ts @@ -0,0 +1,163 @@ +/** + * External dependencies + */ +import { css, cx } from 'emotion'; + +/** + * Internal dependencies + */ +import { useContextSystem } from '../ui/context'; +// eslint-disable-next-line no-duplicate-imports +import type { ViewOwnProps } from '../ui/context'; +import { space } from '../ui/utils/space'; + +const isDefined = < T >( o: T ): o is Exclude< T, null | undefined > => + typeof o !== 'undefined' && o !== null; + +export interface SpacerProps { + /** + * Adjusts all margins. + */ + m?: number; + /** + * Adjusts top and bottom margins. + */ + my?: number; + /** + * Adjusts left and right margins. + */ + mx?: number; + /** + * Adjusts top margins. + */ + mt?: number; + /** + * Adjusts bottom margins. + * + * @default 2 + */ + mb?: number; + /** + * Adjusts left margins. + */ + ml?: number; + /** + * Adjusts right margins. + */ + mr?: number; + /** + * Adjusts all padding. + */ + p?: number; + /** + * Adjusts top and bottom padding. + */ + py?: number; + /** + * Adjusts left and right padding. + */ + px?: number; + /** + * Adjusts top padding. + */ + pt?: number; + /** + * Adjusts bottom padding. + */ + pb?: number; + /** + * Adjusts left padding. + */ + pl?: number; + /** + * Adjusts right padding. + */ + pr?: number; +} + +export function useSpacer( props: ViewOwnProps< SpacerProps, 'div' > ) { + const { + className, + m, + mb = 2, + ml, + mr, + mt, + mx, + my, + p, + pb, + pl, + pr, + pt, + px, + py, + ...otherProps + } = useContextSystem( props, 'Spacer' ); + + const classes = cx( + isDefined( mt ) && + css` + margin-top: ${ space( mt ) }; + `, + isDefined( mb ) && + css` + margin-bottom: ${ space( mb ) }; + `, + isDefined( ml ) && + css` + margin-left: ${ space( ml ) }; + `, + isDefined( mr ) && + css` + margin-right: ${ space( mr ) }; + `, + isDefined( mx ) && + css` + margin-left: ${ space( mx ) }; + margin-right: ${ space( mx ) }; + `, + isDefined( my ) && + css` + margin-bottom: ${ space( my ) }; + margin-top: ${ space( my ) }; + `, + isDefined( m ) && + css` + margin: ${ space( m ) }; + `, + isDefined( pt ) && + css` + padding-top: ${ space( pt ) }; + `, + isDefined( pb ) && + css` + padding-bottom: ${ space( pb ) }; + `, + isDefined( pl ) && + css` + padding-left: ${ space( pl ) }; + `, + isDefined( pr ) && + css` + padding-right: ${ space( pr ) }; + `, + isDefined( px ) && + css` + padding-left: ${ space( px ) }; + padding-right: ${ space( px ) }; + `, + isDefined( py ) && + css` + padding-bottom: ${ space( py ) }; + padding-top: ${ space( py ) }; + `, + isDefined( p ) && + css` + padding: ${ space( p ) }; + `, + className + ); + + return { ...otherProps, className: classes }; +} diff --git a/packages/components/src/spacer/index.ts b/packages/components/src/spacer/index.ts new file mode 100644 index 00000000000000..ffa1dcab00e8d9 --- /dev/null +++ b/packages/components/src/spacer/index.ts @@ -0,0 +1,2 @@ +export { default as Spacer } from './component'; +export * from './hook'; diff --git a/packages/components/src/spacer/test/__snapshots__/index.js.snap b/packages/components/src/spacer/test/__snapshots__/index.js.snap new file mode 100644 index 00000000000000..ecf40a7e47be27 --- /dev/null +++ b/packages/components/src/spacer/test/__snapshots__/index.js.snap @@ -0,0 +1,199 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`props should render correctly 1`] = ` +.emotion-0 { + margin-bottom: calc(4px * 2); +} + +
+`; + +exports[`props should render margin 1`] = ` +Snapshot Diff: +- Received styles ++ Base styles + + Array [ + Object { +- "margin": "calc(4px * 5)", + "margin-bottom": "calc(4px * 2)", + }, + ] +`; + +exports[`props should render marginBottom 1`] = ` +Snapshot Diff: +- Received styles ++ Base styles + + Array [ + Object { +- "margin-bottom": "calc(4px * 5)", ++ "margin-bottom": "calc(4px * 2)", + }, + ] +`; + +exports[`props should render marginLeft 1`] = ` +Snapshot Diff: +- Received styles ++ Base styles + + Array [ + Object { + "margin-bottom": "calc(4px * 2)", +- "margin-left": "calc(4px * 5)", + }, + ] +`; + +exports[`props should render marginRight 1`] = ` +Snapshot Diff: +- Received styles ++ Base styles + + Array [ + Object { + "margin-bottom": "calc(4px * 2)", +- "margin-right": "calc(4px * 5)", + }, + ] +`; + +exports[`props should render marginTop 1`] = ` +Snapshot Diff: +- Received styles ++ Base styles + + Array [ + Object { + "margin-bottom": "calc(4px * 2)", +- "margin-top": "calc(4px * 5)", + }, + ] +`; + +exports[`props should render marginX 1`] = ` +Snapshot Diff: +- Received styles ++ Base styles + + Array [ + Object { + "margin-bottom": "calc(4px * 2)", +- "margin-left": "calc(4px * 5)", +- "margin-right": "calc(4px * 5)", + }, + ] +`; + +exports[`props should render marginY 1`] = ` +Snapshot Diff: +- Received styles ++ Base styles + + Array [ + Object { +- "margin-bottom": "calc(4px * 5)", +- "margin-top": "calc(4px * 5)", ++ "margin-bottom": "calc(4px * 2)", + }, + ] +`; + +exports[`props should render padding 1`] = ` +Snapshot Diff: +- Received styles ++ Base styles + + Array [ + Object { + "margin-bottom": "calc(4px * 2)", +- "padding": "calc(4px * 5)", + }, + ] +`; + +exports[`props should render paddingBottom 1`] = ` +Snapshot Diff: +- Received styles ++ Base styles + + Array [ + Object { + "margin-bottom": "calc(4px * 2)", +- "padding-bottom": "calc(4px * 5)", + }, + ] +`; + +exports[`props should render paddingLeft 1`] = ` +Snapshot Diff: +- Received styles ++ Base styles + + Array [ + Object { + "margin-bottom": "calc(4px * 2)", +- "padding-left": "calc(4px * 5)", + }, + ] +`; + +exports[`props should render paddingRight 1`] = ` +Snapshot Diff: +- Received styles ++ Base styles + + Array [ + Object { + "margin-bottom": "calc(4px * 2)", +- "padding-right": "calc(4px * 5)", + }, + ] +`; + +exports[`props should render paddingTop 1`] = ` +Snapshot Diff: +- Received styles ++ Base styles + + Array [ + Object { + "margin-bottom": "calc(4px * 2)", +- "padding-top": "calc(4px * 5)", + }, + ] +`; + +exports[`props should render paddingX 1`] = ` +Snapshot Diff: +- Received styles ++ Base styles + + Array [ + Object { + "margin-bottom": "calc(4px * 2)", +- "padding-left": "calc(4px * 5)", +- "padding-right": "calc(4px * 5)", + }, + ] +`; + +exports[`props should render paddingY 1`] = ` +Snapshot Diff: +- Received styles ++ Base styles + + Array [ + Object { + "margin-bottom": "calc(4px * 2)", +- "padding-bottom": "calc(4px * 5)", +- "padding-top": "calc(4px * 5)", + }, + ] +`; diff --git a/packages/components/src/spacer/test/index.js b/packages/components/src/spacer/test/index.js new file mode 100644 index 00000000000000..8658a14766ccf3 --- /dev/null +++ b/packages/components/src/spacer/test/index.js @@ -0,0 +1,118 @@ +/** + * External dependencies + */ +import { render } from '@testing-library/react'; + +/** + * Internal dependencies + */ +import { Spacer } from '../index'; + +describe( 'props', () => { + let base; + beforeEach( () => { + base = render( ).container; + } ); + + test( 'should render correctly', () => { + expect( base.firstChild ).toMatchSnapshot(); + } ); + + test( 'should render margin', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.firstChild + ); + } ); + + test( 'should render marginX', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.firstChild + ); + } ); + + test( 'should render marginY', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.firstChild + ); + } ); + + test( 'should render marginTop', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.firstChild + ); + } ); + + test( 'should render marginBottom', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.firstChild + ); + } ); + + test( 'should render marginLeft', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.firstChild + ); + } ); + + test( 'should render marginRight', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.firstChild + ); + } ); + + test( 'should render padding', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.firstChild + ); + } ); + + test( 'should render paddingX', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.firstChild + ); + } ); + + test( 'should render paddingY', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.firstChild + ); + } ); + + test( 'should render paddingTop', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.firstChild + ); + } ); + + test( 'should render paddingBottom', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.firstChild + ); + } ); + + test( 'should render paddingLeft', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.firstChild + ); + } ); + + test( 'should render paddingRight', () => { + const { container } = render( ); + expect( container.firstChild ).toMatchStyleDiffSnapshot( + base.firstChild + ); + } ); +} ); diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index f4c7d9364e0b6f..c93cc82efe1bb6 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -25,6 +25,7 @@ "src/scroll-lock/**/*", "src/shortcut/**/*", "src/spinner/**/*", + "src/spacer/**/*", "src/tip/**/*", "src/truncate/**/*", "src/ui/**/*", From 41dcbb86cd25dff2e165ff71c21ba82427a0d32a Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Thu, 6 May 2021 05:41:40 -0700 Subject: [PATCH 2/3] Correct documentation and specify explicit exports --- packages/components/src/spacer/README.md | 6 +++++- packages/components/src/spacer/index.ts | 3 ++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/components/src/spacer/README.md b/packages/components/src/spacer/README.md index 74748ae12e1174..01e15bb3bebaf1 100644 --- a/packages/components/src/spacer/README.md +++ b/packages/components/src/spacer/README.md @@ -9,7 +9,11 @@ `Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props work as a multiplier to the library's grid system (base of `4px`). ```jsx -import { Spacer } from '@wordpress/components'; +import { + __experimentalSpacer as Spacer, + __experimentalHeading as Heading, + __experimentalView as View +} from '@wordpress/components'; function Example() { return ( diff --git a/packages/components/src/spacer/index.ts b/packages/components/src/spacer/index.ts index ffa1dcab00e8d9..765121f409b066 100644 --- a/packages/components/src/spacer/index.ts +++ b/packages/components/src/spacer/index.ts @@ -1,2 +1,3 @@ export { default as Spacer } from './component'; -export * from './hook'; +export { useSpacer } from './hook'; +export type { SpacerProps } from './hook'; From 4186e663d9b68868e32b883371d75f478181dc32 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Thu, 6 May 2021 05:46:20 -0700 Subject: [PATCH 3/3] Update prop names --- packages/components/src/spacer/README.md | 30 ++--- packages/components/src/spacer/hook.ts | 120 +++++++++---------- packages/components/src/spacer/test/index.js | 28 ++--- 3 files changed, 90 insertions(+), 88 deletions(-) diff --git a/packages/components/src/spacer/README.md b/packages/components/src/spacer/README.md index 01e15bb3bebaf1..1aad9670c082f5 100644 --- a/packages/components/src/spacer/README.md +++ b/packages/components/src/spacer/README.md @@ -1,5 +1,7 @@ # Spacer +> **Experimental!** + `Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It can also be used to adaptively provide space within an `HStack` or `VStack`. ## Table of contents @@ -31,85 +33,85 @@ function Example() { ## Props -##### m +##### margin **Type**: `number` Adjusts all margins. -##### mb +##### marginBottom **Type**: `number` Adjusts bottom margins. -##### ml +##### marginLeft **Type**: `number` Adjusts left margins. -##### mr +##### marginRight **Type**: `number` Adjusts right margins. -##### mt +##### marginTop **Type**: `number` Adjusts top margins. -##### mx +##### marginX **Type**: `number` Adjusts left and right margins. -##### my +##### marginY **Type**: `number` Adjusts top and bottom margins. -##### p +##### padding **Type**: `number` Adjusts all padding. -##### pb +##### paddingBottom **Type**: `number` Adjusts bottom padding. -##### pl +##### paddingLeft **Type**: `number` Adjusts left padding. -##### pr +##### paddingRight **Type**: `number` Adjusts right padding. -##### pt +##### paddingTop **Type**: `number` Adjusts top padding. -##### px +##### paddingX **Type**: `number` Adjusts left and right padding. -##### py +##### paddingY **Type**: `number` diff --git a/packages/components/src/spacer/hook.ts b/packages/components/src/spacer/hook.ts index 95d54e880712f2..cd2465627d31c8 100644 --- a/packages/components/src/spacer/hook.ts +++ b/packages/components/src/spacer/hook.ts @@ -18,143 +18,143 @@ export interface SpacerProps { /** * Adjusts all margins. */ - m?: number; + margin?: number; /** * Adjusts top and bottom margins. */ - my?: number; + marginY?: number; /** * Adjusts left and right margins. */ - mx?: number; + marginX?: number; /** * Adjusts top margins. */ - mt?: number; + marginTop?: number; /** * Adjusts bottom margins. * * @default 2 */ - mb?: number; + marginBottom?: number; /** * Adjusts left margins. */ - ml?: number; + marginLeft?: number; /** * Adjusts right margins. */ - mr?: number; + marginRight?: number; /** * Adjusts all padding. */ - p?: number; + padding?: number; /** * Adjusts top and bottom padding. */ - py?: number; + paddingY?: number; /** * Adjusts left and right padding. */ - px?: number; + paddingX?: number; /** * Adjusts top padding. */ - pt?: number; + paddingTop?: number; /** * Adjusts bottom padding. */ - pb?: number; + paddingBottom?: number; /** * Adjusts left padding. */ - pl?: number; + paddingLeft?: number; /** * Adjusts right padding. */ - pr?: number; + paddingRight?: number; } export function useSpacer( props: ViewOwnProps< SpacerProps, 'div' > ) { const { className, - m, - mb = 2, - ml, - mr, - mt, - mx, - my, - p, - pb, - pl, - pr, - pt, - px, - py, + margin, + marginBottom = 2, + marginLeft, + marginRight, + marginTop, + marginX, + marginY, + padding, + paddingBottom, + paddingLeft, + paddingRight, + paddingTop, + paddingX, + paddingY, ...otherProps } = useContextSystem( props, 'Spacer' ); const classes = cx( - isDefined( mt ) && + isDefined( marginTop ) && css` - margin-top: ${ space( mt ) }; + margin-top: ${ space( marginTop ) }; `, - isDefined( mb ) && + isDefined( marginBottom ) && css` - margin-bottom: ${ space( mb ) }; + margin-bottom: ${ space( marginBottom ) }; `, - isDefined( ml ) && + isDefined( marginLeft ) && css` - margin-left: ${ space( ml ) }; + margin-left: ${ space( marginLeft ) }; `, - isDefined( mr ) && + isDefined( marginRight ) && css` - margin-right: ${ space( mr ) }; + margin-right: ${ space( marginRight ) }; `, - isDefined( mx ) && + isDefined( marginX ) && css` - margin-left: ${ space( mx ) }; - margin-right: ${ space( mx ) }; + margin-left: ${ space( marginX ) }; + margin-right: ${ space( marginX ) }; `, - isDefined( my ) && + isDefined( marginY ) && css` - margin-bottom: ${ space( my ) }; - margin-top: ${ space( my ) }; + margin-bottom: ${ space( marginY ) }; + margin-top: ${ space( marginY ) }; `, - isDefined( m ) && + isDefined( margin ) && css` - margin: ${ space( m ) }; + margin: ${ space( margin ) }; `, - isDefined( pt ) && + isDefined( paddingTop ) && css` - padding-top: ${ space( pt ) }; + padding-top: ${ space( paddingTop ) }; `, - isDefined( pb ) && + isDefined( paddingBottom ) && css` - padding-bottom: ${ space( pb ) }; + padding-bottom: ${ space( paddingBottom ) }; `, - isDefined( pl ) && + isDefined( paddingLeft ) && css` - padding-left: ${ space( pl ) }; + padding-left: ${ space( paddingLeft ) }; `, - isDefined( pr ) && + isDefined( paddingRight ) && css` - padding-right: ${ space( pr ) }; + padding-right: ${ space( paddingRight ) }; `, - isDefined( px ) && + isDefined( paddingX ) && css` - padding-left: ${ space( px ) }; - padding-right: ${ space( px ) }; + padding-left: ${ space( paddingX ) }; + padding-right: ${ space( paddingX ) }; `, - isDefined( py ) && + isDefined( paddingY ) && css` - padding-bottom: ${ space( py ) }; - padding-top: ${ space( py ) }; + padding-bottom: ${ space( paddingY ) }; + padding-top: ${ space( paddingY ) }; `, - isDefined( p ) && + isDefined( padding ) && css` - padding: ${ space( p ) }; + padding: ${ space( padding ) }; `, className ); diff --git a/packages/components/src/spacer/test/index.js b/packages/components/src/spacer/test/index.js index 8658a14766ccf3..47d9ab1833596c 100644 --- a/packages/components/src/spacer/test/index.js +++ b/packages/components/src/spacer/test/index.js @@ -19,98 +19,98 @@ describe( 'props', () => { } ); test( 'should render margin', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchStyleDiffSnapshot( base.firstChild ); } ); test( 'should render marginX', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchStyleDiffSnapshot( base.firstChild ); } ); test( 'should render marginY', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchStyleDiffSnapshot( base.firstChild ); } ); test( 'should render marginTop', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchStyleDiffSnapshot( base.firstChild ); } ); test( 'should render marginBottom', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchStyleDiffSnapshot( base.firstChild ); } ); test( 'should render marginLeft', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchStyleDiffSnapshot( base.firstChild ); } ); test( 'should render marginRight', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchStyleDiffSnapshot( base.firstChild ); } ); test( 'should render padding', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchStyleDiffSnapshot( base.firstChild ); } ); test( 'should render paddingX', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchStyleDiffSnapshot( base.firstChild ); } ); test( 'should render paddingY', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchStyleDiffSnapshot( base.firstChild ); } ); test( 'should render paddingTop', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchStyleDiffSnapshot( base.firstChild ); } ); test( 'should render paddingBottom', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchStyleDiffSnapshot( base.firstChild ); } ); test( 'should render paddingLeft', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchStyleDiffSnapshot( base.firstChild ); } ); test( 'should render paddingRight', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchStyleDiffSnapshot( base.firstChild );