From 48c5b3833916e4a13214eb0434a92c6faf3b1e31 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Mon, 28 Jun 2021 14:46:25 -0700 Subject: [PATCH 1/5] components: Remove `@emotion/css` from Spacer --- .../spacer/{component.ts => component.tsx} | 23 ++- packages/components/src/spacer/hook.ts | 172 ------------------ packages/components/src/spacer/index.ts | 3 +- .../components/src/spacer/stories/index.js | 53 ++++++ packages/components/src/spacer/styles.ts | 53 ++++++ packages/components/src/spacer/types.ts | 74 ++++++++ 6 files changed, 196 insertions(+), 182 deletions(-) rename packages/components/src/spacer/{component.ts => component.tsx} (61%) delete mode 100644 packages/components/src/spacer/hook.ts create mode 100644 packages/components/src/spacer/stories/index.js create mode 100644 packages/components/src/spacer/styles.ts create mode 100644 packages/components/src/spacer/types.ts diff --git a/packages/components/src/spacer/component.ts b/packages/components/src/spacer/component.tsx similarity index 61% rename from packages/components/src/spacer/component.ts rename to packages/components/src/spacer/component.tsx index 162029e1cb9c66..a5f64959fb5cb7 100644 --- a/packages/components/src/spacer/component.ts +++ b/packages/components/src/spacer/component.tsx @@ -1,8 +1,19 @@ /** * Internal dependencies */ -import { createComponent } from '../ui/utils'; -import { useSpacer } from './hook'; +import { + useContextSystem, + contextConnect, + PolymorphicComponentProps, +} from '../ui/context'; +import type { SpacerProps } from './types'; +import { SpacerWrapper } from './styles'; + +function Spacer( props: PolymorphicComponentProps< SpacerProps, 'div' > ) { + const contextProps = useContextSystem( props, 'Spacer' ); + + return ; +} /** * `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`. @@ -27,10 +38,6 @@ import { useSpacer } from './hook'; * } * ``` */ -const Spacer = createComponent( { - as: 'div', - useHook: useSpacer, - name: 'Spacer', -} ); +const ConnectedSpacer = contextConnect( Spacer, 'Spacer' ); -export default Spacer; +export default ConnectedSpacer; diff --git a/packages/components/src/spacer/hook.ts b/packages/components/src/spacer/hook.ts deleted file mode 100644 index 67e11f24e43885..00000000000000 --- a/packages/components/src/spacer/hook.ts +++ /dev/null @@ -1,172 +0,0 @@ -/** - * External dependencies - */ -// Disable reason: Temporarily disable for existing usages -// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css -// eslint-disable-next-line no-restricted-imports -import { css, cx } from '@emotion/css'; - -/** - * Internal dependencies - */ -import { useContextSystem } from '../ui/context'; -// eslint-disable-next-line no-duplicate-imports -import type { PolymorphicComponentProps } from '../ui/context'; -import { space, SpaceInput } 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. - */ - margin?: SpaceInput; - /** - * Adjusts top and bottom margins. - */ - marginY?: SpaceInput; - /** - * Adjusts left and right margins. - */ - marginX?: SpaceInput; - /** - * Adjusts top margins. - */ - marginTop?: SpaceInput; - /** - * Adjusts bottom margins. - * - * @default 2 - */ - marginBottom?: SpaceInput; - /** - * Adjusts left margins. - */ - marginLeft?: SpaceInput; - /** - * Adjusts right margins. - */ - marginRight?: SpaceInput; - /** - * Adjusts all padding. - */ - padding?: SpaceInput; - /** - * Adjusts top and bottom padding. - */ - paddingY?: SpaceInput; - /** - * Adjusts left and right padding. - */ - paddingX?: SpaceInput; - /** - * Adjusts top padding. - */ - paddingTop?: SpaceInput; - /** - * Adjusts bottom padding. - */ - paddingBottom?: SpaceInput; - /** - * Adjusts left padding. - */ - paddingLeft?: SpaceInput; - /** - * Adjusts right padding. - */ - paddingRight?: SpaceInput; - /** - * The children elements. - */ - children?: React.ReactNode; -} - -export function useSpacer( - props: PolymorphicComponentProps< SpacerProps, 'div' > -) { - const { - className, - margin, - marginBottom = 2, - marginLeft, - marginRight, - marginTop, - marginX, - marginY, - padding, - paddingBottom, - paddingLeft, - paddingRight, - paddingTop, - paddingX, - paddingY, - ...otherProps - } = useContextSystem( props, 'Spacer' ); - - const classes = cx( - isDefined( marginTop ) && - css` - margin-top: ${ space( marginTop ) }; - `, - isDefined( marginBottom ) && - css` - margin-bottom: ${ space( marginBottom ) }; - `, - isDefined( marginLeft ) && - css` - margin-left: ${ space( marginLeft ) }; - `, - isDefined( marginRight ) && - css` - margin-right: ${ space( marginRight ) }; - `, - isDefined( marginX ) && - css` - margin-left: ${ space( marginX ) }; - margin-right: ${ space( marginX ) }; - `, - isDefined( marginY ) && - css` - margin-bottom: ${ space( marginY ) }; - margin-top: ${ space( marginY ) }; - `, - isDefined( margin ) && - css` - margin: ${ space( margin ) }; - `, - isDefined( paddingTop ) && - css` - padding-top: ${ space( paddingTop ) }; - `, - isDefined( paddingBottom ) && - css` - padding-bottom: ${ space( paddingBottom ) }; - `, - isDefined( paddingLeft ) && - css` - padding-left: ${ space( paddingLeft ) }; - `, - isDefined( paddingRight ) && - css` - padding-right: ${ space( paddingRight ) }; - `, - isDefined( paddingX ) && - css` - padding-left: ${ space( paddingX ) }; - padding-right: ${ space( paddingX ) }; - `, - isDefined( paddingY ) && - css` - padding-bottom: ${ space( paddingY ) }; - padding-top: ${ space( paddingY ) }; - `, - isDefined( padding ) && - css` - padding: ${ space( padding ) }; - `, - className - ); - - return { ...otherProps, className: classes }; -} diff --git a/packages/components/src/spacer/index.ts b/packages/components/src/spacer/index.ts index 765121f409b066..7685badbbba3d5 100644 --- a/packages/components/src/spacer/index.ts +++ b/packages/components/src/spacer/index.ts @@ -1,3 +1,2 @@ export { default as Spacer } from './component'; -export { useSpacer } from './hook'; -export type { SpacerProps } from './hook'; +export type { SpacerProps } from './types'; diff --git a/packages/components/src/spacer/stories/index.js b/packages/components/src/spacer/stories/index.js new file mode 100644 index 00000000000000..8cba21fa948fa5 --- /dev/null +++ b/packages/components/src/spacer/stories/index.js @@ -0,0 +1,53 @@ +/** + * External dependencies + */ +import { number } from '@storybook/addon-knobs'; + +/** + * Internal dependencies + */ +import { Spacer } from '..'; + +export default { + component: Spacer, + title: 'Components (Experimental)/Spacer', +}; + +const PROPS = [ + 'marginTop', + 'marginBottom', + 'marginLeft', + 'marginRight', + 'marginX', + 'marginY', + 'margin', + + 'paddingTop', + 'paddingBottom', + 'paddingLeft', + 'paddingRight', + 'paddingX', + 'paddingY', + 'padding', +]; + +const BlackBox = () => ( +
+); + +export const _default = () => { + const props = PROPS.reduce( + ( acc, prop ) => ( { ...acc, [ prop ]: number( prop, undefined ) } ), + {} + ); + + return ( + <> + + This is the spacer + + + ); +}; diff --git a/packages/components/src/spacer/styles.ts b/packages/components/src/spacer/styles.ts new file mode 100644 index 00000000000000..d8083ddc49707c --- /dev/null +++ b/packages/components/src/spacer/styles.ts @@ -0,0 +1,53 @@ +/** + * External dependencies + */ +import styled from '@emotion/styled'; +import { css } from '@emotion/react'; +// eslint-disable-next-line no-restricted-imports +import type { CSSProperties } from 'react'; + +/** + * Internal dependencies + */ +import type { InnerProps } from './types'; +import { space } from '../ui/utils/space'; + +const isDefined = < T >( o: T ): o is Exclude< T, null | undefined > => + typeof o !== 'undefined' && o !== null; + +const renderProperty = ( + name: keyof InnerProps, + cssKeys: ( keyof CSSProperties )[] = [ name as keyof CSSProperties ] +) => ( props: InnerProps ) => { + const value = props[ name ]; + + if ( ! isDefined( value ) ) { + return undefined; + } + + const resolvedValue = space( value ); + return css( + cssKeys.reduce( + ( acc, key ) => ( { ...acc, [ key ]: resolvedValue } ), + {} + ) + ); +}; + +export const SpacerWrapper = styled.div< InnerProps >` + ${ renderProperty( 'marginTop' ) } + ${ renderProperty( 'marginBottom' ) } + ${ renderProperty( 'marginLeft' ) } + ${ renderProperty( 'marginRight' ) } + ${ renderProperty( 'marginX', [ 'marginLeft', 'marginRight' ] ) } + ${ renderProperty( 'marginY', [ 'marginTop', 'marginBottom' ] ) } + ${ renderProperty( 'margin' ) } + + ${ renderProperty( 'paddingTop' ) } + ${ renderProperty( 'paddingBottom' ) } + ${ renderProperty( 'paddingLeft' ) } + ${ renderProperty( 'paddingRight' ) } + ${ renderProperty( 'paddingX', [ 'paddingLeft', 'paddingRight' ] ) } + ${ renderProperty( 'paddingY', [ 'paddingTop', 'paddingBottom' ] ) } + ${ renderProperty( 'padding' ) } +`; diff --git a/packages/components/src/spacer/types.ts b/packages/components/src/spacer/types.ts new file mode 100644 index 00000000000000..e5ebd04ed558b4 --- /dev/null +++ b/packages/components/src/spacer/types.ts @@ -0,0 +1,74 @@ +/** + * External dependencies + */ +// eslint-disable-next-line no-restricted-imports +import type { ReactNode } from 'react'; + +/** + * Internal dependencies + */ +import type { SpaceInput } from '../ui/utils/space'; + +export interface InnerProps { + /** + * Adjusts all margins. + */ + margin?: SpaceInput; + /** + * Adjusts top and bottom margins. + */ + marginY?: SpaceInput; + /** + * Adjusts left and right margins. + */ + marginX?: SpaceInput; + /** + * Adjusts top margins. + */ + marginTop?: SpaceInput; + /** + * Adjusts bottom margins. + * + * @default 2 + */ + marginBottom?: SpaceInput; + /** + * Adjusts left margins. + */ + marginLeft?: SpaceInput; + /** + * Adjusts right margins. + */ + marginRight?: SpaceInput; + /** + * Adjusts all padding. + */ + padding?: SpaceInput; + /** + * Adjusts top and bottom padding. + */ + paddingY?: SpaceInput; + /** + * Adjusts left and right padding. + */ + paddingX?: SpaceInput; + /** + * Adjusts top padding. + */ + paddingTop?: SpaceInput; + /** + * Adjusts bottom padding. + */ + paddingBottom?: SpaceInput; + /** + * Adjusts left padding. + */ + paddingLeft?: SpaceInput; + /** + * Adjusts right padding. + */ + paddingRight?: SpaceInput; +} +export interface SpacerProps extends InnerProps { + children?: ReactNode; +} From 84e3c1370d92d5feae7deba60c5c317baac43eb5 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Wed, 30 Jun 2021 12:59:13 -0700 Subject: [PATCH 2/5] Use new naming convention --- packages/components/src/spacer/component.tsx | 8 ++++---- packages/components/src/spacer/index.ts | 2 +- packages/components/src/spacer/styles.ts | 2 +- packages/components/src/spacer/types.ts | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/components/src/spacer/component.tsx b/packages/components/src/spacer/component.tsx index a5f64959fb5cb7..5c93b8ba7ed272 100644 --- a/packages/components/src/spacer/component.tsx +++ b/packages/components/src/spacer/component.tsx @@ -6,13 +6,13 @@ import { contextConnect, PolymorphicComponentProps, } from '../ui/context'; -import type { SpacerProps } from './types'; -import { SpacerWrapper } from './styles'; +import type { Props } from './types'; +import { SpacerView } from './styles'; -function Spacer( props: PolymorphicComponentProps< SpacerProps, 'div' > ) { +function Spacer( props: PolymorphicComponentProps< Props, 'div' > ) { const contextProps = useContextSystem( props, 'Spacer' ); - return ; + return ; } /** diff --git a/packages/components/src/spacer/index.ts b/packages/components/src/spacer/index.ts index 7685badbbba3d5..80412684c2800f 100644 --- a/packages/components/src/spacer/index.ts +++ b/packages/components/src/spacer/index.ts @@ -1,2 +1,2 @@ export { default as Spacer } from './component'; -export type { SpacerProps } from './types'; +export type { Props as SpacerProps } from './types'; diff --git a/packages/components/src/spacer/styles.ts b/packages/components/src/spacer/styles.ts index d8083ddc49707c..6a0ef2840aad5f 100644 --- a/packages/components/src/spacer/styles.ts +++ b/packages/components/src/spacer/styles.ts @@ -34,7 +34,7 @@ const renderProperty = ( ); }; -export const SpacerWrapper = styled.div< InnerProps >` +export const SpacerView = styled.div< InnerProps >` ${ renderProperty( 'marginTop' ) } ${ renderProperty( 'marginBottom' ) } ${ renderProperty( 'marginLeft' ) } diff --git a/packages/components/src/spacer/types.ts b/packages/components/src/spacer/types.ts index e5ebd04ed558b4..a8865798bd6f3a 100644 --- a/packages/components/src/spacer/types.ts +++ b/packages/components/src/spacer/types.ts @@ -69,6 +69,6 @@ export interface InnerProps { */ paddingRight?: SpaceInput; } -export interface SpacerProps extends InnerProps { +export interface Props extends InnerProps { children?: ReactNode; } From e0a3dc47c1f3b96d752d69df7c6ad547219f55e2 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Wed, 30 Jun 2021 13:00:48 -0700 Subject: [PATCH 3/5] Add whitespace --- packages/components/src/spacer/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/spacer/types.ts b/packages/components/src/spacer/types.ts index a8865798bd6f3a..01d45525a14d1a 100644 --- a/packages/components/src/spacer/types.ts +++ b/packages/components/src/spacer/types.ts @@ -69,6 +69,7 @@ export interface InnerProps { */ paddingRight?: SpaceInput; } + export interface Props extends InnerProps { children?: ReactNode; } From e805987ca04eea508bcc03068dd7eb8ee3e197cc Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Thu, 1 Jul 2021 06:58:31 -0700 Subject: [PATCH 4/5] Fix missing default prop and update snapshots for new classnames --- packages/components/src/spacer/component.tsx | 23 +++++++++++++++++-- .../spacer/test/__snapshots__/index.js.snap | 16 +------------ 2 files changed, 22 insertions(+), 17 deletions(-) diff --git a/packages/components/src/spacer/component.tsx b/packages/components/src/spacer/component.tsx index 5c93b8ba7ed272..7b6de8ffa70a79 100644 --- a/packages/components/src/spacer/component.tsx +++ b/packages/components/src/spacer/component.tsx @@ -1,3 +1,9 @@ +/** + * External dependencies + */ +// eslint-disable-next-line no-restricted-imports +import type { Ref } from 'react'; + /** * Internal dependencies */ @@ -9,10 +15,23 @@ import { import type { Props } from './types'; import { SpacerView } from './styles'; -function Spacer( props: PolymorphicComponentProps< Props, 'div' > ) { +const DEFAULT_PROPS = { + marginBottom: 2, +}; + +function Spacer( + props: PolymorphicComponentProps< Props, 'div' >, + forwardedRef: Ref< any > +) { const contextProps = useContextSystem( props, 'Spacer' ); - return ; + return ( + + ); } /** diff --git a/packages/components/src/spacer/test/__snapshots__/index.js.snap b/packages/components/src/spacer/test/__snapshots__/index.js.snap index efbb6cbd02d1df..b11a8cc37124e9 100644 --- a/packages/components/src/spacer/test/__snapshots__/index.js.snap +++ b/packages/components/src/spacer/test/__snapshots__/index.js.snap @@ -6,7 +6,7 @@ exports[`props should render correctly 1`] = ` }
@@ -22,7 +22,6 @@ Snapshot Diff: - "margin": "calc(4px * 5)", "margin-bottom": "calc(4px * 2)", }, - Object {}, ] `; @@ -36,7 +35,6 @@ Snapshot Diff: - "margin-bottom": "calc(4px * 5)", + "margin-bottom": "calc(4px * 2)", }, - Object {}, ] `; @@ -50,7 +48,6 @@ Snapshot Diff: "margin-bottom": "calc(4px * 2)", - "margin-left": "calc(4px * 5)", }, - Object {}, ] `; @@ -64,7 +61,6 @@ Snapshot Diff: "margin-bottom": "calc(4px * 2)", - "margin-right": "calc(4px * 5)", }, - Object {}, ] `; @@ -78,7 +74,6 @@ Snapshot Diff: "margin-bottom": "calc(4px * 2)", - "margin-top": "calc(4px * 5)", }, - Object {}, ] `; @@ -93,7 +88,6 @@ Snapshot Diff: - "margin-left": "calc(4px * 5)", - "margin-right": "calc(4px * 5)", }, - Object {}, ] `; @@ -108,7 +102,6 @@ Snapshot Diff: - "margin-top": "calc(4px * 5)", + "margin-bottom": "calc(4px * 2)", }, - Object {}, ] `; @@ -122,7 +115,6 @@ Snapshot Diff: "margin-bottom": "calc(4px * 2)", - "padding": "calc(4px * 5)", }, - Object {}, ] `; @@ -136,7 +128,6 @@ Snapshot Diff: "margin-bottom": "calc(4px * 2)", - "padding-bottom": "calc(4px * 5)", }, - Object {}, ] `; @@ -150,7 +141,6 @@ Snapshot Diff: "margin-bottom": "calc(4px * 2)", - "padding-left": "calc(4px * 5)", }, - Object {}, ] `; @@ -164,7 +154,6 @@ Snapshot Diff: "margin-bottom": "calc(4px * 2)", - "padding-right": "calc(4px * 5)", }, - Object {}, ] `; @@ -178,7 +167,6 @@ Snapshot Diff: "margin-bottom": "calc(4px * 2)", - "padding-top": "calc(4px * 5)", }, - Object {}, ] `; @@ -193,7 +181,6 @@ Snapshot Diff: - "padding-left": "calc(4px * 5)", - "padding-right": "calc(4px * 5)", }, - Object {}, ] `; @@ -208,6 +195,5 @@ Snapshot Diff: - "padding-bottom": "calc(4px * 5)", - "padding-top": "calc(4px * 5)", }, - Object {}, ] `; From 2557535cb37e2bb44e0f4b868ed0d0039ef68fc9 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Fri, 2 Jul 2021 09:31:53 -0700 Subject: [PATCH 5/5] Swap order to allow for better prop composition Co-authored-by: Marco Ciampini --- packages/components/src/spacer/styles.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/components/src/spacer/styles.ts b/packages/components/src/spacer/styles.ts index 6a0ef2840aad5f..6233a8474b62e7 100644 --- a/packages/components/src/spacer/styles.ts +++ b/packages/components/src/spacer/styles.ts @@ -35,19 +35,19 @@ const renderProperty = ( }; export const SpacerView = styled.div< InnerProps >` + ${ renderProperty( 'margin' ) } + ${ renderProperty( 'marginY', [ 'marginTop', 'marginBottom' ] ) } + ${ renderProperty( 'marginX', [ 'marginLeft', 'marginRight' ] ) } ${ renderProperty( 'marginTop' ) } ${ renderProperty( 'marginBottom' ) } ${ renderProperty( 'marginLeft' ) } ${ renderProperty( 'marginRight' ) } - ${ renderProperty( 'marginX', [ 'marginLeft', 'marginRight' ] ) } - ${ renderProperty( 'marginY', [ 'marginTop', 'marginBottom' ] ) } - ${ renderProperty( 'margin' ) } + ${ renderProperty( 'padding' ) } + ${ renderProperty( 'paddingY', [ 'paddingTop', 'paddingBottom' ] ) } + ${ renderProperty( 'paddingX', [ 'paddingLeft', 'paddingRight' ] ) } ${ renderProperty( 'paddingTop' ) } ${ renderProperty( 'paddingBottom' ) } ${ renderProperty( 'paddingLeft' ) } ${ renderProperty( 'paddingRight' ) } - ${ renderProperty( 'paddingX', [ 'paddingLeft', 'paddingRight' ] ) } - ${ renderProperty( 'paddingY', [ 'paddingTop', 'paddingBottom' ] ) } - ${ renderProperty( 'padding' ) } `;