@wordpress/components 21.3.0 → 22.1.0

package/src/border-control/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -22,28 +22,44 @@ const defaultBorder = {
 	width: '1px',
 };
 
-const props = {
-	colors,
-	label: 'Border',
-	onChange: jest.fn().mockImplementation( ( newValue ) => {
-		props.value = newValue;
-	} ),
-	value: defaultBorder,
-};
+function createProps( customProps ) {
+	const props = {
+		colors,
+		label: 'Border',
+		onChange: jest.fn().mockImplementation( ( newValue ) => {
+			props.value = newValue;
+		} ),
+		value: defaultBorder,
+		...customProps,
+	};
+	return props;
+}
 
 const toggleLabelRegex = /Border color( and style)* picker/;
 
-const renderBorderControl = ( customProps ) => {
-	return render( <BorderControl { ...{ ...props, ...customProps } } /> );
+const renderBorderControl = async ( props ) => {
+	const view = render( <BorderControl { ...props } /> );
+	// When the `Popover` component is rendered or updated, the `useFloating`
+	// hook from the `floating-ui` package will schedule a state update in a
+	// promise handler. We need to wait for this promise handler to execute
+	// before checking results. That's what this async `act()` call achieves.
+	// See also: https://floating-ui.com/docs/react-dom#testing
+	await act( () => Promise.resolve() );
+	return view;
 };
 
-const rerenderBorderControl = ( rerender, customProps ) => {
-	return rerender( <BorderControl { ...{ ...props, ...customProps } } /> );
+const rerenderBorderControl = async ( rerender, props ) => {
+	const view = rerender( <BorderControl { ...props } /> );
+	// Same reason to `act()` as in `renderBorderControl` above.
+	await act( () => Promise.resolve() );
+	return view;
 };
 
-const openPopover = () => {
+const openPopover = async () => {
 	const toggleButton = screen.getByLabelText( toggleLabelRegex );
 	fireEvent.click( toggleButton );
+	// Same reason to `act()` as in `renderBorderControl` above.
+	await act( () => Promise.resolve() );
 };
 
 const getButton = ( name ) => {
@@ -67,7 +83,9 @@ const getWidthInput = () => {
 };
 const setWidthInput = ( value ) => {
 	const widthInput = getWidthInput();
-	widthInput.focus();
+	act( () => {
+		widthInput.focus();
+	} );
 	fireEvent.change( widthInput, { target: { value } } );
 };
 
@@ -75,8 +93,9 @@ const clearWidthInput = () => setWidthInput( '' );
 
 describe( 'BorderControl', () => {
 	describe( 'basic rendering', () => {
-		it( 'should render standard border control', () => {
-			renderBorderControl();
+		it( 'should render standard border control', async () => {
+			const props = createProps();
+			await renderBorderControl( props );
 
 			const label = screen.getByText( props.label );
 			const colorButton = screen.getByLabelText( toggleLabelRegex );
@@ -95,8 +114,9 @@ describe( 'BorderControl', () => {
 			expect( slider ).not.toBeInTheDocument();
 		} );
 
-		it( 'should hide label', () => {
-			renderBorderControl( { hideLabelFromVision: true } );
+		it( 'should hide label', async () => {
+			const props = createProps( { hideLabelFromVision: true } );
+			await renderBorderControl( props );
 			const label = screen.getByText( props.label );
 
 			// As visually hidden labels are still included in the document
@@ -108,23 +128,26 @@ describe( 'BorderControl', () => {
 			);
 		} );
 
-		it( 'should render with slider', () => {
-			renderBorderControl( { withSlider: true } );
+		it( 'should render with slider', async () => {
+			const props = createProps( { withSlider: true } );
+			await renderBorderControl( props );
 
 			const slider = getSliderInput();
 			expect( slider ).toBeInTheDocument();
 		} );
 
-		it( 'should render placeholder in UnitControl', () => {
-			renderBorderControl( { placeholder: 'Mixed' } );
-			const widthInput = getWidthInput();
+		it( 'should render placeholder in UnitControl', async () => {
+			const props = createProps( { placeholder: 'Mixed' } );
+			await renderBorderControl( props );
 
+			const widthInput = getWidthInput();
 			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mixed' );
 		} );
 
-		it( 'should render color and style popover', () => {
-			renderBorderControl();
-			openPopover();
+		it( 'should render color and style popover', async () => {
+			const props = createProps();
+			await renderBorderControl( props );
+			await openPopover();
 
 			const customColorPicker = getButton( /Custom color picker/ );
 			const colorSwatchButtons = screen.getAllByRole( 'button', {
@@ -145,9 +168,10 @@ describe( 'BorderControl', () => {
 			expect( resetButton ).toBeInTheDocument();
 		} );
 
-		it( 'should render color and style popover header', () => {
-			renderBorderControl( { showDropdownHeader: true } );
-			openPopover();
+		it( 'should render color and style popover header', async () => {
+			const props = createProps( { showDropdownHeader: true } );
+			await renderBorderControl( props );
+			await openPopover();
 
 			const headerLabel = screen.getByText( 'Border color' );
 			const closeButton = getButton( 'Close border color' );
@@ -156,9 +180,10 @@ describe( 'BorderControl', () => {
 			expect( closeButton ).toBeInTheDocument();
 		} );
 
-		it( 'should not render style options when opted out of', () => {
-			renderBorderControl( { enableStyle: false } );
-			openPopover();
+		it( 'should not render style options when opted out of', async () => {
+			const props = createProps( { enableStyle: false } );
+			await renderBorderControl( props );
+			await openPopover();
 
 			const styleLabel = screen.queryByText( 'Style' );
 			const solidButton = queryButton( 'Solid' );
@@ -174,16 +199,18 @@ describe( 'BorderControl', () => {
 
 	describe( 'color and style picker aria labels', () => {
 		describe( 'with style selection enabled', () => {
-			it( 'should include both color and style in label', () => {
-				renderBorderControl( { value: undefined } );
+			it( 'should include both color and style in label', async () => {
+				const props = createProps( { value: undefined } );
+				await renderBorderControl( props );
 
 				expect(
 					screen.getByLabelText( 'Border color and style picker.' )
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe named color selection', () => {
-				renderBorderControl( { value: { color: '#72aee6' } } );
+			it( 'should correctly describe named color selection', async () => {
+				const props = createProps( { value: { color: '#72aee6' } } );
+				await renderBorderControl( props );
 
 				expect(
 					screen.getByLabelText(
@@ -192,8 +219,9 @@ describe( 'BorderControl', () => {
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe custom color selection', () => {
-				renderBorderControl( { value: { color: '#4b1d80' } } );
+			it( 'should correctly describe custom color selection', async () => {
+				const props = createProps( { value: { color: '#4b1d80' } } );
+				await renderBorderControl( props );
 
 				expect(
 					screen.getByLabelText(
@@ -202,10 +230,11 @@ describe( 'BorderControl', () => {
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe named color and style selections', () => {
-				renderBorderControl( {
+			it( 'should correctly describe named color and style selections', async () => {
+				const props = createProps( {
 					value: { color: '#72aee6', style: 'dotted' },
 				} );
+				await renderBorderControl( props );
 
 				expect(
 					screen.getByLabelText(
@@ -214,10 +243,11 @@ describe( 'BorderControl', () => {
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe custom color and style selections', () => {
-				renderBorderControl( {
+			it( 'should correctly describe custom color and style selections', async () => {
+				const props = createProps( {
 					value: { color: '#4b1d80', style: 'dashed' },
 				} );
+				await renderBorderControl( props );
 
 				expect(
 					screen.getByLabelText(
@@ -228,19 +258,24 @@ describe( 'BorderControl', () => {
 		} );
 
 		describe( 'with style selection disabled', () => {
-			it( 'should only include color in the label', () => {
-				renderBorderControl( { value: undefined, enableStyle: false } );
+			it( 'should only include color in the label', async () => {
+				const props = createProps( {
+					value: undefined,
+					enableStyle: false,
+				} );
+				await renderBorderControl( props );
 
 				expect(
 					screen.getByLabelText( 'Border color picker.' )
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe named color selection', () => {
-				renderBorderControl( {
+			it( 'should correctly describe named color selection', async () => {
+				const props = createProps( {
 					value: { color: '#72aee6' },
 					enableStyle: false,
 				} );
+				await renderBorderControl( props );
 
 				expect(
 					screen.getByLabelText(
@@ -249,11 +284,12 @@ describe( 'BorderControl', () => {
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe custom color selection', () => {
-				renderBorderControl( {
+			it( 'should correctly describe custom color selection', async () => {
+				const props = createProps( {
 					value: { color: '#4b1d80' },
 					enableStyle: false,
 				} );
+				await renderBorderControl( props );
 
 				expect(
 					screen.getByLabelText(
@@ -265,13 +301,9 @@ describe( 'BorderControl', () => {
 	} );
 
 	describe( 'onChange handling', () => {
-		beforeEach( () => {
-			jest.clearAllMocks();
-			props.value = defaultBorder;
-		} );
-
-		it( 'should update width with slider value', () => {
-			const { rerender } = renderBorderControl( { withSlider: true } );
+		it( 'should update width with slider value', async () => {
+			const props = createProps( { withSlider: true } );
+			const { rerender } = await renderBorderControl( props );
 
 			const slider = getSliderInput();
 			fireEvent.change( slider, { target: { value: '5' } } );
@@ -281,15 +313,16 @@ describe( 'BorderControl', () => {
 				width: '5px',
 			} );
 
-			rerenderBorderControl( rerender, { withSlider: true } );
+			await rerenderBorderControl( rerender, props );
 			const widthInput = getWidthInput();
 
 			expect( widthInput.value ).toEqual( '5' );
 		} );
 
-		it( 'should update color selection', () => {
-			renderBorderControl();
-			openPopover();
+		it( 'should update color selection', async () => {
+			const props = createProps();
+			await renderBorderControl( props );
+			await openPopover();
 			clickButton( 'Color: Green' );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
@@ -298,9 +331,10 @@ describe( 'BorderControl', () => {
 			} );
 		} );
 
-		it( 'should clear color selection when toggling swatch off', () => {
-			renderBorderControl();
-			openPopover();
+		it( 'should clear color selection when toggling swatch off', async () => {
+			const props = createProps();
+			await renderBorderControl( props );
+			await openPopover();
 			clickButton( 'Color: Blue' );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
@@ -309,9 +343,10 @@ describe( 'BorderControl', () => {
 			} );
 		} );
 
-		it( 'should update style selection', () => {
-			renderBorderControl();
-			openPopover();
+		it( 'should update style selection', async () => {
+			const props = createProps();
+			await renderBorderControl( props );
+			await openPopover();
 			clickButton( 'Dashed' );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
@@ -320,17 +355,19 @@ describe( 'BorderControl', () => {
 			} );
 		} );
 
-		it( 'should take no action when color and style popover is closed', () => {
-			renderBorderControl( { showDropdownHeader: true } );
-			openPopover();
+		it( 'should take no action when color and style popover is closed', async () => {
+			const props = createProps( { showDropdownHeader: true } );
+			await renderBorderControl( props );
+			await openPopover();
 			clickButton( 'Close border color' );
 
 			expect( props.onChange ).not.toHaveBeenCalled();
 		} );
 
-		it( 'should reset color and style only when popover reset button clicked', () => {
-			renderBorderControl();
-			openPopover();
+		it( 'should reset color and style only when popover reset button clicked', async () => {
+			const props = createProps();
+			await renderBorderControl( props );
+			await openPopover();
 			clickButton( 'Reset to default' );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
@@ -340,23 +377,25 @@ describe( 'BorderControl', () => {
 			} );
 		} );
 
-		it( 'should sanitize border when width and color are undefined', () => {
-			const { rerender } = renderBorderControl();
+		it( 'should sanitize border when width and color are undefined', async () => {
+			const props = createProps();
+			const { rerender } = await renderBorderControl( props );
 			clearWidthInput();
-			rerenderBorderControl( rerender );
-			openPopover();
+			await rerenderBorderControl( rerender, props );
+			await openPopover();
 			clickButton( 'Color: Blue' );
 
 			expect( props.onChange ).toHaveBeenCalledWith( undefined );
 		} );
 
-		it( 'should not sanitize border when requested', () => {
-			const { rerender } = renderBorderControl( {
+		it( 'should not sanitize border when requested', async () => {
+			const props = createProps( {
 				shouldSanitizeBorder: false,
 			} );
+			const { rerender } = await renderBorderControl( props );
 			clearWidthInput();
-			rerenderBorderControl( rerender, { shouldSanitizeBorder: false } );
-			openPopover();
+			await rerenderBorderControl( rerender, props );
+			await openPopover();
 			clickButton( 'Color: Blue' );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 2, {
@@ -366,9 +405,10 @@ describe( 'BorderControl', () => {
 			} );
 		} );
 
-		it( 'should clear color and set style to `none` when setting zero width', () => {
-			renderBorderControl();
-			openPopover();
+		it( 'should clear color and set style to `none` when setting zero width', async () => {
+			const props = createProps();
+			await renderBorderControl( props );
+			await openPopover();
 			clickButton( 'Color: Green' );
 			clickButton( 'Dotted' );
 			setWidthInput( '0' );
@@ -380,13 +420,14 @@ describe( 'BorderControl', () => {
 			} );
 		} );
 
-		it( 'should reselect color and style selections when changing to non-zero width', () => {
-			const { rerender } = renderBorderControl();
-			openPopover();
+		it( 'should reselect color and style selections when changing to non-zero width', async () => {
+			const props = createProps();
+			const { rerender } = await renderBorderControl( props );
+			await openPopover();
 			clickButton( 'Color: Green' );
-			rerenderBorderControl( rerender );
+			await rerenderBorderControl( rerender, props );
 			clickButton( 'Dotted' );
-			rerenderBorderControl( rerender );
+			await rerenderBorderControl( rerender, props );
 			setWidthInput( '0' );
 			setWidthInput( '5' );
 
@@ -397,9 +438,10 @@ describe( 'BorderControl', () => {
 			} );
 		} );
 
-		it( 'should set a non-zero width when applying color to zero width border', () => {
-			const { rerender } = renderBorderControl( { value: undefined } );
-			openPopover();
+		it( 'should set a non-zero width when applying color to zero width border', async () => {
+			const props = createProps( { value: undefined } );
+			const { rerender } = await renderBorderControl( props );
+			await openPopover();
 			clickButton( 'Color: Yellow' );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
@@ -409,7 +451,7 @@ describe( 'BorderControl', () => {
 			} );
 
 			setWidthInput( '0' );
-			rerenderBorderControl( rerender );
+			await rerenderBorderControl( rerender, props );
 			clickButton( 'Color: Green' );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
@@ -419,12 +461,13 @@ describe( 'BorderControl', () => {
 			} );
 		} );
 
-		it( 'should set a non-zero width when applying style to zero width border', () => {
-			const { rerender } = renderBorderControl( {
+		it( 'should set a non-zero width when applying style to zero width border', async () => {
+			const props = createProps( {
 				value: undefined,
 				shouldSanitizeBorder: false,
 			} );
-			openPopover();
+			const { rerender } = await renderBorderControl( props );
+			await openPopover();
 			clickButton( 'Dashed' );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
@@ -434,7 +477,7 @@ describe( 'BorderControl', () => {
 			} );
 
 			setWidthInput( '0' );
-			rerenderBorderControl( rerender, { shouldSanitizeBorder: false } );
+			await rerenderBorderControl( rerender, props );
 			clickButton( 'Dotted' );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {

package/src/border-control/types.ts

@@ -6,6 +6,7 @@ import type { CSSProperties } from 'react';
 /**
  * Internal dependencies
  */
+import type { ColorPaletteProps } from '../color-palette/types';
 import type { PopoverProps } from '../popover/types';
 
 export type Border = {
@@ -14,43 +15,17 @@ export type Border = {
 	width?: CSSProperties[ 'borderWidth' ];
 };
 
-export type Color = {
-	name: string;
-	color: CSSProperties[ 'color' ];
-};
-
-export type ColorOrigin = {
-	name: string;
-	colors: Color[];
-};
-
-export type Colors = ColorOrigin[] | Color[];
-
-export type ColorProps = {
-	/**
-	 * An array of color definitions. This may also be a multi-dimensional array
-	 * where colors are organized by multiple origins.
-	 */
-	colors?: Colors;
+export type ColorProps = Pick<
+	ColorPaletteProps,
+	| 'colors'
+	| 'enableAlpha'
+	| '__experimentalHasMultipleOrigins'
+	| '__experimentalIsRenderedInSidebar'
+> & {
 	/**
 	 * This toggles the ability to choose custom colors.
 	 */
 	disableCustomColors?: boolean;
-	/**
-	 * This controls whether the alpha channel will be offered when selecting
-	 * custom colors.
-	 */
-	enableAlpha?: boolean;
-	/**
-	 * This is passed on to the color related sub-components which need to be
-	 * made aware of whether the colors prop contains multiple origins.
-	 */
-	__experimentalHasMultipleOrigins?: boolean;
-	/**
-	 * This is passed on to the color related sub-components so they may render
-	 * more effectively when used within a sidebar.
-	 */
-	__experimentalIsRenderedInSidebar?: boolean;
 };
 
 export type LabelProps = {
@@ -72,8 +47,7 @@ export type BorderControlProps = ColorProps &
 		 */
 		disableUnits?: boolean;
 		/**
-		 * This controls whether to include border style options within the
-		 * `BorderDropdown` sub-component.
+		 * This controls whether to support border style selection.
 		 *
 		 * @default true
 		 */
@@ -107,6 +81,12 @@ export type BorderControlProps = ColorProps &
 		 * and a close button.
 		 */
 		showDropdownHeader?: boolean;
+		/**
+		 * Size of the control.
+		 *
+		 * @default 'default'
+		 */
+		size?: 'default' | '__unstable-large';
 		/**
 		 * An object representing a border or `undefined`. Used to set the
 		 * current border configuration for this component.
@@ -122,57 +102,38 @@ export type BorderControlProps = ColorProps &
 		 * `RangeControl` for additional control over a border's width.
 		 */
 		withSlider?: boolean;
+	};
+
+export type DropdownProps = ColorProps &
+	Pick< BorderControlProps, 'enableStyle' | 'size' > & {
 		/**
-		 * Start opting into the larger default height that will become the
-		 * default size in a future version.
-		 *
-		 * @default false
+		 * An object representing a border or `undefined`. This component will
+		 * extract the border color and style selections from this object to use as
+		 * values for its popover controls.
+		 */
+		border?: Border;
+		/**
+		 * An internal prop used to control the visibility of the dropdown.
+		 */
+		__unstablePopoverProps?: Omit< PopoverProps, 'children' >;
+		/**
+		 * A callback invoked when the border color or style selections change.
+		 */
+		onChange: ( newBorder?: Border ) => void;
+		/**
+		 * Any previous style selection made by the user. This can be used to
+		 * reapply that previous selection when, for example, a zero border width is
+		 * to a non-zero value.
+		 */
+		previousStyleSelection?: string;
+		/**
+		 * Whether or not to render a header for the border color and style picker
+		 * dropdown. The header includes a label for the color picker and a
+		 * close button.
 		 */
-		__next36pxDefaultSize?: boolean;
+		showDropdownHeader?: boolean;
 	};
 
-export type DropdownProps = ColorProps & {
-	/**
-	 * An object representing a border or `undefined`. This component will
-	 * extract the border color and style selections from this object to use as
-	 * values for its popover controls.
-	 */
-	border?: Border;
-	/**
-	 * An internal prop used to control the visibility of the dropdown.
-	 */
-	__unstablePopoverProps?: Omit< PopoverProps, 'children' >;
-	/**
-	 * This controls whether to render border style options.
-	 *
-	 * @default true
-	 */
-	enableStyle?: boolean;
-	/**
-	 * A callback invoked when the border color or style selections change.
-	 */
-	onChange: ( newBorder?: Border ) => void;
-	/**
-	 * Any previous style selection made by the user. This can be used to
-	 * reapply that previous selection when, for example, a zero border width is
-	 * to a non-zero value.
-	 */
-	previousStyleSelection?: string;
-	/**
-	 * Whether or not to render a header for the border color and style picker
-	 * dropdown. The header includes a label for the color picker and a
-	 * close button.
-	 */
-	showDropdownHeader?: boolean;
-	/**
-	 * Start opting into the larger default height that will become the
-	 * default size in a future version.
-	 *
-	 * @default false
-	 */
-	__next36pxDefaultSize?: boolean;
-};
-
 export type StylePickerProps = LabelProps & {
 	/**
 	 * A callback function invoked when a border style is selected or cleared.

package/src/box-control/README.md

@@ -95,3 +95,17 @@ The `top`, `right`, `bottom`, and `left` box dimension values.
 
 -   Type: `Object`
 -   Required: No
+
+### onMouseOver
+
+A handler for onMouseOver events.
+
+-   Type: `Function`
+-   Required: No
+
+### onMouseOut
+
+A handler for onMouseOut events.
+
+-   Type: `Function`
+-   Required: No

package/src/box-control/index.js

@@ -52,6 +52,8 @@ export default function BoxControl( {
 	splitOnAxis = false,
 	allowReset = true,
 	resetValues = DEFAULT_VALUES,
+	onMouseOver,
+	onMouseOut,
 } ) {
 	const [ values, setValues ] = useControlledState( valuesProp, {
 		fallback: DEFAULT_VALUES,
@@ -114,6 +116,8 @@ export default function BoxControl( {
 		setSelectedUnits,
 		sides,
 		values: inputValues,
+		onMouseOver,
+		onMouseOut,
 	};
 
 	return (