@wordpress/components 36.0.1 → 37.0.0

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)",
-    },
-  ]
-`;
-
 exports[`props should render correctly 1`] = `
-.emotion-0 {
-  margin-bottom: calc(4px * 2);
-}
-
 <div
-  class="components-spacer emotion-0 emotion-1"
+  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)",
-    },
-  ]
-`;

package/src/spacer/test/index.tsx

@@ -1,12 +1,7 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
 
-/**
- * Internal dependencies
- */
 import { Spacer } from '../index';
+import styles from '../style.module.scss';
 
 describe( 'props', () => {
 	test( 'should render correctly', () => {
@@ -16,164 +11,193 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render margin', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer margin={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer margin={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin': 'calc(4px * 5)',
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+		} );
 	} );
 
 	test( 'should render marginX', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer marginX={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer marginX={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-inline-start': 'calc(4px * 5)',
+			'--wp-components-spacer-margin-inline-end': 'calc(4px * 5)',
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+		} );
 	} );
 
 	test( 'should render marginY', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer marginY={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer marginY={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-start': 'calc(4px * 5)',
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+		} );
 	} );
 
 	test( 'should render marginTop', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer marginTop={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer marginTop={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-start': 'calc(4px * 5)',
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+		} );
 	} );
 
 	test( 'should render marginBottom', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer marginBottom={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer marginBottom={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 5)',
+		} );
 	} );
 
 	test( 'should render marginLeft', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer marginLeft={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer marginLeft={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-inline-start': 'calc(4px * 5)',
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+		} );
 	} );
 
 	test( 'should render marginRight', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer marginRight={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer marginRight={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-inline-end': 'calc(4px * 5)',
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+		} );
 	} );
 
 	test( 'should override margin props from less to more specific', () => {
-		render( <Spacer data-testid="spacer" /> );
 		render(
 			<Spacer
 				margin={ 10 }
 				marginX={ 3 }
 				marginRight={ 5 }
 				marginBottom={ 1 }
-				data-testid="customized-spacer"
+				data-testid="spacer"
 			/>
 		);
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin': 'calc(4px * 10)',
+			'--wp-components-spacer-margin-inline-start': 'calc(4px * 3)',
+			'--wp-components-spacer-margin-inline-end': 'calc(4px * 5)',
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 1)',
+		} );
 	} );
 
 	test( 'should render padding', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer padding={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer padding={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+			'--wp-components-spacer-padding': 'calc(4px * 5)',
+		} );
 	} );
 
 	test( 'should render paddingX', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer paddingX={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer paddingX={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+			'--wp-components-spacer-padding-inline-start': 'calc(4px * 5)',
+			'--wp-components-spacer-padding-inline-end': 'calc(4px * 5)',
+		} );
 	} );
 
 	test( 'should render paddingY', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer paddingY={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer paddingY={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+			'--wp-components-spacer-padding-block-start': 'calc(4px * 5)',
+			'--wp-components-spacer-padding-block-end': 'calc(4px * 5)',
+		} );
 	} );
 
 	test( 'should render paddingTop', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer paddingTop={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer paddingTop={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+			'--wp-components-spacer-padding-block-start': 'calc(4px * 5)',
+		} );
 	} );
 
 	test( 'should render paddingBottom', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render(
-			<Spacer paddingBottom={ 5 } data-testid="customized-spacer" />
-		);
+		render( <Spacer paddingBottom={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+			'--wp-components-spacer-padding-block-end': 'calc(4px * 5)',
+		} );
 	} );
 
 	test( 'should render paddingLeft', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer paddingLeft={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer paddingLeft={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+			'--wp-components-spacer-padding-inline-start': 'calc(4px * 5)',
+		} );
 	} );
 
 	test( 'should render paddingRight', () => {
-		render( <Spacer data-testid="spacer" /> );
-		render( <Spacer paddingRight={ 5 } data-testid="customized-spacer" /> );
+		render( <Spacer paddingRight={ 5 } data-testid="spacer" /> );
 
-		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+			'--wp-components-spacer-padding-inline-end': 'calc(4px * 5)',
+		} );
 	} );
 
 	test( 'should override padding props from less to more specific', () => {
-		render( <Spacer data-testid="spacer" /> );
 		render(
 			<Spacer
 				padding={ 10 }
 				paddingY={ 2 }
 				paddingTop={ 5 }
 				paddingLeft={ 3 }
-				data-testid="customized-spacer"
+				data-testid="spacer"
 			/>
 		);
 
+		expect( screen.getByTestId( 'spacer' ) ).toHaveStyle( {
+			'--wp-components-spacer-margin-block-end': 'calc(4px * 2)',
+			'--wp-components-spacer-padding': 'calc(4px * 10)',
+			'--wp-components-spacer-padding-block-start': 'calc(4px * 5)',
+			'--wp-components-spacer-padding-block-end': 'calc(4px * 2)',
+			'--wp-components-spacer-padding-inline-start': 'calc(4px * 3)',
+		} );
+	} );
+
+	test( 'should render nested instances without passing spacing variables to children', () => {
+		render(
+			<Spacer padding={ 4 } data-testid="outer-spacer">
+				<Spacer data-testid="inner-spacer" />
+			</Spacer>
+		);
+
+		const outerSpacer = screen.getByTestId( 'outer-spacer' );
+		const innerSpacer = screen.getByTestId( 'inner-spacer' );
+
+		expect( outerSpacer ).toHaveClass( styles.spacer );
+		expect( innerSpacer ).toHaveClass( styles.spacer );
+		expect(
+			outerSpacer.style.getPropertyValue(
+				'--wp-components-spacer-padding'
+			)
+		).toBe( 'calc(4px * 4)' );
 		expect(
-			screen.getByTestId( 'customized-spacer' )
-		).toMatchStyleDiffSnapshot( screen.getByTestId( 'spacer' ) );
+			innerSpacer.style.getPropertyValue(
+				'--wp-components-spacer-padding'
+			)
+		).toBe( '' );
 	} );
 } );

package/src/surface/hook.ts

@@ -1,16 +1,15 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
-import { useMemo } from '@wordpress/element';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
  */
 import { useContextSystem } from '../context';
-import * as styles from './styles';
-import { useCx } from '../utils/hooks/use-cx';
 import type { SurfaceProps } from './types';
 import type { WordPressComponentProps } from '../context';
+import styles from './style.module.scss';
 
 export function useSurface(
 	props: WordPressComponentProps< SurfaceProps, 'div' >
@@ -22,42 +21,37 @@ export function useSurface(
 		borderRight = false,
 		borderTop = false,
 		className,
+		style,
 		variant = 'primary',
 		...otherProps
 	} = useContextSystem( props, 'Surface' );
 
-	const cx = useCx();
+	const hasPatternBackground = variant === 'dotted' || variant === 'grid';
+	const surfaceStyle = hasPatternBackground
+		? {
+				...style,
+				'--wp-components-surface-background-size': `${ backgroundSize }px`,
+				'--wp-components-surface-background-size-dotted': `${
+					backgroundSize - 1
+				}px`,
+		  }
+		: style;
 
-	const classes = useMemo( () => {
-		const sx = {
-			borders: styles.getBorders( {
-				borderBottom,
-				borderLeft,
-				borderRight,
-				borderTop,
-			} ),
-		};
-
-		return cx(
-			styles.Surface,
-			sx.borders,
-			styles.getVariant(
-				variant,
-				`${ backgroundSize }px`,
-				`${ backgroundSize - 1 }px`
-			),
+	return {
+		...otherProps,
+		className: clsx(
+			styles.surface,
+			{
+				[ styles[ 'border-bottom' ] ]: borderBottom,
+				[ styles[ 'border-left' ] ]: borderLeft,
+				[ styles[ 'border-right' ] ]: borderRight,
+				[ styles[ 'border-top' ] ]: borderTop,
+				[ styles.secondary ]: variant === 'secondary',
+				[ styles.dotted ]: variant === 'dotted',
+				[ styles.grid ]: variant === 'grid',
+			},
 			className
-		);
-	}, [
-		backgroundSize,
-		borderBottom,
-		borderLeft,
-		borderRight,
-		borderTop,
-		className,
-		cx,
-		variant,
-	] );
-
-	return { ...otherProps, className: classes };
+		),
+		style: surfaceStyle,
+	};
 }

package/src/surface/style.module.scss

@@ -0,0 +1,53 @@
+.surface {
+	background-color: var(--wpds-color-background-surface-neutral-strong);
+	color: var(--wpds-color-foreground-content-neutral);
+	position: relative;
+}
+
+.border-bottom {
+	border-bottom: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
+}
+
+.border-left {
+	/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Surface exposes physical border props. */
+	border-left: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
+}
+
+.border-right {
+	/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Surface exposes physical border props. */
+	border-right: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
+}
+
+.border-top {
+	border-top: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
+}
+
+.secondary {
+	background: var(--wpds-color-background-surface-neutral-weak);
+}
+
+.dotted {
+	background:
+		linear-gradient(90deg, var(--wpds-color-background-surface-neutral-strong)
+		var(--wp-components-surface-background-size-dotted), transparent 1%)
+		center,
+		linear-gradient(var(--wpds-color-background-surface-neutral-strong)
+		var(--wp-components-surface-background-size-dotted), transparent 1%)
+		center,
+		var(--wpds-color-stroke-surface-neutral);
+	background-size:
+		var(--wp-components-surface-background-size)
+		var(--wp-components-surface-background-size);
+}
+
+.grid {
+	background: var(--wpds-color-background-surface-neutral-strong);
+	background-image:
+		linear-gradient(var(--wpds-color-stroke-surface-neutral-weak)
+		var(--wpds-border-width-xs), transparent var(--wpds-border-width-xs)),
+		linear-gradient(90deg, var(--wpds-color-stroke-surface-neutral-weak)
+		var(--wpds-border-width-xs), transparent var(--wpds-border-width-xs));
+	background-size:
+		var(--wp-components-surface-background-size)
+		var(--wp-components-surface-background-size);
+}