From 7d38d63c206f6b38400ee849b5547dc06f91285f Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 17 Nov 2021 17:36:07 +0100
Subject: [PATCH 01/16] Divider: add styles for `vertical` orientation

---
 packages/components/src/divider/styles.ts | 65 +++++++++++++++++------
 1 file changed, 50 insertions(+), 15 deletions(-)

diff --git a/packages/components/src/divider/styles.ts b/packages/components/src/divider/styles.ts
index 270cc27cd80a0d..d6075f6de2caf1 100644
--- a/packages/components/src/divider/styles.ts
+++ b/packages/components/src/divider/styles.ts
@@ -8,29 +8,64 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { space } from '../ui/utils/space';
-import CONFIG from '../utils/config-values';
-import type { OwnProps } from './types';
+import { CONFIG, rtl } from '../utils';
+import type { Props } from './types';
 
-const renderMargin = ( { margin, marginTop, marginBottom }: OwnProps ) => {
-	if ( typeof margin !== 'undefined' ) {
-		return css( {
-			marginBottom: space( margin ),
-			marginTop: space( margin ),
-		} );
-	}
+const MARGIN_DIRECTIONS: Record<
+	NonNullable< Props[ 'orientation' ] >,
+	Record< 'start' | 'end', string >
+> = {
+	vertical: {
+		start: 'marginLeft',
+		end: 'marginRight',
+	},
+	horizontal: {
+		start: 'marginTop',
+		end: 'marginBottom',
+	},
+};
+
+// Renders the correct margins given the Divider's `orientation` and the writing direction.
+// When both the generic `marign` and the specific `marginTop|marginBottom` props are defined,
+// the more specific prop will take priority.
+const renderMargin = ( {
+	'aria-orientation': orientation = 'horizontal',
+	margin,
+	marginTop,
+	marginBottom,
+}: Props ) =>
+	css(
+		rtl( {
+			[ MARGIN_DIRECTIONS[ orientation ].start ]: space(
+				marginTop ?? margin
+			),
+			[ MARGIN_DIRECTIONS[ orientation ].end ]: space(
+				marginBottom ?? margin
+			),
+		} )()
+	);
 
+const renderBorderWidth = ( {
+	'aria-orientation': orientation = 'horizontal',
+}: Props ) => {
 	return css( {
-		marginTop: space( marginTop ),
-		marginBottom: space( marginBottom ),
+		borderWidth: orientation === 'vertical' ? '0 1px 0 0' : '0 0 1px 0',
 	} );
 };
 
-export const DividerView = styled.hr< OwnProps >`
+const renderSize = ( {
+	'aria-orientation': orientation = 'horizontal',
+}: Props ) =>
+	css( {
+		height: orientation === 'vertical' ? 'auto' : 0,
+		width: orientation === 'vertical' ? 0 : 'auto',
+	} );
+
+export const DividerView = styled.hr< Props >`
 	border-color: ${ CONFIG.colorDivider };
-	border-width: 0 0 1px 0;
-	height: 0;
 	margin: 0;
-	width: auto;
 
+	${ renderBorderWidth }
+	${ renderSize }
 	${ renderMargin }
 `;

From 69aea2e8626936feb0eab6183dcd828b5ba83f46 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 17 Nov 2021 18:49:18 +0100
Subject: [PATCH 02/16] Divider: depracate top/bottom margin props in favour of
 logical start/end margin props

---
 packages/components/src/divider/component.tsx | 37 ++++++++++++++++++-
 packages/components/src/divider/styles.ts     | 10 ++---
 packages/components/src/divider/types.ts      | 15 +++++++-
 3 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/divider/component.tsx b/packages/components/src/divider/component.tsx
index 085d2f5f012b71..deddccaf235b10 100644
--- a/packages/components/src/divider/component.tsx
+++ b/packages/components/src/divider/component.tsx
@@ -17,11 +17,46 @@ import {
 import { DividerView } from './styles';
 import type { Props } from './types';
 
+function useDeprecatedProps( {
+	marginBottom,
+	marginTop,
+	marginStart,
+	marginEnd,
+	...otherProps
+}: WordPressComponentProps< Props, 'hr', false > ) {
+	const propsToReturn: WordPressComponentProps< Props, 'hr', false > = {
+		...otherProps,
+	};
+
+	// Transform deprecated `marginTop` prop into `marginStart`.
+	let computedMarginStart = marginStart;
+	if ( marginTop ) {
+		computedMarginStart ??= marginTop;
+	}
+	if ( typeof computedMarginStart !== 'undefined' ) {
+		propsToReturn.marginStart = computedMarginStart;
+	}
+
+	// Transform deprecated `marginTop` prop into `marginStart`.
+	let computedMarginEnd = marginEnd;
+	if ( marginBottom ) {
+		computedMarginEnd ??= marginBottom;
+	}
+	if ( typeof computedMarginEnd !== 'undefined' ) {
+		propsToReturn.marginEnd = computedMarginEnd;
+	}
+
+	return propsToReturn;
+}
+
 function Divider(
 	props: WordPressComponentProps< Props, 'hr', false >,
 	forwardedRef: Ref< any >
 ) {
-	const contextProps = useContextSystem( props, 'Divider' );
+	const contextProps = useContextSystem(
+		useDeprecatedProps( props ),
+		'Divider'
+	);
 
 	return (
 		<Separator
diff --git a/packages/components/src/divider/styles.ts b/packages/components/src/divider/styles.ts
index d6075f6de2caf1..6452d26aab700f 100644
--- a/packages/components/src/divider/styles.ts
+++ b/packages/components/src/divider/styles.ts
@@ -26,21 +26,21 @@ const MARGIN_DIRECTIONS: Record<
 };
 
 // Renders the correct margins given the Divider's `orientation` and the writing direction.
-// When both the generic `marign` and the specific `marginTop|marginBottom` props are defined,
+// When both the generic `margin` and the specific `marginStart|marginEnd` props are defined,
 // the more specific prop will take priority.
 const renderMargin = ( {
 	'aria-orientation': orientation = 'horizontal',
 	margin,
-	marginTop,
-	marginBottom,
+	marginStart,
+	marginEnd,
 }: Props ) =>
 	css(
 		rtl( {
 			[ MARGIN_DIRECTIONS[ orientation ].start ]: space(
-				marginTop ?? margin
+				marginStart ?? margin
 			),
 			[ MARGIN_DIRECTIONS[ orientation ].end ]: space(
-				marginBottom ?? margin
+				marginEnd ?? margin
 			),
 		} )()
 	);
diff --git a/packages/components/src/divider/types.ts b/packages/components/src/divider/types.ts
index 70a17881cc0e6a..ef1e5d569f81c4 100644
--- a/packages/components/src/divider/types.ts
+++ b/packages/components/src/divider/types.ts
@@ -11,15 +11,28 @@ import type { SpaceInput } from '../ui/utils/space';
 
 export interface OwnProps {
 	/**
-	 * Adjusts all margins.
+	 * Adjusts all margins on the inline dimension.
 	 */
 	margin?: SpaceInput;
+	/**
+	 * Adjusts the inline-start margin.
+	 */
+	marginStart?: SpaceInput;
+	/**
+	 * Adjusts the inline-end margin.
+	 */
+	marginEnd?: SpaceInput;
+
 	/**
 	 * Adjusts top margins.
+	 *
+	 * @deprecated
 	 */
 	marginTop?: SpaceInput;
 	/**
 	 * Adjusts bottom margins.
+	 *
+	 * @deprecated
 	 */
 	marginBottom?: SpaceInput;
 }

From 013188fcb7d52060edf657afff93a8f0708cecb3 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 17 Nov 2021 18:50:38 +0100
Subject: [PATCH 03/16] Divider: add Horizontal and Vertical storybook examples

---
 .../components/src/divider/stories/index.js   | 46 ++++++++++++++-----
 1 file changed, 34 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/divider/stories/index.js b/packages/components/src/divider/stories/index.js
index a3a7b595db3bf9..aa5d3fc1484cf3 100644
--- a/packages/components/src/divider/stories/index.js
+++ b/packages/components/src/divider/stories/index.js
@@ -1,11 +1,13 @@
 /**
  * External dependencies
  */
+import styled from '@emotion/styled';
 import { number } from '@storybook/addon-knobs';
 
 /**
  * Internal dependencies
  */
+import { Text } from '../../text';
 import { Divider } from '..';
 
 export default {
@@ -16,23 +18,43 @@ export default {
 	},
 };
 
-const BlackDivider = ( props ) => (
-	<Divider { ...props } style={ { borderColor: 'black' } } />
-);
+// make the border color black to give higher contrast and help it appear in storybook better
+const BlackDivider = styled( Divider )`
+	border-color: #000;
+`;
 
-export const _default = () => {
+const VerticalWrapper = styled.div`
+	display: flex;
+	align-items: stretch;
+	justify-content: start;
+`;
+
+export const Horizontal = () => {
 	const props = {
-		margin: number( 'margin', 0 ),
+		margin: number( 'margin', 2 ),
+		marginStart: number( 'marginStart', undefined ),
+		marginEnd: number( 'marginEnd', undefined ),
 	};
-	// make the border color black to give higher contrast and help it appear in storybook better
-	return <BlackDivider { ...props } />;
+	return (
+		<div>
+			<Text>Some text before the divider</Text>
+			<BlackDivider { ...props } />
+			<Text>Some text after the divider</Text>
+		</div>
+	);
 };
 
-export const splitMargins = () => {
+export const Vertical = () => {
 	const props = {
-		marginTop: number( 'marginTop', 0 ),
-		marginBottom: number( 'marginBottom', 0 ),
+		margin: number( 'margin', 2 ),
+		marginStart: number( 'marginStart', undefined ),
+		marginEnd: number( 'marginEnd', undefined ),
 	};
-
-	return <BlackDivider { ...props } />;
+	return (
+		<VerticalWrapper>
+			<Text>Some text before the divider</Text>
+			<BlackDivider orientation="vertical" { ...props } />
+			<Text>Some text after the divider</Text>
+		</VerticalWrapper>
+	);
 };

From e99640b1faeb6d32956c4cce29f7a1b242011526 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 17 Nov 2021 19:00:10 +0100
Subject: [PATCH 04/16] Divider: update example code snippets

---
 packages/components/src/divider/README.md     | 14 +++++++++-----
 packages/components/src/divider/component.tsx | 15 ++++++++-------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/divider/README.md b/packages/components/src/divider/README.md
index ae9b961dad5e54..2ed7dcb8eea93e 100644
--- a/packages/components/src/divider/README.md
+++ b/packages/components/src/divider/README.md
@@ -9,15 +9,19 @@ This feature is still experimental. “Experimental” means this is an early im
 ## Usage
 
 ```jsx
-import { Divider, FormGroup, ListGroup } from '@wordpress/components/ui';
+import {
+	__experimentalDivider as Divider,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from `@wordpress/components`;
 
 function Example() {
 	return (
-		<ListGroup>
-			<FormGroup>...</FormGroup>
+		<VStack spacing={4}>
+			<Text>Some text here</Text>
 			<Divider />
-			<FormGroup>...</FormGroup>
-		</ListGroup>
+			<Text>Some more text here</Text>
+		</VStack>
 	);
 }
 ```
diff --git a/packages/components/src/divider/component.tsx b/packages/components/src/divider/component.tsx
index deddccaf235b10..5087e5b1f09d97 100644
--- a/packages/components/src/divider/component.tsx
+++ b/packages/components/src/divider/component.tsx
@@ -73,17 +73,18 @@ function Divider(
  * @example
  * ```js
  * import {
- *     __experimentalDivider as Divider,
- *     __experimentalText as Text }
- * from `@wordpress/components`;
+ * 		__experimentalDivider as Divider,
+ * 		__experimentalText as Text,
+ * 		__experimentalVStack as VStack,
+ * } from `@wordpress/components`;
  *
  * function Example() {
  * 	return (
- * 		<ListGroup>
- * 			<FormGroup>...</FormGroup>
+ * 		<VStack spacing={4}>
+ * 			<Text>Some text here</Text>
  * 			<Divider />
- * 			<FormGroup>...</FormGroup>
- * 		</ListGroup>
+ * 			<Text>Some more text here</Text>
+ * 		</VStack>
  * 	);
  * }
  * ```

From aa56b5dce4cc7510e474d3ffa3d564bf3d2f3cab Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 17 Nov 2021 19:01:48 +0100
Subject: [PATCH 05/16] Divider: add Props section to README

---
 packages/components/src/divider/README.md | 24 +++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/packages/components/src/divider/README.md b/packages/components/src/divider/README.md
index 2ed7dcb8eea93e..977f969d40ff51 100644
--- a/packages/components/src/divider/README.md
+++ b/packages/components/src/divider/README.md
@@ -25,3 +25,27 @@ function Example() {
 	);
 }
 ```
+
+## Props
+
+### `margin`: `number`
+
+Adjusts all margins on the inline dimension.
+
+- Required: No
+
+### `marginStart`: `number`
+
+Adjusts the inline-start margin.
+
+- Required: No
+
+### `marginEnd`: `number`
+
+Adjusts the inline-end margin.
+
+- Required: No
+
+### Inherited props
+
+`Divider` also inherits all of the [`Separator` props](https://reakit.io/docs/separator/).

From c626dbdab5d7066f9c8b3350b2b31593d38b6feb Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 17 Nov 2021 19:23:07 +0100
Subject: [PATCH 06/16] CHANGELOG

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 2a6102335c2f68..f1daffd1ca410b 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -18,6 +18,7 @@
 -   Fixed race conditions causing conditionally displayed `ToolsPanelItem` components to be erroneously deregistered ([#36588](https://github.com/WordPress/gutenberg/pull/36588)).
 -   Added `__experimentalHideHeader` prop to `Modal` component ([#36831](https://github.com/WordPress/gutenberg/pull/36831)).
 -   Added experimental `ConfirmDialog` component ([#34153](https://github.com/WordPress/gutenberg/pull/34153)).
+-   Divider: improve support for vertical orientation and RTL styles, use start/end logical props instead of top/bottom ([#36579](https://github.com/WordPress/gutenberg/pull/36579)).
 
 ### Bug Fix
 

From 78c558c38009a24711aa8e0f6e8cee4a0a7d71ed Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 17 Nov 2021 19:33:36 +0100
Subject: [PATCH 07/16] Update snapshots

---
 packages/components/src/card/test/__snapshots__/index.js.snap | 4 ++--
 .../components/src/divider/test/__snapshots__/index.js.snap   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/card/test/__snapshots__/index.js.snap b/packages/components/src/card/test/__snapshots__/index.js.snap
index adf11cff8056a3..842876c5baf9a7 100644
--- a/packages/components/src/card/test/__snapshots__/index.js.snap
+++ b/packages/components/src/card/test/__snapshots__/index.js.snap
@@ -270,9 +270,9 @@ Object {
 
 .emotion-10 {
   border-color: rgba(0, 0, 0, 0.1);
+  margin: 0;
   border-width: 0 0 1px 0;
   height: 0;
-  margin: 0;
   width: auto;
   box-sizing: border-box;
   display: block;
@@ -526,9 +526,9 @@ Object {
 
 .emotion-10 {
   border-color: rgba(0, 0, 0, 0.1);
+  margin: 0;
   border-width: 0 0 1px 0;
   height: 0;
-  margin: 0;
   width: auto;
   box-sizing: border-box;
   display: block;
diff --git a/packages/components/src/divider/test/__snapshots__/index.js.snap b/packages/components/src/divider/test/__snapshots__/index.js.snap
index d19ce16daf39c5..b24b722cadb54a 100644
--- a/packages/components/src/divider/test/__snapshots__/index.js.snap
+++ b/packages/components/src/divider/test/__snapshots__/index.js.snap
@@ -3,9 +3,9 @@
 exports[`props should render correctly 1`] = `
 .emotion-0 {
   border-color: rgba(0, 0, 0, 0.1);
+  margin: 0;
   border-width: 0 0 1px 0;
   height: 0;
-  margin: 0;
   width: auto;
 }
 

From e299b203b52b8fbe614012697770e01fdd99ea6e Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 18 Nov 2021 15:38:09 +0100
Subject: [PATCH 08/16] Remove black border-color override in Storybook

---
 packages/components/src/divider/stories/index.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/divider/stories/index.js b/packages/components/src/divider/stories/index.js
index aa5d3fc1484cf3..47de27eec32920 100644
--- a/packages/components/src/divider/stories/index.js
+++ b/packages/components/src/divider/stories/index.js
@@ -18,11 +18,6 @@ export default {
 	},
 };
 
-// make the border color black to give higher contrast and help it appear in storybook better
-const BlackDivider = styled( Divider )`
-	border-color: #000;
-`;
-
 const VerticalWrapper = styled.div`
 	display: flex;
 	align-items: stretch;
@@ -38,7 +33,7 @@ export const Horizontal = () => {
 	return (
 		<div>
 			<Text>Some text before the divider</Text>
-			<BlackDivider { ...props } />
+			<Divider { ...props } />
 			<Text>Some text after the divider</Text>
 		</div>
 	);
@@ -53,7 +48,7 @@ export const Vertical = () => {
 	return (
 		<VerticalWrapper>
 			<Text>Some text before the divider</Text>
-			<BlackDivider orientation="vertical" { ...props } />
+			<Divider orientation="vertical" { ...props } />
 			<Text>Some text after the divider</Text>
 		</VerticalWrapper>
 	);

From 39a2b0a5c7db0ca95499eece7dccddcbcb9a98f0 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 18 Nov 2021 15:38:41 +0100
Subject: [PATCH 09/16] Use `currentColor` for the border color

---
 packages/components/src/divider/styles.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/divider/styles.ts b/packages/components/src/divider/styles.ts
index 6452d26aab700f..71202af77c3a41 100644
--- a/packages/components/src/divider/styles.ts
+++ b/packages/components/src/divider/styles.ts
@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { space } from '../ui/utils/space';
-import { CONFIG, rtl } from '../utils';
+import { rtl } from '../utils';
 import type { Props } from './types';
 
 const MARGIN_DIRECTIONS: Record<
@@ -45,11 +45,13 @@ const renderMargin = ( {
 		} )()
 	);
 
-const renderBorderWidth = ( {
+const renderBorder = ( {
 	'aria-orientation': orientation = 'horizontal',
 }: Props ) => {
 	return css( {
-		borderWidth: orientation === 'vertical' ? '0 1px 0 0' : '0 0 1px 0',
+		[ orientation === 'vertical'
+			? 'borderRight'
+			: 'borderBottom' ]: '1px solid currentColor',
 	} );
 };
 
@@ -62,10 +64,9 @@ const renderSize = ( {
 	} );
 
 export const DividerView = styled.hr< Props >`
-	border-color: ${ CONFIG.colorDivider };
 	margin: 0;
 
-	${ renderBorderWidth }
+	${ renderBorder }
 	${ renderSize }
 	${ renderMargin }
 `;

From 1e42420bc406a13a6e50067aab313aaee70ecfe6 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 18 Nov 2021 15:40:57 +0100
Subject: [PATCH 10/16] Update snapshots

---
 .../src/card/test/__snapshots__/index.js.snap  |  6 ++----
 .../divider/test/__snapshots__/index.js.snap   | 18 +++++++-----------
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/packages/components/src/card/test/__snapshots__/index.js.snap b/packages/components/src/card/test/__snapshots__/index.js.snap
index 842876c5baf9a7..c0d1d4af27c73a 100644
--- a/packages/components/src/card/test/__snapshots__/index.js.snap
+++ b/packages/components/src/card/test/__snapshots__/index.js.snap
@@ -269,9 +269,8 @@ Object {
 }
 
 .emotion-10 {
-  border-color: rgba(0, 0, 0, 0.1);
   margin: 0;
-  border-width: 0 0 1px 0;
+  border-bottom: 1px solid currentColor;
   height: 0;
   width: auto;
   box-sizing: border-box;
@@ -525,9 +524,8 @@ Object {
 }
 
 .emotion-10 {
-  border-color: rgba(0, 0, 0, 0.1);
   margin: 0;
-  border-width: 0 0 1px 0;
+  border-bottom: 1px solid currentColor;
   height: 0;
   width: auto;
   box-sizing: border-box;
diff --git a/packages/components/src/divider/test/__snapshots__/index.js.snap b/packages/components/src/divider/test/__snapshots__/index.js.snap
index b24b722cadb54a..81d4b5c73cbfcc 100644
--- a/packages/components/src/divider/test/__snapshots__/index.js.snap
+++ b/packages/components/src/divider/test/__snapshots__/index.js.snap
@@ -2,9 +2,8 @@
 
 exports[`props should render correctly 1`] = `
 .emotion-0 {
-  border-color: rgba(0, 0, 0, 0.1);
   margin: 0;
-  border-width: 0 0 1px 0;
+  border-bottom: 1px solid currentColor;
   height: 0;
   width: auto;
 }
@@ -23,10 +22,9 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
-@@ -2,10 +2,8 @@
+  Array [
     Object {
-      "border-color": "rgba(0, 0, 0, 0.1)",
-      "border-width": "0 0 1px 0",
+      "border-bottom": "1px solid currentColor",
       "height": "0",
       "margin": "0",
 -     "margin-bottom": "calc(4px * 7)",
@@ -41,10 +39,9 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
-@@ -2,9 +2,8 @@
+  Array [
     Object {
-      "border-color": "rgba(0, 0, 0, 0.1)",
-      "border-width": "0 0 1px 0",
+      "border-bottom": "1px solid currentColor",
       "height": "0",
       "margin": "0",
 -     "margin-bottom": "calc(4px * 5)",
@@ -58,10 +55,9 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
-@@ -2,9 +2,8 @@
+  Array [
     Object {
-      "border-color": "rgba(0, 0, 0, 0.1)",
-      "border-width": "0 0 1px 0",
+      "border-bottom": "1px solid currentColor",
       "height": "0",
       "margin": "0",
 -     "margin-top": "calc(4px * 5)",

From 0851665c43145c01b7edbc2b1642b3f45b69939a Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 18 Nov 2021 15:41:41 +0100
Subject: [PATCH 11/16] Update changelog

---
 packages/components/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index f1daffd1ca410b..9b02dfe344aa9c 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -18,7 +18,7 @@
 -   Fixed race conditions causing conditionally displayed `ToolsPanelItem` components to be erroneously deregistered ([#36588](https://github.com/WordPress/gutenberg/pull/36588)).
 -   Added `__experimentalHideHeader` prop to `Modal` component ([#36831](https://github.com/WordPress/gutenberg/pull/36831)).
 -   Added experimental `ConfirmDialog` component ([#34153](https://github.com/WordPress/gutenberg/pull/34153)).
--   Divider: improve support for vertical orientation and RTL styles, use start/end logical props instead of top/bottom ([#36579](https://github.com/WordPress/gutenberg/pull/36579)).
+-   Divider: improve support for vertical orientation and RTL styles, use start/end logical props instead of top/bottom, change border-color to `currentColor` ([#36579](https://github.com/WordPress/gutenberg/pull/36579)).
 
 ### Bug Fix
 

From 748d2cc93965d895d491de255baa9b39c37330d4 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Mon, 22 Nov 2021 10:00:49 +0100
Subject: [PATCH 12/16] Fix comments

---
 packages/components/src/divider/component.tsx | 2 +-
 packages/components/src/divider/styles.ts     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/divider/component.tsx b/packages/components/src/divider/component.tsx
index 5087e5b1f09d97..16418047b18083 100644
--- a/packages/components/src/divider/component.tsx
+++ b/packages/components/src/divider/component.tsx
@@ -37,7 +37,7 @@ function useDeprecatedProps( {
 		propsToReturn.marginStart = computedMarginStart;
 	}
 
-	// Transform deprecated `marginTop` prop into `marginStart`.
+	// Transform deprecated `marginBottom` prop into `marginEnd`.
 	let computedMarginEnd = marginEnd;
 	if ( marginBottom ) {
 		computedMarginEnd ??= marginBottom;
diff --git a/packages/components/src/divider/styles.ts b/packages/components/src/divider/styles.ts
index 71202af77c3a41..b1e4727ddb70dd 100644
--- a/packages/components/src/divider/styles.ts
+++ b/packages/components/src/divider/styles.ts
@@ -27,7 +27,7 @@ const MARGIN_DIRECTIONS: Record<
 
 // Renders the correct margins given the Divider's `orientation` and the writing direction.
 // When both the generic `margin` and the specific `marginStart|marginEnd` props are defined,
-// the more specific prop will take priority.
+// the latter will take priority.
 const renderMargin = ( {
 	'aria-orientation': orientation = 'horizontal',
 	margin,

From 43780d3d3e2a5c71cfc448a4185e7ba77d13cd52 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 23 Nov 2021 16:44:21 +0100
Subject: [PATCH 13/16] Delete deprecated marginTop|Bottom props

---
 packages/components/src/divider/component.tsx | 37 +------------------
 packages/components/src/divider/test/index.js |  8 ++--
 packages/components/src/divider/types.ts      | 13 -------
 3 files changed, 5 insertions(+), 53 deletions(-)

diff --git a/packages/components/src/divider/component.tsx b/packages/components/src/divider/component.tsx
index 16418047b18083..15a61adab5c2ac 100644
--- a/packages/components/src/divider/component.tsx
+++ b/packages/components/src/divider/component.tsx
@@ -17,46 +17,11 @@ import {
 import { DividerView } from './styles';
 import type { Props } from './types';
 
-function useDeprecatedProps( {
-	marginBottom,
-	marginTop,
-	marginStart,
-	marginEnd,
-	...otherProps
-}: WordPressComponentProps< Props, 'hr', false > ) {
-	const propsToReturn: WordPressComponentProps< Props, 'hr', false > = {
-		...otherProps,
-	};
-
-	// Transform deprecated `marginTop` prop into `marginStart`.
-	let computedMarginStart = marginStart;
-	if ( marginTop ) {
-		computedMarginStart ??= marginTop;
-	}
-	if ( typeof computedMarginStart !== 'undefined' ) {
-		propsToReturn.marginStart = computedMarginStart;
-	}
-
-	// Transform deprecated `marginBottom` prop into `marginEnd`.
-	let computedMarginEnd = marginEnd;
-	if ( marginBottom ) {
-		computedMarginEnd ??= marginBottom;
-	}
-	if ( typeof computedMarginEnd !== 'undefined' ) {
-		propsToReturn.marginEnd = computedMarginEnd;
-	}
-
-	return propsToReturn;
-}
-
 function Divider(
 	props: WordPressComponentProps< Props, 'hr', false >,
 	forwardedRef: Ref< any >
 ) {
-	const contextProps = useContextSystem(
-		useDeprecatedProps( props ),
-		'Divider'
-	);
+	const contextProps = useContextSystem( props, 'Divider' );
 
 	return (
 		<Separator
diff --git a/packages/components/src/divider/test/index.js b/packages/components/src/divider/test/index.js
index 239206a5f54422..424fa33ce368b3 100644
--- a/packages/components/src/divider/test/index.js
+++ b/packages/components/src/divider/test/index.js
@@ -18,15 +18,15 @@ describe( 'props', () => {
 		expect( base.container.firstChild ).toMatchSnapshot();
 	} );
 
-	test( 'should render marginTop', () => {
-		const { container } = render( <Divider marginTop={ 5 } /> );
+	test( 'should render marginStart', () => {
+		const { container } = render( <Divider marginStart={ 5 } /> );
 		expect( container.firstChild ).toMatchStyleDiffSnapshot(
 			base.container.firstChild
 		);
 	} );
 
-	test( 'should render marginBottom', () => {
-		const { container } = render( <Divider marginBottom={ 5 } /> );
+	test( 'should render marginEnd', () => {
+		const { container } = render( <Divider marginEnd={ 5 } /> );
 		expect( container.firstChild ).toMatchStyleDiffSnapshot(
 			base.container.firstChild
 		);
diff --git a/packages/components/src/divider/types.ts b/packages/components/src/divider/types.ts
index ef1e5d569f81c4..e531aa0561afdb 100644
--- a/packages/components/src/divider/types.ts
+++ b/packages/components/src/divider/types.ts
@@ -22,19 +22,6 @@ export interface OwnProps {
 	 * Adjusts the inline-end margin.
 	 */
 	marginEnd?: SpaceInput;
-
-	/**
-	 * Adjusts top margins.
-	 *
-	 * @deprecated
-	 */
-	marginTop?: SpaceInput;
-	/**
-	 * Adjusts bottom margins.
-	 *
-	 * @deprecated
-	 */
-	marginBottom?: SpaceInput;
 }
 
 export interface Props extends Omit< SeparatorProps, 'children' >, OwnProps {}

From d2e80b2b3ac175a3b22f71653851abe058074027 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 23 Nov 2021 18:09:23 +0100
Subject: [PATCH 14/16] Divider: rewrite storybook examples using controls

---
 .../components/src/divider/stories/index.js   | 69 +++++++++++--------
 1 file changed, 39 insertions(+), 30 deletions(-)

diff --git a/packages/components/src/divider/stories/index.js b/packages/components/src/divider/stories/index.js
index 47de27eec32920..a721007068aaa6 100644
--- a/packages/components/src/divider/stories/index.js
+++ b/packages/components/src/divider/stories/index.js
@@ -1,55 +1,64 @@
 /**
  * External dependencies
  */
-import styled from '@emotion/styled';
-import { number } from '@storybook/addon-knobs';
+import { css } from '@emotion/react';
 
 /**
  * Internal dependencies
  */
+import { useCx } from '../../utils';
 import { Text } from '../../text';
 import { Divider } from '..';
 
 export default {
 	component: Divider,
 	title: 'Components (Experimental)/Divider',
-	parameters: {
-		knobs: { disabled: false },
+	argTypes: {
+		margin: {
+			control: { type: 'number' },
+		},
+		marginStart: {
+			control: { type: 'number' },
+		},
+		marginEnd: {
+			control: { type: 'number' },
+		},
 	},
 };
 
-const VerticalWrapper = styled.div`
-	display: flex;
-	align-items: stretch;
-	justify-content: start;
-`;
+const HorizontalTemplate = ( args ) => (
+	<div>
+		<Text>Some text before the divider</Text>
+		<Divider { ...args } />
+		<Text>Some text after the divider</Text>
+	</div>
+);
+
+const VerticalTemplate = ( args ) => {
+	const cx = useCx();
+	const wrapperClassName = cx( css`
+		display: flex;
+		align-items: stretch;
+		justify-content: start;
+	` );
 
-export const Horizontal = () => {
-	const props = {
-		margin: number( 'margin', 2 ),
-		marginStart: number( 'marginStart', undefined ),
-		marginEnd: number( 'marginEnd', undefined ),
-	};
 	return (
-		<div>
+		<div className={ wrapperClassName }>
 			<Text>Some text before the divider</Text>
-			<Divider { ...props } />
+			<Divider orientation="vertical" { ...args } />
 			<Text>Some text after the divider</Text>
 		</div>
 	);
 };
 
-export const Vertical = () => {
-	const props = {
-		margin: number( 'margin', 2 ),
-		marginStart: number( 'marginStart', undefined ),
-		marginEnd: number( 'marginEnd', undefined ),
-	};
-	return (
-		<VerticalWrapper>
-			<Text>Some text before the divider</Text>
-			<Divider orientation="vertical" { ...props } />
-			<Text>Some text after the divider</Text>
-		</VerticalWrapper>
-	);
+export const Horizontal = HorizontalTemplate.bind( {} );
+Horizontal.args = {
+	margin: 2,
+	marginStart: undefined,
+	marginEnd: undefined,
+};
+
+export const Vertical = VerticalTemplate.bind( {} );
+Vertical.args = {
+	...Horizontal.args,
 };

From 8d77fc66c021c26d3fbfc05e6b2bf7073e7535aa Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 23 Nov 2021 18:09:43 +0100
Subject: [PATCH 15/16] Divider: add back `border: 0` reset

---
 packages/components/src/divider/styles.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/divider/styles.ts b/packages/components/src/divider/styles.ts
index b1e4727ddb70dd..50b49342118027 100644
--- a/packages/components/src/divider/styles.ts
+++ b/packages/components/src/divider/styles.ts
@@ -64,6 +64,7 @@ const renderSize = ( {
 	} );
 
 export const DividerView = styled.hr< Props >`
+	border: 0;
 	margin: 0;
 
 	${ renderBorder }

From b16069069aebaed414f1aa828b9a9cb5a8f17651 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 23 Nov 2021 18:35:56 +0100
Subject: [PATCH 16/16] Update snapshots

---
 .../src/card/test/__snapshots__/index.js.snap      |  2 ++
 .../src/divider/test/__snapshots__/index.js.snap   | 14 +++++++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/card/test/__snapshots__/index.js.snap b/packages/components/src/card/test/__snapshots__/index.js.snap
index c0d1d4af27c73a..ca20d69a5c18dc 100644
--- a/packages/components/src/card/test/__snapshots__/index.js.snap
+++ b/packages/components/src/card/test/__snapshots__/index.js.snap
@@ -269,6 +269,7 @@ Object {
 }
 
 .emotion-10 {
+  border: 0;
   margin: 0;
   border-bottom: 1px solid currentColor;
   height: 0;
@@ -524,6 +525,7 @@ Object {
 }
 
 .emotion-10 {
+  border: 0;
   margin: 0;
   border-bottom: 1px solid currentColor;
   height: 0;
diff --git a/packages/components/src/divider/test/__snapshots__/index.js.snap b/packages/components/src/divider/test/__snapshots__/index.js.snap
index 81d4b5c73cbfcc..5a330d602a5608 100644
--- a/packages/components/src/divider/test/__snapshots__/index.js.snap
+++ b/packages/components/src/divider/test/__snapshots__/index.js.snap
@@ -2,6 +2,7 @@
 
 exports[`props should render correctly 1`] = `
 .emotion-0 {
+  border: 0;
   margin: 0;
   border-bottom: 1px solid currentColor;
   height: 0;
@@ -22,8 +23,9 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
-  Array [
+@@ -2,10 +2,8 @@
     Object {
+      "border": "0",
       "border-bottom": "1px solid currentColor",
       "height": "0",
       "margin": "0",
@@ -34,13 +36,14 @@ Snapshot Diff:
   ]
 `;
 
-exports[`props should render marginBottom 1`] = `
+exports[`props should render marginEnd 1`] = `
 Snapshot Diff:
 - Received styles
 + Base styles
 
-  Array [
+@@ -2,9 +2,8 @@
     Object {
+      "border": "0",
       "border-bottom": "1px solid currentColor",
       "height": "0",
       "margin": "0",
@@ -50,13 +53,14 @@ Snapshot Diff:
   ]
 `;
 
-exports[`props should render marginTop 1`] = `
+exports[`props should render marginStart 1`] = `
 Snapshot Diff:
 - Received styles
 + Base styles
 
-  Array [
+@@ -2,9 +2,8 @@
     Object {
+      "border": "0",
       "border-bottom": "1px solid currentColor",
       "height": "0",
       "margin": "0",