@wordpress/components 38.0.0 → 40.0.0

package/src/palette-edit/stories/index.story.tsx

@@ -1,19 +1,8 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
-
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import PaletteEdit from '..';
-import type { Color, Gradient } from '../types';
+import type { Color, Duotone, Gradient, PaletteElement } from '../types';
 
 const meta: Meta< typeof PaletteEdit > = {
 	title: 'Components/PaletteEdit',
@@ -33,27 +22,44 @@ const meta: Meta< typeof PaletteEdit > = {
 export default meta;
 
 const Template: StoryFn< typeof PaletteEdit > = ( args ) => {
-	const { colors, gradients, onChange, ...props } = args;
-	const [ value, setValue ] = useState( gradients || colors );
+	const { colors, gradients, duotones, colorPalette, onChange, ...props } =
+		args;
+	const [ value, setValue ] = useState< PaletteElement[] | undefined >(
+		gradients ?? duotones ?? colors
+	);
+	// The story's `onChange` is a mock shared by all three variants, so it is
+	// called through a single loosely typed reference.
+	const handleChange = ( newValue?: PaletteElement[] ) => {
+		setValue( newValue );
+		( onChange as ( values?: PaletteElement[] ) => void )( newValue );
+	};
+
+	if ( gradients ) {
+		return (
+			<PaletteEdit
+				{ ...props }
+				gradients={ ( value ?? [] ) as Gradient[] }
+				onChange={ handleChange }
+			/>
+		);
+	}
+
+	if ( duotones ) {
+		return (
+			<PaletteEdit
+				{ ...props }
+				duotones={ ( value ?? [] ) as Duotone[] }
+				colorPalette={ colorPalette }
+				onChange={ handleChange }
+			/>
+		);
+	}
 
 	return (
 		<PaletteEdit
-			{ ...( gradients
-				? {
-						gradients: value as Gradient[],
-						onChange: ( newValue?: Gradient[] ) => {
-							setValue( newValue );
-							onChange( newValue );
-						},
-				  }
-				: {
-						colors: value as Color[],
-						onChange: ( newValue?: Color[] ) => {
-							setValue( newValue );
-							onChange( newValue );
-						},
-				  } ) }
 			{ ...props }
+			colors={ ( value ?? [] ) as Color[] }
+			onChange={ handleChange }
 		/>
 	);
 };
@@ -92,3 +98,27 @@ Gradients.args = {
 	paletteLabel: 'Gradients',
 	emptyMessage: 'Gradients are empty',
 };
+
+export const Duotones = Template.bind( {} );
+Duotones.args = {
+	duotones: [
+		{
+			colors: [ '#8c00b7', '#fcff41' ],
+			name: 'Purple and yellow',
+			slug: 'purple-yellow',
+		},
+		{
+			colors: [ '#000097', '#ff4747' ],
+			name: 'Blue and red',
+			slug: 'blue-red',
+		},
+	],
+	colorPalette: [
+		{ color: '#ff4747', name: 'Red', slug: 'red' },
+		{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },
+		{ color: '#000097', name: 'Blue', slug: 'blue' },
+		{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
+	],
+	paletteLabel: 'Duotones',
+	emptyMessage: 'Duotones are empty',
+};

package/src/palette-edit/style.scss

@@ -1,9 +1,11 @@
 @use "@wordpress/base-styles/variables" as *;
 
-.components-palette-edit__popover-gradient-picker {
+.components-palette-edit__popover-gradient-picker,
+.components-palette-edit__popover-duotone-picker {
 	width: 260px;
 	padding: $grid-unit-10;
 }
+
 .components-dropdown-menu__menu {
 	.components-palette-edit__menu-button {
 		width: 100%;

package/src/palette-edit/styles.ts

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
 import Button from '../button';
 import { Heading } from '../heading';
 import { space } from '../utils/space';

package/src/palette-edit/test/index.tsx

@@ -1,12 +1,5 @@
-/**
- * External dependencies
- */
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, within } from '@testing-library/react';
 import { click, type, press } from '@ariakit/test';
-
-/**
- * Internal dependencies
- */
 import PaletteEdit, {
 	getNameAndSlugForPosition,
 	deduplicateElementSlugs,
@@ -98,6 +91,47 @@ describe( 'getNameAndSlugForPosition', () => {
 			slug: 'test-color-151',
 		} );
 	} );
+
+	test( 'should return a duotone name and slug for the duotone variant', () => {
+		const slugPrefix = 'custom-';
+		const elements: PaletteElement[] = [];
+
+		expect(
+			getNameAndSlugForPosition( elements, slugPrefix, 'duotone' )
+		).toEqual( {
+			name: 'Duotone 1',
+			slug: 'custom-duotone-1',
+		} );
+	} );
+
+	test( 'should increment the duotone slug id independently of colors', () => {
+		const slugPrefix = 'custom-';
+		const elements = [
+			{
+				slug: 'custom-duotone-1',
+				colors: [ '#000000', '#ffffff' ],
+				name: 'Duotone 1',
+			},
+			{
+				slug: 'custom-duotone-4',
+				colors: [ '#8c00b7', '#fcff41' ],
+				name: 'Duotone 4',
+			},
+			// A color preset sharing the prefix must not affect the count.
+			{
+				slug: 'custom-color-99',
+				color: '#ffffff',
+				name: 'Color 99',
+			},
+		];
+
+		expect(
+			getNameAndSlugForPosition( elements, slugPrefix, 'duotone' )
+		).toEqual( {
+			name: 'Duotone 5',
+			slug: 'custom-duotone-5',
+		} );
+	} );
 } );
 
 describe( 'deduplicateElementSlugs', () => {
@@ -171,6 +205,18 @@ describe( 'PaletteEdit', () => {
 			slug: 'midnight',
 		},
 	];
+	const duotones = [
+		{
+			colors: [ '#8c00b7', '#fcff41' ],
+			name: 'Purple and yellow',
+			slug: 'purple-yellow',
+		},
+		{
+			colors: [ '#000097', '#ff4747' ],
+			name: 'Blue and red',
+			slug: 'blue-red',
+		},
+	];
 
 	it( 'shows heading label', () => {
 		render( <PaletteEdit { ...defaultProps } colors={ colors } /> );
@@ -200,6 +246,80 @@ describe( 'PaletteEdit', () => {
 		).toBeVisible();
 	} );
 
+	it.each( [
+		{
+			name: 'color',
+			props: { colors },
+			buttonName: 'Primary',
+			editorRole: 'textbox' as const,
+			editorName: 'Hex color',
+		},
+		{
+			name: 'gradient',
+			props: { gradients },
+			buttonName: 'Gradient: Pale ocean',
+			editorRole: 'combobox' as const,
+			editorName: 'Type',
+		},
+		{
+			name: 'duotone',
+			props: { duotones, colorPalette: colors },
+			buttonName: 'Duotone: Purple and yellow',
+			editorRole: 'button' as const,
+			editorName: /Shadows/,
+		},
+	] )(
+		'shows $name swatches as named command buttons that open the editor',
+		async ( { props, buttonName, editorRole, editorName } ) => {
+			render( <PaletteEdit { ...defaultProps } { ...props } /> );
+
+			const group = screen.getByRole( 'group', { name: 'Test label' } );
+			const swatch = within( group ).getByRole( 'button', {
+				name: buttonName,
+			} );
+			expect(
+				within( group ).queryByRole( 'listbox' )
+			).not.toBeInTheDocument();
+			expect(
+				within( group ).queryByRole( 'option' )
+			).not.toBeInTheDocument();
+			expect( swatch.tagName ).toBe( 'BUTTON' );
+			expect( swatch ).not.toHaveAttribute( 'aria-pressed' );
+
+			await click( swatch );
+			expect(
+				screen.getByRole( editorRole, { name: editorName } )
+			).toBeVisible();
+		}
+	);
+
+	it( 'tabs between command swatches and opens one with Space', async () => {
+		render( <PaletteEdit { ...defaultProps } colors={ colors } /> );
+
+		const primary = screen.getByRole( 'button', { name: 'Primary' } );
+		const secondary = screen.getByRole( 'button', { name: 'Secondary' } );
+		primary.focus();
+
+		await press.Tab();
+		expect( secondary ).toHaveFocus();
+
+		await press.Space();
+		expect(
+			screen.getByRole( 'textbox', { name: 'Hex color' } )
+		).toBeVisible();
+	} );
+
+	it( 'opens a command swatch with Enter', async () => {
+		render( <PaletteEdit { ...defaultProps } colors={ colors } /> );
+
+		screen.getByRole( 'button', { name: 'Primary' } ).focus();
+		await press.Enter();
+
+		expect(
+			screen.getByRole( 'textbox', { name: 'Hex color' } )
+		).toBeVisible();
+	} );
+
 	it( 'shows empty message', () => {
 		render(
 			<PaletteEdit
@@ -322,6 +442,143 @@ describe( 'PaletteEdit', () => {
 		} );
 	} );
 
+	it( 'calls the `onChange` with the new duotone appended, seeded from the color palette', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				duotones={ duotones }
+				colorPalette={ colors }
+				onChange={ onChange }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Add duotone',
+			} )
+		);
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				...duotones,
+				{
+					// The darkest and lightest colors of `colors`.
+					colors: [ '#0000ff', '#1a4548' ],
+					name: 'Duotone 1',
+					slug: 'duotone-1',
+				},
+			] );
+		} );
+	} );
+
+	it( 'ignores palette colors a duotone cannot be built from when adding one', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				duotones={ duotones }
+				colorPalette={ [
+					...colors,
+					// Twenty Twenty-Five ships a color like this. `colord`
+					// cannot parse it and treats it as black, which would
+					// otherwise win as the duotone's shadow color and produce a
+					// duotone that cannot be rendered.
+					{
+						color: 'color-mix(in srgb, currentColor 20%, transparent)',
+						name: 'Contrast overlay',
+						slug: 'contrast-overlay',
+					},
+				] }
+				onChange={ onChange }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Add duotone',
+			} )
+		);
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				...duotones,
+				{
+					colors: [ '#0000ff', '#1a4548' ],
+					name: 'Duotone 1',
+					slug: 'duotone-1',
+				},
+			] );
+		} );
+	} );
+
+	// The front end parses duotone colors with a PHP port of colord that only
+	// accepts hex, `rgb()` and `hsl()`, so a named color saved as-is would
+	// render in the editor and be dropped on the front end.
+	it( 'normalizes palette colors to hex when adding a duotone', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				duotones={ duotones }
+				colorPalette={ [
+					{ color: 'black', name: 'Black', slug: 'black' },
+					{ color: 'white', name: 'White', slug: 'white' },
+				] }
+				onChange={ onChange }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Add duotone',
+			} )
+		);
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				...duotones,
+				{
+					colors: [ '#000000', '#ffffff' ],
+					name: 'Duotone 1',
+					slug: 'duotone-1',
+				},
+			] );
+		} );
+	} );
+
+	it( 'falls back to black and white when adding a duotone without a color palette', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				duotones={ duotones }
+				onChange={ onChange }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Add duotone',
+			} )
+		);
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				...duotones,
+				{
+					colors: [ '#000', '#fff' ],
+					name: 'Duotone 1',
+					slug: 'duotone-1',
+				},
+			] );
+		} );
+	} );
+
 	it( 'can not add new colors when `canOnlyChangeValues` is enabled', () => {
 		render( <PaletteEdit { ...defaultProps } canOnlyChangeValues /> );
 
@@ -468,4 +725,114 @@ describe( 'PaletteEdit', () => {
 			] );
 		} );
 	} );
+
+	it( 'can update duotone palette value', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				duotones={ duotones }
+				colorPalette={ colors }
+				onChange={ onChange }
+			/>
+		);
+
+		await click( screen.getByLabelText( 'Duotone: Blue and red' ) );
+		await click( screen.getByRole( 'button', { name: /Shadows/ } ) );
+		await click( screen.getByRole( 'option', { name: 'Primary' } ) );
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				duotones[ 0 ],
+				{
+					...duotones[ 1 ],
+					colors: [ '#1a4548', duotones[ 1 ].colors[ 1 ] ],
+				},
+			] );
+		} );
+	} );
+
+	// The same filtering and normalization that applies when adding a duotone
+	// has to apply when editing one, or the shadows and highlights picker can
+	// offer a color the saved duotone cannot be built from.
+	it( 'hides unusable colors and saves named ones as hex when editing a duotone', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				duotones={ duotones }
+				colorPalette={ [
+					{
+						color: 'black',
+						name: 'Named black',
+						slug: 'named-black',
+					},
+					{
+						color: 'color-mix(in srgb, currentColor 20%, transparent)',
+						name: 'Contrast overlay',
+						slug: 'contrast-overlay',
+					},
+				] }
+				onChange={ onChange }
+			/>
+		);
+
+		await click( screen.getByLabelText( 'Duotone: Blue and red' ) );
+		await click( screen.getByRole( 'button', { name: /Shadows/ } ) );
+
+		// The unusable color must not be offered at all.
+		expect(
+			screen.queryByRole( 'option', { name: 'Contrast overlay' } )
+		).not.toBeInTheDocument();
+
+		await click( screen.getByRole( 'option', { name: 'Named black' } ) );
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				duotones[ 0 ],
+				{
+					...duotones[ 1 ],
+					colors: [ '#000000', duotones[ 1 ].colors[ 1 ] ],
+				},
+			] );
+		} );
+	} );
+
+	// Adding two duotones with the `+` button seeds both from the palette's
+	// darkest and lightest colors, so duplicate values are the normal case
+	// rather than an edge one. The duotone that was clicked has to be the one
+	// that gets edited.
+	it( 'updates the clicked duotone when two share the same colors', async () => {
+		const onChange = jest.fn();
+		const twins = [
+			{ colors: [ '#000000', '#ffffff' ], name: 'First', slug: 'first' },
+			{
+				colors: [ '#000000', '#ffffff' ],
+				name: 'Second',
+				slug: 'second',
+			},
+		];
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				duotones={ twins }
+				colorPalette={ colors }
+				onChange={ onChange }
+			/>
+		);
+
+		await click( screen.getByLabelText( 'Duotone: Second' ) );
+		await click( screen.getByRole( 'button', { name: /Shadows/ } ) );
+		await click( screen.getByRole( 'option', { name: 'Primary' } ) );
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				twins[ 0 ],
+				{ ...twins[ 1 ], colors: [ '#1a4548', '#ffffff' ] },
+			] );
+		} );
+	} );
 } );

package/src/palette-edit/types.ts

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import type { Key, MouseEventHandler } from 'react';
-
-/**
- * Internal dependencies
- */
 import type Popover from '../popover';
 import type { HeadingSize } from '../heading/types';
 
@@ -14,6 +7,7 @@ export type Color = {
 	name: string;
 	slug: string;
 	gradient?: never;
+	colors?: never;
 };
 
 export type Gradient = {
@@ -21,9 +15,23 @@ export type Gradient = {
 	name: string;
 	slug: string;
 	color?: never;
+	colors?: never;
+};
+
+export type Duotone = {
+	colors: string[];
+	name: string;
+	slug: string;
+	color?: never;
+	gradient?: never;
 };
 
-export type PaletteElement = Color | Gradient;
+export type PaletteElement = Color | Gradient | Duotone;
+
+/**
+ * The kind of preset a `PaletteEdit` instance is editing.
+ */
+export type PaletteVariant = 'color' | 'gradient' | 'duotone';
 
 export type BasePaletteEdit = {
 	/**
@@ -78,6 +86,8 @@ type PaletteEditColors = {
 	 */
 	onChange: ( values?: Color[] ) => void;
 	gradients?: never;
+	duotones?: never;
+	colorPalette?: never;
 };
 
 type PaletteEditGradients = {
@@ -90,17 +100,40 @@ type PaletteEditGradients = {
 	 */
 	onChange: ( values?: Gradient[] ) => void;
 	colors?: never;
+	duotones?: never;
+	colorPalette?: never;
+};
+
+type PaletteEditDuotones = {
+	/**
+	 * The duotones in the palette.
+	 */
+	duotones: Duotone[];
+	/**
+	 * Runs on changing the value.
+	 */
+	onChange: ( values?: Duotone[] ) => void;
+	/**
+	 * The colors offered when picking the shadows and highlights of a duotone,
+	 * and from which the value of a newly added duotone is derived.
+	 *
+	 * @default []
+	 */
+	colorPalette?: Color[];
+	colors?: never;
+	gradients?: never;
 };
 
 export type PaletteEditProps = BasePaletteEdit &
-	( PaletteEditColors | PaletteEditGradients );
+	( PaletteEditColors | PaletteEditGradients | PaletteEditDuotones );
 
 type EditingElement = number | null;
 
-export type ColorPickerPopoverProps< T extends Color | Gradient > = {
+export type ColorPickerPopoverProps< T extends PaletteElement > = {
 	element: T;
 	onChange: ( newElement: T ) => void;
-	isGradient?: T extends Gradient ? true : false;
+	variant: PaletteVariant;
+	colorPalette?: Color[];
 	onClose?: () => void;
 	popoverProps?: PaletteEditProps[ 'popoverProps' ];
 };
@@ -111,10 +144,11 @@ export type NameInputProps = {
 	value: PaletteElement[ 'name' ];
 };
 
-export type OptionProps< T extends Color | Gradient > = {
+export type OptionProps< T extends PaletteElement > = {
 	element: T;
 	onChange: ( newElement: T ) => void;
-	isGradient: T extends Gradient ? true : false;
+	variant: PaletteVariant;
+	colorPalette?: Color[];
 	canOnlyChangeValues: PaletteEditProps[ 'canOnlyChangeValues' ];
 	key: Key;
 	onRemove: MouseEventHandler< HTMLButtonElement >;
@@ -122,10 +156,11 @@ export type OptionProps< T extends Color | Gradient > = {
 	slugPrefix: string;
 };
 
-export type PaletteEditListViewProps< T extends Color | Gradient > = {
+export type PaletteEditListViewProps< T extends PaletteElement > = {
 	elements: T[];
 	onChange: ( newElements?: T[] ) => void;
-	isGradient: T extends Gradient ? true : false;
+	variant: PaletteVariant;
+	colorPalette?: Color[];
 	canOnlyChangeValues: PaletteEditProps[ 'canOnlyChangeValues' ];
 	addColorRef: React.RefObject< HTMLButtonElement | null >;
 	editingElement?: EditingElement;

package/src/panel/body.tsx

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { useReducedMotion, useMergeRefs } from '@wordpress/compose';
 import { forwardRef, useRef } from '@wordpress/element';
 import { chevronUp, chevronDown } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import type { PanelBodyProps, PanelBodyTitleProps } from './types';
 import type { WordPressComponentProps } from '../context';
 import Button from '../button';

package/src/panel/header.tsx

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import type { PanelHeaderProps } from './types';
 
 /**