@wordpress/components 39.0.0 → 40.1.0

package/src/gradient-picker/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,7 +1,10 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import GradientPicker from '..';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const GRADIENT_A =
 	'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)';
 const GRADIENT_B =
@@ -13,6 +16,90 @@ const DUPLICATE_GRADIENTS = [
 ];
 
 describe( 'GradientPicker', () => {
+	it( 'should use matching values only for display in command button presentation', async () => {
+		const user = userEvent.setup();
+		const onChange = vi.fn();
+		render(
+			<GradientPicker
+				aria-label="Gradients"
+				gradients={ DUPLICATE_GRADIENTS }
+				value={ GRADIENT_A }
+				selectedSlug="dark-background"
+				onChange={ onChange }
+				presentation="command-buttons"
+				disableCustomGradients
+				clearable={ false }
+			/>
+		);
+
+		const gradient = screen.getByRole( 'button', {
+			name: 'Gradient: Dark Background',
+		} );
+		expect(
+			screen.getByRole( 'group', { name: 'Gradients' } )
+		).toBeVisible();
+		expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
+		expect( gradient ).not.toHaveAttribute( 'aria-pressed' );
+
+		await user.click( gradient );
+		expect( onChange ).toHaveBeenCalledWith(
+			GRADIENT_A,
+			0,
+			'dark-background'
+		);
+	} );
+
+	it( 'should warn for asButtons and prefer an explicit presentation', () => {
+		render(
+			<GradientPicker
+				aria-label="Gradients"
+				gradients={ DUPLICATE_GRADIENTS }
+				onChange={ vi.fn() }
+				asButtons={ false }
+				presentation="command-buttons"
+				disableCustomGradients
+				clearable={ false }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Gradient: Dark Background',
+			} )
+		).not.toHaveAttribute( 'aria-pressed' );
+		expect( console ).toHaveWarnedWith(
+			'`asButtons` prop in wp.components.GradientPicker is deprecated since version 7.2. Please use `presentation` instead. Note: `asButtons={ true }` maps to `presentation="toggle-buttons"`. Explicit `presentation` takes precedence.'
+		);
+	} );
+
+	it( 'should preserve asButtons as a toggle-button alias', () => {
+		render(
+			<GradientPicker
+				aria-label="Gradients"
+				gradients={ DUPLICATE_GRADIENTS }
+				value={ GRADIENT_A }
+				selectedSlug="dark-background"
+				onChange={ vi.fn() }
+				asButtons
+				disableCustomGradients
+				clearable={ false }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Gradient: Dark Background',
+				pressed: true,
+			} )
+		).toBeVisible();
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Gradient: Dark Text',
+				pressed: false,
+			} )
+		).toBeVisible();
+	} );
+
 	describe( 'duplicate gradients in palette', () => {
 		it( 'should render all swatches even when two entries share the same gradient value', () => {
 			render(
@@ -20,7 +107,7 @@ describe( 'GradientPicker', () => {
 					aria-label="Gradient"
 					gradients={ DUPLICATE_GRADIENTS }
 					value={ undefined }
-					onChange={ jest.fn() }
+					onChange={ vi.fn() }
 					disableCustomGradients
 				/>
 			);
@@ -35,7 +122,7 @@ describe( 'GradientPicker', () => {
 					gradients={ DUPLICATE_GRADIENTS }
 					value={ GRADIENT_A }
 					selectedSlug="dark-text"
-					onChange={ jest.fn() }
+					onChange={ vi.fn() }
 					disableCustomGradients
 				/>
 			);
@@ -52,7 +139,7 @@ describe( 'GradientPicker', () => {
 					aria-label="Gradient"
 					gradients={ DUPLICATE_GRADIENTS }
 					value={ GRADIENT_A }
-					onChange={ jest.fn() }
+					onChange={ vi.fn() }
 					disableCustomGradients
 				/>
 			);
@@ -69,7 +156,7 @@ describe( 'GradientPicker', () => {
 					gradients={ DUPLICATE_GRADIENTS }
 					value={ GRADIENT_A }
 					selectedSlug=""
-					onChange={ jest.fn() }
+					onChange={ vi.fn() }
 					disableCustomGradients
 				/>
 			);
@@ -81,7 +168,7 @@ describe( 'GradientPicker', () => {
 
 		it( 'should pass slug as third argument to onChange when a swatch is clicked', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			render(
 				<GradientPicker
@@ -106,7 +193,7 @@ describe( 'GradientPicker', () => {
 
 		it( 'should pass slug as third argument to onChange for multiple-origin gradients', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			render(
 				<GradientPicker

package/src/gradient-picker/types.ts

@@ -1,4 +1,5 @@
 import type { HeadingSize } from '../heading/types';
+import type { CircularOptionPickerProps } from '../circular-option-picker/types';
 
 export type GradientObject = {
 	gradient: string;
@@ -59,15 +60,33 @@ type GradientPickerBaseProps = {
 	 */
 	headingLevel?: HeadingSize;
 	/**
-	 * Whether the control should present as a set of buttons,
-	 * each with its own tab stop.
+	 * How predefined gradient swatches behave and are exposed to assistive
+	 * technology.
 	 *
+	 * - `listbox` uses one tab stop and arrow-key navigation, and exposes
+	 *   selection with `aria-selected`.
+	 * - `toggle-buttons` gives each swatch a tab stop and exposes selection with
+	 *   `aria-pressed`.
+	 * - `command-buttons` gives each swatch a tab stop and exposes no selection
+	 *   state. `value` and `selectedSlug` do not mark predefined swatches as
+	 *   selected, and activating a swatch always calls `onChange` with that
+	 *   swatch. `value` still controls the custom gradient picker.
+	 *
+	 * @default 'listbox'
+	 */
+	presentation?: CircularOptionPickerProps[ 'presentation' ];
+	/**
+	 * Whether the control should present as toggle buttons.
+	 *
+	 * @deprecated Use `presentation="toggle-buttons"` instead. An explicit
+	 * `presentation` takes precedence.
 	 * @default false
+	 * @ignore
 	 */
 	asButtons?: boolean;
 	/**
 	 * Prevents keyboard interaction from wrapping around.
-	 * Only used when `asButtons` is not true.
+	 * Only used with the `listbox` presentation.
 	 *
 	 * @default true
 	 */

package/src/guide/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,6 +1,8 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Guide from '..';
+globalThis.wpVitest.mockMatchMedia();
 
 const defaultProps = {
 	onFinish: () => {},
@@ -92,7 +94,7 @@ describe( 'Guide', () => {
 
 	it( 'calls onFinish when the finish button is clicked', async () => {
 		const user = userEvent.setup();
-		const onFinish = jest.fn();
+		const onFinish = vi.fn();
 		render(
 			<Guide
 				{ ...defaultProps }
@@ -107,7 +109,7 @@ describe( 'Guide', () => {
 
 	it( 'calls onFinish when the modal is closed', async () => {
 		const user = userEvent.setup();
-		const onFinish = jest.fn();
+		const onFinish = vi.fn();
 		render(
 			<Guide
 				{ ...defaultProps }

package/src/h-stack/test/__snapshots__/{index.tsx.snap → index.jsdom.test.tsx.snap}

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`props should render alignment 1`] = `
+exports[`props > should render alignment 1`] = `
 <div>
   <div
     class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
@@ -14,7 +14,7 @@ exports[`props should render alignment 1`] = `
 </div>
 `;
 
-exports[`props should render correctly 1`] = `
+exports[`props > should render correctly 1`] = `
 <div>
   <div
     class="style-flex style-items-row style-expanded-row components-flex components-h-stack"
@@ -28,7 +28,7 @@ exports[`props should render correctly 1`] = `
 </div>
 `;
 
-exports[`props should render spacing 1`] = `
+exports[`props > should render spacing 1`] = `
 <div>
   <div
     class="style-flex style-items-row style-expanded-row components-flex components-h-stack"

package/src/h-stack/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,7 +1,10 @@
+import { describe, expect, test } from 'vitest';
 import { render } from '@testing-library/react';
 import { View } from '../../view';
 import { HStack } from '..';
 
+globalThis.wpVitest.mockMatchMedia();
+
 describe( 'props', () => {
 	test( 'should render correctly', () => {
 		const { container } = render(

package/src/higher-order/with-fallback-styles/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import withFallbackStyles from '..';
 
@@ -9,7 +10,7 @@ describe( 'withFallbackStyles', () => {
 	it( 'derives the fallback styles from the provided node prop', () => {
 		const node = document.createElement( 'span' );
 		node.dataset.color = 'rgb(1, 2, 3)';
-		const mapNodeToProps = jest.fn( ( el: HTMLElement ) => ( {
+		const mapNodeToProps = vi.fn( ( el: HTMLElement ) => ( {
 			fallbackColor: el.dataset.color,
 		} ) );
 		const Component = withFallbackStyles( mapNodeToProps )( Wrapped );
@@ -25,7 +26,7 @@ describe( 'withFallbackStyles', () => {
 	} );
 
 	it( 'derives the fallback styles from the internal wrapper node when no node prop is given', () => {
-		const mapNodeToProps = jest.fn( ( el: HTMLElement ) => ( {
+		const mapNodeToProps = vi.fn( ( el: HTMLElement ) => ( {
 			fallbackColor: el.tagName.toLowerCase(),
 		} ) );
 		const Component = withFallbackStyles( mapNodeToProps )( Wrapped );

package/src/higher-order/with-filters/test/__snapshots__/index.jsdom.test.tsx.snap

@@ -0,0 +1,87 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`withFilters > should display a component overridden by the filter 1`] = `
+<div>
+  <div>
+    Overridden component
+  </div>
+</div>
+`;
+
+exports[`withFilters > should display original component when no filters applied 1`] = `
+<div>
+  <div>
+    My component
+  </div>
+</div>
+`;
+
+exports[`withFilters > should display two components composed by the filter 1`] = `
+<div>
+  <div>
+    <div>
+      My component
+    </div>
+    <div>
+      Composed component
+    </div>
+  </div>
+</div>
+`;
+
+exports[`withFilters > should not re-render component when new filter added before component was mounted 1`] = `
+<div>
+  <blockquote>
+    <div>
+      Spied component
+    </div>
+  </blockquote>
+</div>
+`;
+
+exports[`withFilters > should re-render both components once each when one filter added 1`] = `
+<div>
+  <section>
+    <blockquote>
+      <div>
+        Spied component
+      </div>
+    </blockquote>
+    <blockquote>
+      <div>
+        Spied component
+      </div>
+    </blockquote>
+  </section>
+</div>
+`;
+
+exports[`withFilters > should re-render component once when new filter added after component was mounted 1`] = `
+<div>
+  <blockquote>
+    <div>
+      Spied component
+    </div>
+  </blockquote>
+</div>
+`;
+
+exports[`withFilters > should re-render component once when two filters added in the same animation frame 1`] = `
+<div>
+  <section>
+    <blockquote>
+      <div>
+        Spied component
+      </div>
+    </blockquote>
+  </section>
+</div>
+`;
+
+exports[`withFilters > should re-render component twice when new filter added and removed in two different animation frames 1`] = `
+<div>
+  <div>
+    Spied component
+  </div>
+</div>
+`;

package/src/higher-order/with-filters/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { render, waitFor } from '@testing-library/react';
 import { addFilter, removeAllFilters, removeFilter } from '@wordpress/hooks';
 import withFilters from '..';
@@ -56,7 +57,7 @@ describe( 'withFilters', () => {
 	} );
 
 	it( 'should not re-render component when new filter added before component was mounted', async () => {
-		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
+		const SpiedComponent = vi.fn( () => <div>Spied component</div> );
 		addFilter(
 			hookName,
 			'test/enhanced-component-spy-1',
@@ -77,7 +78,7 @@ describe( 'withFilters', () => {
 	} );
 
 	it( 'should re-render component once when new filter added after component was mounted', async () => {
-		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
+		const SpiedComponent = vi.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
 		const { container } = render( <EnhancedComponent /> );
@@ -101,7 +102,7 @@ describe( 'withFilters', () => {
 	} );
 
 	it( 'should re-render component once when two filters added in the same animation frame', async () => {
-		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
+		const SpiedComponent = vi.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
 		const { container } = render( <EnhancedComponent /> );
@@ -134,7 +135,7 @@ describe( 'withFilters', () => {
 	} );
 
 	it( 'should re-render component twice when new filter added and removed in two different animation frames', async () => {
-		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
+		const SpiedComponent = vi.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 		const { container } = render( <EnhancedComponent /> );
 
@@ -163,7 +164,7 @@ describe( 'withFilters', () => {
 	} );
 
 	it( 'should re-render both components once each when one filter added', async () => {
-		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
+		const SpiedComponent = vi.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
 		const CombinedComponents = () => (

package/src/higher-order/with-focus-outside/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Component } from '@wordpress/element';
@@ -39,7 +40,7 @@ describe( 'withFocusOutside', () => {
 		origHasFocus = document.hasFocus;
 		document.hasFocus = () => true;
 
-		onFocusOutside = jest.fn();
+		onFocusOutside = vi.fn();
 	} );
 
 	afterEach( () => {

package/src/higher-order/with-focus-return/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Component } from '@wordpress/element';

package/src/higher-order/with-notices/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
 	act,
 	render,

package/src/higher-order/with-spoken-messages/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,10 +1,11 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render } from '@testing-library/react';
 import withSpokenMessages from '../';
 
 describe( 'withSpokenMessages', () => {
 	it( 'should generate speak and debouncedSpeak props', () => {
-		const testSpeak = jest.fn();
-		const testDebouncedSpeak = jest.fn();
+		const testSpeak = vi.fn();
+		const testDebouncedSpeak = vi.fn();
 		const isFunction = ( maybeFunc: any ) =>
 			typeof maybeFunc === 'function';
 		const DumpComponent = withSpokenMessages(

package/src/icon/index.tsx

@@ -1,4 +1,4 @@
-import type { ComponentType, HTMLProps, SVGProps } from 'react';
+import type { ComponentType, CSSProperties, HTMLProps, SVGProps } from 'react';
 import {
 	cloneElement,
 	createElement,
@@ -19,6 +19,7 @@ type SizeProps = {
 	size?: number;
 	width?: number | string;
 	height?: number | string;
+	style?: CSSProperties;
 };
 
 type AdditionalProps< T > = T extends ComponentType< infer U >
@@ -88,23 +89,38 @@ function Icon( {
 		} );
 	}
 
-	if ( icon && ( icon.type === 'svg' || icon.type === SVG ) ) {
-		const appliedProps = {
-			...icon.props,
-			width: size,
-			height: size,
-			...additionalProps,
-		};
+	if ( isValidElement< SizeProps >( icon ) ) {
+		const { style: consumerStyle, ...restProps } =
+			additionalProps as SVGProps< SVGSVGElement >;
+		const mergedStyle =
+			icon.props.style || consumerStyle
+				? { ...icon.props.style, ...consumerStyle }
+				: undefined;
+		const styleProps = mergedStyle ? { style: mergedStyle } : {};
 
-		return <SVG { ...appliedProps } />;
-	}
+		if ( icon.type === 'svg' || icon.type === SVG ) {
+			const appliedProps = {
+				...icon.props,
+				width: size,
+				height: size,
+				...restProps,
+				// Merge styles so the icon's intrinsic style (e.g. `fill: none` on
+				// stroke-based icons) is preserved unless the consumer overrides
+				// the same property explicitly.
+				...styleProps,
+			};
+
+			return <SVG { ...appliedProps } />;
+		}
 
-	if ( isValidElement< SizeProps >( icon ) ) {
 		return cloneElement( icon, {
 			size,
 			width: size,
 			height: size,
-			...additionalProps,
+			...restProps,
+			// Merge styles so the icon's intrinsic style is preserved unless
+			// the consumer overrides the same property explicitly.
+			...styleProps,
 		} );
 	}
 

package/src/icon/test/{index.tsx → index.jsdom.test.tsx}

@@ -95,4 +95,70 @@ describe( 'Icon', () => {
 
 		expect( screen.getByTestId( testId ) ).toHaveClass( className );
 	} );
+
+	it( "merges a consumer 'style' prop with the icon's intrinsic style", () => {
+		const strokeIcon = (
+			<SVG style={ { fill: 'none' } }>
+				<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+			</SVG>
+		);
+		render(
+			<Icon
+				data-testid={ testId }
+				icon={ strokeIcon }
+				style={ { marginInlineStart: 4 } }
+			/>
+		);
+		const icon = screen.getByTestId( testId );
+
+		// The icon's intrinsic `fill: none` survives…
+		expect( icon ).toHaveStyle( 'fill: none' );
+		// …alongside the consumer-supplied style.
+		expect( icon ).toHaveStyle( 'margin-inline-start: 4px' );
+	} );
+
+	it( "lets a consumer 'style' override the icon's intrinsic style", () => {
+		const strokeIcon = (
+			<SVG style={ { fill: 'none' } }>
+				<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+			</SVG>
+		);
+		render(
+			<Icon
+				data-testid={ testId }
+				icon={ strokeIcon }
+				style={ { fill: 'red' } }
+			/>
+		);
+
+		expect( screen.getByTestId( testId ) ).toHaveStyle( 'fill: red' );
+	} );
+
+	it( "merges a consumer 'style' with a non-svg element's intrinsic style", () => {
+		render(
+			<Icon
+				icon={
+					<span data-testid={ testId } style={ { fill: 'none' } } />
+				}
+				style={ { marginInlineStart: 4 } }
+			/>
+		);
+		const icon = screen.getByTestId( testId );
+
+		expect( icon ).toHaveStyle( 'fill: none' );
+		expect( icon ).toHaveStyle( 'margin-inline-start: 4px' );
+	} );
+
+	it( "does not add a 'style' prop to a non-svg element without styles", () => {
+		let hasStyleProp = true;
+		const CustomIcon = ( props: Record< string, unknown > ) => {
+			hasStyleProp = 'style' in props;
+			return <span data-testid={ testId } />;
+		};
+
+		render( <Icon icon={ <CustomIcon /> } /> );
+
+		expect( screen.getByTestId( testId ) ).toBeVisible();
+		expect( hasStyleProp ).toBe( false );
+	} );
 } );

package/src/input-control/input-field.tsx

@@ -182,6 +182,7 @@ function InputField(
 			{ ...props }
 			{ ...dragProps }
 			className="components-input-control__input"
+			data-empty-value={ value ? undefined : '' }
 			disabled={ disabled }
 			dragCursor={ dragCursor }
 			isDragging={ isDragging }

package/src/input-control/stories/index.story.tsx

@@ -21,7 +21,7 @@ const meta: Meta< typeof InputControl > = {
 		type: { control: { type: 'text' } },
 		value: { control: { disable: true } },
 	},
-	tags: [ 'status-experimental', 'manifest' ],
+	tags: [ 'status-experimental' ],
 	args: {
 		onChange: fn(),
 		onValidate: fn(),
@@ -31,9 +31,9 @@ const meta: Meta< typeof InputControl > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'recommended',
+			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by [`InputControl`](?path=/docs/design-system-components-form-inputcontrol--docs) in `@wordpress/ui`, but continue using for now.',
+			notes: 'Use [`InputControl`](?path=/docs/design-system-components-form-inputcontrol--docs) from `@wordpress/ui` instead. See the [migration guide](?path=/docs/components-inputcontrol--migration-guide).',
 		},
 	},
 };