@wordpress/components 37.0.0 → 38.0.0

package/src/gradient-picker/README.md

@@ -141,11 +141,29 @@ Only used when `asButtons` is not true.
 
 ### `onChange`
 
- - Type: `(currentGradient: string | undefined) => void`
+ - Type: `(currentGradient: string | undefined, index?: number | undefined, slug?: string | undefined) => void`
  - Required: Yes
 
-The function called when a new gradient has been defined. It is passed to
-the `currentGradient` as an argument.
+The function called when a new gradient has been defined. It is passed
+the `currentGradient` as an argument. When a predefined gradient is
+selected, the second argument is its index (or, for multiple-origin
+gradients, the origin index) and the third argument is its slug.
+
+### `selectedSlug`
+
+ - Type: `string`
+ - Required: No
+
+The slug of the currently selected predefined gradient.
+
+When set to a non-empty string, selection is determined by slug rather
+than by gradient value, which correctly handles palettes where two
+entries share the same gradient. Entries whose slug does not match will
+not appear selected in this mode, even if their gradient value matches
+`value`.
+
+An empty string is treated the same as `undefined`: selection falls
+back to matching by gradient value.
 
 ### `value`
 

package/src/gradient-picker/index.tsx

@@ -41,35 +41,48 @@ function SingleOrigin( {
 	gradients,
 	onChange,
 	value,
+	selectedSlug,
 	...additionalProps
 }: PickerProps< GradientObject > ) {
 	const gradientOptions = useMemo( () => {
-		return gradients.map( ( { gradient, name, slug }, index ) => (
-			<CircularOptionPicker.Option
-				key={ slug }
-				value={ gradient }
-				isSelected={ value === gradient }
-				tooltipText={
-					name ||
-					// translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
-					sprintf( __( 'Gradient code: %s' ), gradient )
-				}
-				style={ { color: 'rgba( 0,0,0,0 )', background: gradient } }
-				onClick={
-					value === gradient
-						? clearGradient
-						: () => onChange( gradient, index )
-				}
-				aria-label={
-					name
-						? // translators: %s: The name of the gradient e.g: "Angular red to blue".
-						  sprintf( __( 'Gradient: %s' ), name )
-						: // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
-						  sprintf( __( 'Gradient code: %s' ), gradient )
-				}
-			/>
-		) );
-	}, [ gradients, value, onChange, clearGradient ] );
+		return gradients.map( ( { gradient, name, slug }, index ) => {
+			// When a non-empty selectedSlug is provided, selection is decided
+			// strictly by slug, which keeps two entries with the same gradient
+			// value apart. Otherwise selection falls back to matching the
+			// gradient value.
+			const isSelected = selectedSlug
+				? slug === selectedSlug
+				: value === gradient;
+			return (
+				<CircularOptionPicker.Option
+					key={ slug }
+					value={ gradient }
+					isSelected={ isSelected }
+					tooltipText={
+						name ||
+						// translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
+						sprintf( __( 'Gradient code: %s' ), gradient )
+					}
+					style={ {
+						color: 'rgba( 0,0,0,0 )',
+						background: gradient,
+					} }
+					onClick={
+						isSelected
+							? clearGradient
+							: () => onChange( gradient, index, slug )
+					}
+					aria-label={
+						name
+							? // translators: %s: The name of the gradient e.g: "Angular red to blue".
+							  sprintf( __( 'Gradient: %s' ), name )
+							: // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
+							  sprintf( __( 'Gradient code: %s' ), gradient )
+					}
+				/>
+			);
+		} );
+	}, [ gradients, value, onChange, clearGradient, selectedSlug ] );
 	return (
 		<CircularOptionPicker.OptionGroup
 			className={ className }
@@ -85,6 +98,7 @@ function MultipleOrigin( {
 	gradients,
 	onChange,
 	value,
+	selectedSlug,
 	headingLevel,
 }: PickerProps< OriginObject > ) {
 	const instanceId = useInstanceId( MultipleOrigin );
@@ -101,10 +115,11 @@ function MultipleOrigin( {
 						<SingleOrigin
 							clearGradient={ clearGradient }
 							gradients={ gradientSet }
-							onChange={ ( gradient ) =>
-								onChange( gradient, index )
+							onChange={ ( gradient, _index, slug ) =>
+								onChange( gradient, index, slug )
 							}
 							value={ value }
+							selectedSlug={ selectedSlug }
 							aria-labelledby={ id }
 						/>
 					</VStack>

package/src/gradient-picker/stories/index.story.tsx

@@ -31,6 +31,7 @@ const meta: Meta< typeof GradientPicker > = {
 		onChange: fn(),
 	},
 	argTypes: {
+		selectedSlug: { control: false },
 		value: { control: false },
 	},
 };
@@ -91,17 +92,23 @@ const GRADIENTS = [
 
 const Template = ( {
 	onChange,
+	value,
+	selectedSlug,
 	...props
 }: React.ComponentProps< typeof GradientPicker > ) => {
-	const [ gradient, setGradient ] =
-		useState< ( typeof props )[ 'value' ] >( null );
+	const [ gradient, setGradient ] = useState<
+		React.ComponentProps< typeof GradientPicker >[ 'value' ]
+	>( value ?? null );
+	const [ slug, setSlug ] = useState< string | undefined >( selectedSlug );
 	return (
 		<GradientPicker
 			{ ...props }
 			value={ gradient }
-			onChange={ ( ...changeArgs ) => {
-				setGradient( ...changeArgs );
-				onChange?.( ...changeArgs );
+			selectedSlug={ slug }
+			onChange={ ( currentGradient, index, newSlug ) => {
+				setGradient( currentGradient );
+				setSlug( newSlug );
+				onChange?.( currentGradient, index, newSlug );
 			} }
 		/>
 	);
@@ -121,6 +128,35 @@ export const WithNoExistingGradients: GradientPickerStory = {
 	},
 };
 
+export const DuplicateGradients: GradientPickerStory = {
+	render: Template,
+	args: {
+		gradients: [
+			{
+				name: 'Dark Background',
+				slug: 'dark-background',
+				gradient:
+					'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+			},
+			{
+				name: 'Dark Text',
+				slug: 'dark-text',
+				gradient:
+					'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+			},
+			{
+				name: 'Brand',
+				slug: 'brand',
+				gradient:
+					'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
+			},
+		],
+		value: 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+		selectedSlug: 'dark-text',
+		disableCustomGradients: true,
+	},
+};
+
 export const MultipleOrigins: GradientPickerStory = {
 	render: Template,
 	args: {

package/src/gradient-picker/test/index.tsx

@@ -0,0 +1,148 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import GradientPicker from '..';
+
+const GRADIENT_A =
+	'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)';
+const GRADIENT_B =
+	'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)';
+
+const DUPLICATE_GRADIENTS = [
+	{ name: 'Dark Background', slug: 'dark-background', gradient: GRADIENT_A },
+	{ name: 'Dark Text', slug: 'dark-text', gradient: GRADIENT_A },
+];
+
+describe( 'GradientPicker', () => {
+	describe( 'duplicate gradients in palette', () => {
+		it( 'should render all swatches even when two entries share the same gradient value', () => {
+			render(
+				<GradientPicker
+					aria-label="Gradient"
+					gradients={ DUPLICATE_GRADIENTS }
+					value={ undefined }
+					onChange={ jest.fn() }
+					disableCustomGradients
+				/>
+			);
+
+			expect( screen.getAllByRole( 'option' ) ).toHaveLength( 2 );
+		} );
+
+		it( 'should select by slug when selectedSlug is provided, marking only the matching entry', () => {
+			render(
+				<GradientPicker
+					aria-label="Gradient"
+					gradients={ DUPLICATE_GRADIENTS }
+					value={ GRADIENT_A }
+					selectedSlug="dark-text"
+					onChange={ jest.fn() }
+					disableCustomGradients
+				/>
+			);
+
+			const options = screen.getAllByRole( 'option' );
+			// "dark-background" is index 0, "dark-text" is index 1.
+			expect( options[ 0 ] ).toHaveAttribute( 'aria-selected', 'false' );
+			expect( options[ 1 ] ).toHaveAttribute( 'aria-selected', 'true' );
+		} );
+
+		it( 'should fall back to value selection and mark all matching duplicates when no selectedSlug is provided', () => {
+			render(
+				<GradientPicker
+					aria-label="Gradient"
+					gradients={ DUPLICATE_GRADIENTS }
+					value={ GRADIENT_A }
+					onChange={ jest.fn() }
+					disableCustomGradients
+				/>
+			);
+
+			const options = screen.getAllByRole( 'option' );
+			expect( options[ 0 ] ).toHaveAttribute( 'aria-selected', 'true' );
+			expect( options[ 1 ] ).toHaveAttribute( 'aria-selected', 'true' );
+		} );
+
+		it( 'should treat an empty-string selectedSlug as no slug and fall back to value selection', () => {
+			render(
+				<GradientPicker
+					aria-label="Gradient"
+					gradients={ DUPLICATE_GRADIENTS }
+					value={ GRADIENT_A }
+					selectedSlug=""
+					onChange={ jest.fn() }
+					disableCustomGradients
+				/>
+			);
+
+			const options = screen.getAllByRole( 'option' );
+			expect( options[ 0 ] ).toHaveAttribute( 'aria-selected', 'true' );
+			expect( options[ 1 ] ).toHaveAttribute( 'aria-selected', 'true' );
+		} );
+
+		it( 'should pass slug as third argument to onChange when a swatch is clicked', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			render(
+				<GradientPicker
+					aria-label="Gradient"
+					gradients={ DUPLICATE_GRADIENTS }
+					value={ undefined }
+					onChange={ onChange }
+					disableCustomGradients
+				/>
+			);
+
+			await user.click(
+				screen.getByRole( 'option', { name: 'Gradient: Dark Text' } )
+			);
+
+			expect( onChange ).toHaveBeenCalledWith(
+				GRADIENT_A,
+				1,
+				'dark-text'
+			);
+		} );
+
+		it( 'should pass slug as third argument to onChange for multiple-origin gradients', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			render(
+				<GradientPicker
+					aria-label="Gradient"
+					gradients={ [
+						{
+							name: 'Theme',
+							gradients: [
+								{
+									name: 'Blush',
+									slug: 'blush',
+									gradient: GRADIENT_B,
+								},
+							],
+						},
+					] }
+					value={ undefined }
+					onChange={ onChange }
+					disableCustomGradients
+				/>
+			);
+
+			await user.click(
+				screen.getByRole( 'option', { name: 'Gradient: Blush' } )
+			);
+
+			// The second argument is the origin index, mirroring the existing
+			// multiple-origin behavior.
+			expect( onChange ).toHaveBeenCalledWith( GRADIENT_B, 0, 'blush' );
+		} );
+	} );
+} );

package/src/gradient-picker/types.ts

@@ -17,10 +17,16 @@ type GradientPickerBaseProps = {
 	 */
 	className?: string;
 	/**
-	 * The function called when a new gradient has been defined. It is passed to
-	 * the `currentGradient` as an argument.
+	 * The function called when a new gradient has been defined. It is passed
+	 * the `currentGradient` as an argument. When a predefined gradient is
+	 * selected, the second argument is its index (or, for multiple-origin
+	 * gradients, the origin index) and the third argument is its slug.
 	 */
-	onChange: ( currentGradient: string | undefined ) => void;
+	onChange: (
+		currentGradient: string | undefined,
+		index?: number,
+		slug?: string
+	) => void;
 	/**
 	 * The current value of the gradient. Pass a css gradient string (See default value for example).
 	 * Optionally pass in a `null` value to specify no gradient is currently selected.
@@ -28,6 +34,19 @@ type GradientPickerBaseProps = {
 	 * @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'
 	 */
 	value?: GradientObject[ 'gradient' ] | null;
+	/**
+	 * The slug of the currently selected predefined gradient.
+	 *
+	 * When set to a non-empty string, selection is determined by slug rather
+	 * than by gradient value, which correctly handles palettes where two
+	 * entries share the same gradient. Entries whose slug does not match will
+	 * not appear selected in this mode, even if their gradient value matches
+	 * `value`.
+	 *
+	 * An empty string is treated the same as `undefined`: selection falls
+	 * back to matching by gradient value.
+	 */
+	selectedSlug?: string;
 	/**
 	 * Whether the palette should have a clearing button or not.
 	 *
@@ -121,7 +140,8 @@ export type PickerProps< TOriginType extends GradientObject | OriginObject > =
 		clearGradient: () => void;
 		onChange: (
 			currentGradient: string | undefined,
-			index: number
+			index: number,
+			slug?: string
 		) => void;
 		actions?: React.ReactNode;
 		gradients: TOriginType[];

package/src/h-stack/test/__snapshots__/index.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`props should render alignment 1`] = `
 <div>

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`props should render correctly 1`] = `
 .emotion-0 {

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`withFilters should display a component overridden by the filter 1`] = `
 <div>

package/src/input-control/index.tsx

@@ -37,7 +37,6 @@ export function UnforwardedInputControl(
 		// Prevent passing legacy props to internal components.
 		__next40pxDefaultSize: _next40pxDefaultSize,
 		__next36pxDefaultSize: _next36pxDefaultSize,
-		__shouldNotWarnDeprecated36pxSize: _shouldNotWarnDeprecated36pxSize,
 		__unstableStateReducer: stateReducer = ( state ) => state,
 		__unstableInputWidth,
 		className,

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

@@ -157,7 +157,6 @@ export const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 		default: '13px',
 		small: '11px',
 		compact: '13px',
-		'__unstable-large': '13px',
 	};
 
 	const fontSize = sizes[ size as Size ] || sizes.default;
@@ -200,13 +199,6 @@ export const getSizeConfig = ( { inputSize: size }: InputProps ) => {
 			paddingLeft: CONFIG.controlPaddingXSmall,
 			paddingRight: CONFIG.controlPaddingXSmall,
 		},
-		'__unstable-large': {
-			height: 40,
-			lineHeight: 1,
-			minHeight: 40,
-			paddingLeft: CONFIG.controlPaddingX,
-			paddingRight: CONFIG.controlPaddingX,
-		},
 	};
 
 	return sizes[ size as Size ] || sizes.default;

package/src/input-control/test/__snapshots__/index.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`InputControl Legacy size support treats __unstable-large the same as default 1`] = `
+Snapshot Diff:
+Compared values have no visual difference.
+`;
+
+exports[`InputControl Legacy size support treats __unstable-large the same as default 2`] = `
+Snapshot Diff:
+Compared values have no visual difference.
+`;

package/src/input-control/test/index.js

@@ -13,6 +13,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import BaseInputControl from '../';
+import InputControlPrefixWrapper from '../input-prefix-wrapper';
 
 const getInput = () => screen.getByTestId( 'input' );
 
@@ -207,4 +208,31 @@ describe( 'InputControl', () => {
 			expect( spyChange ).toHaveBeenLastCalledWith( 'this is meow' );
 		} );
 	} );
+
+	describe( 'Legacy size support', () => {
+		it( 'treats __unstable-large the same as default', () => {
+			const prefix = (
+				<InputControlPrefixWrapper>$</InputControlPrefixWrapper>
+			);
+
+			render( <InputControl label="Test" prefix={ prefix } /> );
+			render(
+				<InputControl
+					label="Test"
+					prefix={ prefix }
+					{ ...{ size: '__unstable-large' } }
+				/>
+			);
+
+			const [ defaultPrefixWrapper, legacyPrefixWrapper ] =
+				screen.getAllByText( '$' );
+			const [ defaultInput, legacyInput ] =
+				screen.getAllByTestId( 'input' );
+
+			expect( legacyPrefixWrapper ).toMatchStyleDiffSnapshot(
+				defaultPrefixWrapper
+			);
+			expect( legacyInput ).toMatchStyleDiffSnapshot( defaultInput );
+		} );
+	} );
 } );

package/src/input-control/types.ts

@@ -23,7 +23,7 @@ export type DragDirection = 'n' | 's' | 'e' | 'w';
 
 export type DragProps = Parameters< Parameters< typeof useDrag >[ 0 ] >[ 0 ];
 
-export type Size = 'default' | 'small' | 'compact' | '__unstable-large';
+export type Size = 'default' | 'small' | 'compact';
 
 interface BaseProps {
 	__unstableInputWidth?: CSSProperties[ 'width' ];
@@ -199,13 +199,6 @@ export interface InputControlProps
 	 * @ignore
 	 */
 	__next40pxDefaultSize?: boolean;
-	/**
-	 * Do not throw a warning for the deprecated 36px default size.
-	 * For internal components of other components that already throw the warning.
-	 *
-	 * @ignore
-	 */
-	__shouldNotWarnDeprecated36pxSize?: boolean;
 	__unstableStateReducer?: InputFieldProps[ 'stateReducer' ];
 }
 

package/src/item-group/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ItemGroup Item should read the value of the size prop from context when the prop is not defined 1`] = `
 Snapshot Diff:

package/src/menu/README.md

@@ -19,8 +19,8 @@ component, and the `Menu.Popover` component.
 
 ### `as`
 
- - Type: `"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 517 more ...`
- - Required: No
+ - Type: `ElementType<any, keyof IntrinsicElements>`
+ - Required: Yes
 
 The HTML element or React component to render the component as.
 

package/src/menu-item/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`MenuItem should match snapshot when all props provided 1`] = `
 <button

package/src/modal/test/index.tsx

@@ -8,6 +8,10 @@ import userEvent from '@testing-library/user-event';
  * WordPress dependencies
  */
 import { useEffect, useState } from '@wordpress/element';
+import {
+	getWpCompatOverlaySlot,
+	useEnableWpCompatOverlaySlot,
+} from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -254,6 +258,44 @@ describe( 'Modal', () => {
 		expect( container ).not.toHaveAttribute( 'aria-hidden' );
 	} );
 
+	it( 'keeps the @wordpress/ui compat overlay slot exposed while open', async () => {
+		const user = userEvent.setup();
+
+		const CompatOverlayDemo = () => {
+			useEnableWpCompatOverlaySlot();
+			useEffect( () => {
+				const slot = getWpCompatOverlaySlot();
+				return () => slot?.remove();
+			}, [] );
+
+			const [ isShown, setIsShown ] = useState( false );
+			return (
+				<>
+					<button onClick={ () => setIsShown( true ) }>
+						Open Modal
+					</button>
+					{ isShown && (
+						<Modal onRequestClose={ () => setIsShown( false ) }>
+							<p>Modal content</p>
+						</Modal>
+					) }
+				</>
+			);
+		};
+
+		const { container } = render( <CompatOverlayDemo /> );
+		// Disable reason: The infrastructure slot has no semantic role.
+		// eslint-disable-next-line testing-library/no-node-access
+		const slot = document.querySelector( '[data-wp-compat-overlay-slot]' );
+
+		await user.click(
+			screen.getByRole( 'button', { name: 'Open Modal' } )
+		);
+
+		expect( container ).toHaveAttribute( 'aria-hidden', 'true' );
+		expect( slot ).toHaveAttribute( 'aria-hidden', 'false' );
+	} );
+
 	it( 'should render `headerActions` React nodes', async () => {
 		render(
 			<Modal

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Notice should match snapshot 1`] = `
 <div>

package/src/number-control/types.ts

@@ -5,14 +5,7 @@ import type { InputControlProps } from '../input-control/types';
 
 export type NumberControlProps = Omit<
 	InputControlProps,
-	| 'isDragEnabled'
-	| 'min'
-	| 'max'
-	| 'required'
-	| 'step'
-	| 'type'
-	| 'value'
-	| '__next40pxDefaultSize'
+	'isDragEnabled' | 'min' | 'max' | 'required' | 'step' | 'type' | 'value'
 > & {
 	/**
 	 * If true, the default `input` HTML arrows will be hidden.
@@ -98,18 +91,4 @@ export type NumberControlProps = Omit<
 	 * The value of the input.
 	 */
 	value?: number | string;
-	/**
-	 * Do not throw a warning for the deprecated 36px default size.
-	 * For internal components of other components that already throw the warning.
-	 *
-	 * @ignore
-	 */
-	__shouldNotWarnDeprecated36pxSize?: boolean;
-	/**
-	 * Start opting into the larger default height that will become the default size in a future version.
-	 *
-	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
-	 * @ignore
-	 */
-	__next40pxDefaultSize?: boolean;
 };

package/src/panel/test/__snapshots__/body.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PanelBody basic rendering should render an empty div with the matching className 1`] = `
 <div>

package/src/panel/test/__snapshots__/header.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PanelHeader basic rendering should render PanelHeader with empty div inside 1`] = `
 <div>