@wordpress/components 22.0.0 → 23.0.0

package/src/card/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -18,7 +18,7 @@ import {
 describe( 'Card', () => {
 	describe( 'Card component', () => {
 		it( 'should render correctly', () => {
-			const wrapper = render(
+			const { container } = render(
 				<Card>
 					<CardHeader>Card Header</CardHeader>
 					<CardBody>Card Body 1</CardBody>
@@ -34,31 +34,43 @@ describe( 'Card', () => {
 					<CardFooter>Card Footer</CardFooter>
 				</Card>
 			);
-			expect( wrapper ).toMatchSnapshot();
+			expect( container ).toMatchSnapshot();
 		} );
 
 		it( 'should remove borders when the isBorderless prop is true', () => {
-			const { rerender, container } = render(
-				<Card>Code is Poetry</Card>
+			const { rerender } = render(
+				<Card data-testid="card-wrapper">Code is Poetry</Card>
 			);
-			expect( container.firstChild ).not.toHaveStyle(
+
+			expect( screen.getByTestId( 'card-wrapper' ) ).not.toHaveStyle(
 				'box-shadow: none'
 			);
 
-			rerender( <Card isBorderless={ true }>Code is Poetry</Card> );
-			expect( container.firstChild ).toHaveStyle( 'box-shadow: none' );
+			rerender(
+				<Card data-testid="card-wrapper" isBorderless>
+					Code is Poetry
+				</Card>
+			);
+
+			expect( screen.getByTestId( 'card-wrapper' ) ).toHaveStyle(
+				'box-shadow: none'
+			);
 		} );
 
 		it( 'should add rounded border when the isRounded prop is true', () => {
-			const { container: containerRounded } = render(
-				<Card isRounded={ true }>Code is Poetry</Card>
+			render(
+				<Card data-testid="card-rounded" isRounded>
+					Code is Poetry
+				</Card>
 			);
-			const { container: containerSquared } = render(
-				<Card isRounded={ false }>Code is Poetry</Card>
+			render(
+				<Card data-testid="card-squared" isRounded={ false }>
+					Code is Poetry
+				</Card>
 			);
 			expect(
-				containerRounded.firstElementChild
-			).toMatchStyleDiffSnapshot( containerSquared.firstElementChild );
+				screen.getByTestId( 'card-rounded' )
+			).toMatchStyleDiffSnapshot( screen.getByTestId( 'card-squared' ) );
 		} );
 
 		it( 'should show a box shadow when the elevation prop is greater than 0', () => {
@@ -94,7 +106,7 @@ describe( 'Card', () => {
 		it( 'should warn when the isElevated prop is passed', () => {
 			// `isElevated` is automatically converted to `elevation="2"`
 			const { container } = render(
-				<Card isElevated={ true }>Code is Poetry</Card>
+				<Card isElevated>Code is Poetry</Card>
 			);
 			expect( container ).toMatchSnapshot();
 
@@ -103,7 +115,7 @@ describe( 'Card', () => {
 
 		it( 'should pass the isBorderless and isSize props from its context to its sub-components', () => {
 			const { container: withoutBorderLarge } = render(
-				<Card isBorderless={ true } size="large">
+				<Card isBorderless size="large">
 					<CardHeader>Header</CardHeader>
 					<CardBody>Body</CardBody>
 					<CardFooter>Footer</CardFooter>
@@ -121,14 +133,14 @@ describe( 'Card', () => {
 
 		it( 'should get the isBorderless and isSize props (passed from its context) overriddenwhen the same props is specified directly on the component', () => {
 			const { container: withoutBorder } = render(
-				<Card isBorderless={ true } size="large">
+				<Card isBorderless size="large">
 					<CardHeader>Header</CardHeader>
 					<CardBody>Body</CardBody>
 					<CardFooter>Footer</CardFooter>
 				</Card>
 			);
 			const { container: withBorder } = render(
-				<Card isBorderless={ true } size="large">
+				<Card isBorderless size="large">
 					<CardHeader isBorderless={ false } size="small">
 						Header
 					</CardHeader>
@@ -165,7 +177,7 @@ describe( 'Card', () => {
 			it( 'should render with a darker background color when isShady is true', () => {
 				const { container } = render( <CardHeader>Header</CardHeader> );
 				const { container: containerShady } = render(
-					<CardHeader isShady={ true }>Header</CardHeader>
+					<CardHeader isShady>Header</CardHeader>
 				);
 				expect( container ).toMatchDiffSnapshot( containerShady );
 			} );
@@ -175,7 +187,7 @@ describe( 'Card', () => {
 			it( 'should render with a darker background color when isShady is true', () => {
 				const { container } = render( <CardFooter>Footer</CardFooter> );
 				const { container: containerShady } = render(
-					<CardFooter isShady={ true }>Footer</CardFooter>
+					<CardFooter isShady>Footer</CardFooter>
 				);
 				expect( container ).toMatchDiffSnapshot( containerShady );
 			} );
@@ -193,14 +205,14 @@ describe( 'Card', () => {
 			it( 'should render with a darker background color when isShady is true', () => {
 				const { container } = render( <CardBody>Body</CardBody> );
 				const { container: containerShady } = render(
-					<CardBody isShady={ true }>Body</CardBody>
+					<CardBody isShady>Body</CardBody>
 				);
 				expect( container ).toMatchDiffSnapshot( containerShady );
 			} );
 
 			it( 'should allow scrolling content with the scrollable prop is true', () => {
 				const { container: containerScrollable } = render(
-					<CardBody isScrollable={ true }>Body</CardBody>
+					<CardBody isScrollable>Body</CardBody>
 				);
 				const { container } = render( <CardBody>Body</CardBody> );
 				expect( container ).toMatchDiffSnapshot( containerScrollable );

package/src/checkbox-control/style.scss

@@ -27,7 +27,7 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 	@include reduce-motion("transition");
 
 	&:focus {
-		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus) $components-color-accent;
 
 		// Only visible in Windows High Contrast mode.
 		outline: 2px solid transparent;
@@ -35,8 +35,8 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 
 	&:checked,
 	&:indeterminate {
-		background: var(--wp-admin-theme-color);
-		border-color: var(--wp-admin-theme-color);
+		background: $components-color-accent;
+		border-color: $components-color-accent;
 
 		// Hide default checkbox styles in IE.
 		&::-ms-check {

package/src/circular-option-picker/style.scss

@@ -26,6 +26,7 @@ $color-palette-circle-spacing: 12px;
 	vertical-align: top;
 	transform: scale(1);
 	transition: 100ms transform ease;
+	will-change: transform;
 	@include reduce-motion("transition");
 
 	&:hover {

package/src/color-palette/README.md

@@ -36,6 +36,13 @@ for the `ColorPalette`'s color swatches, by rendering your `ColorPalette` with a
 
 The component accepts the following props.
 
+### `clearable`: `boolean`
+
+Whether the palette should have a clearing button.
+
+-   Required: No
+-   Default: `true`
+
 ### `colors`: `( PaletteObject | ColorObject )[]`
 
 Array with the colors to be shown. When displaying multiple color palettes to choose from, the format of the array changes from an array of colors objects, to an array of color palettes.
@@ -45,21 +52,23 @@ Array with the colors to be shown. When displaying multiple color palettes to ch
 
 ### `disableCustomColors`: `boolean`
 
-Whether to allow the user to pick a custom color on top of the predefined choices (defined via the `colors` prop).
+Whether to allow the user to pick a custom color on top of the predefined
+choices (defined via the `colors` prop).
 
 -   Required: No
 -   Default: `false`
 
 ### `enableAlpha`: `boolean`
 
-Whether the color picker should display the alpha channel both in the bottom inputs as well as in the color picker itself.
+This controls whether the alpha channel will be offered when selecting custom
+colors.
 
 -   Required: No
 -   Default: `false`
 
 ### `value`: `string`
 
-currently active value
+Currently active value.
 
 -   Required: No
 
@@ -68,16 +77,3 @@ currently active value
 Callback called when a color is selected.
 
 -   Required: Yes
-
-### `className`: `string`
-
-classes to be applied to the container.
-
--   Required: No
-
-### `clearable`: `boolean`
-
-Whether the palette should have a clearing button.
-
--   Required: No
--   Default: `true`

package/src/color-palette/index.tsx

@@ -70,7 +70,7 @@ function SinglePalette( {
 					}
 					style={ { backgroundColor: color, color } }
 					onClick={
-						isSelected ? clearColor : () => onChange( color )
+						isSelected ? clearColor : () => onChange( color, index )
 					}
 					aria-label={
 						name
@@ -84,10 +84,6 @@ function SinglePalette( {
 		} );
 	}, [ colors, value, onChange, clearColor ] );
 
-	if ( colors.length === 0 ) {
-		return null;
-	}
-
 	return (
 		<CircularOptionPicker
 			className={ className }
@@ -118,7 +114,9 @@ function MultiplePalettes( {
 						<SinglePalette
 							clearColor={ clearColor }
 							colors={ colorPalette }
-							onChange={ onChange }
+							onChange={ ( newColor ) =>
+								onChange( newColor, index )
+							}
 							value={ value }
 							actions={
 								colors.length === index + 1 ? actions : null
@@ -223,7 +221,7 @@ function UnforwardedColorPalette(
 		clearable = true,
 		colors = [],
 		disableCustomColors = false,
-		enableAlpha,
+		enableAlpha = false,
 		onChange,
 		value,
 		__experimentalHasMultipleOrigins = false,

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

@@ -15,7 +15,6 @@ import { useState } from '@wordpress/element';
 import ColorPalette from '..';
 import Popover from '../../popover';
 import { Provider as SlotFillProvider } from '../../slot-fill';
-import type { ColorObject, PaletteObject } from '../types';
 
 const meta: ComponentMeta< typeof ColorPalette > = {
 	title: 'Components/ColorPalette',
@@ -43,10 +42,7 @@ const Template: ComponentStory< typeof ColorPalette > = ( {
 	onChange,
 	...args
 } ) => {
-	const firstColor =
-		( args.colors as ColorObject[] )[ 0 ].color ||
-		( args.colors as PaletteObject[] )[ 0 ].colors[ 0 ].color;
-	const [ color, setColor ] = useState< string | undefined >( firstColor );
+	const [ color, setColor ] = useState< string | undefined >();
 
 	return (
 		<SlotFillProvider>

package/src/color-palette/style.scss

@@ -25,7 +25,7 @@
 	outline: 1px solid transparent;
 
 	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 		// Show a outline in Windows high contrast mode.
 		outline-width: 2px;
 	}

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

@@ -63,10 +63,10 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
           class="components-circular-option-picker__option-wrapper"
         >
           <button
-            aria-label="Color: white"
+            aria-label="Color: green"
             aria-pressed="false"
             class="components-button components-circular-option-picker__option"
-            style="background-color: rgb(255, 255, 255); color: rgb(255, 255, 255);"
+            style="background-color: rgb(0, 255, 0); color: rgb(0, 255, 0);"
             type="button"
           />
         </div>
@@ -235,10 +235,10 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
           class="components-circular-option-picker__option-wrapper"
         >
           <button
-            aria-label="Color: white"
+            aria-label="Color: green"
             aria-pressed="false"
             class="components-button components-circular-option-picker__option"
-            style="background-color: rgb(255, 255, 255); color: rgb(255, 255, 255);"
+            style="background-color: rgb(0, 255, 0); color: rgb(0, 255, 0);"
             type="button"
           />
         </div>

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, within } from '@testing-library/react';
+import { render, screen, within, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -9,24 +9,25 @@ import userEvent from '@testing-library/user-event';
  */
 import ColorPalette from '..';
 
+const EXAMPLE_COLORS = [
+	{ name: 'red', color: '#f00' },
+	{ name: 'green', color: '#0f0' },
+	{ name: 'blue', color: '#00f' },
+];
+const INITIAL_COLOR = EXAMPLE_COLORS[ 0 ].color;
+
+function getWrappingPopoverElement( element: HTMLElement ) {
+	return element.closest( '.components-popover' );
+}
+
 describe( 'ColorPalette', () => {
-	const colors = [
-		{ name: 'red', color: '#f00' },
-		{ name: 'white', color: '#fff' },
-		{ name: 'blue', color: '#00f' },
-	];
-	const currentColor = '#f00';
-	const onChange = jest.fn();
-
-	beforeEach( () => {
-		onChange.mockClear();
-	} );
+	it( 'should render a dynamic toolbar of colors', () => {
+		const onChange = jest.fn();
 
-	test( 'should render a dynamic toolbar of colors', () => {
 		const { container } = render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
@@ -34,11 +35,13 @@ describe( 'ColorPalette', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	test( 'should render three color button options', () => {
+	it( 'should render three color button options', () => {
+		const onChange = jest.fn();
+
 		render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
@@ -48,15 +51,16 @@ describe( 'ColorPalette', () => {
 		).toHaveLength( 3 );
 	} );
 
-	test( 'should call onClick on an active button with undefined', async () => {
+	it( 'should call onClick on an active button with undefined', async () => {
 		const user = userEvent.setup( {
 			advanceTimers: jest.advanceTimersByTime,
 		} );
+		const onChange = jest.fn();
 
 		render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
@@ -69,19 +73,22 @@ describe( 'ColorPalette', () => {
 		expect( onChange ).toHaveBeenCalledWith( undefined );
 	} );
 
-	test( 'should call onClick on an inactive button', async () => {
+	it( 'should call onClick on an inactive button', async () => {
 		const user = userEvent.setup( {
 			advanceTimers: jest.advanceTimersByTime,
 		} );
+		const onChange = jest.fn();
 
 		render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
 
+		// Click the first unpressed button
+		// (i.e. a button representing a color that is not the current color)
 		await user.click(
 			screen.getAllByRole( 'button', {
 				name: /^Color:/,
@@ -89,19 +96,21 @@ describe( 'ColorPalette', () => {
 			} )[ 0 ]
 		);
 
+		// Expect the green color to have been selected
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
-		expect( onChange ).toHaveBeenCalledWith( '#fff' );
+		expect( onChange ).toHaveBeenCalledWith( EXAMPLE_COLORS[ 1 ].color, 1 );
 	} );
 
-	test( 'should call onClick with undefined, when the clearButton onClick is triggered', async () => {
+	it( 'should call onClick with undefined, when the clearButton onClick is triggered', async () => {
 		const user = userEvent.setup( {
 			advanceTimers: jest.advanceTimersByTime,
 		} );
+		const onChange = jest.fn();
 
 		render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
@@ -112,12 +121,14 @@ describe( 'ColorPalette', () => {
 		expect( onChange ).toHaveBeenCalledWith( undefined );
 	} );
 
-	test( 'should allow disabling custom color picker', () => {
+	it( 'should allow disabling custom color picker', () => {
+		const onChange = jest.fn();
+
 		const { container } = render(
 			<ColorPalette
-				colors={ colors }
+				colors={ EXAMPLE_COLORS }
 				disableCustomColors
-				value={ currentColor }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
@@ -125,15 +136,16 @@ describe( 'ColorPalette', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	test( 'should render dropdown and its content', async () => {
+	it( 'should render dropdown and its content', async () => {
 		const user = userEvent.setup( {
 			advanceTimers: jest.advanceTimersByTime,
 		} );
+		const onChange = jest.fn();
 
 		render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
@@ -153,12 +165,48 @@ describe( 'ColorPalette', () => {
 		expect( dropdownButton ).toBeVisible();
 
 		expect(
-			within( dropdownButton ).getByText( colors[ 0 ].name )
+			within( dropdownButton ).getByText( EXAMPLE_COLORS[ 0 ].name )
 		).toBeVisible();
+
 		expect(
 			within( dropdownButton ).getByText(
-				colors[ 0 ].color.replace( '#', '' )
+				EXAMPLE_COLORS[ 0 ].color.replace( '#', '' )
 			)
 		).toBeVisible();
+
+		// Check that the popover with custom color input has appeared.
+		const dropdownColorInput = screen.getByLabelText( 'Hex color' );
+
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( dropdownColorInput )
+			).toBePositionedPopover()
+		);
+	} );
+
+	it( 'should show the clear button by default', () => {
+		const onChange = jest.fn();
+
+		render(
+			<ColorPalette
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
+				onChange={ onChange }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: 'Clear' } )
+		).toBeInTheDocument();
+	} );
+
+	it( 'should show the clear button even when `colors` is an empty array', () => {
+		const onChange = jest.fn();
+
+		render( <ColorPalette colors={ [] } onChange={ onChange } /> );
+
+		expect(
+			screen.getByRole( 'button', { name: 'Clear' } )
+		).toBeInTheDocument();
 	} );
 } );

package/src/color-palette/types.ts

@@ -3,7 +3,10 @@
  */
 import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
 
-type OnColorChange = ( newColor?: string ) => void;
+/**
+ * Internal dependencies
+ */
+import type { PopoverProps } from '../popover/types';
 
 export type ColorObject = {
 	name: string;
@@ -18,7 +21,10 @@ export type PaletteObject = {
 type PaletteProps = {
 	className?: string;
 	clearColor: () => void;
-	onChange: OnColorChange;
+	/**
+	 * Callback called when a color is selected.
+	 */
+	onChange: ( newColor?: string, index?: number ) => void;
 	value?: string;
 	actions?: ReactNode;
 };
@@ -35,14 +41,14 @@ export type MultiplePalettesProps = PaletteProps & {
 export type CustomColorPickerDropdownProps = {
 	isRenderedInSidebar: boolean;
 	renderContent: () => ReactNode;
-	popoverProps?: string[];
+	popoverProps?: Omit< PopoverProps, 'children' >;
 	renderToggle: ( props: {
 		isOpen: boolean;
 		onToggle: MouseEventHandler< HTMLButtonElement >;
 	} ) => ReactNode;
 };
 
-export type ColorPaletteProps = {
+export type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {
 	/**
 	 * Whether the palette should have a clearing button.
 	 *
@@ -65,14 +71,12 @@ export type ColorPaletteProps = {
 	 */
 	disableCustomColors?: boolean;
 	/**
-	 * Whether the color picker should display the alpha channel
-	 * both in the bottom inputs as well as in the color picker itself.
+	 * This controls whether the alpha channel will be offered when selecting
+	 * custom colors.
+	 *
+	 * @default false
 	 */
 	enableAlpha?: boolean;
-	/**
-	 * Callback called when a color is selected.
-	 */
-	onChange: OnColorChange;
 	/**
 	 * Currently active value.
 	 */

package/src/color-picker/README.md

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

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

@@ -25,6 +25,18 @@ export const InputWithSlider = ( {
 	onChange,
 	value,
 }: InputWithSliderProps ) => {
+	const onNumberControlChange = ( newValue?: number | string ) => {
+		if ( ! newValue ) {
+			onChange( 0 );
+			return;
+		}
+		if ( typeof newValue === 'string' ) {
+			onChange( parseInt( newValue, 10 ) );
+			return;
+		}
+		onChange( newValue );
+	};
+
 	return (
 		<HStack spacing={ 4 }>
 			<NumberControlWrapper
@@ -33,8 +45,7 @@ export const InputWithSlider = ( {
 				label={ label }
 				hideLabelFromVision
 				value={ value }
-				// @ts-expect-error TODO: Resolve discrepancy in NumberControl
-				onChange={ onChange }
+				onChange={ onNumberControlChange }
 				prefix={
 					<Spacer
 						as={ Text }
@@ -49,6 +60,7 @@ export const InputWithSlider = ( {
 				size="__unstable-large"
 			/>
 			<RangeControl
+				__nextHasNoMarginBottom
 				label={ label }
 				hideLabelFromVision
 				min={ min }

package/src/color-picker/styles.ts

@@ -38,10 +38,6 @@ export const SelectControl = styled( InnerSelectControl )`
 export const RangeControl = styled( InnerRangeControl )`
 	flex: 1;
 	margin-right: ${ space( 2 ) };
-
-	${ StyledField } {
-		margin-bottom: 0;
-	}
 `;
 
 // Make the Hue circle picker not go out of the bar.