components: Promote Divider and use readable prop names (#31556)

* components: Promote Divider and use readable prop names

* Fix tests and bad import

* Use correct space util

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",

packages/components/src/ui/divider/component.tsx → 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 (
 		<Separator
@@ -87,7 +96,10 @@ function Divider(
  *
  * @example
  * ```js
- * import { Divider, FormGroup, ListGroup } from `@wordpress/components/ui`;
+ * import {
+ *     __experimentalDivider as Divider,
+ *     __experimentalText as Text }
+ * from `@wordpress/components`;
  *
  * function Example() {
  * 	return (

packages/components/src/ui/divider/stories/index.js → packages/components/src/divider/stories/index.js

@@ -5,7 +5,7 @@ import { Divider } from '..';
 
 export default {
 	component: Divider,
-	title: 'G2 Components (Experimental)/Divider',
+	title: 'Components (Experimental)/Divider',
 };
 
 export const _default = () => {

packages/components/src/ui/divider/styles.ts → 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 };

packages/components/src/ui/divider/test/index.js → packages/components/src/divider/test/index.js

@@ -19,21 +19,21 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render marginTop', () => {
-		const { container } = render( <Divider mt={ 5 } /> );
+		const { container } = render( <Divider marginTop={ 5 } /> );
 		expect( container.firstChild ).toMatchStyleDiffSnapshot(
 			base.container.firstChild
 		);
 	} );
 
 	test( 'should render marginBottom', () => {
-		const { container } = render( <Divider mb={ 5 } /> );
+		const { container } = render( <Divider marginBottom={ 5 } /> );
 		expect( container.firstChild ).toMatchStyleDiffSnapshot(
 			base.container.firstChild
 		);
 	} );
 
 	test( 'should render margin', () => {
-		const { container } = render( <Divider m={ 7 } /> );
+		const { container } = render( <Divider margin={ 7 } /> );
 		expect( container.firstChild ).toMatchStyleDiffSnapshot(
 			base.container.firstChild
 		);

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';

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 (

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 './shortcut';