@wordpress/components 21.3.0 → 22.0.0

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

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -48,40 +49,22 @@ const props = {
 const toggleLabelRegex = /Border color( and style)* picker/;
 const colorPickerRegex = /Border color picker/;
 
-const renderBorderBoxControl = ( customProps ) => {
-	return render( <BorderBoxControl { ...{ ...props, ...customProps } } /> );
-};
-
-const clickButton = ( name ) => {
-	fireEvent.click( screen.getByRole( 'button', { name } ) );
-};
-
-const queryButton = ( name ) => {
-	return screen.queryByRole( 'button', { name } );
-};
-
-const updateLinkedWidthInput = ( value ) => {
-	const widthInput = screen.getByRole( 'spinbutton' );
-	widthInput.focus();
-	fireEvent.change( widthInput, { target: { value } } );
-};
-
-const updateSplitWidthInput = ( value, index = 0 ) => {
-	const splitInputs = screen.getAllByRole( 'spinbutton' );
-	splitInputs[ index ].focus();
-	fireEvent.change( splitInputs[ index ], { target: { value } } );
-};
-
 describe( 'BorderBoxControl', () => {
 	describe( 'Linked view rendering', () => {
 		it( 'should render correctly when no value provided', () => {
-			renderBorderBoxControl();
+			render( <BorderBoxControl { ...props } /> );
 
 			const label = screen.getByText( props.label );
 			const colorButton = screen.getByLabelText( toggleLabelRegex );
-			const widthInput = screen.getByRole( 'spinbutton' );
-			const unitSelect = screen.getByRole( 'combobox' );
-			const slider = screen.getByRole( 'slider' );
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Border width',
+			} );
+			const unitSelect = screen.getByRole( 'combobox', {
+				name: 'Select unit',
+			} );
+			const slider = screen.getByRole( 'slider', {
+				name: 'Border width',
+			} );
 			const linkedButton = screen.getByLabelText( 'Unlink sides' );
 
 			expect( label ).toBeInTheDocument();
@@ -94,7 +77,8 @@ describe( 'BorderBoxControl', () => {
 		} );
 
 		it( 'should hide label', () => {
-			renderBorderBoxControl( { hideLabelFromVision: true } );
+			render( <BorderBoxControl { ...props } hideLabelFromVision /> );
+
 			const label = screen.getByText( props.label );
 
 			// As visually hidden labels are still included in the document
@@ -107,62 +91,112 @@ describe( 'BorderBoxControl', () => {
 		} );
 
 		it( 'should show correct width value when flat border value provided', () => {
-			renderBorderBoxControl( { value: defaultBorder } );
-			const widthInput = screen.getByRole( 'spinbutton' );
+			render( <BorderBoxControl { ...props } value={ defaultBorder } /> );
+
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Border width',
+			} );
 
 			expect( widthInput.value ).toBe( '1' );
 		} );
 
 		it( 'should show correct width value when consistent split borders provided', () => {
-			renderBorderBoxControl( { value: defaultBorders } );
-			const widthInput = screen.getByRole( 'spinbutton' );
+			render(
+				<BorderBoxControl { ...props } value={ defaultBorders } />
+			);
+
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Border width',
+			} );
 
 			expect( widthInput.value ).toBe( '1' );
 		} );
 
-		it( 'should render placeholder and omit unit select when border values are mixed', () => {
-			renderBorderBoxControl( { value: mixedBorders } );
+		it( 'should render placeholder and omit unit select when border values are mixed', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render( <BorderBoxControl { ...props } value={ mixedBorders } /> );
 
 			// First render of control with mixed values should show split view.
-			clickButton( 'Link sides' );
+			await user.click(
+				screen.getByRole( 'button', { name: 'Link sides' } )
+			);
 
-			const widthInput = screen.getByRole( 'spinbutton' );
-			const unitSelect = screen.queryByRole( 'combobox' );
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Border width',
+			} );
+			const unitSelect = screen.queryByRole( 'combobox', {
+				name: 'Select unit',
+			} );
 
 			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mixed' );
 			expect( unitSelect ).not.toBeInTheDocument();
 		} );
 
 		it( 'should render shared border width and unit select when switching to linked view', async () => {
-			// Render control with mixed border values but consistent widths.
-			renderBorderBoxControl( {
-				value: {
-					top: { color: 'red', width: '5px', style: 'solid' },
-					right: { color: 'blue', width: '5px', style: 'dashed' },
-					bottom: { color: 'green', width: '5px', style: 'solid' },
-					left: { color: 'yellow', width: '5px', style: 'dotted' },
-				},
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
 			} );
 
+			// Render control with mixed border values but consistent widths.
+			render(
+				<BorderBoxControl
+					{ ...props }
+					value={ {
+						top: { color: 'red', width: '5px', style: 'solid' },
+						right: { color: 'blue', width: '5px', style: 'dashed' },
+						bottom: {
+							color: 'green',
+							width: '5px',
+							style: 'solid',
+						},
+						left: {
+							color: 'yellow',
+							width: '5px',
+							style: 'dotted',
+						},
+					} }
+				/>
+			);
+
 			// First render of control with mixed values should show split view.
-			clickButton( 'Link sides' );
-			const linkedInput = screen.getByRole( 'spinbutton' );
-			const unitSelect = screen.getByRole( 'combobox' );
+			await user.click(
+				screen.getByRole( 'button', { name: 'Link sides' } )
+			);
+
+			const linkedInput = screen.getByRole( 'spinbutton', {
+				name: 'Border width',
+			} );
+			const unitSelect = screen.getByRole( 'combobox', {
+				name: 'Select unit',
+			} );
 
 			expect( linkedInput.value ).toBe( '5' );
 			expect( unitSelect ).toBeInTheDocument();
 		} );
 
-		it( 'should omit style options when requested', () => {
-			renderBorderBoxControl( { enableStyle: false } );
+		it( 'should omit style options when requested', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render( <BorderBoxControl { ...props } enableStyle={ false } /> );
 
 			const colorButton = screen.getByLabelText( colorPickerRegex );
-			fireEvent.click( colorButton );
+			await user.click( colorButton );
 
 			const styleLabel = screen.queryByText( 'Style' );
-			const solidButton = queryButton( 'Solid' );
-			const dashedButton = queryButton( 'Dashed' );
-			const dottedButton = queryButton( 'Dotted' );
+			const solidButton = screen.queryByRole( 'button', {
+				name: 'Solid',
+			} );
+			const dashedButton = screen.queryByRole( 'button', {
+				name: 'Dashed',
+			} );
+			const dottedButton = screen.queryByRole( 'button', {
+				name: 'Dotted',
+			} );
 
 			expect( styleLabel ).not.toBeInTheDocument();
 			expect( solidButton ).not.toBeInTheDocument();
@@ -173,12 +207,18 @@ describe( 'BorderBoxControl', () => {
 
 	describe( 'Split view rendering', () => {
 		it( 'should render split view by default when mixed values provided', () => {
-			renderBorderBoxControl( { value: mixedBorders } );
+			render( <BorderBoxControl { ...props } value={ mixedBorders } /> );
 
 			const colorButtons = screen.getAllByLabelText( toggleLabelRegex );
-			const widthInputs = screen.getAllByRole( 'spinbutton' );
-			const unitSelects = screen.getAllByRole( 'combobox' );
-			const sliders = screen.queryAllByRole( 'slider' );
+			const widthInputs = screen.getAllByRole( 'spinbutton', {
+				name: 'Border width',
+			} );
+			const unitSelects = screen.getAllByRole( 'combobox', {
+				name: 'Select unit',
+			} );
+			const sliders = screen.queryAllByRole( 'slider', {
+				name: 'Border width',
+			} );
 			const linkedButton = screen.getByLabelText( 'Link sides' );
 
 			expect( colorButtons.length ).toBe( 4 );
@@ -189,9 +229,11 @@ describe( 'BorderBoxControl', () => {
 		} );
 
 		it( 'should render correct width values in appropriate inputs', () => {
-			renderBorderBoxControl( { value: mixedBorders } );
+			render( <BorderBoxControl { ...props } value={ mixedBorders } /> );
 
-			const widthInputs = screen.getAllByRole( 'spinbutton' );
+			const widthInputs = screen.getAllByRole( 'spinbutton', {
+				name: 'Border width',
+			} );
 
 			expect( widthInputs[ 0 ].value ).toBe( '1' ); // Top.
 			expect( widthInputs[ 1 ].value ).toBe( '0.75' ); // Left.
@@ -199,39 +241,75 @@ describe( 'BorderBoxControl', () => {
 			expect( widthInputs[ 3 ].value ).toBe( '2' ); // Bottom.
 		} );
 
-		it( 'should render split view correctly when starting with flat border', () => {
-			renderBorderBoxControl( { value: defaultBorders } );
-			clickButton( 'Unlink sides' );
+		it( 'should render split view correctly when starting with flat border', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render(
+				<BorderBoxControl { ...props } value={ defaultBorders } />
+			);
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
 
-			const widthInputs = screen.getAllByRole( 'spinbutton' );
+			const widthInputs = screen.getAllByRole( 'spinbutton', {
+				name: 'Border width',
+			} );
 			expect( widthInputs[ 0 ].value ).toBe( '1' ); // Top.
 			expect( widthInputs[ 1 ].value ).toBe( '1' ); // Left.
 			expect( widthInputs[ 2 ].value ).toBe( '1' ); // Right.
 			expect( widthInputs[ 3 ].value ).toBe( '1' ); // Bottom.
 		} );
 
-		it( 'should omit style options when requested', () => {
-			renderBorderBoxControl( { enableStyle: false } );
-			clickButton( 'Unlink sides' );
+		it( 'should omit style options when requested', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
 
-			const colorButtons = screen.getAllByLabelText( colorPickerRegex );
+			render( <BorderBoxControl { ...props } enableStyle={ false } /> );
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
 
-			colorButtons.forEach( ( button ) => {
-				fireEvent.click( button );
+			const colorButtons = screen.getAllByLabelText( colorPickerRegex );
 
+			function assertStyleOptionsMissing() {
 				const styleLabel = screen.queryByText( 'Style' );
-				const solidButton = queryButton( 'Solid' );
-				const dashedButton = queryButton( 'Dashed' );
-				const dottedButton = queryButton( 'Dotted' );
+				const solidButton = screen.queryByRole( 'button', {
+					name: 'Solid',
+				} );
+				const dashedButton = screen.queryByRole( 'button', {
+					name: 'Dashed',
+				} );
+				const dottedButton = screen.queryByRole( 'button', {
+					name: 'Dotted',
+				} );
 
 				expect( styleLabel ).not.toBeInTheDocument();
 				expect( solidButton ).not.toBeInTheDocument();
 				expect( dashedButton ).not.toBeInTheDocument();
 				expect( dottedButton ).not.toBeInTheDocument();
+			}
 
-				fireEvent.click( button );
-			} );
-		} );
+			await user.click( colorButtons[ 0 ] );
+			assertStyleOptionsMissing();
+			await user.click( colorButtons[ 0 ] );
+
+			await user.click( colorButtons[ 1 ] );
+			assertStyleOptionsMissing();
+			await user.click( colorButtons[ 1 ] );
+
+			await user.click( colorButtons[ 2 ] );
+			assertStyleOptionsMissing();
+			await user.click( colorButtons[ 2 ] );
+
+			await user.click( colorButtons[ 3 ] );
+			assertStyleOptionsMissing();
+			await user.click( colorButtons[ 3 ] );
+		}, 10000 );
 	} );
 
 	describe( 'onChange handling', () => {
@@ -241,16 +319,36 @@ describe( 'BorderBoxControl', () => {
 		} );
 
 		describe( 'Linked value change handling', () => {
-			it( 'should set undefined when new border is empty', () => {
-				renderBorderBoxControl( { value: { width: '1px' } } );
-				updateLinkedWidthInput( '' );
+			it( 'should set undefined when new border is empty', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
+				render(
+					<BorderBoxControl { ...props } value={ { width: '1px' } } />
+				);
+
+				await user.clear(
+					screen.getByRole( 'spinbutton', { name: 'Border width' } )
+				);
 
 				expect( props.onChange ).toHaveBeenCalledWith( undefined );
 			} );
 
-			it( 'should update with complete flat border', () => {
-				renderBorderBoxControl( { value: defaultBorder } );
-				updateLinkedWidthInput( '3' );
+			it( 'should update with complete flat border', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
+				render(
+					<BorderBoxControl { ...props } value={ defaultBorder } />
+				);
+
+				const widthInput = screen.getByRole( 'spinbutton', {
+					name: 'Border width',
+				} );
+				await user.clear( widthInput );
+				await user.type( widthInput, '3' );
 
 				expect( props.onChange ).toHaveBeenCalledWith( {
 					...defaultBorder,
@@ -258,18 +356,32 @@ describe( 'BorderBoxControl', () => {
 				} );
 			} );
 
-			it( 'should maintain mixed values if not explicitly set via linked control', () => {
-				renderBorderBoxControl( {
-					value: {
-						top: { color: '#72aee6' },
-						right: { color: '#f6f7f7', style: 'dashed' },
-						bottom: { color: '#e65054', style: 'dotted' },
-						left: { color: undefined },
-					},
+			it( 'should maintain mixed values if not explicitly set via linked control', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
 				} );
 
-				clickButton( 'Link sides' );
-				updateLinkedWidthInput( '4' );
+				render(
+					<BorderBoxControl
+						{ ...props }
+						value={ {
+							top: { color: '#72aee6' },
+							right: { color: '#f6f7f7', style: 'dashed' },
+							bottom: { color: '#e65054', style: 'dotted' },
+							left: { color: undefined },
+						} }
+					/>
+				);
+
+				await user.click(
+					screen.getByRole( 'button', { name: 'Link sides' } )
+				);
+
+				const widthInput = screen.getByRole( 'spinbutton', {
+					name: 'Border width',
+				} );
+				await user.clear( widthInput );
+				await user.type( widthInput, '4' );
 
 				expect( props.onChange ).toHaveBeenCalledWith( {
 					top: { color: '#72aee6', width: '4px' },
@@ -279,9 +391,20 @@ describe( 'BorderBoxControl', () => {
 				} );
 			} );
 
-			it( 'should update with consistent split borders', () => {
-				renderBorderBoxControl( { value: defaultBorders } );
-				updateLinkedWidthInput( '10' );
+			it( 'should update with consistent split borders', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
+				render(
+					<BorderBoxControl { ...props } value={ defaultBorders } />
+				);
+
+				const widthInput = screen.getByRole( 'spinbutton', {
+					name: 'Border width',
+				} );
+				await user.clear( widthInput );
+				await user.type( widthInput, '10' );
 
 				expect( props.onChange ).toHaveBeenCalledWith( {
 					...defaultBorder,
@@ -289,32 +412,56 @@ describe( 'BorderBoxControl', () => {
 				} );
 			} );
 
-			it( 'should set undefined borders when change results in empty borders', () => {
-				renderBorderBoxControl( {
-					value: {
-						top: { width: '1px' },
-						right: { width: '1px' },
-						bottom: { width: '1px' },
-						left: { width: '1px' },
-					},
+			it( 'should set undefined borders when change results in empty borders', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
 				} );
-				updateLinkedWidthInput( '' );
+
+				render(
+					<BorderBoxControl
+						{ ...props }
+						value={ {
+							top: { width: '1px' },
+							right: { width: '1px' },
+							bottom: { width: '1px' },
+							left: { width: '1px' },
+						} }
+					/>
+				);
+
+				await user.clear(
+					screen.getByRole( 'spinbutton', { name: 'Border width' } )
+				);
 
 				expect( props.onChange ).toHaveBeenCalledWith( undefined );
 			} );
 
-			it( 'should set flat border when change results in consistent split borders', () => {
-				renderBorderBoxControl( {
-					value: {
-						top: { ...defaultBorder, width: '1px' },
-						right: { ...defaultBorder, width: '2px' },
-						bottom: { ...defaultBorder, width: '3px' },
-						left: { ...defaultBorder, width: '4px' },
-					},
+			it( 'should set flat border when change results in consistent split borders', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
 				} );
 
-				clickButton( 'Link sides' );
-				updateLinkedWidthInput( '10' );
+				render(
+					<BorderBoxControl
+						{ ...props }
+						value={ {
+							top: { ...defaultBorder, width: '1px' },
+							right: { ...defaultBorder, width: '2px' },
+							bottom: { ...defaultBorder, width: '3px' },
+							left: { ...defaultBorder, width: '4px' },
+						} }
+					/>
+				);
+
+				await user.click(
+					screen.getByRole( 'button', { name: 'Link sides' } )
+				);
+
+				const widthInput = screen.getByRole( 'spinbutton', {
+					name: 'Border width',
+				} );
+				await user.clear( widthInput );
+				await user.type( widthInput, '10' );
 
 				expect( props.onChange ).toHaveBeenCalledWith( {
 					...defaultBorder,
@@ -324,7 +471,11 @@ describe( 'BorderBoxControl', () => {
 		} );
 
 		describe( 'Split value change handling', () => {
-			it( 'should set split borders when the updated borders are mixed', () => {
+			it( 'should set split borders when the updated borders are mixed', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
 				const borders = {
 					top: { ...defaultBorder, width: '1px' },
 					right: { ...defaultBorder, width: '2px' },
@@ -332,8 +483,13 @@ describe( 'BorderBoxControl', () => {
 					left: { ...defaultBorder, width: '4px' },
 				};
 
-				renderBorderBoxControl( { value: borders } );
-				updateSplitWidthInput( '5' );
+				render( <BorderBoxControl { ...props } value={ borders } /> );
+
+				const widthInput = screen.getAllByRole( 'spinbutton', {
+					name: 'Border width',
+				} )[ 0 ];
+				await user.clear( widthInput );
+				await user.type( widthInput, '5' );
 
 				expect( props.onChange ).toHaveBeenCalledWith( {
 					...borders,
@@ -341,7 +497,11 @@ describe( 'BorderBoxControl', () => {
 				} );
 			} );
 
-			it( 'should set flat border when updated borders are consistent', () => {
+			it( 'should set flat border when updated borders are consistent', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
 				const borders = {
 					top: { ...defaultBorder, width: '4px' },
 					right: { ...defaultBorder, width: '1px' },
@@ -349,8 +509,13 @@ describe( 'BorderBoxControl', () => {
 					left: { ...defaultBorder, width: '1px' },
 				};
 
-				renderBorderBoxControl( { value: borders } );
-				updateSplitWidthInput( '1' );
+				render( <BorderBoxControl { ...props } value={ borders } /> );
+
+				const widthInput = screen.getAllByRole( 'spinbutton', {
+					name: 'Border width',
+				} )[ 0 ];
+				await user.clear( widthInput );
+				await user.type( widthInput, '1' );
 
 				expect( props.onChange ).toHaveBeenCalledWith( defaultBorder );
 			} );

package/src/border-box-control/types.ts

@@ -44,12 +44,11 @@ export type BorderBoxControlProps = ColorProps &
 		 */
 		value: AnyBorder;
 		/**
-		 * 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 LinkedButtonProps = {
@@ -66,12 +65,11 @@ export type LinkedButtonProps = {
 	 */
 	onClick: () => void;
 	/**
-	 * 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 VisualizerProps = {
@@ -82,12 +80,11 @@ export type VisualizerProps = {
 	 */
 	value?: Borders;
 	/**
-	 * 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 SplitControlsProps = ColorProps & {
@@ -116,10 +113,9 @@ export type SplitControlsProps = ColorProps & {
 	 */
 	value?: Borders;
 	/**
-	 * 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';
 };

package/src/border-control/border-control/README.md

@@ -135,6 +135,14 @@ dropdown. The header includes a label for the color picker and a close button.
 
 - Required: No
 
+### `size`: `string`
+
+Size of the control.
+
+- Required: No
+- Default: `default`
+- Allowed values: `default`, `__unstable-large`
+
 ### `value`: `Object`
 
 An object representing a border or `undefined`. Used to set the current border