@wordpress/components 21.2.0 → 22.0.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

@@ -16,7 +16,7 @@ export type Border = {
 
 export type Color = {
 	name: string;
-	color: CSSProperties[ 'color' ];
+	color: NonNullable< CSSProperties[ 'color' ] >;
 };
 
 export type ColorOrigin = {
@@ -67,6 +67,10 @@ export type LabelProps = {
 
 export type BorderControlProps = ColorProps &
 	LabelProps & {
+		/**
+		 * This controls whether unit selection should be disabled.
+		 */
+		disableUnits?: boolean;
 		/**
 		 * This controls whether to include border style options within the
 		 * `BorderDropdown` sub-component.
@@ -119,12 +123,11 @@ export type BorderControlProps = ColorProps &
 		 */
 		withSlider?: boolean;
 		/**
-		 * Start opting into the larger default height that will become the
-		 * default size in a future version.
+		 * Size of the control.
 		 *
-		 * @default false
+		 * @default 'default'
 		 */
-		__next36pxDefaultSize?: boolean;
+		size?: 'default' | '__unstable-large';
 	};
 
 export type DropdownProps = ColorProps & {
@@ -161,12 +164,11 @@ export type DropdownProps = ColorProps & {
 	 */
 	showDropdownHeader?: boolean;
 	/**
-	 * Start opting into the larger default height that will become the
-	 * default size in a future version.
+	 * Size of the control.
 	 *
-	 * @default false
+	 * @default 'default'
 	 */
-	__next36pxDefaultSize?: boolean;
+	size?: 'default' | '__unstable-large';
 };
 
 export type StylePickerProps = LabelProps & {

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 (

package/src/box-control/stories/index.js

@@ -1,17 +1,12 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import BoxControl from '../';
-import { Flex, FlexBlock } from '../../flex';
 
 export default {
 	title: 'Components (Experimental)/BoxControl',
@@ -37,19 +32,13 @@ function DemoExample( {
 	const [ values, setValues ] = useState( defaultValues );
 
 	return (
-		<Container align="top" gap={ 8 }>
-			<FlexBlock>
-				<Content>
-					<BoxControl
-						label="Padding"
-						values={ values }
-						sides={ sides }
-						onChange={ setValues }
-						splitOnAxis={ splitOnAxis }
-					/>
-				</Content>
-			</FlexBlock>
-		</Container>
+		<BoxControl
+			label="Padding"
+			values={ values }
+			sides={ sides }
+			onChange={ setValues }
+			splitOnAxis={ splitOnAxis }
+		/>
 	);
 }
 
@@ -84,11 +73,3 @@ export const axialControlsWithSingleSide = () => {
 		/>
 	);
 };
-
-const Container = styled( Flex )`
-	max-width: 780px;
-`;
-
-const Content = styled.div`
-	padding: 20px;
-`;