@wordpress/components 39.0.0 → 40.1.0

package/src/duotone-picker/duotone-picker.tsx

@@ -4,6 +4,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import ColorListPicker from './color-list-picker';
 import CircularOptionPicker, {
 	getComputeCircularOptionPickerCommonProps,
+	warnIfCircularOptionPickerAsButtonsIsSet,
 } from '../circular-option-picker';
 import { VStack } from '../v-stack';
 import CustomDuotoneBar from './custom-duotone-bar';
@@ -46,6 +47,7 @@ import type { DuotonePickerProps } from './types';
  */
 function DuotonePicker( {
 	asButtons,
+	presentation,
 	loop,
 	clearable = true,
 	unsetable = true,
@@ -54,74 +56,95 @@ function DuotonePicker( {
 	disableCustomColors,
 	disableCustomDuotone,
 	value,
+	selectedSlug,
 	onChange,
 	'aria-label': ariaLabel,
 	'aria-labelledby': ariaLabelledby,
 	...otherProps
 }: DuotonePickerProps ) {
+	warnIfCircularOptionPickerAsButtonsIsSet( 'DuotonePicker', asButtons );
+	const { metaProps, labelProps, resolvedPresentation } =
+		getComputeCircularOptionPickerCommonProps(
+			asButtons,
+			loop,
+			ariaLabel,
+			ariaLabelledby,
+			presentation
+		);
 	const [ defaultDark, defaultLight ] = useMemo(
 		() => getDefaultColors( colorPalette ),
 		[ colorPalette ]
 	);
 
 	const isUnset = value === 'unset';
+	const isUnsetSelected =
+		resolvedPresentation !== 'command-buttons' && isUnset;
 	const unsetOptionLabel = __( 'Unset' );
 
 	const unsetOption = (
 		<CircularOptionPicker.Option
 			key="unset"
 			value="unset"
-			isSelected={ isUnset }
+			isSelected={ isUnsetSelected }
 			tooltipText={ unsetOptionLabel }
 			aria-label={ unsetOptionLabel }
 			className="components-duotone-picker__color-indicator"
 			onClick={ () => {
-				onChange( isUnset ? undefined : 'unset' );
+				onChange( isUnsetSelected ? undefined : 'unset' );
 			} }
 		/>
 	);
 
-	const duotoneOptions = duotonePalette.map( ( { colors, slug, name } ) => {
-		const style = {
-			background: getGradientFromCSSColors( colors, '135deg' ),
-			color: 'transparent',
-		};
-		const tooltipText =
-			name ??
-			sprintf(
-				// translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
-				__( 'Duotone code: %s' ),
-				slug
-			);
-		const label = name
-			? sprintf(
-					// translators: %s: The name of the option e.g: "Dark grayscale".
-					__( 'Duotone: %s' ),
-					name
-			  )
-			: tooltipText;
-		const isSelected = fastDeepEqual( colors, value );
-
-		return (
-			<CircularOptionPicker.Option
-				key={ slug }
-				value={ colors }
-				isSelected={ isSelected }
-				aria-label={ label }
-				tooltipText={ tooltipText }
-				style={ style }
-				onClick={ () => {
-					onChange( isSelected ? undefined : colors );
-				} }
-			/>
-		);
-	} );
+	const duotoneOptions = duotonePalette.map(
+		( { colors, slug, name }, index ) => {
+			const style = {
+				background: getGradientFromCSSColors( colors, '135deg' ),
+				color: 'transparent',
+			};
+			const tooltipText =
+				name ??
+				sprintf(
+					// translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
+					__( 'Duotone code: %s' ),
+					slug
+				);
+			const label = name
+				? sprintf(
+						// translators: %s: The name of the option e.g: "Dark grayscale".
+						__( 'Duotone: %s' ),
+						name
+				  )
+				: tooltipText;
+			// When a non-empty selectedSlug is provided, selection is decided
+			// strictly by slug, which keeps two presets holding the same
+			// colors apart. Otherwise selection falls back to matching the
+			// colors themselves.
+			const isSelected =
+				resolvedPresentation !== 'command-buttons' &&
+				( selectedSlug
+					? slug === selectedSlug
+					: fastDeepEqual( colors, value ) );
 
-	const { metaProps, labelProps } = getComputeCircularOptionPickerCommonProps(
-		asButtons,
-		loop,
-		ariaLabel,
-		ariaLabelledby
+			return (
+				<CircularOptionPicker.Option
+					key={ slug }
+					value={ colors }
+					isSelected={ isSelected }
+					aria-label={ label }
+					tooltipText={ tooltipText }
+					style={ style }
+					onClick={
+						// Deselecting reports no preset, matching
+						// `ColorPalette` and `GradientPicker`. Passing the slug
+						// back would leave a controlled consumer marking the
+						// swatch as selected after its value had been cleared.
+						isSelected
+							? () => onChange( undefined )
+							: () => onChange( colors, index, slug )
+					}
+				/>
+			);
+		}
 	);
 
 	const options = unsetable
@@ -146,15 +169,17 @@ function DuotonePicker( {
 				)
 			}
 		>
-			<Spacer paddingTop={ options.length === 0 ? 0 : 4 }>
-				<VStack spacing={ 3 }>
-					{ ! disableCustomColors && ! disableCustomDuotone && (
-						<CustomDuotoneBar
-							value={ isUnset ? undefined : value }
-							onChange={ onChange }
-						/>
-					) }
-					{ ! disableCustomDuotone && (
+			{ /* Both controls are hidden when custom duotones are disabled,
+			   so the wrapper would contribute only its padding. */ }
+			{ ! disableCustomDuotone && (
+				<Spacer paddingTop={ options.length === 0 ? 0 : 4 }>
+					<VStack spacing={ 3 }>
+						{ ! disableCustomColors && (
+							<CustomDuotoneBar
+								value={ isUnset ? undefined : value }
+								onChange={ onChange }
+							/>
+						) }
 						<ColorListPicker
 							labels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }
 							colors={ colorPalette }
@@ -178,9 +203,9 @@ function DuotonePicker( {
 								onChange( newValue );
 							} }
 						/>
-					) }
-				</VStack>
-			</Spacer>
+					</VStack>
+				</Spacer>
+			) }
 		</CircularOptionPicker>
 	);
 }

package/src/duotone-picker/stories/duotone-picker.story.tsx

@@ -1,13 +1,16 @@
-import type { Meta, StoryFn } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
 import { useState } from '@wordpress/element';
 import { DuotonePicker } from '..';
-import type { DuotonePickerProps } from '../types';
 
 const meta: Meta< typeof DuotonePicker > = {
 	title: 'Components/DuotonePicker',
 	component: DuotonePicker,
+	args: {
+		onChange: fn(),
+	},
 	argTypes: {
-		onChange: { action: 'onChange' },
+		selectedSlug: { control: false },
 		value: { control: false },
 	},
 	parameters: {
@@ -21,6 +24,8 @@ const meta: Meta< typeof DuotonePicker > = {
 };
 export default meta;
 
+type DuotonePickerStory = StoryObj< typeof DuotonePicker >;
+
 const DUOTONE_PALETTE = [
 	{
 		colors: [ '#8c00b7', '#fcff41' ],
@@ -34,6 +39,22 @@ const DUOTONE_PALETTE = [
 	},
 ];
 
+// Two presets holding the same colors. Adding duotones with the `+` button in
+// the Global Styles palette editor seeds each one from the palette's darkest
+// and lightest colors, so this is the normal case rather than a contrived one.
+const DUPLICATE_DUOTONE_PALETTE = [
+	{
+		colors: [ '#000000', '#ffffff' ],
+		name: 'Dark background',
+		slug: 'dark-background',
+	},
+	{
+		colors: [ '#000000', '#ffffff' ],
+		name: 'Dark text',
+		slug: 'dark-text',
+	},
+];
+
 const COLOR_PALETTE = [
 	{ color: '#ff4747', name: 'Red', slug: 'red' },
 	{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },
@@ -41,23 +62,50 @@ const COLOR_PALETTE = [
 	{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
 ];
 
-const Template: StoryFn< typeof DuotonePicker > = ( { onChange, ...args } ) => {
-	const [ value, setValue ] = useState< DuotonePickerProps[ 'value' ] >();
-
+const Template = ( {
+	onChange,
+	value,
+	selectedSlug,
+	...props
+}: React.ComponentProps< typeof DuotonePicker > ) => {
+	const [ duotone, setDuotone ] =
+		useState< React.ComponentProps< typeof DuotonePicker >[ 'value' ] >(
+			value
+		);
+	const [ slug, setSlug ] = useState< string | undefined >( selectedSlug );
 	return (
 		<DuotonePicker
-			{ ...args }
-			onChange={ ( ...changeArgs ) => {
-				setValue( ...changeArgs );
-				onChange( ...changeArgs );
+			{ ...props }
+			value={ duotone }
+			selectedSlug={ slug }
+			onChange={ ( newValue, index, newSlug ) => {
+				setDuotone( newValue );
+				setSlug( newSlug );
+				onChange?.( newValue, index, newSlug );
 			} }
-			value={ value }
 		/>
 	);
 };
 
-export const Default = Template.bind( {} );
-Default.args = {
-	colorPalette: COLOR_PALETTE,
-	duotonePalette: DUOTONE_PALETTE,
+export const Default: DuotonePickerStory = {
+	render: Template,
+	args: {
+		colorPalette: COLOR_PALETTE,
+		duotonePalette: DUOTONE_PALETTE,
+	},
+};
+
+export const DuplicateDuotones: DuotonePickerStory = {
+	render: Template,
+	args: {
+		colorPalette: COLOR_PALETTE,
+		duotonePalette: DUPLICATE_DUOTONE_PALETTE,
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: 'Two presets can hold the same pair of colors. Selection is tracked by slug, so picking one marks only that preset rather than both.',
+			},
+		},
+	},
 };

package/src/duotone-picker/test/custom-duotone-bar.jsdom.test.tsx

@@ -0,0 +1,117 @@
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import CustomDuotoneBar from '../custom-duotone-bar';
+
+globalThis.wpVitest.mockMatchMedia();
+
+const VALUE = [ '#000000', '#ffffff' ];
+
+describe( 'CustomDuotoneBar', () => {
+	it( 'does not offer to reposition control points, since a duotone has no positions to save', () => {
+		render( <CustomDuotoneBar value={ VALUE } onChange={ vi.fn() } /> );
+
+		const [ firstPoint ] = screen.getAllByRole( 'button', {
+			name: /Gradient control point/,
+		} );
+
+		expect( firstPoint ).toHaveAccessibleDescription(
+			'Press the button to change the color.'
+		);
+		expect(
+			screen.queryByText( /change the gradient position/ )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'ignores arrow keys on a control point', async () => {
+		const user = userEvent.setup();
+		const onChange = vi.fn();
+
+		render( <CustomDuotoneBar value={ VALUE } onChange={ onChange } /> );
+
+		const [ firstPoint ] = screen.getAllByRole( 'button', {
+			name: /Gradient control point/,
+		} );
+		firstPoint.focus();
+		await user.keyboard( '[ArrowRight][ArrowRight][ArrowLeft]' );
+
+		expect( onChange ).not.toHaveBeenCalled();
+	} );
+
+	it( 'ignores dragging a control point', () => {
+		const onChange = vi.fn();
+
+		render( <CustomDuotoneBar value={ VALUE } onChange={ onChange } /> );
+
+		const [ firstPoint ] = screen.getAllByRole( 'button', {
+			name: /Gradient control point/,
+		} );
+
+		fireEvent.mouseDown( firstPoint );
+		fireEvent.mouseMove( window, { clientX: 50 } );
+		fireEvent.mouseUp( window );
+
+		expect( onChange ).not.toHaveBeenCalled();
+	} );
+
+	// The point cannot move, but the keys still have to be consumed. Letting
+	// them bubble would move focus out of the control, which is what the
+	// gradient bar's own `stopPropagation` guards against.
+	it( 'does not let arrow keys bubble out of the control', async () => {
+		const user = userEvent.setup();
+		const onAncestorKeyDown = vi.fn();
+
+		render(
+			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+			<div onKeyDown={ onAncestorKeyDown }>
+				<CustomDuotoneBar value={ VALUE } onChange={ vi.fn() } />
+			</div>
+		);
+
+		const [ firstPoint ] = screen.getAllByRole( 'button', {
+			name: /Gradient control point/,
+		} );
+		firstPoint.focus();
+		await user.keyboard( '[ArrowLeft][ArrowRight]' );
+
+		expect( onAncestorKeyDown ).not.toHaveBeenCalled();
+	} );
+
+	// Disabling positioning must not disable the one thing a duotone control
+	// point can still do.
+	it( 'still opens the color picker when a control point is clicked', async () => {
+		const user = userEvent.setup();
+
+		render( <CustomDuotoneBar value={ VALUE } onChange={ vi.fn() } /> );
+
+		await user.click(
+			screen.getAllByRole( 'button', {
+				name: /Gradient control point/,
+			} )[ 0 ]
+		);
+
+		expect(
+			await screen.findByRole( 'slider', { name: 'Color' } )
+		).toBeVisible();
+	} );
+
+	it( 'still lets other keys bubble', async () => {
+		const user = userEvent.setup();
+		const onAncestorKeyDown = vi.fn();
+
+		render(
+			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+			<div onKeyDown={ onAncestorKeyDown }>
+				<CustomDuotoneBar value={ VALUE } onChange={ vi.fn() } />
+			</div>
+		);
+
+		const [ firstPoint ] = screen.getAllByRole( 'button', {
+			name: /Gradient control point/,
+		} );
+		firstPoint.focus();
+		await user.keyboard( '[Escape]' );
+
+		expect( onAncestorKeyDown ).toHaveBeenCalled();
+	} );
+} );