@wordpress/components 21.2.0 → 22.0.0

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

@@ -7,29 +7,33 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { COLORS, CONFIG, rtl } from '../utils';
-import { space } from '../ui/utils/space';
 
 import type { Border } from '../border-control/types';
 import type { Borders } from './types';
 
-export const BorderBoxControl = css``;
+export const borderBoxControl = css``;
 
-export const LinkedBorderControl = css`
+export const linkedBorderControl = () => css`
 	flex: 1;
+	${ rtl( { marginRight: '24px' } )() }
 `;
 
-export const BorderBoxControlLinkedButton = (
-	__next36pxDefaultSize?: boolean
+export const wrapper = css`
+	position: relative;
+`;
+
+export const borderBoxControlLinkedButton = (
+	size?: 'default' | '__unstable-large'
 ) => {
 	return css`
-		flex: 0;
-		flex-basis: 24px;
+		position: absolute;
+		top: ${ size === '__unstable-large' ? '8px' : '3px' };
+		${ rtl( { right: 0 } )() }
 		line-height: 0;
-		margin-top: ${ __next36pxDefaultSize ? '6px' : '3px' };
 	`;
 };
 
-const BorderBoxStyleWithFallback = ( border?: Border ) => {
+const borderBoxStyleWithFallback = ( border?: Border ) => {
 	const {
 		color = COLORS.gray[ 200 ],
 		style = 'solid',
@@ -46,36 +50,38 @@ const BorderBoxStyleWithFallback = ( border?: Border ) => {
 
 export const borderBoxControlVisualizer = (
 	borders?: Borders,
-	__next36pxDefaultSize?: boolean
+	size?: 'default' | '__unstable-large'
 ) => {
 	return css`
 		position: absolute;
-		top: ${ __next36pxDefaultSize ? '18px' : '15px' };
-		right: 30px;
-		bottom: ${ __next36pxDefaultSize ? '18px' : '15px' };
-		left: 30px;
-		border-top: ${ BorderBoxStyleWithFallback( borders?.top ) };
-		border-bottom: ${ BorderBoxStyleWithFallback( borders?.bottom ) };
+		top: ${ size === '__unstable-large' ? '20px' : '15px' };
+		right: ${ size === '__unstable-large' ? '39px' : '29px' };
+		bottom: ${ size === '__unstable-large' ? '20px' : '15px' };
+		left: ${ size === '__unstable-large' ? '39px' : '29px' };
+		border-top: ${ borderBoxStyleWithFallback( borders?.top ) };
+		border-bottom: ${ borderBoxStyleWithFallback( borders?.bottom ) };
 		${ rtl( {
-			borderLeft: BorderBoxStyleWithFallback( borders?.left ),
+			borderLeft: borderBoxStyleWithFallback( borders?.left ),
 		} )() }
 		${ rtl( {
-			borderRight: BorderBoxStyleWithFallback( borders?.right ),
+			borderRight: borderBoxStyleWithFallback( borders?.right ),
 		} )() }
 	`;
 };
 
-export const borderBoxControlSplitControls = () => css`
+export const borderBoxControlSplitControls = (
+	size?: 'default' | '__unstable-large'
+) => css`
 	position: relative;
 	flex: 1;
-	${ rtl( { marginRight: space( 3 ) }, { marginLeft: space( 3 ) } )() }
+	width: ${ size === '__unstable-large' ? undefined : '80%' };
 `;
 
-export const CenteredBorderControl = css`
+export const centeredBorderControl = css`
 	grid-column: span 2;
 	margin: 0 auto;
 `;
 
 export const rightBorderControl = () => css`
-	${ rtl( { marginLeft: 'auto' }, { marginRight: 'auto' } )() }
+	${ rtl( { marginLeft: 'auto' } )() }
 `;

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,57 +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 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', {
+				name: 'Border width',
+			} );
+			const unitSelect = screen.queryByRole( 'combobox', {
+				name: 'Select unit',
+			} );
 
-			const widthInput = screen.getByRole( 'spinbutton' );
 			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mixed' );
+			expect( unitSelect ).not.toBeInTheDocument();
 		} );
 
-		it( 'should render shared border width 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' },
-				},
+		it( 'should render shared border width and unit select when switching to linked view', async () => {
+			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' );
+			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();
@@ -168,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 );
@@ -184,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.
@@ -194,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 } />
+			);
 
-			const widthInputs = screen.getAllByRole( 'spinbutton' );
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
+
+			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 } /> );
 
-			colorButtons.forEach( ( button ) => {
-				fireEvent.click( button );
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
 
+			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', () => {
@@ -236,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,
@@ -253,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' },
@@ -274,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,
@@ -284,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,
@@ -319,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' },
@@ -327,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,
@@ -336,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' },
@@ -344,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 );
 			} );