@wordpress/components 25.15.0 → 25.16.0

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

@@ -1,13 +1,19 @@
 /**
  * External dependencies
  */
-import { screen, render } from '@testing-library/react';
+import { fireEvent, screen, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import { ColorPicker } from '..';
+import { click } from '@ariakit/test';
 
 const hslaMatcher = expect.objectContaining( {
 	h: expect.any( Number ),
@@ -133,20 +139,39 @@ describe( 'ColorPicker', () => {
 		} );
 	} );
 
-	describe.each( [
-		[ 'hue', 'Hue', '#aad52a' ],
-		[ 'saturation', 'Saturation', '#20dfdf' ],
-		[ 'lightness', 'Lightness', '#95eaea' ],
-	] )( 'HSL inputs', ( colorInput, inputLabel, expected ) => {
-		it( `should fire onChange with the correct value when the ${ colorInput } value is updated`, async () => {
+	describe( 'HSL inputs', () => {
+		it( 'sliders should use accurate H and S values based on user interaction when possible', async () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			const color = '#2ad5d5';
+
+			const ControlledColorPicker = ( {
+				onChange: onChangeProp,
+				...restProps
+			}: React.ComponentProps< typeof ColorPicker > ) => {
+				const [ colorState, setColorState ] = useState( '#000000' );
+
+				const internalOnChange: typeof onChangeProp = ( newColor ) => {
+					onChangeProp?.( newColor );
+					setColorState( newColor );
+				};
+
+				return (
+					<>
+						<ColorPicker
+							{ ...restProps }
+							onChange={ internalOnChange }
+							color={ colorState }
+						/>
+						<button onClick={ () => setColorState( '#4d87ba' ) }>
+							Set color to #4d87ba
+						</button>
+					</>
+				);
+			};
 
 			render(
-				<ColorPicker
+				<ControlledColorPicker
 					onChange={ onChange }
-					color={ color }
 					enableAlpha={ false }
 				/>
 			);
@@ -156,16 +181,165 @@ describe( 'ColorPicker', () => {
 
 			await user.selectOptions( formatSelector, 'hsl' );
 
-			const inputElement = screen.getByRole( 'spinbutton', {
-				name: inputLabel,
+			const hueSliders = screen.getAllByRole( 'slider', {
+				name: 'Hue',
 			} );
-			expect( inputElement ).toBeVisible();
+			expect( hueSliders ).toHaveLength( 2 );
 
-			await user.clear( inputElement );
-			await user.type( inputElement, '75' );
+			// Reason for the `!` post-fix expression operator: if the check above
+			// doesn't fail, we're guaranteed that `hueSlider` is not undefined.
+			const hueSlider = hueSliders.at( -1 )!;
+			const saturationSlider = screen.getByRole( 'slider', {
+				name: 'Saturation',
+			} );
+			const lightnessSlider = screen.getByRole( 'slider', {
+				name: 'Lightness',
+			} );
+			const hueNumberInput = screen.getByRole( 'spinbutton', {
+				name: 'Hue',
+			} );
+			const saturationNumberInput = screen.getByRole( 'spinbutton', {
+				name: 'Saturation',
+			} );
+			const lightnessNumberInput = screen.getByRole( 'spinbutton', {
+				name: 'Lightness',
+			} );
+
+			// All initial inputs should have a value of `0` since the color is black.
+			expect( hueSlider ).toHaveValue( '0' );
+			expect( saturationSlider ).toHaveValue( '0' );
+			expect( lightnessSlider ).toHaveValue( '0' );
+			expect( hueNumberInput ).toHaveValue( 0 );
+			expect( saturationNumberInput ).toHaveValue( 0 );
+			expect( lightnessNumberInput ).toHaveValue( 0 );
+
+			// Interact with the Hue slider, it should change its value (and the
+			// value of the associated number input), but it shouldn't cause the
+			// `onChange` callback to fire, since the resulting color is still black.
+			fireEvent.change( hueSlider, { target: { value: 80 } } );
+
+			expect( hueSlider ).toHaveValue( '80' );
+			expect( hueNumberInput ).toHaveValue( 80 );
+			expect( onChange ).not.toHaveBeenCalled();
+
+			// Interact with the Saturation slider, it should change its value (and the
+			// value of the associated number input), but it shouldn't cause the
+			// `onChange` callback to fire, since the resulting color is still black.
+			fireEvent.change( saturationSlider, { target: { value: 50 } } );
+
+			expect( saturationSlider ).toHaveValue( '50' );
+			expect( saturationNumberInput ).toHaveValue( 50 );
+			expect( onChange ).not.toHaveBeenCalled();
+
+			// Interact with the Lightness slider, it should change its value (and the
+			// value of the associated number input). It should also cause the
+			// `onChange` callback to fire, since changing the lightness actually
+			// causes the color to change.
+			fireEvent.change( lightnessSlider, { target: { value: 30 } } );
 
+			await waitFor( () =>
+				expect( lightnessSlider ).toHaveValue( '30' )
+			);
+			expect( lightnessNumberInput ).toHaveValue( 30 );
+			expect( onChange ).toHaveBeenCalledTimes( 1 );
+			expect( onChange ).toHaveBeenLastCalledWith( '#597326' );
+
+			// Interact with the Lightness slider, setting to 100 (ie. white).
+			// It should also cause the `onChange` callback to fire, and reset the
+			// hue and saturation inputs to `0`.
+			fireEvent.change( lightnessSlider, { target: { value: 100 } } );
+
+			await waitFor( () =>
+				expect( lightnessSlider ).toHaveValue( '100' )
+			);
+			expect( lightnessNumberInput ).toHaveValue( 100 );
+			expect( hueSlider ).toHaveValue( '0' );
+			expect( saturationSlider ).toHaveValue( '0' );
+			expect( hueNumberInput ).toHaveValue( 0 );
+			expect( saturationNumberInput ).toHaveValue( 0 );
+			expect( onChange ).toHaveBeenCalledTimes( 2 );
+			expect( onChange ).toHaveBeenLastCalledWith( '#ffffff' );
+
+			// Interact with the Hue slider, it should change its value (and the
+			// value of the associated number input), but it shouldn't cause the
+			// `onChange` callback to fire, since the resulting color is still white.
+			fireEvent.change( hueSlider, { target: { value: 147 } } );
+
+			expect( hueSlider ).toHaveValue( '147' );
+			expect( hueNumberInput ).toHaveValue( 147 );
+			expect( onChange ).toHaveBeenCalledTimes( 2 );
+
+			// Interact with the Saturation slider, it should change its value (and the
+			// value of the associated number input), but it shouldn't cause the
+			// `onChange` callback to fire, since the resulting color is still white.
+			fireEvent.change( saturationSlider, { target: { value: 82 } } );
+
+			expect( saturationSlider ).toHaveValue( '82' );
+			expect( saturationNumberInput ).toHaveValue( 82 );
+			expect( onChange ).toHaveBeenCalledTimes( 2 );
+
+			// Interact with the Lightness slider, it should change its value (and the
+			// value of the associated number input). It should also cause the
+			// `onChange` callback to fire, since changing the lightness actually
+			// causes the color to change.
+			fireEvent.change( lightnessSlider, { target: { value: 14 } } );
+
+			await waitFor( () =>
+				expect( lightnessSlider ).toHaveValue( '14' )
+			);
+			expect( lightnessNumberInput ).toHaveValue( 14 );
 			expect( onChange ).toHaveBeenCalledTimes( 3 );
-			expect( onChange ).toHaveBeenLastCalledWith( expected );
+			expect( onChange ).toHaveBeenLastCalledWith( '#064121' );
+
+			// Set the color externally. All inputs should update to match the H/S/L
+			// value of the new color.
+			const setColorButton = screen.getByRole( 'button', {
+				name: /set color/i,
+			} );
+			await click( setColorButton );
+
+			expect( hueSlider ).toHaveValue( '208' );
+			expect( hueNumberInput ).toHaveValue( 208 );
+			expect( saturationSlider ).toHaveValue( '44' );
+			expect( saturationNumberInput ).toHaveValue( 44 );
+			expect( lightnessSlider ).toHaveValue( '52' );
+			expect( lightnessNumberInput ).toHaveValue( 52 );
+		} );
+
+		describe.each( [
+			[ 'hue', 'Hue', '#aad52a' ],
+			[ 'saturation', 'Saturation', '#20dfdf' ],
+			[ 'lightness', 'Lightness', '#95eaea' ],
+		] )( 'HSL inputs', ( colorInput, inputLabel, expected ) => {
+			it( `should fire onChange with the correct value when the ${ colorInput } value is updated`, async () => {
+				const user = userEvent.setup();
+				const onChange = jest.fn();
+				const color = '#2ad5d5';
+
+				render(
+					<ColorPicker
+						onChange={ onChange }
+						color={ color }
+						enableAlpha={ false }
+					/>
+				);
+
+				const formatSelector = screen.getByRole( 'combobox' );
+				expect( formatSelector ).toBeVisible();
+
+				await user.selectOptions( formatSelector, 'hsl' );
+
+				const inputElement = screen.getByRole( 'spinbutton', {
+					name: inputLabel,
+				} );
+				expect( inputElement ).toBeVisible();
+
+				await user.clear( inputElement );
+				await user.type( inputElement, '75' );
+
+				expect( onChange ).toHaveBeenCalledTimes( 3 );
+				expect( onChange ).toHaveBeenLastCalledWith( expected );
+			} );
 		} );
 	} );
 } );

package/src/custom-select-control-v2/index.tsx

@@ -49,7 +49,7 @@ export function CustomSelect( {
 	onChange,
 	size = 'default',
 	value,
-	renderSelectedValue = defaultRenderSelectedValue,
+	renderSelectedValue,
 	...props
 }: WordPressComponentProps< CustomSelectProps, 'button', false > ) {
 	const store = Ariakit.useSelectStore( {
@@ -60,6 +60,9 @@ export function CustomSelect( {
 
 	const { value: currentValue } = store.useState();
 
+	const computedRenderSelectedValue =
+		renderSelectedValue ?? defaultRenderSelectedValue;
+
 	return (
 		<>
 			<Styled.CustomSelectLabel store={ store }>
@@ -71,7 +74,7 @@ export function CustomSelect( {
 				hasCustomRenderProp={ !! renderSelectedValue }
 				store={ store }
 			>
-				{ renderSelectedValue( currentValue ) }
+				{ computedRenderSelectedValue( currentValue ) }
 				<Ariakit.SelectArrow />
 			</Styled.CustomSelectButton>
 			<Styled.CustomSelectPopover gutter={ 12 } store={ store } sameWidth>

package/src/mobile/color-settings/palette.screen.native.js

@@ -29,7 +29,6 @@ import { colorsUtils } from './utils';
 import styles from './style.scss';
 
 const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };
-const THEME_PALETTE_NAME = 'Theme';
 
 const PaletteScreen = () => {
 	const route = useRoute();
@@ -48,7 +47,6 @@ const PaletteScreen = () => {
 	const [ currentValue, setCurrentValue ] = useState( colorValue );
 	const isGradientColor = isGradient( currentValue );
 	const selectedSegmentIndex = isGradientColor ? 1 : 0;
-	const allAvailableColors = useMobileGlobalStylesColors();
 
 	const [ currentSegment, setCurrentSegment ] = useState(
 		segments[ selectedSegmentIndex ]
@@ -57,6 +55,10 @@ const PaletteScreen = () => {
 	const currentSegmentColors = ! isGradientSegment
 		? defaultSettings.colors
 		: defaultSettings.gradients;
+	const allAvailableColors = useMobileGlobalStylesColors();
+	const allAvailableGradients = currentSegmentColors
+		.flatMap( ( { gradients } ) => gradients )
+		.filter( Boolean );
 
 	const horizontalSeparatorStyle = usePreferredColorSchemeStyle(
 		styles.horizontalSeparator,
@@ -184,10 +186,10 @@ const PaletteScreen = () => {
 						colors: palette.colors,
 						gradients: palette.gradients,
 						allColors: allAvailableColors,
+						allGradients: allAvailableGradients,
 					};
-					const enableCustomColor =
-						! isGradientSegment &&
-						palette.name === THEME_PALETTE_NAME;
+					// Limit to show the custom indicator to the first available palette
+					const enableCustomColor = paletteKey === 0;
 
 					return (
 						<ColorPalette

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

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { click, type, press } from '@ariakit/test';
 
 /**
  * Internal dependencies
@@ -9,6 +10,17 @@ import { render, fireEvent, screen } from '@testing-library/react';
 import PaletteEdit, { getNameForPosition } from '..';
 import type { PaletteElement } from '../types';
 
+const noop = () => {};
+
+async function clearInput( input: HTMLInputElement ) {
+	await click( input );
+
+	// Press backspace as many times as the input's current value
+	for ( const _ of Array( input.value.length ) ) {
+		await press.Backspace();
+	}
+}
+
 describe( 'getNameForPosition', () => {
 	test( 'should return 1 by default', () => {
 		const slugPrefix = 'test-';
@@ -82,18 +94,322 @@ describe( 'getNameForPosition', () => {
 
 describe( 'PaletteEdit', () => {
 	const defaultProps = {
-		colors: [ { color: '#ffffff', name: 'Base', slug: 'base' } ],
-		onChange: jest.fn(),
 		paletteLabel: 'Test label',
-		emptyMessage: 'Test empty message',
-		canOnlyChangeValues: true,
-		canReset: true,
 		slugPrefix: '',
+		onChange: noop,
 	};
 
-	it( 'opens color selector for color palettes', () => {
-		render( <PaletteEdit { ...defaultProps } /> );
-		fireEvent.click( screen.getByLabelText( 'Color: Base' ) );
-		expect( screen.getByLabelText( 'Hex color' ) ).toBeInTheDocument();
+	const colors = [
+		{ color: '#1a4548', name: 'Primary', slug: 'primary' },
+		{ color: '#0000ff', name: 'Secondary', slug: 'secondary' },
+	];
+	const gradients = [
+		{
+			gradient:
+				'linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)',
+			name: 'Pale ocean',
+			slug: 'pale-ocean',
+		},
+		{
+			gradient:
+				'linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)',
+			name: 'Midnight',
+			slug: 'midnight',
+		},
+	];
+
+	it( 'shows heading label', () => {
+		render( <PaletteEdit { ...defaultProps } colors={ colors } /> );
+
+		const paletteLabel = screen.getByRole( 'heading', {
+			level: 2,
+			name: 'Test label',
+		} );
+
+		expect( paletteLabel ).toBeVisible();
+	} );
+
+	it( 'shows heading label with custom heading level', () => {
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				paletteLabelHeadingLevel={ 5 }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'heading', {
+				level: 5,
+				name: 'Test label',
+			} )
+		).toBeVisible();
+	} );
+
+	it( 'shows empty message', () => {
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				emptyMessage={ 'Test empty message' }
+			/>
+		);
+
+		expect( screen.getByText( 'Test empty message' ) ).toBeVisible();
+	} );
+
+	it( 'shows an option to remove all colors', async () => {
+		render( <PaletteEdit { ...defaultProps } colors={ colors } /> );
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Remove all colors',
+			} )
+		).toBeVisible();
+	} );
+
+	it( 'shows a reset option when the `canReset` prop is enabled', async () => {
+		render(
+			<PaletteEdit { ...defaultProps } colors={ colors } canReset />
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Reset colors',
+			} )
+		).toBeVisible();
+	} );
+
+	it( 'does not show a reset colors option when `canReset` is disabled', async () => {
+		render( <PaletteEdit { ...defaultProps } colors={ colors } /> );
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+		expect(
+			screen.queryByRole( 'button', {
+				name: 'Reset colors',
+			} )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'calls the `onChange` with the new color appended', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				onChange={ onChange }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Add color',
+			} )
+		);
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				...colors,
+				{
+					color: '#000',
+					name: 'Color 1',
+					slug: 'color-1',
+				},
+			] );
+		} );
+	} );
+
+	it( 'calls the `onChange` with the new gradient appended', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				gradients={ gradients }
+				onChange={ onChange }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Add gradient',
+			} )
+		);
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				...gradients,
+				{
+					gradient:
+						'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)',
+					name: 'Color 1',
+					slug: 'color-1',
+				},
+			] );
+		} );
+	} );
+
+	it( 'can not add new colors when `canOnlyChangeValues` is enabled', () => {
+		render( <PaletteEdit { ...defaultProps } canOnlyChangeValues /> );
+
+		expect(
+			screen.queryByRole( 'button', {
+				name: 'Add color',
+			} )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'can remove a color', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				onChange={ onChange }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Show details',
+			} )
+		);
+		await click( screen.getByText( 'Primary' ) );
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Remove color',
+			} )
+		);
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [ colors[ 1 ] ] );
+		} );
+	} );
+
+	it( 'can update palette name', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				onChange={ onChange }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Show details',
+			} )
+		);
+		await click( screen.getByText( 'Primary' ) );
+		const nameInput = screen.getByRole( 'textbox', {
+			name: 'Color name',
+		} );
+
+		await clearInput( nameInput as HTMLInputElement );
+
+		await type( 'Primary Updated' );
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				{
+					...colors[ 0 ],
+					name: 'Primary Updated',
+					slug: 'primary-updated',
+				},
+				colors[ 1 ],
+			] );
+		} );
+	} );
+
+	it( 'can update color palette value', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				onChange={ onChange }
+			/>
+		);
+
+		await click( screen.getByLabelText( 'Color: Primary' ) );
+		const hexInput = screen.getByRole( 'textbox', {
+			name: 'Hex color',
+		} );
+
+		await clearInput( hexInput as HTMLInputElement );
+
+		await type( '000000' );
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				{
+					...colors[ 0 ],
+					color: '#000000',
+				},
+				colors[ 1 ],
+			] );
+		} );
+	} );
+
+	it( 'can update gradient palette value', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				gradients={ gradients }
+				onChange={ onChange }
+			/>
+		);
+
+		await click( screen.getByLabelText( 'Gradient: Pale ocean' ) );
+
+		// Select radial gradient option
+		await click(
+			screen.getByRole( 'combobox', {
+				name: 'Type',
+			} )
+		);
+		await click( screen.getByRole( 'option', { name: 'Radial' } ) );
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				{
+					...gradients[ 0 ],
+					gradient:
+						'radial-gradient(rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)',
+				},
+				gradients[ 1 ],
+			] );
+		} );
 	} );
 } );

package/src/slot-fill/bubbles-virtually/use-slot-fills.ts

@@ -19,6 +19,6 @@ export default function useSlotFills( name: SlotKey ) {
 	const fills = useSnapshot( registry.fills, { sync: true } );
 	// The important bit here is that this call ensures that the hook
 	// only causes a re-render if the "fills" of a given slot name
-	// change change, not any fills.
+	// change, not any fills.
 	return fills.get( name );
 }

package/src/tabs/test/index.tsx

@@ -1260,7 +1260,9 @@ describe( 'Tabs', () => {
 
 				// Tab key should focus the currently selected tab, which is Beta.
 				await press.Tab();
-				expect( await getSelectedTab() ).toHaveFocus();
+				await waitFor( async () =>
+					expect( await getSelectedTab() ).toHaveFocus()
+				);
 
 				rerender(
 					<ControlledTabs

package/src/theme/styles.ts

@@ -30,4 +30,6 @@ export const colorVariables = ( { colors }: ThemeOutputValues ) => {
 	];
 };
 
-export const Wrapper = styled.div``;
+export const Wrapper = styled.div`
+	color: var( --wp-components-color-foreground, currentColor );
+`;