@wordpress/components 37.0.1-next.v.202607070741.0 → 38.0.0

package/src/spacer/hook.ts

@@ -1,16 +1,11 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
+import clsx from 'clsx';
+import type { CSSProperties } from 'react';
+
 import type { WordPressComponentProps } from '../context';
 import { useContextSystem } from '../context';
 import { space } from '../utils/space';
-import { rtl, useCx } from '../utils';
 import type { SpacerProps } from './types';
+import styles from './style.module.scss';
 
 function isDefined< T >( o: T ): o is Exclude< T, null | undefined > {
 	return typeof o !== 'undefined' && o !== null;
@@ -35,75 +30,96 @@ export function useSpacer(
 		paddingTop,
 		paddingX,
 		paddingY,
+		style,
 		...otherProps
 	} = useContextSystem( props, 'Spacer' );
 
-	const cx = useCx();
-
-	const spacerStyles = css(
-		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 ) };
-			`,
-		isDefined( marginBottom ) &&
-			css`
-				margin-bottom: ${ space( marginBottom ) };
-			`,
-		isDefined( marginLeft ) &&
-			rtl( {
-				marginLeft: space( marginLeft ),
-			} )(),
-		isDefined( marginRight ) &&
-			rtl( {
-				marginRight: space( marginRight ),
-			} )(),
-		isDefined( padding ) &&
-			css`
-				padding: ${ space( padding ) };
-			`,
-		isDefined( paddingY ) &&
-			css`
-				padding-bottom: ${ space( paddingY ) };
-				padding-top: ${ space( paddingY ) };
-			`,
-		isDefined( paddingX ) &&
-			css`
-				padding-left: ${ space( paddingX ) };
-				padding-right: ${ space( paddingX ) };
-			`,
-		isDefined( paddingTop ) &&
-			css`
-				padding-top: ${ space( paddingTop ) };
-			`,
-		isDefined( paddingBottom ) &&
-			css`
-				padding-bottom: ${ space( paddingBottom ) };
-			`,
-		isDefined( paddingLeft ) &&
-			rtl( {
-				paddingLeft: space( paddingLeft ),
-			} )(),
-		isDefined( paddingRight ) &&
-			rtl( {
-				paddingRight: space( paddingRight ),
-			} )()
-	);
-
-	const classes = cx( spacerStyles, className );
-
-	return { ...otherProps, className: classes };
+	const spacingStyle: CSSProperties = {};
+
+	if ( isDefined( margin ) ) {
+		spacingStyle[ '--wp-components-spacer-margin' ] = space( margin );
+	}
+
+	if ( isDefined( marginY ) ) {
+		spacingStyle[ '--wp-components-spacer-margin-block-start' ] =
+			space( marginY );
+		spacingStyle[ '--wp-components-spacer-margin-block-end' ] =
+			space( marginY );
+	}
+
+	if ( isDefined( marginX ) ) {
+		spacingStyle[ '--wp-components-spacer-margin-inline-start' ] =
+			space( marginX );
+		spacingStyle[ '--wp-components-spacer-margin-inline-end' ] =
+			space( marginX );
+	}
+
+	if ( isDefined( marginTop ) ) {
+		spacingStyle[ '--wp-components-spacer-margin-block-start' ] =
+			space( marginTop );
+	}
+
+	if ( isDefined( marginBottom ) ) {
+		spacingStyle[ '--wp-components-spacer-margin-block-end' ] =
+			space( marginBottom );
+	}
+
+	if ( isDefined( marginLeft ) ) {
+		spacingStyle[ '--wp-components-spacer-margin-inline-start' ] =
+			space( marginLeft );
+	}
+
+	if ( isDefined( marginRight ) ) {
+		spacingStyle[ '--wp-components-spacer-margin-inline-end' ] =
+			space( marginRight );
+	}
+
+	if ( isDefined( padding ) ) {
+		spacingStyle[ '--wp-components-spacer-padding' ] = space( padding );
+	}
+
+	if ( isDefined( paddingY ) ) {
+		spacingStyle[ '--wp-components-spacer-padding-block-start' ] =
+			space( paddingY );
+		spacingStyle[ '--wp-components-spacer-padding-block-end' ] =
+			space( paddingY );
+	}
+
+	if ( isDefined( paddingX ) ) {
+		spacingStyle[ '--wp-components-spacer-padding-inline-start' ] =
+			space( paddingX );
+		spacingStyle[ '--wp-components-spacer-padding-inline-end' ] =
+			space( paddingX );
+	}
+
+	if ( isDefined( paddingTop ) ) {
+		spacingStyle[ '--wp-components-spacer-padding-block-start' ] =
+			space( paddingTop );
+	}
+
+	if ( isDefined( paddingBottom ) ) {
+		spacingStyle[ '--wp-components-spacer-padding-block-end' ] =
+			space( paddingBottom );
+	}
+
+	if ( isDefined( paddingLeft ) ) {
+		spacingStyle[ '--wp-components-spacer-padding-inline-start' ] =
+			space( paddingLeft );
+	}
+
+	if ( isDefined( paddingRight ) ) {
+		spacingStyle[ '--wp-components-spacer-padding-inline-end' ] =
+			space( paddingRight );
+	}
+
+	const spacerStyle: CSSProperties = {
+		...spacingStyle,
+		...style,
+	};
+
+	return {
+		...otherProps,
+		className: clsx( styles.spacer, className ),
+		style: spacerStyle,
+	};
 }

package/src/spacer/stories/index.story.tsx

@@ -1,11 +1,5 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
 
-/**
- * Internal dependencies
- */
 import { Spacer } from '..';
 
 const controls = [
@@ -74,3 +68,11 @@ export const Default: StoryFn< typeof Spacer > = Template.bind( {} );
 Default.args = {
 	children: 'This is the spacer',
 };
+
+export const Nested: StoryFn< typeof Spacer > = () => (
+	<Spacer padding={ 4 } style={ { backgroundColor: '#ddd' } }>
+		<Spacer style={ { backgroundColor: '#fff' } }>
+			<BlackBox />
+		</Spacer>
+	</Spacer>
+);

package/src/spacer/style.module.scss

@@ -0,0 +1,25 @@
+.spacer {
+	// Custom properties inherit by default. Reset them per Spacer so nested
+	// instances only use their own spacing props.
+	--wp-components-spacer-margin: initial;
+	--wp-components-spacer-margin-block-start: initial;
+	--wp-components-spacer-margin-block-end: initial;
+	--wp-components-spacer-margin-inline-start: initial;
+	--wp-components-spacer-margin-inline-end: initial;
+	--wp-components-spacer-padding: initial;
+	--wp-components-spacer-padding-block-start: initial;
+	--wp-components-spacer-padding-block-end: initial;
+	--wp-components-spacer-padding-inline-start: initial;
+	--wp-components-spacer-padding-inline-end: initial;
+
+	margin: var(--wp-components-spacer-margin);
+	margin-block-start: var(--wp-components-spacer-margin-block-start, var(--wp-components-spacer-margin));
+	margin-block-end: var(--wp-components-spacer-margin-block-end, var(--wp-components-spacer-margin));
+	margin-inline-start: var(--wp-components-spacer-margin-inline-start, var(--wp-components-spacer-margin));
+	margin-inline-end: var(--wp-components-spacer-margin-inline-end, var(--wp-components-spacer-margin));
+	padding: var(--wp-components-spacer-padding);
+	padding-block-start: var(--wp-components-spacer-padding-block-start, var(--wp-components-spacer-padding));
+	padding-block-end: var(--wp-components-spacer-padding-block-end, var(--wp-components-spacer-padding));
+	padding-inline-start: var(--wp-components-spacer-padding-inline-start, var(--wp-components-spacer-padding));
+	padding-inline-end: var(--wp-components-spacer-padding-inline-end, var(--wp-components-spacer-padding));
+}

package/src/spacer/test/__snapshots__/index.tsx.snap

@@ -1,231 +1,11 @@
-// 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)",
-    },
-  ]
-`;
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`props should render correctly 1`] = `
-.emotion-0 {
-  margin-bottom: calc(4px * 2);
-}
-
 <div
-  class="emotion-0 components-spacer"
+  class="style-spacer components-spacer"
   data-testid="spacer"
   data-wp-c16t="true"
   data-wp-component="Spacer"
+  style="--wp-components-spacer-margin-block-end: calc(4px * 2);"
 />
 `;
-
-exports[`props should render margin 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-  Array [
-    Object {
--     "margin": "calc(4px * 5)",
-      "margin-bottom": "calc(4px * 2)",
-    },
-  ]
-`;
-
-exports[`props should render marginBottom 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-  Array [
-    Object {
--     "margin-bottom": "calc(4px * 5)",
-+     "margin-bottom": "calc(4px * 2)",
-    },
-  ]
-`;
-
-exports[`props should render marginLeft 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-  Array [
-    Object {
-      "margin-bottom": "calc(4px * 2)",
--     "margin-left": "calc(4px * 5)",
-    },
-  ]
-`;
-
-exports[`props should render marginRight 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-  Array [
-    Object {
-      "margin-bottom": "calc(4px * 2)",
--     "margin-right": "calc(4px * 5)",
-    },
-  ]
-`;
-
-exports[`props should render marginTop 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-  Array [
-    Object {
-      "margin-bottom": "calc(4px * 2)",
--     "margin-top": "calc(4px * 5)",
-    },
-  ]
-`;
-
-exports[`props should render marginX 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-  Array [
-    Object {
-      "margin-bottom": "calc(4px * 2)",
--     "margin-left": "calc(4px * 5)",
--     "margin-right": "calc(4px * 5)",
-    },
-  ]
-`;
-
-exports[`props should render marginY 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-  Array [
-    Object {
-      "margin-bottom": "calc(4px * 2)",
--     "margin-top": "calc(4px * 5)",
-    },
-  ]
-`;
-
-exports[`props should render padding 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-  Array [
-    Object {
-      "margin-bottom": "calc(4px * 2)",
--     "padding": "calc(4px * 5)",
-    },
-  ]
-`;
-
-exports[`props should render paddingBottom 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-  Array [
-    Object {
-      "margin-bottom": "calc(4px * 2)",
--     "padding-bottom": "calc(4px * 5)",
-    },
-  ]
-`;
-
-exports[`props should render paddingLeft 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-  Array [
-    Object {
-      "margin-bottom": "calc(4px * 2)",
--     "padding-left": "calc(4px * 5)",
-    },
-  ]
-`;
-
-exports[`props should render paddingRight 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-  Array [
-    Object {
-      "margin-bottom": "calc(4px * 2)",
--     "padding-right": "calc(4px * 5)",
-    },
-  ]
-`;
-
-exports[`props should render paddingTop 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-  Array [
-    Object {
-      "margin-bottom": "calc(4px * 2)",
--     "padding-top": "calc(4px * 5)",
-    },
-  ]
-`;
-
-exports[`props should render paddingX 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-  Array [
-    Object {
-      "margin-bottom": "calc(4px * 2)",
--     "padding-left": "calc(4px * 5)",
--     "padding-right": "calc(4px * 5)",
-    },
-  ]
-`;
-
-exports[`props should render paddingY 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-  Array [
-    Object {
-      "margin-bottom": "calc(4px * 2)",
--     "padding-bottom": "calc(4px * 5)",
--     "padding-top": "calc(4px * 5)",
-    },
-  ]
-`;