From ae6c82f36d3c8bd328bf9c9784bd3199a9f91476 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Thu, 6 May 2021 10:53:51 -0700 Subject: [PATCH 1/3] components: Promote Divider and use readable prop names --- docs/manifest.json | 6 ++ .../components/src/{ui => }/divider/README.md | 0 .../src/{ui => }/divider/component.tsx | 56 +++++++++++-------- .../components/src/{ui => }/divider/index.ts | 0 .../src/{ui => }/divider/stories/index.js | 2 +- .../components/src/{ui => }/divider/styles.ts | 2 +- .../divider/test/__snapshots__/index.js.snap | 0 .../src/{ui => }/divider/test/index.js | 0 packages/components/src/index.js | 1 + packages/components/src/ui/index.js | 1 - 10 files changed, 43 insertions(+), 25 deletions(-) rename packages/components/src/{ui => }/divider/README.md (100%) rename packages/components/src/{ui => }/divider/component.tsx (60%) rename packages/components/src/{ui => }/divider/index.ts (100%) rename packages/components/src/{ui => }/divider/stories/index.js (77%) rename packages/components/src/{ui => }/divider/styles.ts (83%) rename packages/components/src/{ui => }/divider/test/__snapshots__/index.js.snap (100%) rename packages/components/src/{ui => }/divider/test/index.js (100%) diff --git a/docs/manifest.json b/docs/manifest.json index 8454aa294683b..38fd82a3432e5 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -743,6 +743,12 @@ "markdown_source": "../packages/components/src/disabled/README.md", "parent": "components" }, + { + "title": "Divider", + "slug": "divider", + "markdown_source": "../packages/components/src/divider/README.md", + "parent": "components" + }, { "title": "Draggable", "slug": "draggable", diff --git a/packages/components/src/ui/divider/README.md b/packages/components/src/divider/README.md similarity index 100% rename from packages/components/src/ui/divider/README.md rename to packages/components/src/divider/README.md diff --git a/packages/components/src/ui/divider/component.tsx b/packages/components/src/divider/component.tsx similarity index 60% rename from packages/components/src/ui/divider/component.tsx rename to packages/components/src/divider/component.tsx index 555c3e510d7d5..78560b9d712ee 100644 --- a/packages/components/src/ui/divider/component.tsx +++ b/packages/components/src/divider/component.tsx @@ -17,9 +17,9 @@ import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ -import { contextConnect, useContextSystem } from '../context'; +import { contextConnect, useContextSystem } from '../ui/context'; // eslint-disable-next-line no-duplicate-imports -import type { ViewOwnProps } from '../context'; +import type { ViewOwnProps } from '../ui/context'; import * as styles from './styles'; import { space } from '../utils/space'; @@ -27,50 +27,59 @@ export interface DividerProps extends SeparatorProps { /** * Adjusts all margins. */ - m?: number; + margin?: number; /** * Adjusts top margins. */ - mt?: number; + marginTop?: number; /** * Adjusts bottom margins. */ - mb?: number; + marginBottom?: number; } function Divider( props: ViewOwnProps< DividerProps, 'hr' >, forwardedRef: Ref< any > ) { - const { className, m, mb, mt, ...otherProps } = useContextSystem( - props, - 'Divider' - ); + const { + className, + margin, + marginBottom, + marginTop, + ...otherProps + } = useContextSystem( props, 'Divider' ); const classes = useMemo( () => { const sx: Record< string, string > = {}; - if ( typeof m !== 'undefined' ) { - sx.m = css` - margin-bottom: ${ space( m ) }; - margin-top: ${ space( m ) }; + if ( typeof margin !== 'undefined' ) { + sx.margin = css` + margin-bottom: ${ space( margin ) }; + margin-top: ${ space( margin ) }; `; } else { - if ( typeof mt !== 'undefined' ) { - sx.mt = css` - margin-top: ${ space( mt ) }; + if ( typeof marginTop !== 'undefined' ) { + sx.marginTop = css` + margin-top: ${ space( marginTop ) }; `; } - if ( typeof mb !== 'undefined' ) { - sx.mb = css` - margin-bottom: ${ space( mb ) }; + if ( typeof marginBottom !== 'undefined' ) { + sx.marginBottom = css` + margin-bottom: ${ space( marginBottom ) }; `; } } - return cx( styles.Divider, sx.mb, sx.mt, sx.m, className ); - }, [ className, m, mb, mt ] ); + return cx( + styles.Divider, + sx.marginBottom, + sx.marginTop, + sx.margin, + className + ); + }, [ className, margin, marginBottom, marginTop ] ); return ( { diff --git a/packages/components/src/ui/divider/styles.ts b/packages/components/src/divider/styles.ts similarity index 83% rename from packages/components/src/ui/divider/styles.ts rename to packages/components/src/divider/styles.ts index 3dca592c0afe7..28b3c47fe103d 100644 --- a/packages/components/src/ui/divider/styles.ts +++ b/packages/components/src/divider/styles.ts @@ -6,7 +6,7 @@ import { css } from 'emotion'; /** * Internal dependencies */ -import CONFIG from '../../utils/config-values'; +import CONFIG from '../utils/config-values'; export const Divider = css` border-color: ${ CONFIG.colorDivider }; diff --git a/packages/components/src/ui/divider/test/__snapshots__/index.js.snap b/packages/components/src/divider/test/__snapshots__/index.js.snap similarity index 100% rename from packages/components/src/ui/divider/test/__snapshots__/index.js.snap rename to packages/components/src/divider/test/__snapshots__/index.js.snap diff --git a/packages/components/src/ui/divider/test/index.js b/packages/components/src/divider/test/index.js similarity index 100% rename from packages/components/src/ui/divider/test/index.js rename to packages/components/src/divider/test/index.js diff --git a/packages/components/src/index.js b/packages/components/src/index.js index afbb7e37db8ae..774a8ba62480e 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -47,6 +47,7 @@ export { default as DateTimePicker, DatePicker, TimePicker } from './date-time'; export { default as __experimentalDimensionControl } from './dimension-control'; export { default as Disabled } from './disabled'; export { DisclosureContent as __unstableDisclosureContent } from './disclosure'; +export { Divider as __experimentalDivider } from './divider'; export { default as Draggable } from './draggable'; export { default as DropZone } from './drop-zone'; export { default as DropZoneProvider } from './drop-zone/provider'; diff --git a/packages/components/src/ui/index.js b/packages/components/src/ui/index.js index 7c6c4741c401a..6875d2e4a8190 100644 --- a/packages/components/src/ui/index.js +++ b/packages/components/src/ui/index.js @@ -1,7 +1,6 @@ export * from './card'; export * from './control-group'; export * from './control-label'; -export * from './divider'; export * from './elevation'; export * from './form-group'; export * from './grid'; From d308539c059a9ad5834508fdb12b182ffc6ff5bb Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Fri, 7 May 2021 06:23:50 -0700 Subject: [PATCH 2/3] Fix tests and bad import --- packages/components/src/divider/test/index.js | 6 +++--- packages/components/src/ui/__storybook-utils/page.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/src/divider/test/index.js b/packages/components/src/divider/test/index.js index dfcfc9c4fcd49..239206a5f5442 100644 --- a/packages/components/src/divider/test/index.js +++ b/packages/components/src/divider/test/index.js @@ -19,21 +19,21 @@ describe( 'props', () => { } ); test( 'should render marginTop', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchStyleDiffSnapshot( base.container.firstChild ); } ); test( 'should render marginBottom', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchStyleDiffSnapshot( base.container.firstChild ); } ); test( 'should render margin', () => { - const { container } = render( ); + const { container } = render( ); expect( container.firstChild ).toMatchStyleDiffSnapshot( base.container.firstChild ); diff --git a/packages/components/src/ui/__storybook-utils/page.js b/packages/components/src/ui/__storybook-utils/page.js index 232c9502af9f2..dab3bd63fb3a9 100644 --- a/packages/components/src/ui/__storybook-utils/page.js +++ b/packages/components/src/ui/__storybook-utils/page.js @@ -4,7 +4,7 @@ import { VStack } from '../../v-stack'; import { View } from '../view'; import { Heading } from '../../heading'; -import { Divider } from '../divider'; +import { Divider } from '../../divider'; function Page( { title = 'Component', children } ) { return ( From b00c9ca0933ab7618a661d664fac062922ea3ca7 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Fri, 7 May 2021 06:41:06 -0700 Subject: [PATCH 3/3] Use correct space util --- packages/components/src/divider/component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/divider/component.tsx b/packages/components/src/divider/component.tsx index 78560b9d712ee..4fd4572373678 100644 --- a/packages/components/src/divider/component.tsx +++ b/packages/components/src/divider/component.tsx @@ -21,7 +21,7 @@ import { contextConnect, useContextSystem } from '../ui/context'; // eslint-disable-next-line no-duplicate-imports import type { ViewOwnProps } from '../ui/context'; import * as styles from './styles'; -import { space } from '../utils/space'; +import { space } from '../ui/utils/space'; export interface DividerProps extends SeparatorProps { /**