@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

package/src/color-palette/index.tsx

@@ -10,6 +10,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { useInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';
 
@@ -31,7 +32,7 @@ import type {
 	PaletteObject,
 	SinglePaletteProps,
 } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { DropdownProps } from '../dropdown/types';
 import {
 	extractColorNameFromCurrentValue,
@@ -47,7 +48,7 @@ function SinglePalette( {
 	colors,
 	onChange,
 	value,
-	actions,
+	...additionalProps
 }: SinglePaletteProps ) {
 	const colorOptions = useMemo( () => {
 		return colors.map( ( { color, name }, index ) => {
@@ -91,10 +92,10 @@ function SinglePalette( {
 	}, [ colors, value, onChange, clearColor ] );
 
 	return (
-		<CircularOptionPicker
+		<CircularOptionPicker.OptionGroup
 			className={ className }
 			options={ colorOptions }
-			actions={ actions }
+			{ ...additionalProps }
 		/>
 	);
 }
@@ -105,9 +106,10 @@ function MultiplePalettes( {
 	colors,
 	onChange,
 	value,
-	actions,
 	headingLevel,
 }: MultiplePalettesProps ) {
+	const instanceId = useInstanceId( MultiplePalettes, 'color-palette' );
+
 	if ( colors.length === 0 ) {
 		return null;
 	}
@@ -115,9 +117,10 @@ function MultiplePalettes( {
 	return (
 		<VStack spacing={ 3 } className={ className }>
 			{ colors.map( ( { name, colors: colorPalette }, index ) => {
+				const id = `${ instanceId }-${ index }`;
 				return (
 					<VStack spacing={ 2 } key={ index }>
-						<ColorHeading level={ headingLevel }>
+						<ColorHeading id={ id } level={ headingLevel }>
 							{ name }
 						</ColorHeading>
 						<SinglePalette
@@ -127,9 +130,7 @@ function MultiplePalettes( {
 								onChange( newColor, index )
 							}
 							value={ value }
-							actions={
-								colors.length === index + 1 ? actions : null
-							}
+							aria-labelledby={ id }
 						/>
 					</VStack>
 				);
@@ -146,6 +147,10 @@ export function CustomColorPickerDropdown( {
 	const popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(
 		() => ( {
 			shift: true,
+			// Disabling resize as it would otherwise cause the popover to show
+			// scrollbars while dragging the color picker's handle close to the
+			// popover edge.
+			resize: false,
 			...( isRenderedInSidebar
 				? {
 						// When in the sidebar: open to the left (stacking),
@@ -177,6 +182,8 @@ function UnforwardedColorPalette(
 	forwardedRef: ForwardedRef< any >
 ) {
 	const {
+		asButtons,
+		loop,
 		clearable = true,
 		colors = [],
 		disableCustomColors = false,
@@ -185,7 +192,9 @@ function UnforwardedColorPalette(
 		value,
 		__experimentalIsRenderedInSidebar = false,
 		headingLevel = 2,
-		...otherProps
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		...additionalProps
 	} = props;
 	const [ normalizedColorValue, setNormalizedColorValue ] = useState( value );
 
@@ -234,20 +243,47 @@ function UnforwardedColorPalette(
 		: __( 'Custom color picker.' );
 
 	const paletteCommonProps = {
-		clearable,
 		clearColor,
 		onChange,
 		value,
-		actions: !! clearable && (
-			<CircularOptionPicker.ButtonAction onClick={ clearColor }>
-				{ __( 'Clear' ) }
-			</CircularOptionPicker.ButtonAction>
-		),
-		headingLevel,
 	};
 
+	const actions = !! clearable && (
+		<CircularOptionPicker.ButtonAction onClick={ clearColor }>
+			{ __( 'Clear' ) }
+		</CircularOptionPicker.ButtonAction>
+	);
+
+	let metaProps:
+		| { asButtons: false; loop?: boolean; 'aria-label': string }
+		| { asButtons: false; loop?: boolean; 'aria-labelledby': string }
+		| { asButtons: true };
+
+	if ( asButtons ) {
+		metaProps = { asButtons: true };
+	} else {
+		const _metaProps: { asButtons: false; loop?: boolean } = {
+			asButtons: false,
+			loop,
+		};
+
+		if ( ariaLabel ) {
+			metaProps = { ..._metaProps, 'aria-label': ariaLabel };
+		} else if ( ariaLabelledby ) {
+			metaProps = {
+				..._metaProps,
+				'aria-labelledby': ariaLabelledby,
+			};
+		} else {
+			metaProps = {
+				..._metaProps,
+				'aria-label': __( 'Custom color picker.' ),
+			};
+		}
+	}
+
 	return (
-		<VStack spacing={ 3 } ref={ forwardedRef } { ...otherProps }>
+		<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>
 			{ ! disableCustomColors && (
 				<CustomColorPickerDropdown
 					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
@@ -267,6 +303,7 @@ function UnforwardedColorPalette(
 								style={ {
 									background: value,
 								} }
+								type="button"
 							/>
 							<VStack
 								className="components-color-palette__custom-color-text-wrapper"
@@ -275,7 +312,7 @@ function UnforwardedColorPalette(
 								<Truncate className="components-color-palette__custom-color-name">
 									{ value
 										? buttonLabelName
-										: 'No color selected' }
+										: __( 'No color selected' ) }
 								</Truncate>
 								{ /*
 								This `Truncate` is always rendered, even if
@@ -298,17 +335,26 @@ function UnforwardedColorPalette(
 					) }
 				/>
 			) }
-			{ hasMultipleColorOrigins ? (
-				<MultiplePalettes
-					{ ...paletteCommonProps }
-					colors={ colors as PaletteObject[] }
-				/>
-			) : (
-				<SinglePalette
-					{ ...paletteCommonProps }
-					colors={ colors as ColorObject[] }
-				/>
-			) }
+			<CircularOptionPicker
+				{ ...metaProps }
+				actions={ actions }
+				options={
+					hasMultipleColorOrigins ? (
+						<MultiplePalettes
+							{ ...paletteCommonProps }
+							headingLevel={ headingLevel }
+							colors={ colors as PaletteObject[] }
+							value={ value }
+						/>
+					) : (
+						<SinglePalette
+							{ ...paletteCommonProps }
+							colors={ colors as ColorObject[] }
+							value={ value }
+						/>
+					)
+				}
+			/>
 		</VStack>
 	);
 }

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

@@ -29,8 +29,12 @@ const meta: Meta< typeof ColorPalette > = {
 };
 export default meta;
 
-const Template: StoryFn< typeof ColorPalette > = ( { onChange, ...args } ) => {
-	const [ color, setColor ] = useState< string | undefined >();
+const Template: StoryFn< typeof ColorPalette > = ( {
+	onChange,
+	value,
+	...args
+} ) => {
+	const [ color, setColor ] = useState< string | undefined >( value );
 
 	return (
 		<ColorPalette
@@ -53,6 +57,16 @@ Default.args = {
 	],
 };
 
+export const InitialValue = Template.bind( {} );
+InitialValue.args = {
+	colors: [
+		{ name: 'Red', color: '#f00' },
+		{ name: 'White', color: '#fff' },
+		{ name: 'Blue', color: '#00f' },
+	],
+	value: '#00f',
+};
+
 export const MultipleOrigins = Template.bind( {} );
 MultipleOrigins.args = {
 	colors: [

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

@@ -19,10 +19,6 @@ const EXAMPLE_COLORS = [
 ];
 const INITIAL_COLOR = EXAMPLE_COLORS[ 0 ].color;
 
-function getWrappingPopoverElement( element: HTMLElement ) {
-	return element.closest( '.components-popover' );
-}
-
 const ControlledColorPalette = ( {
 	onChange,
 }: {
@@ -43,20 +39,6 @@ const ControlledColorPalette = ( {
 };
 
 describe( 'ColorPalette', () => {
-	it( 'should render a dynamic toolbar of colors', () => {
-		const onChange = jest.fn();
-
-		const { container } = render(
-			<ColorPalette
-				colors={ EXAMPLE_COLORS }
-				value={ INITIAL_COLOR }
-				onChange={ onChange }
-			/>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-
 	it( 'should render three color button options', () => {
 		const onChange = jest.fn();
 
@@ -69,7 +51,7 @@ describe( 'ColorPalette', () => {
 		);
 
 		expect(
-			screen.getAllByRole( 'button', { name: /^Color:/ } )
+			screen.getAllByRole( 'option', { name: /^Color:/ } )
 		).toHaveLength( 3 );
 	} );
 
@@ -86,7 +68,7 @@ describe( 'ColorPalette', () => {
 		);
 
 		await user.click(
-			screen.getByRole( 'button', { name: /^Color:/, pressed: true } )
+			screen.getByRole( 'option', { name: /^Color:/, selected: true } )
 		);
 
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
@@ -108,9 +90,9 @@ describe( 'ColorPalette', () => {
 		// Click the first unpressed button
 		// (i.e. a button representing a color that is not the current color)
 		await user.click(
-			screen.getAllByRole( 'button', {
+			screen.getAllByRole( 'option', {
 				name: /^Color:/,
-				pressed: false,
+				selected: false,
 			} )[ 0 ]
 		);
 
@@ -137,10 +119,26 @@ describe( 'ColorPalette', () => {
 		expect( onChange ).toHaveBeenCalledWith( undefined );
 	} );
 
+	it( 'should render custom color picker', () => {
+		const onChange = jest.fn();
+
+		render(
+			<ColorPalette
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
+				onChange={ onChange }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: /^Custom color picker\./ } )
+		).toBeInTheDocument();
+	} );
+
 	it( 'should allow disabling custom color picker', () => {
 		const onChange = jest.fn();
 
-		const { container } = render(
+		render(
 			<ColorPalette
 				colors={ EXAMPLE_COLORS }
 				disableCustomColors
@@ -149,7 +147,9 @@ describe( 'ColorPalette', () => {
 			/>
 		);
 
-		expect( container ).toMatchSnapshot();
+		expect(
+			screen.queryByRole( 'button', { name: /^Custom color picker\./ } )
+		).not.toBeInTheDocument();
 	} );
 
 	it( 'should render dropdown and its content', async () => {
@@ -188,9 +188,7 @@ describe( 'ColorPalette', () => {
 		const dropdownColorInput = screen.getByLabelText( 'Hex color' );
 
 		await waitFor( () =>
-			expect(
-				getWrappingPopoverElement( dropdownColorInput )
-			).toBePositionedPopover()
+			expect( dropdownColorInput ).toBePositionedPopover()
 		);
 	} );
 
@@ -231,9 +229,9 @@ describe( 'ColorPalette', () => {
 
 		// Click the first unpressed button
 		await user.click(
-			screen.getAllByRole( 'button', {
+			screen.getAllByRole( 'option', {
 				name: /^Color:/,
-				pressed: false,
+				selected: false,
 			} )[ 0 ]
 		);
 
@@ -258,7 +256,11 @@ describe( 'ColorPalette', () => {
 		// Clear the color, confirm that the relative values are cleared/updated.
 		await user.click( screen.getByRole( 'button', { name: 'Clear' } ) );
 		expect( screen.getByText( 'No color selected' ) ).toBeVisible();
-		expect( screen.queryByText( colorName ) ).not.toBeInTheDocument();
+		expect(
+			screen.queryByText( colorName, {
+				selector: '.components-color-palette__custom-color-name',
+			} )
+		).not.toBeInTheDocument();
 		expect( screen.queryByText( colorCode ) ).not.toBeInTheDocument();
 		expect(
 			screen.getByRole( 'button', {

package/src/color-palette/types.ts

@@ -82,10 +82,43 @@ export type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {
 	 * Currently active value.
 	 */
 	value?: string;
+	/**
+	 * Whether the control should present as a set of buttons,
+	 * each with its own tab stop.
+	 *
+	 * @default false
+	 */
+	asButtons?: boolean;
+	/**
+	 * Prevents keyboard interaction from wrapping around.
+	 * Only used when `asButtons` is not true.
+	 *
+	 * @default true
+	 */
+	loop?: boolean;
 	/**
 	 * Whether this is rendered in the sidebar.
 	 *
 	 * @default false
 	 */
 	__experimentalIsRenderedInSidebar?: boolean;
-};
+} & (
+		| {
+				/**
+				 * A label to identify the purpose of the control.
+				 *
+				 * @todo [#54055] Either this or `aria-labelledby` should be required
+				 */
+				'aria-label'?: string;
+				'aria-labelledby'?: never;
+		  }
+		| {
+				/**
+				 * An ID of an element to provide a label for the control.
+				 *
+				 * @todo [#54055] Either this or `aria-label` should be required
+				 */
+				'aria-labelledby'?: string;
+				'aria-label'?: never;
+		  }
+	);

package/src/color-picker/README.md

@@ -5,8 +5,8 @@
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { ColorPicker } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 function Example() {
 	const [color, setColor] = useState();

package/src/color-picker/color-copy-button.tsx

@@ -10,8 +10,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { CopyButton } from './styles';
-import { Text } from '../text';
-import { Tooltip } from '../ui/tooltip';
+import Tooltip from '../tooltip';
 
 import type { ColorCopyButtonProps } from './types';
 
@@ -56,17 +55,14 @@ export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 
 	return (
 		<Tooltip
-			content={
-				<Text color="white">
-					{ copiedColor === color.toHex()
-						? __( 'Copied!' )
-						: __( 'Copy' ) }
-				</Text>
+			delay={ 0 }
+			hideOnClick={ false }
+			text={
+				copiedColor === color.toHex() ? __( 'Copied!' ) : __( 'Copy' )
 			}
-			placement="bottom"
 		>
 			<CopyButton
-				isSmall
+				size="small"
 				ref={ copyRef }
 				icon={ copy }
 				showTooltip={ false }

package/src/color-picker/component.tsx

@@ -10,13 +10,13 @@ import namesPlugin from 'colord/plugins/names';
  * WordPress dependencies
  */
 import { useCallback, useState, useMemo } from '@wordpress/element';
-import { useDebounce } from '@wordpress/compose';
+import { useDebounce, useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { useContextSystem, contextConnect } from '../ui/context';
+import { useContextSystem, contextConnect } from '../context';
 import {
 	ColorfulWrapper,
 	SelectControl,
@@ -49,8 +49,24 @@ const UnconnectedColorPicker = (
 		onChange,
 		defaultValue = '#fff',
 		copyFormat,
+
+		// Context
+		onPickerDragStart,
+		onPickerDragEnd,
 		...divProps
-	} = useContextSystem( props, 'ColorPicker' );
+	} = useContextSystem<
+		ColorPickerProps & {
+			onPickerDragStart?: ( event: MouseEvent ) => void;
+			onPickerDragEnd?: ( event: MouseEvent ) => void;
+		}
+	>( props, 'ColorPicker' );
+
+	const [ containerEl, setContainerEl ] = useState< HTMLElement | null >(
+		null
+	);
+	const containerRef = ( node: HTMLElement | null ) => {
+		setContainerEl( node );
+	};
 
 	// Use a safe default value for the color and remove the possibility of `undefined`.
 	const [ color, setColor ] = useControlledValue( {
@@ -77,11 +93,17 @@ const UnconnectedColorPicker = (
 	);
 
 	return (
-		<ColorfulWrapper ref={ forwardedRef } { ...divProps }>
+		<ColorfulWrapper
+			ref={ useMergeRefs( [ containerRef, forwardedRef ] ) }
+			{ ...divProps }
+		>
 			<Picker
+				containerEl={ containerEl }
 				onChange={ handleChange }
 				color={ safeColordColor }
 				enableAlpha={ enableAlpha }
+				onDragStart={ onPickerDragStart }
+				onDragEnd={ onPickerDragEnd }
 			/>
 			<AuxiliaryColorArtefactWrapper>
 				<AuxiliaryColorArtefactHStackHeader justify="space-between">

package/src/color-picker/hex-input.tsx

@@ -14,7 +14,7 @@ import { __ } from '@wordpress/i18n';
 import { InputControl } from '../input-control';
 import { Text } from '../text';
 import { Spacer } from '../spacer';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { COLORS } from '../utils/colors-values';
 import type { StateReducer } from '../input-control/reducer/state';
 import type { HexInputProps } from './types';

package/src/color-picker/hsl-input.tsx

@@ -3,6 +3,11 @@
  */
 import { colord } from 'colord';
 
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, useMemo } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -10,7 +15,49 @@ import { InputWithSlider } from './input-with-slider';
 import type { HslInputProps } from './types';
 
 export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
-	const { h, s, l, a } = color.toHsl();
+	const colorPropHSLA = useMemo( () => color.toHsl(), [ color ] );
+
+	const [ internalHSLA, setInternalHSLA ] = useState( { ...colorPropHSLA } );
+
+	const isInternalColorSameAsReceivedColor = color.isEqual(
+		colord( internalHSLA )
+	);
+
+	useEffect( () => {
+		if ( ! isInternalColorSameAsReceivedColor ) {
+			// Keep internal HSLA color up to date with the received color prop
+			setInternalHSLA( colorPropHSLA );
+		}
+	}, [ colorPropHSLA, isInternalColorSameAsReceivedColor ] );
+
+	// If the internal color is equal to the received color prop, we can use the
+	// HSLA values from the local state which, compared to the received color prop,
+	// retain more details about the actual H and S values that the user selected,
+	// and thus allow for better UX when interacting with the H and S sliders.
+	const colorValue = isInternalColorSameAsReceivedColor
+		? internalHSLA
+		: colorPropHSLA;
+
+	const updateHSLAValue = (
+		partialNewValue: Partial< typeof colorPropHSLA >
+	) => {
+		const nextOnChangeValue = colord( {
+			...colorValue,
+			...partialNewValue,
+		} );
+
+		// Fire `onChange` only if the resulting color is different from the
+		// current one.
+		// Otherwise, update the internal HSLA color to cause a re-render.
+		if ( ! color.isEqual( nextOnChangeValue ) ) {
+			onChange( nextOnChangeValue );
+		} else {
+			setInternalHSLA( ( prevHSLA ) => ( {
+				...prevHSLA,
+				...partialNewValue,
+			} ) );
+		}
+	};
 
 	return (
 		<>
@@ -19,9 +66,9 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 				max={ 359 }
 				label="Hue"
 				abbreviation="H"
-				value={ h }
+				value={ colorValue.h }
 				onChange={ ( nextH: number ) => {
-					onChange( colord( { h: nextH, s, l, a } ) );
+					updateHSLAValue( { h: nextH } );
 				} }
 			/>
 			<InputWithSlider
@@ -29,16 +76,9 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 				max={ 100 }
 				label="Saturation"
 				abbreviation="S"
-				value={ s }
+				value={ colorValue.s }
 				onChange={ ( nextS: number ) => {
-					onChange(
-						colord( {
-							h,
-							s: nextS,
-							l,
-							a,
-						} )
-					);
+					updateHSLAValue( { s: nextS } );
 				} }
 			/>
 			<InputWithSlider
@@ -46,16 +86,9 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 				max={ 100 }
 				label="Lightness"
 				abbreviation="L"
-				value={ l }
+				value={ colorValue.l }
 				onChange={ ( nextL: number ) => {
-					onChange(
-						colord( {
-							h,
-							s,
-							l: nextL,
-							a,
-						} )
-					);
+					updateHSLAValue( { l: nextL } );
 				} }
 			/>
 			{ enableAlpha && (
@@ -64,16 +97,9 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 					max={ 100 }
 					label="Alpha"
 					abbreviation="A"
-					value={ Math.trunc( 100 * a ) }
+					value={ Math.trunc( 100 * colorValue.a ) }
 					onChange={ ( nextA: number ) => {
-						onChange(
-							colord( {
-								h,
-								s,
-								l,
-								a: nextA / 100,
-							} )
-						);
+						updateHSLAValue( { a: nextA / 100 } );
 					} }
 				/>
 			) }

package/src/color-picker/input-with-slider.tsx

@@ -4,7 +4,7 @@
 import { HStack } from '../h-stack';
 import { Text } from '../text';
 import { Spacer } from '../spacer';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { RangeControl, NumberControlWrapper } from './styles';
 import { COLORS } from '../utils/colors-values';
 import type { InputWithSliderProps } from './types';