@wordpress/components 22.1.0 → 23.1.0

package/src/button/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -76,20 +76,20 @@ describe( 'Button', () => {
 			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-pressed' );
 		} );
 
-		it( 'should render a button element with has-text when children are passed', async () => {
+		it( 'should render a button element with has-text when children are passed', () => {
 			render( <Button icon={ plusCircle }>Children</Button> );
-			await screen.getByRole( 'button' ).focus();
+			act( () => screen.getByRole( 'button' ).focus() );
 			expect( screen.getByRole( 'button' ) ).toHaveClass( 'has-text' );
 		} );
 
-		it( 'should render a button element without has-text when children are not passed', async () => {
+		it( 'should render a button element without has-text when children are not passed', () => {
 			render( <Button icon={ plusCircle }></Button> );
 			expect( screen.getByRole( 'button' ) ).not.toHaveClass(
 				'has-text'
 			);
 		} );
 
-		it( 'should render a button element without has-text when children are empty fragment', async () => {
+		it( 'should render a button element without has-text when children are empty fragment', () => {
 			render(
 				<Button icon={ plusCircle }>
 					<></>
@@ -100,7 +100,7 @@ describe( 'Button', () => {
 			);
 		} );
 
-		it( 'should render a button element without has-text when a button wrapped in Tooltip', async () => {
+		it( 'should render a button element without has-text when a button wrapped in Tooltip', () => {
 			render(
 				<Tooltip text="Help text">
 					<Button icon={ plusCircle } />
@@ -184,10 +184,15 @@ describe( 'Button', () => {
 
 		it( 'should add an aria-label when the label property is used, with Tooltip wrapper', async () => {
 			render( <Button icon={ plusCircle } label="WordPress" /> );
+			// Wait for the `floating-ui` effects in `Tooltip`/`Popover` to finish running
+			// See also: https://floating-ui.com/docs/react-dom#testing
+			await act( () => Promise.resolve() );
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
-			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			await act( () => {
+				screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			} );
 
 			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 		} );
@@ -218,15 +223,18 @@ describe( 'Button', () => {
 					icon={ plusCircle }
 				/>
 			);
+			await act( () => Promise.resolve() );
 
 			expect( screen.queryByText( 'Label' ) ).not.toBeInTheDocument();
 
-			await screen.getByRole( 'button', { name: 'Label' } ).focus();
+			await act( async () => {
+				screen.getByRole( 'button', { name: 'Label' } ).focus();
+			} );
 
 			expect( screen.getByText( 'Label' ) ).toBeVisible();
 		} );
 
-		it( 'should populate tooltip with description content for buttons with visible labels (buttons with children)', () => {
+		it( 'should populate tooltip with description content for buttons with visible labels (buttons with children)', async () => {
 			render(
 				<Button
 					label="Label"
@@ -237,6 +245,7 @@ describe( 'Button', () => {
 					Children
 				</Button>
 			);
+			await act( () => Promise.resolve() );
 
 			expect(
 				screen.getByRole( 'button', {
@@ -245,7 +254,7 @@ describe( 'Button', () => {
 			).toBeVisible();
 		} );
 
-		it( 'should allow tooltip disable', async () => {
+		it( 'should allow tooltip disable', () => {
 			render(
 				<Button
 					icon={ plusCircle }
@@ -259,7 +268,7 @@ describe( 'Button', () => {
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
-			await button.focus();
+			act( () => button.focus() );
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 		} );
@@ -268,15 +277,18 @@ describe( 'Button', () => {
 			render(
 				<Button icon={ plusCircle } label="WordPress" children={ [] } />
 			);
+			await act( () => Promise.resolve() );
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
-			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			await act( async () => {
+				screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			} );
 
 			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 		} );
 
-		it( 'should not show the tooltip when icon and children defined', async () => {
+		it( 'should not show the tooltip when icon and children defined', () => {
 			render(
 				<Button icon={ plusCircle } label="WordPress">
 					Children
@@ -285,7 +297,9 @@ describe( 'Button', () => {
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
-			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			act( () => {
+				screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			} );
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 		} );
@@ -296,10 +310,13 @@ describe( 'Button', () => {
 					Children
 				</Button>
 			);
+			await act( () => Promise.resolve() );
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
-			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			await act( async () => {
+				screen.getByRole( 'button', { name: 'WordPress' } ).focus();
+			} );
 
 			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 		} );

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
@@ -38,27 +38,39 @@ describe( 'Card', () => {
 		} );
 
 		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/test/index.tsx

@@ -15,6 +15,8 @@ import { useState } from '@wordpress/element';
 import BaseCheckboxControl from '..';
 import type { CheckboxControlProps } from '../types';
 
+jest.useFakeTimers();
+
 const noop = () => {};
 
 const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;

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/index.tsx

@@ -32,6 +32,7 @@ import type {
 	SinglePaletteProps,
 } from './types';
 import type { WordPressComponentProps } from '../ui/context';
+import type { DropdownProps } from '../dropdown/types';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
@@ -70,7 +71,7 @@ function SinglePalette( {
 					}
 					style={ { backgroundColor: color, color } }
 					onClick={
-						isSelected ? clearColor : () => onChange( color )
+						isSelected ? clearColor : () => onChange( color, index )
 					}
 					aria-label={
 						name
@@ -84,10 +85,6 @@ function SinglePalette( {
 		} );
 	}, [ colors, value, onChange, clearColor ] );
 
-	if ( colors.length === 0 ) {
-		return null;
-	}
-
 	return (
 		<CircularOptionPicker
 			className={ className }
@@ -118,7 +115,9 @@ function MultiplePalettes( {
 						<SinglePalette
 							clearColor={ clearColor }
 							colors={ colorPalette }
-							onChange={ onChange }
+							onChange={ ( newColor ) =>
+								onChange( newColor, index )
+							}
 							value={ value }
 							actions={
 								colors.length === index + 1 ? actions : null
@@ -136,7 +135,7 @@ export function CustomColorPickerDropdown( {
 	popoverProps: receivedPopoverProps,
 	...props
 }: CustomColorPickerDropdownProps ) {
-	const popoverProps = useMemo(
+	const popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(
 		() => ( {
 			shift: true,
 			...( isRenderedInSidebar
@@ -168,7 +167,7 @@ export function CustomColorPickerDropdown( {
 export const extractColorNameFromCurrentValue = (
 	currentValue?: ColorPaletteProps[ 'value' ],
 	colors: ColorPaletteProps[ 'colors' ] = [],
-	showMultiplePalettes: ColorPaletteProps[ '__experimentalHasMultipleOrigins' ] = false
+	showMultiplePalettes: boolean = false
 ) => {
 	if ( ! currentValue ) {
 		return '';
@@ -226,33 +225,32 @@ function UnforwardedColorPalette(
 		enableAlpha = false,
 		onChange,
 		value,
-		__experimentalHasMultipleOrigins = false,
 		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = props;
 	const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
 
+	const hasMultipleColorOrigins =
+		colors.length > 0 &&
+		( colors as PaletteObject[] )[ 0 ].colors !== undefined;
 	const buttonLabelName = useMemo(
 		() =>
 			extractColorNameFromCurrentValue(
 				value,
 				colors,
-				__experimentalHasMultipleOrigins
+				hasMultipleColorOrigins
 			),
-		[ value, colors, __experimentalHasMultipleOrigins ]
+		[ value, colors, hasMultipleColorOrigins ]
 	);
 
-	// Make sure that the `colors` array has a format (single/multiple) that is
-	// compatible with the `__experimentalHasMultipleOrigins` flag. This is true
-	// when __experimentalHasMultipleOrigins and areColorsMultiplePalette() are
-	// either both `true` or both `false`.
+	// Make sure that the `colors` array has a valid format.
 	if (
 		colors.length > 0 &&
-		__experimentalHasMultipleOrigins !== areColorsMultiplePalette( colors )
+		hasMultipleColorOrigins !== areColorsMultiplePalette( colors )
 	) {
 		// eslint-disable-next-line no-console
 		console.warn(
-			'wp.components.ColorPalette: please specify a format for the `colors` prop that is compatible with the `__experimentalHasMultipleOrigins` prop.'
+			'wp.components.ColorPalette: please specify a valid format for the `colors` prop. '
 		);
 		return null;
 	}
@@ -342,7 +340,7 @@ function UnforwardedColorPalette(
 					) }
 				/>
 			) }
-			{ __experimentalHasMultipleOrigins ? (
+			{ hasMultipleColorOrigins ? (
 				<MultiplePalettes
 					{ ...paletteCommonProps }
 					colors={ colors as PaletteObject[] }

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

@@ -15,19 +15,11 @@ 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',
 	component: ColorPalette,
 	argTypes: {
-		// Removing the control because setting this prop without changing the
-		// format of the `colors` prop can break the component.
-		__experimentalHasMultipleOrigins: {
-			control: {
-				type: null,
-			},
-		},
 		as: { control: { type: null } },
 		onChange: { action: 'onChange', control: { type: null } },
 		value: { control: { type: null } },
@@ -43,10 +35,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>
@@ -73,14 +62,8 @@ Default.args = {
 	],
 };
 
-/**
- * When setting the `__experimentalHasMultipleOrigins` prop to `true`,
- * the `colors` prop is expected to be an array of color palettes, rather
- * than an array of color objects.
- */
 export const MultipleOrigins = Template.bind( {} );
 MultipleOrigins.args = {
-	__experimentalHasMultipleOrigins: true,
 	colors: [
 		{
 			name: 'Primary colors',

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>