Spacer: change props override order, split types (#33555)

WordPress · Jul 19, 2021 · 0cb7867 · 0cb7867
1 parent f58a75e
commit 0cb7867
Show file tree

Hide file tree

Showing 7 changed files with 260 additions and 135 deletions.
diff --git a/packages/components/src/spacer/README.md b/packages/components/src/spacer/README.md
@@ -33,86 +33,87 @@ function Example() {
 
 ## Props
 
-##### margin
-
-**Type**: `number`
+### `margin`: `number`
 
 Adjusts all margins.
 
-##### marginBottom
+- Required: No
 
-**Type**: `number`
+### `marginY`: `number`
 
-Adjusts bottom margins.
+Adjusts top and bottom margins, potentially overriding the value from the more generic `margin` prop.
 
-##### marginLeft
+- Required: No
 
-**Type**: `number`
+### `marginX`: `number`
 
-Adjusts left margins.
+Adjusts left and right margins, potentially overriding the value from the more generic `margin` prop.
 
-##### marginRight
+- Required: No
 
-**Type**: `number`
+### `marginTop`: `number`
 
-Adjusts right margins.
+Adjusts top margin, potentially overriding the value from the more generic `margin` and `marginY` props.
 
-##### marginTop
+- Required: No
 
-**Type**: `number`
+### `marginBottom`: `number`
 
-Adjusts top margins.
+Adjusts bottom margin, potentially overriding the value from the more generic `margin` and `marginY` props.
 
-##### marginX
+- Required: No
+- Default: `2`
 
-**Type**: `number`
+### `marginLeft`: `number`
 
-Adjusts left and right margins.
+Adjusts left margin, potentially overriding the value from the more generic `margin` and `marginX` props.
 
-##### marginY
+- Required: No
 
-**Type**: `number`
+### `marginRight`: `number`
 
-Adjusts top and bottom margins.
+Adjusts right margin, potentially overriding the value from the more generic `margin` and `marginX` props.
 
-##### padding
+- Required: No
 
-**Type**: `number`
+### `padding`: `number`
 
 Adjusts all padding.
 
-##### paddingBottom
+- Required: No
+
+### `paddingY`: `number`
 
-**Type**: `number`
+Adjusts top and bottom padding, potentially overriding the value from the more generic `padding` prop.
 
-Adjusts bottom padding.
+- Required: No
 
-##### paddingLeft
+### `paddingX`: `number`
 
-**Type**: `number`
+Adjusts left and right padding, potentially overriding the value from the more generic `padding` prop.
 
-Adjusts left padding.
+- Required: No
 
-##### paddingRight
+### `paddingTop`: `number`
 
-**Type**: `number`
+Adjusts top padding, potentially overriding the value from the more generic `padding` and `paddingY` props.
 
-Adjusts right padding.
+- Required: No
 
-##### paddingTop
+### `paddingBottom`: `number`
 
-**Type**: `number`
+Adjusts bottom padding, potentially overriding the value from the more generic `padding` and `paddingY` props.
 
-Adjusts top padding.
+- Required: No
 
-##### paddingX
+### `paddingLeft`: `number`
 
-**Type**: `number`
+Adjusts left padding, potentially overriding the value from the more generic `padding` and `paddingX` props.
 
-Adjusts left and right padding.
+- Required: No
 
-##### paddingY
+### `paddingRight`: `number`
 
-**Type**: `number`
+Adjusts right padding, potentially overriding the value from the more generic `padding` and `paddingX` props.
 
-Adjusts top and bottom padding.
+- Required: No
diff --git a/packages/components/src/spacer/hook.ts b/packages/components/src/spacer/hook.ts
@@ -9,80 +9,14 @@ import { css } from '@emotion/react';
 import { useContextSystem } from '../ui/context';
 // eslint-disable-next-line no-duplicate-imports
 import type { PolymorphicComponentProps } from '../ui/context';
-import { space, SpaceInput } from '../ui/utils/space';
+import { space } from '../ui/utils/space';
 import { useCx } from '../utils/hooks/use-cx';
+import type { Props } from './types';
 
 const isDefined = < T >( o: T ): o is Exclude< T, null | undefined > =>
 	typeof o !== 'undefined' && o !== null;
 
-export interface SpacerProps {
-	/**
-	 * Adjusts all margins.
-	 */
-	margin?: SpaceInput;
-	/**
-	 * Adjusts top and bottom margins.
-	 */
-	marginY?: SpaceInput;
-	/**
-	 * Adjusts left and right margins.
-	 */
-	marginX?: SpaceInput;
-	/**
-	 * Adjusts top margins.
-	 */
-	marginTop?: SpaceInput;
-	/**
-	 * Adjusts bottom margins.
-	 *
-	 * @default 2
-	 */
-	marginBottom?: SpaceInput;
-	/**
-	 * Adjusts left margins.
-	 */
-	marginLeft?: SpaceInput;
-	/**
-	 * Adjusts right margins.
-	 */
-	marginRight?: SpaceInput;
-	/**
-	 * Adjusts all padding.
-	 */
-	padding?: SpaceInput;
-	/**
-	 * Adjusts top and bottom padding.
-	 */
-	paddingY?: SpaceInput;
-	/**
-	 * Adjusts left and right padding.
-	 */
-	paddingX?: SpaceInput;
-	/**
-	 * Adjusts top padding.
-	 */
-	paddingTop?: SpaceInput;
-	/**
-	 * Adjusts bottom padding.
-	 */
-	paddingBottom?: SpaceInput;
-	/**
-	 * Adjusts left padding.
-	 */
-	paddingLeft?: SpaceInput;
-	/**
-	 * Adjusts right padding.
-	 */
-	paddingRight?: SpaceInput;
-	/**
-	 * The children elements.
-	 */
-	children?: React.ReactNode;
-}
-
-export function useSpacer(
-	props: PolymorphicComponentProps< SpacerProps, 'div' >
-) {
+export function useSpacer( props: PolymorphicComponentProps< Props, 'div' > ) {
 	const {
 		className,
 		margin,
@@ -105,6 +39,20 @@ export function useSpacer(
 	const cx = useCx();
 
 	const classes = cx(
+		isDefined( margin ) &&
+			css`
+				margin: ${ space( margin ) };
+			`,
+		isDefined( marginY ) &&
+			css`
+				margin-bottom: ${ space( marginY ) };
+				margin-top: ${ space( marginY ) };
+			`,
+		isDefined( marginX ) &&
+			css`
+				margin-left: ${ space( marginX ) };
+				margin-right: ${ space( marginX ) };
+			`,
 		isDefined( marginTop ) &&
 			css`
 				margin-top: ${ space( marginTop ) };
@@ -121,19 +69,19 @@ export function useSpacer(
 			css`
 				margin-right: ${ space( marginRight ) };
 			`,
-		isDefined( marginX ) &&
+		isDefined( padding ) &&
 			css`
-				margin-left: ${ space( marginX ) };
-				margin-right: ${ space( marginX ) };
+				padding: ${ space( padding ) };
 			`,
-		isDefined( marginY ) &&
+		isDefined( paddingY ) &&
 			css`
-				margin-bottom: ${ space( marginY ) };
-				margin-top: ${ space( marginY ) };
+				padding-bottom: ${ space( paddingY ) };
+				padding-top: ${ space( paddingY ) };
 			`,
-		isDefined( margin ) &&
+		isDefined( paddingX ) &&
 			css`
-				margin: ${ space( margin ) };
+				padding-left: ${ space( paddingX ) };
+				padding-right: ${ space( paddingX ) };
 			`,
 		isDefined( paddingTop ) &&
 			css`
@@ -151,20 +99,6 @@ export function useSpacer(
 			css`
 				padding-right: ${ space( paddingRight ) };
 			`,
-		isDefined( paddingX ) &&
-			css`
-				padding-left: ${ space( paddingX ) };
-				padding-right: ${ space( paddingX ) };
-			`,
-		isDefined( paddingY ) &&
-			css`
-				padding-bottom: ${ space( paddingY ) };
-				padding-top: ${ space( paddingY ) };
-			`,
-		isDefined( padding ) &&
-			css`
-				padding: ${ space( padding ) };
-			`,
 		className
 	);
 

diff --git a/packages/components/src/spacer/index.ts b/packages/components/src/spacer/index.ts
@@ -1,3 +1,3 @@
 export { default as Spacer } from './component';
 export { useSpacer } from './hook';
-export type { SpacerProps } from './hook';
+export type { Props as SpacerProps } from './types';
diff --git a/packages/components/src/spacer/stories/index.js b/packages/components/src/spacer/stories/index.js
@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import { number } from '@storybook/addon-knobs';
+
+/**
+ * Internal dependencies
+ */
+/**
+ * Internal dependencies
+ */
+import { Spacer } from '..';
+
+export default {
+	component: Spacer,
+	title: 'Components (Experimental)/Spacer',
+};
+
+const PROPS = [
+	'margin',
+	'marginY',
+	'marginX',
+	'marginTop',
+	'marginBottom',
+	'marginLeft',
+	'marginRight',
+
+	'padding',
+	'paddingY',
+	'paddingX',
+	'paddingTop',
+	'paddingBottom',
+	'paddingLeft',
+	'paddingRight',
+];
+
+const BlackBox = () => (
+	<div
+		style={ { backgroundColor: 'black', width: '100px', height: '100px' } }
+	/>
+);
+
+export const _default = () => {
+	const props = PROPS.reduce(
+		( acc, prop ) => ( { ...acc, [ prop ]: number( prop, undefined ) } ),
+		{}
+	);
+
+	return (
+		<>
+			<BlackBox />
+			<Spacer { ...props }>This is the spacer</Spacer>
+			<BlackBox />
+		</>
+	);
+};
diff --git a/packages/components/src/spacer/test/__snapshots__/index.js.snap b/packages/components/src/spacer/test/__snapshots__/index.js.snap
@@ -1,5 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`props should override margin props from less to more specific 1`] = `
+Snapshot Diff:
+- Received styles
++ Base styles
+
+  Array [
+    Object {
+-     "margin": "calc(4px * 10)",
+-     "margin-bottom": "calc(4px * 1)",
+-     "margin-left": "calc(4px * 3)",
+-     "margin-right": "calc(4px * 5)",
++     "margin-bottom": "calc(4px * 2)",
+    },
+  ]
+`;
+
+exports[`props should override padding props from less to more specific 1`] = `
+Snapshot Diff:
+- Received styles
++ Base styles
+
+  Array [
+    Object {
+      "margin-bottom": "calc(4px * 2)",
+-     "padding": "calc(4px * 10)",
+-     "padding-bottom": "calc(4px * 2)",
+-     "padding-left": "calc(4px * 3)",
+-     "padding-top": "calc(4px * 5)",
+    },
+  ]
+`;
+
 exports[`props should render correctly 1`] = `
 .emotion-0 {
   margin-bottom: calc(4px * 2);
@@ -98,9 +130,8 @@ Snapshot Diff:
 
   Array [
     Object {
--     "margin-bottom": "calc(4px * 5)",
+      "margin-bottom": "calc(4px * 2)",
 -     "margin-top": "calc(4px * 5)",
-+     "margin-bottom": "calc(4px * 2)",
     },
   ]
 `;