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 59% rename from packages/components/src/ui/divider/component.tsx rename to packages/components/src/divider/component.tsx index 555c3e510d7d5..4fd4572373678 100644 --- a/packages/components/src/ui/divider/component.tsx +++ b/packages/components/src/divider/component.tsx @@ -17,60 +17,69 @@ 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'; +import { space } from '../ui/utils/space'; 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 80% rename from packages/components/src/ui/divider/test/index.js rename to packages/components/src/divider/test/index.js index dfcfc9c4fcd49..239206a5f5442 100644 --- a/packages/components/src/ui/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/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/__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 ( 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';