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

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);
+}

package/src/surface/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -9,40 +9,33 @@ import { render } from '@testing-library/react';
 import { Surface } from '../index';
 
 describe( 'props', () => {
-	test( 'should render correctly', () => {
-		const { container } = render( <Surface>Surface</Surface> );
-		expect( container ).toMatchSnapshot();
-	} );
+	test( 'should render children in a Surface wrapper', () => {
+		render( <Surface>Surface</Surface> );
 
-	test( 'should render variants', () => {
-		const view = render( <Surface>Surface</Surface> );
-		const { container } = render(
-			<Surface variant="secondary">Surface</Surface>
-		);
-		expect( container ).toMatchDiffSnapshot( view.container );
-	} );
+		const surface = screen.getByText( 'Surface' );
 
-	test( 'should render borderLeft', () => {
-		const view = render( <Surface>Surface</Surface> );
-		const { container } = render( <Surface borderLeft>Surface</Surface> );
-		expect( container ).toMatchDiffSnapshot( view.container );
+		expect( surface ).toHaveClass( 'components-surface' );
+		expect( surface ).toHaveAttribute( 'data-wp-component', 'Surface' );
 	} );
 
-	test( 'should render borderRight', () => {
-		const view = render( <Surface>Surface</Surface> );
-		const { container } = render( <Surface borderRight>Surface</Surface> );
-		expect( container ).toMatchDiffSnapshot( view.container );
-	} );
+	test( 'should merge custom class names', () => {
+		render( <Surface className="custom-surface">Surface</Surface> );
 
-	test( 'should render borderTop', () => {
-		const view = render( <Surface>Surface</Surface> );
-		const { container } = render( <Surface borderTop>Surface</Surface> );
-		expect( container ).toMatchDiffSnapshot( view.container );
+		expect( screen.getByText( 'Surface' ) ).toHaveClass(
+			'components-surface',
+			'custom-surface'
+		);
 	} );
 
-	test( 'should render borderBottom', () => {
-		const view = render( <Surface>Surface</Surface> );
-		const { container } = render( <Surface borderBottom>Surface</Surface> );
-		expect( container ).toMatchDiffSnapshot( view.container );
+	test( 'should render as the requested element', () => {
+		render(
+			<Surface as="section" aria-label="Surface area">
+				Surface
+			</Surface>
+		);
+
+		expect(
+			screen.getByRole( 'region', { name: 'Surface area' } )
+		).toHaveTextContent( 'Surface' );
 	} );
 } );

package/src/text/README.md

@@ -171,7 +171,7 @@ function Example() {
 	const backgroundColor = 'blue';
 
 	return (
-		<View css={ { backgroundColor } }>
+		<View style={ { backgroundColor } }>
 			<Text optimizeReadabilityFor={ backgroundColor }>
 				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 			</Text>

package/src/text/hook.ts

@@ -3,6 +3,7 @@
  */
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
+import type React from 'react';
 
 /**
  * WordPress dependencies
@@ -23,7 +24,6 @@ import { CONFIG, COLORS } from '../utils';
 import { getLineHeight } from './get-line-height';
 import { useCx } from '../utils/hooks/use-cx';
 import type { Props } from './types';
-import type React from 'react';
 
 /**
  * @param {import('../context').WordPressComponentProps<import('./types').Props, 'span'>} props
@@ -79,14 +79,12 @@ export default function useText(
 	const cx = useCx();
 
 	const classes = useMemo( () => {
-		const sx: Record< string, SerializedStyles | null > = {};
-
 		const lineHeight = getLineHeight(
 			adjustLineHeightForInnerControls,
 			lineHeightProp
 		);
 
-		sx.Base = css( {
+		const base = css( {
 			color,
 			display,
 			fontSize: getFontSize( size ),
@@ -96,32 +94,33 @@ export default function useText(
 			textAlign: align,
 		} );
 
-		sx.upperCase = css( { textTransform: 'uppercase' } );
+		const upperCaseStyles = css( { textTransform: 'uppercase' } );
 
-		sx.optimalTextColor = null;
+		let optimalTextColor: SerializedStyles | null = null;
 
 		if ( optimizeReadabilityFor ) {
 			const isOptimalTextColorDark =
 				getOptimalTextShade( optimizeReadabilityFor ) === 'dark';
 
 			// Should not use theme colors
-			sx.optimalTextColor = isOptimalTextColorDark
+			optimalTextColor = isOptimalTextColorDark
 				? css( { color: COLORS.gray[ 900 ] } )
 				: css( { color: COLORS.white } );
 		}
 
-		return cx(
+		const textStyles = css(
 			styles.Text,
-			sx.Base,
-			sx.optimalTextColor,
+			base,
+			optimalTextColor,
 			isDestructive && styles.destructive,
 			!! isHighlighter && styles.highlighterText,
 			isBlock && styles.block,
 			isCaption && styles.muted,
 			variant && styles[ variant ],
-			upperCase && sx.upperCase,
-			className
+			upperCase && upperCaseStyles
 		);
+
+		return cx( textStyles, className );
 	}, [
 		adjustLineHeightForInnerControls,
 		align,

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

@@ -35,7 +35,7 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] =
 
 <div>
   <span
-    class="components-truncate components-text emotion-0 emotion-1"
+    class="components-truncate emotion-0 components-text"
     data-wp-c16t="true"
     data-wp-component="Text"
     role="heading"
@@ -61,7 +61,7 @@ exports[`Text snapshot tests should render correctly 1`] = `
 
 <div>
   <span
-    class="components-truncate components-text emotion-0 emotion-1"
+    class="components-truncate emotion-0 components-text"
     data-wp-c16t="true"
     data-wp-component="Text"
   >

package/src/text/test/index.tsx

@@ -31,13 +31,11 @@ describe( 'Text', () => {
 
 	test( 'should render truncate', () => {
 		render(
-			<Text role="heading" truncate>
+			<Text role="heading" truncate limit={ 1 } ellipsizeMode="tail">
 				Lorem ipsum.
 			</Text>
 		);
-		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
-			textOverflow: 'ellipsis',
-		} );
+		expect( screen.getByRole( 'heading' ) ).toHaveTextContent( 'L…' );
 	} );
 
 	test( 'should render size', () => {
@@ -108,6 +106,23 @@ describe( 'Text', () => {
 		} );
 	} );
 
+	test( 'should render variant color regardless of Emotion insertion order', () => {
+		render(
+			<>
+				<Text role="note" variant="muted">
+					Primer.
+				</Text>
+				<Text role="heading" color="orange" variant="muted">
+					Lorem ipsum.
+				</Text>
+			</>
+		);
+
+		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
+			color: COLORS.theme.gray[ 700 ],
+		} );
+	} );
+
 	test( 'should render display', () => {
 		render(
 			<Text role="heading" display="inline-flex">

package/src/theme/index.tsx

@@ -1,16 +1,31 @@
-/**
- * WordPress dependencies
- */
+import clsx from 'clsx';
+import type { CSSProperties } from 'react';
+
 import { useMemo } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
-import type { ThemeProps } from './types';
+import type { ThemeOutputValues, ThemeProps } from './types';
 import type { WordPressComponentProps } from '../context';
-import { colorVariables, Wrapper } from './styles';
 import { generateThemeVariables } from './color-algorithms';
-import { useCx } from '../utils';
+import styles from './style.module.scss';
+import { PolymorphicElement } from '../utils/polymorphic-element';
+
+const getColorVariables = ( {
+	colors,
+}: ThemeOutputValues ): CSSProperties => ( {
+	'--wp-components-color-accent': colors.accent,
+	'--wp-components-color-accent-darker-10': colors.accentDarker10,
+	'--wp-components-color-accent-darker-20': colors.accentDarker20,
+	'--wp-components-color-accent-inverted': colors.accentInverted,
+	'--wp-components-color-background': colors.background,
+	'--wp-components-color-foreground': colors.foreground,
+	'--wp-components-color-foreground-inverted': colors.foregroundInverted,
+	...Object.fromEntries(
+		Object.entries( colors.gray ?? {} ).map( ( [ key, value ] ) => [
+			`--wp-components-color-gray-${ key }`,
+			value,
+		] )
+	),
+} );
 
 /**
  * `Theme` allows defining theme variables for components in the `@wordpress/components` package.
@@ -35,21 +50,31 @@ function Theme( {
 	accent,
 	background,
 	className,
+	style,
 	...props
 }: WordPressComponentProps< ThemeProps, 'div', true > ) {
-	const cx = useCx();
-	const classes = useMemo(
+	const themeVariables = useMemo(
 		() =>
-			cx(
-				...colorVariables(
-					generateThemeVariables( { accent, background } )
-				),
-				className
+			getColorVariables(
+				generateThemeVariables( { accent, background } )
 			),
-		[ accent, background, className, cx ]
+		[ accent, background ]
+	);
+	const wrapperStyle = useMemo(
+		() => ( {
+			...themeVariables,
+			...style,
+		} ),
+		[ style, themeVariables ]
 	);
 
-	return <Wrapper className={ classes } { ...props } />;
+	return (
+		<PolymorphicElement
+			className={ clsx( styles.wrapper, className ) }
+			style={ wrapperStyle }
+			{ ...props }
+		/>
+	);
 }
 
 export default Theme;

package/src/theme/style.module.scss

@@ -0,0 +1,4 @@
+.wrapper {
+	/* stylelint-disable-next-line declaration-property-value-disallowed-list -- Preserve Theme's currentColor fallback when no foreground variable is generated. */
+	color: var(--wp-components-color-foreground, currentColor);
+}

package/src/theme/test/index.tsx

@@ -1,12 +1,6 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
 import type { ReactNode } from 'react';
 
-/**
- * Internal dependencies
- */
 import Theme from '../';
 
 type MyThemableComponentProps = {
@@ -25,6 +19,29 @@ const MyThemableComponent = ( props: MyThemableComponentProps ) => {
 };
 
 describe( 'Theme', () => {
+	it( 'should support the as prop', () => {
+		render( <Theme as="section" data-testid="theme" /> );
+
+		expect( screen.getByTestId( 'theme' ) ).toHaveProperty(
+			'tagName',
+			'SECTION'
+		);
+	} );
+
+	it( 'lets user styles override generated theme variables', () => {
+		render(
+			<Theme
+				accent="#123abc"
+				style={ { '--wp-components-color-accent': '#654321' } }
+				data-testid="theme"
+			/>
+		);
+
+		expect( screen.getByTestId( 'theme' ) ).toHaveStyle( {
+			'--wp-components-color-accent': '#654321',
+		} );
+	} );
+
 	describe( 'accent color', () => {
 		it( 'does not define the accent color (and its variations) as a CSS variable when the `accent` prop is undefined', () => {
 			render(

package/src/toggle-group-control/stories/index.story.tsx

@@ -55,7 +55,6 @@ const Template: StoryFn< typeof ToggleGroupControl > = ( {
 
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			{ ...props }
 			onChange={ ( ...changeArgs ) => {
 				setValue( ...changeArgs );