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

package/src/date-time/time-picker/time-input/index.tsx

@@ -113,7 +113,6 @@ export function TimeInput( {
 						className="components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
 						label={ __( 'Hours' ) }
 						hideLabelFromVision
-						__next40pxDefaultSize
 						value={ String(
 							is12Hour ? hours12Format : value.hours
 						).padStart( 2, '0' ) }
@@ -143,7 +142,6 @@ export function TimeInput( {
 						) }
 						label={ __( 'Minutes' ) }
 						hideLabelFromVision
-						__next40pxDefaultSize
 						value={ String( value.minutes ).padStart( 2, '0' ) }
 						step={ 1 }
 						min={ 0 }

package/src/disabled/index.tsx

@@ -1,8 +1,8 @@
-import { disabledStyles } from './styles/disabled-styles';
+import clsx from 'clsx';
 import type { DisabledProps } from './types';
 import type { WordPressComponentProps } from '../context';
-import { useCx } from '../utils';
 import Context from './context';
+import styles from './style.module.scss';
 
 const { Consumer, Provider } = Context;
 
@@ -54,8 +54,6 @@ function Disabled( {
 	isDisabled = true,
 	...props
 }: WordPressComponentProps< DisabledProps, 'div' > ) {
-	const cx = useCx();
-
 	return (
 		<Provider value={ isDisabled }>
 			<div
@@ -63,7 +61,11 @@ function Disabled( {
 				inert={ isDisabled ? 'true' : undefined }
 				className={
 					isDisabled
-						? cx( disabledStyles, className, 'components-disabled' )
+						? clsx(
+								styles.disabled,
+								className,
+								'components-disabled'
+						  )
 						: undefined
 				}
 				{ ...props }

package/src/disabled/style.module.scss

@@ -0,0 +1,15 @@
+.disabled {
+	position: relative;
+	pointer-events: none;
+
+	&::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+	}
+
+	// Also make nested blocks unselectable.
+	* {
+		pointer-events: none;
+	}
+}

package/src/disabled/test/index.tsx

@@ -2,12 +2,13 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import Disabled from '../';
-import userEvent from '@testing-library/user-event';
+import styles from '../style.module.scss';
 
 describe( 'Disabled', () => {
 	const Form = () => (
@@ -24,9 +25,10 @@ describe( 'Disabled', () => {
 			</Disabled>
 		);
 
-		expect( screen.getByTestId( 'disabled-wrapper' ) ).toHaveAttribute(
-			'inert'
-		);
+		const wrapper = screen.getByTestId( 'disabled-wrapper' );
+		expect( wrapper ).toHaveAttribute( 'inert' );
+		expect( wrapper ).toHaveClass( 'components-disabled' );
+		expect( wrapper ).toHaveClass( styles.disabled );
 	} );
 
 	it( 'should cleanly un-disable via reconciliation', () => {

package/src/dropdown-menu/style.scss

@@ -18,7 +18,7 @@
 		outline: none;
 		cursor: var(--wpds-cursor-control);
 		white-space: nowrap;
-		font-weight: $font-weight-regular;
+		font-weight: var(--wpds-typography-font-weight-default);
 
 		&.has-separator {
 			margin-top: 6px;

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

@@ -24,7 +24,7 @@ const meta: Meta< typeof Elevation > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Planned for deprecation. Use [elevation tokens](?path=/docs/foundations-design-language-elevation--page) from `@wordpress/base-styles` instead.',
+			notes: 'Planned for deprecation. Use [`elevation tokens`](?path=/docs/foundations-design-language-elevation--page) from `@wordpress/base-styles` instead.',
 		},
 	},
 };

package/src/elevation/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 active 1`] = `
 .emotion-0 {

package/src/external-link/stories/index.story.tsx

@@ -23,7 +23,7 @@ const meta: Meta< typeof ExternalLink > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Use `Link` from `@wordpress/ui` instead, with the `openInNewTab` prop set.',
+			notes: 'Use [`Link`](?path=/docs/design-system-components-link--docs) from `@wordpress/ui` instead, with the `openInNewTab` prop set.',
 		},
 	},
 };

package/src/external-link/style.scss

@@ -1,16 +1,9 @@
+@use "@wordpress/base-styles/mixins";
+
 .components-external-link {
 	color: var(--wpds-color-foreground-interactive-brand);
 	text-decoration: none;
 
-	// Match the `outset-ring--focus` utility used by `Link` in `@wordpress/ui`.
-	@media not ( prefers-reduced-motion ) {
-		transition: outline 0.1s ease-out;
-	}
-	// Outline width must be kept at 0 even with a transparent color,
-	// or else the outline will be visible in forced-colors mode.
-	outline: 0 solid transparent;
-	outline-offset: 1px;
-
 	&:visited {
 		color: var(--wpds-color-foreground-interactive-brand);
 	}
@@ -21,12 +14,13 @@
 	}
 
 	&:focus {
-		outline:
-			var(--wpds-border-width-focus) solid
-			var(--wpds-color-stroke-focus);
 		// Override style from wp-admin common.css.
 		box-shadow: none;
 		border-radius: 0;
+
+		&:not(:active) {
+			@include mixins.outset-ring__focus();
+		}
 	}
 }
 
@@ -40,5 +34,5 @@
 	line-height: 1;
 	display: inline-block;
 	margin-inline-start: var(--wpds-dimension-padding-xs);
-	font-weight: var(--wpds-typography-font-weight-regular);
+	font-weight: var(--wpds-typography-font-weight-default);
 }

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

@@ -34,7 +34,7 @@ const meta: Meta< typeof Flex > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Planned for deprecation. For use cases not covered by `Stack` from `@wordpress/ui`, write your own CSS.',
+			notes: 'Planned for deprecation. For use cases not covered by [`Stack`](?path=/docs/design-system-components-stack--docs) from `@wordpress/ui`, write your own CSS.',
 		},
 	},
 };

package/src/flex/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`] = `
 <div

package/src/font-size-picker/types.ts

@@ -1,4 +1,9 @@
-export type FontSizePickerProps = {
+import type { ToggleGroupControlProps } from '../toggle-group-control/types';
+
+export type FontSizePickerProps = Pick<
+	ToggleGroupControlProps,
+	'__next40pxDefaultSize' | 'size'
+> & {
 	/**
 	 * If `true`, it will not be possible to choose a custom fontSize. The user
 	 * will be forced to pick one of the pre-defined sizes passed in fontSizes.
@@ -74,20 +79,6 @@ export type FontSizePickerProps = {
 	 * @ignore
 	 */
 	__nextHasNoMarginBottom?: 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;
-	/**
-	 * Size of the control.
-	 *
-	 * @deprecated This prop no longer has any effect.
-	 * @ignore
-	 */
-	size?: 'default' | '__unstable-large';
 };
 
 export type FontSize = {

package/src/form-toggle/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[`FormToggle basic rendering should render a span element with an unchecked checkbox 1`] = `
 <div>

package/src/form-token-field/index.tsx

@@ -25,10 +25,10 @@ import deprecated from '@wordpress/deprecated';
  */
 import Token from './token';
 import TokenInput from './token-input';
-import { TokensAndInputWrapperFlex } from './styles';
 import SuggestionsList from './suggestions-list';
 import type { FormTokenFieldProps, TokenItem } from './types';
-import { FlexItem } from '../flex';
+import { Flex, FlexItem } from '../flex';
+import styles from './style.module.scss';
 import {
 	StyledHelp,
 	StyledLabel,
@@ -826,14 +826,15 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 				onMouseDown={ onContainerTouched }
 				onTouchStart={ onContainerTouched }
 			>
-				<TokensAndInputWrapperFlex
+				<Flex
+					className={ styles[ 'tokens-and-input' ] }
 					justify="flex-start"
 					align="center"
 					gap={ 1 }
 					wrap
 				>
 					{ renderTokensAndInput() }
-				</TokensAndInputWrapperFlex>
+				</Flex>
 				{ isExpanded && (
 					<SuggestionsList
 						instanceId={ instanceId }

package/src/form-token-field/style.module.scss

@@ -0,0 +1,6 @@
+@use "@wordpress/base-styles/mixins" as mixins;
+
+.tokens-and-input {
+	padding: 7px;
+	@include mixins.reset;
+}

package/src/form-token-field/style.scss

@@ -5,7 +5,7 @@
 @use "../utils/theme-variables" as *;
 
 .components-form-token-field__input-container {
-	@include input-control($components-color-accent);
+	@include input-control;
 	width: 100%;
 	padding: 0;
 	cursor: text;
@@ -17,7 +17,7 @@
 	}
 
 	&.is-active {
-		@include input-style__focus($components-color-accent);
+		@include input-style__focus;
 	}
 
 	// Token input

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