Divider: Complete TypeScript migration of component (#41991)

* Divider: Complete TypeScript migration of component

* Update tests

* Update CHANGELOG.md

* Remove unnecessary index

* Sort alphabetically

* Move changelog entry

* Update storybook to show value of SpaceInput

* Revert "Update storybook to show value of SpaceInput"

This reverts commit b227e8e.

* Update CHANGELOG.md

packages/components/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   `Divider`: Complete TypeScript migration ([#41991](https://github.com/WordPress/gutenberg/pull/41991)).
+
 ## 19.15.0 (2022-07-13)
 
 ### Bug Fix

packages/components/src/divider/README.md

@@ -32,19 +32,26 @@ function Example() {
 
 Adjusts all margins on the inline dimension.
 
-- Required: No
+-   Required: No
+
+### `marginEnd`: `number`
+
+Adjusts the inline-end margin.
+
+-   Required: No
 
 ### `marginStart`: `number`
 
 Adjusts the inline-start margin.
 
-- Required: No
+-   Required: No
 
-### `marginEnd`: `number`
+### `orientation`: `horizontal | vertical`
 
-Adjusts the inline-end margin.
+Divider's orientation. When using inside a flex container, you may need to make sure the divider is `stretch` aligned in order for it to be visible.
 
-- Required: No
+-   Required: No
+-   Default: `horizontal`
 
 ### Inherited props
 

packages/components/src/divider/component.tsx

@@ -14,10 +14,10 @@ import {
 	WordPressComponentProps,
 } from '../ui/context';
 import { DividerView } from './styles';
-import type { Props } from './types';
+import type { DividerProps } from './types';
 
 function UnconnectedDivider(
-	props: WordPressComponentProps< Props, 'hr', false >,
+	props: WordPressComponentProps< DividerProps, 'hr', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const contextProps = useContextSystem( props, 'Divider' );
@@ -34,7 +34,6 @@ function UnconnectedDivider(
 /**
  * `Divider` is a layout component that separates groups of related content.
  *
- * @example
  * ```js
  * import {
  * 		__experimentalDivider as Divider,

packages/components/src/divider/index.ts

@@ -1,2 +1,2 @@
 export { default as Divider } from './component';
-export type { Props as DividerProps } from './types';
+export type { DividerProps } from './types';

packages/components/src/divider/stories/index.tsx

@@ -15,13 +15,13 @@ const meta: ComponentMeta< typeof Divider > = {
 	title: 'Components (Experimental)/Divider',
 	argTypes: {
 		margin: {
-			control: { type: 'number' },
+			control: { type: 'text' },
 		},
 		marginStart: {
-			control: { type: 'number' },
+			control: { type: 'text' },
 		},
 		marginEnd: {
-			control: { type: 'number' },
+			control: { type: 'text' },
 		},
 	},
 	parameters: {
@@ -41,7 +41,7 @@ const Template: ComponentStory< typeof Divider > = ( args ) => (
 
 export const Horizontal: ComponentStory< typeof Divider > = Template.bind( {} );
 Horizontal.args = {
-	margin: 2,
+	margin: '2',
 };
 
 export const Vertical: ComponentStory< typeof Divider > = Template.bind( {} );

packages/components/src/divider/styles.ts

@@ -9,10 +9,10 @@ import { css } from '@emotion/react';
  */
 import { space } from '../ui/utils/space';
 import { rtl } from '../utils';
-import type { Props } from './types';
+import type { DividerProps } from './types';
 
 const MARGIN_DIRECTIONS: Record<
-	NonNullable< Props[ 'orientation' ] >,
+	NonNullable< DividerProps[ 'orientation' ] >,
 	Record< 'start' | 'end', string >
 > = {
 	vertical: {
@@ -33,7 +33,7 @@ const renderMargin = ( {
 	margin,
 	marginStart,
 	marginEnd,
-}: Props ) =>
+}: DividerProps ) =>
 	css(
 		rtl( {
 			[ MARGIN_DIRECTIONS[ orientation ].start ]: space(
@@ -47,15 +47,15 @@ const renderMargin = ( {
 
 const renderDisplay = ( {
 	'aria-orientation': orientation = 'horizontal',
-}: Props ) => {
+}: DividerProps ) => {
 	return orientation === 'vertical'
 		? css( { display: 'inline' } )
 		: undefined;
 };
 
 const renderBorder = ( {
 	'aria-orientation': orientation = 'horizontal',
-}: Props ) => {
+}: DividerProps ) => {
 	return css( {
 		[ orientation === 'vertical' ? 'borderRight' : 'borderBottom' ]:
 			'1px solid currentColor',
@@ -64,13 +64,13 @@ const renderBorder = ( {
 
 const renderSize = ( {
 	'aria-orientation': orientation = 'horizontal',
-}: Props ) =>
+}: DividerProps ) =>
 	css( {
 		height: orientation === 'vertical' ? 'auto' : 0,
 		width: orientation === 'vertical' ? 0 : 'auto',
 	} );
 
-export const DividerView = styled.hr< Props >`
+export const DividerView = styled.hr< DividerProps >`
 	border: 0;
 	margin: 0;
 

packages/components/src/divider/test/__snapshots__/index.js.snap → packages/components/src/divider/test/__snapshots__/index.tsx.snap

@@ -23,14 +23,14 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
-@@ -2,10 +2,8 @@
+@@ -2,8 +2,10 @@
     Object {
       "border": "0",
       "border-bottom": "1px solid currentColor",
       "height": "0",
       "margin": "0",
--     "margin-bottom": "calc(4px * 7)",
--     "margin-top": "calc(4px * 7)",
++     "margin-bottom": "calc(4px * 7)",
++     "margin-top": "calc(4px * 7)",
       "width": "auto",
     },
   ]
@@ -41,13 +41,13 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
-@@ -2,9 +2,8 @@
+@@ -2,8 +2,9 @@
     Object {
       "border": "0",
       "border-bottom": "1px solid currentColor",
       "height": "0",
       "margin": "0",
--     "margin-bottom": "calc(4px * 5)",
++     "margin-bottom": "calc(4px * 5)",
       "width": "auto",
     },
   ]
@@ -58,13 +58,13 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
-@@ -2,9 +2,8 @@
+@@ -2,8 +2,9 @@
     Object {
       "border": "0",
       "border-bottom": "1px solid currentColor",
       "height": "0",
       "margin": "0",
--     "margin-top": "calc(4px * 5)",
++     "margin-top": "calc(4px * 5)",
       "width": "auto",
     },
   ]

packages/components/src/divider/test/index.tsx

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { Divider } from '..';
+
+describe( 'props', () => {
+	beforeEach( () => {
+		render( <Divider /> );
+	} );
+
+	test( 'should render correctly', () => {
+		expect( screen.getByRole( 'separator' ) ).toMatchSnapshot();
+	} );
+
+	test( 'should render marginStart', () => {
+		render( <Divider marginStart={ 5 } /> );
+
+		const dividers = screen.getAllByRole( 'separator' );
+		expect( dividers[ 0 ] ).toMatchStyleDiffSnapshot( dividers[ 1 ] );
+	} );
+
+	test( 'should render marginEnd', () => {
+		render( <Divider marginEnd={ 5 } /> );
+
+		const dividers = screen.getAllByRole( 'separator' );
+		expect( dividers[ 0 ] ).toMatchStyleDiffSnapshot( dividers[ 1 ] );
+	} );
+
+	test( 'should render margin', () => {
+		render( <Divider margin={ 7 } /> );
+
+		const dividers = screen.getAllByRole( 'separator' );
+		expect( dividers[ 0 ] ).toMatchStyleDiffSnapshot( dividers[ 1 ] );
+	} );
+} );

packages/components/src/divider/types.ts

@@ -9,31 +9,28 @@ import type { SeparatorProps } from 'reakit';
  */
 import type { SpaceInput } from '../ui/utils/space';
 
-export interface OwnProps {
+export type DividerProps = Omit<
+	SeparatorProps,
+	'children' | 'unstable_system' | 'orientation'
+> & {
 	/**
 	 * Adjusts all margins on the inline dimension.
 	 */
 	margin?: SpaceInput;
-	/**
-	 * Adjusts the inline-start margin.
-	 */
-	marginStart?: SpaceInput;
 	/**
 	 * Adjusts the inline-end margin.
 	 */
 	marginEnd?: SpaceInput;
 	/**
-	 * Divider's orientation. When using inside a flex container, you may need to make sure the divider is `stretch` aligned
-	 * in order for it to be visible.
+	 * Adjusts the inline-start margin.
+	 */
+	marginStart?: SpaceInput;
+	/**
+	 * Divider's orientation. When using inside a flex container, you may need
+	 * to make sure the divider is `stretch` aligned in order for it to be
+	 * visible.
 	 *
 	 * @default 'horizontal'
 	 */
 	orientation?: SeparatorProps[ 'orientation' ];
-}
-
-export interface Props
-	extends Omit<
-			SeparatorProps,
-			'children' | 'unstable_system' | 'orientation'
-		>,
-		OwnProps {}
+};