@wordpress/components 22.0.0 → 23.0.0

package/src/box-control/linked-button.js

@@ -13,19 +13,16 @@ import Tooltip from '../tooltip';
 export default function LinkedButton( { isLinked, ...props } ) {
 	const label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );
 
-	// TODO: Remove span after merging https://github.com/WordPress/gutenberg/pull/44198
 	return (
 		<Tooltip text={ label }>
-			<span>
-				<Button
-					{ ...props }
-					className="component-box-control__linked-button"
-					isSmall
-					icon={ isLinked ? link : linkOff }
-					iconSize={ 24 }
-					aria-label={ label }
-				/>
-			</span>
+			<Button
+				{ ...props }
+				className="component-box-control__linked-button"
+				isSmall
+				icon={ isLinked ? link : linkOff }
+				iconSize={ 24 }
+				aria-label={ label }
+			/>
 		</Tooltip>
 	);
 }

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

@@ -14,46 +14,65 @@ import { useState } from '@wordpress/element';
  */
 import BoxControl from '../';
 
-const setupUser = () =>
-	userEvent.setup( {
-		advanceTimers: jest.advanceTimersByTime,
-	} );
-
-const getInput = () =>
-	screen.getByLabelText( 'Box Control', { selector: 'input' } );
-const getSelect = () => screen.getByLabelText( 'Select unit' );
-const getReset = () => screen.getByText( /Reset/ );
+const Example = ( extraProps ) => {
+	const [ state, setState ] = useState();
+
+	return (
+		<BoxControl
+			values={ state }
+			onChange={ ( next ) => setState( next ) }
+			{ ...extraProps }
+		/>
+	);
+};
 
 describe( 'BoxControl', () => {
 	describe( 'Basic rendering', () => {
-		it( 'should render', () => {
-			const { container } = render( <BoxControl /> );
-			const input = container.querySelector( 'input' );
+		it( 'should render a box control input', () => {
+			render( <BoxControl /> );
 
-			expect( input ).toBeTruthy();
+			expect(
+				screen.getByRole( 'textbox', { name: 'Box Control' } )
+			).toBeVisible();
 		} );
 
 		it( 'should update values when interacting with input', async () => {
-			const user = setupUser();
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			render( <BoxControl /> );
-			const input = getInput();
-			const select = getSelect();
+
+			const input = screen.getByRole( 'textbox', {
+				name: 'Box Control',
+			} );
 
 			await user.type( input, '100%' );
 			await user.keyboard( '{Enter}' );
 
 			expect( input ).toHaveValue( '100' );
-			expect( select ).toHaveValue( '%' );
+			expect(
+				screen.getByRole( 'combobox', {
+					name: 'Select unit',
+				} )
+			).toHaveValue( '%' );
 		} );
 	} );
 
 	describe( 'Reset', () => {
 		it( 'should reset values when clicking Reset', async () => {
-			const user = setupUser();
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			render( <BoxControl /> );
-			const input = getInput();
-			const select = getSelect();
-			const reset = getReset();
+
+			const input = screen.getByRole( 'textbox', {
+				name: 'Box Control',
+			} );
+			const select = screen.getByRole( 'combobox', {
+				name: 'Select unit',
+			} );
 
 			await user.type( input, '100px' );
 			await user.keyboard( '{Enter}' );
@@ -61,28 +80,25 @@ describe( 'BoxControl', () => {
 			expect( input ).toHaveValue( '100' );
 			expect( select ).toHaveValue( 'px' );
 
-			await user.click( reset );
+			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
 
 			expect( input ).toHaveValue( '' );
 			expect( select ).toHaveValue( 'px' );
 		} );
 
 		it( 'should reset values when clicking Reset, if controlled', async () => {
-			const Example = () => {
-				const [ state, setState ] = useState();
-
-				return (
-					<BoxControl
-						values={ state }
-						onChange={ ( next ) => setState( next ) }
-					/>
-				);
-			};
-			const user = setupUser();
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			render( <Example /> );
-			const input = getInput();
-			const select = getSelect();
-			const reset = getReset();
+
+			const input = screen.getByRole( 'textbox', {
+				name: 'Box Control',
+			} );
+			const select = screen.getByRole( 'combobox', {
+				name: 'Select unit',
+			} );
 
 			await user.type( input, '100px' );
 			await user.keyboard( '{Enter}' );
@@ -90,35 +106,25 @@ describe( 'BoxControl', () => {
 			expect( input ).toHaveValue( '100' );
 			expect( select ).toHaveValue( 'px' );
 
-			await user.click( reset );
+			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
 
 			expect( input ).toHaveValue( '' );
 			expect( select ).toHaveValue( 'px' );
 		} );
 
 		it( 'should reset values when clicking Reset, if controlled <-> uncontrolled state changes', async () => {
-			const Example = () => {
-				const [ state, setState ] = useState();
-
-				return (
-					<BoxControl
-						values={ state }
-						onChange={ ( next ) => {
-							if ( next.top ) {
-								setState( next );
-							} else {
-								// This reverts it to being uncontrolled.
-								setState( undefined );
-							}
-						} }
-					/>
-				);
-			};
-			const user = setupUser();
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			render( <Example /> );
-			const input = getInput();
-			const select = getSelect();
-			const reset = getReset();
+
+			const input = screen.getByRole( 'textbox', {
+				name: 'Box Control',
+			} );
+			const select = screen.getByRole( 'combobox', {
+				name: 'Select unit',
+			} );
 
 			await user.type( input, '100px' );
 			await user.keyboard( '{Enter}' );
@@ -126,26 +132,33 @@ describe( 'BoxControl', () => {
 			expect( input ).toHaveValue( '100' );
 			expect( select ).toHaveValue( 'px' );
 
-			await user.click( reset );
+			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
 
 			expect( input ).toHaveValue( '' );
 			expect( select ).toHaveValue( 'px' );
 		} );
 
 		it( 'should persist cleared value when focus changes', async () => {
-			const user = setupUser();
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
 			const spyChange = jest.fn();
+
 			render( <BoxControl onChange={ ( v ) => spyChange( v ) } /> );
-			const input = screen.getByLabelText( 'Box Control', {
-				selector: 'input',
+
+			const input = screen.getByRole( 'textbox', {
+				name: 'Box Control',
 			} );
-			const unitSelect = screen.getByLabelText( 'Select unit' );
 
 			await user.type( input, '100%' );
 			await user.keyboard( '{Enter}' );
 
 			expect( input ).toHaveValue( '100' );
-			expect( unitSelect ).toHaveValue( '%' );
+			expect(
+				screen.getByRole( 'combobox', {
+					name: 'Select unit',
+				} )
+			).toHaveValue( '%' );
 
 			await user.clear( input );
 			expect( input ).toHaveValue( '' );
@@ -164,125 +177,177 @@ describe( 'BoxControl', () => {
 
 	describe( 'Unlinked sides', () => {
 		it( 'should update a single side value when unlinked', async () => {
-			let state = {};
-			const setState = ( newState ) => ( state = newState );
-
-			render(
-				<BoxControl
-					values={ state }
-					onChange={ ( next ) => setState( next ) }
-				/>
-			);
-			const user = setupUser();
-			const unlink = screen.getByLabelText( /Unlink sides/ );
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
 
-			await user.click( unlink );
+			render( <Example /> );
 
-			const input = screen.getByLabelText( /Top/ );
-			const select = screen.getAllByLabelText( /Select unit/ )[ 0 ];
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
 
-			await user.type( input, '100px' );
+			await user.type(
+				screen.getByRole( 'textbox', { name: 'Top' } ),
+				'100px'
+			);
 			await user.keyboard( '{Enter}' );
 
-			expect( input ).toHaveValue( '100' );
-			expect( select ).toHaveValue( 'px' );
-
-			expect( state ).toEqual( {
-				top: '100px',
-				right: undefined,
-				bottom: undefined,
-				left: undefined,
-			} );
+			expect(
+				screen.getByRole( 'textbox', { name: 'Top' } )
+			).toHaveValue( '100' );
+			expect(
+				screen.getByRole( 'textbox', { name: 'Right' } )
+			).not.toHaveValue();
+			expect(
+				screen.getByRole( 'textbox', { name: 'Bottom' } )
+			).not.toHaveValue();
+			expect(
+				screen.getByRole( 'textbox', { name: 'Left' } )
+			).not.toHaveValue();
+
+			screen
+				.getAllByRole( 'combobox', { name: 'Select unit' } )
+				.forEach( ( combobox ) => {
+					expect( combobox ).toHaveValue( 'px' );
+				} );
 		} );
 
 		it( 'should update a whole axis when value is changed when unlinked', async () => {
-			let state = {};
-			const setState = ( newState ) => ( state = newState );
-
-			render(
-				<BoxControl
-					values={ state }
-					onChange={ ( next ) => setState( next ) }
-					splitOnAxis={ true }
-				/>
-			);
-			const user = setupUser();
-			const unlink = screen.getByLabelText( /Unlink sides/ );
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
 
-			await user.click( unlink );
+			render( <Example splitOnAxis /> );
 
-			const input = screen.getByLabelText( /Vertical/ );
-			const select = screen.getAllByLabelText( /Select unit/ )[ 0 ];
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
 
-			await user.type( input, '100px' );
+			await user.type(
+				screen.getByRole( 'textbox', {
+					name: 'Vertical',
+				} ),
+				'100px'
+			);
 			await user.keyboard( '{Enter}' );
 
-			expect( input ).toHaveValue( '100' );
-			expect( select ).toHaveValue( 'px' );
-
-			expect( state ).toEqual( {
-				top: '100px',
-				right: undefined,
-				bottom: '100px',
-				left: undefined,
-			} );
+			expect(
+				screen.getByRole( 'textbox', { name: 'Vertical' } )
+			).toHaveValue( '100' );
+			expect(
+				screen.getByRole( 'textbox', { name: 'Horizontal' } )
+			).not.toHaveValue();
+
+			screen
+				.getAllByRole( 'combobox', { name: 'Select unit' } )
+				.forEach( ( combobox ) => {
+					expect( combobox ).toHaveValue( 'px' );
+				} );
 		} );
 	} );
 
 	describe( 'Unit selections', () => {
 		it( 'should update unlinked controls unit selection based on all input control', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			// Render control.
 			render( <BoxControl /> );
-			const user = setupUser();
 
 			// Make unit selection on all input control.
-			const allUnitSelect = getSelect();
-			await user.selectOptions( allUnitSelect, [ 'em' ] );
+			await user.selectOptions(
+				screen.getByRole( 'combobox', {
+					name: 'Select unit',
+				} ),
+				[ 'em' ]
+			);
 
 			// Unlink the controls.
-			await user.click( screen.getByLabelText( /Unlink sides/ ) );
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
+
+			const controls = screen.getAllByRole( 'combobox', {
+				name: 'Select unit',
+			} );
+
+			// Confirm we have exactly 4 controls.
+			expect( controls ).toHaveLength( 4 );
 
 			// Confirm that each individual control has the selected unit
-			const unlinkedSelects = screen.getAllByDisplayValue( 'em' );
-			expect( unlinkedSelects.length ).toEqual( 4 );
+			controls.forEach( ( control ) => {
+				expect( control ).toHaveValue( 'em' );
+			} );
 		} );
 
 		it( 'should use individual side attribute unit when available', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			// Render control.
 			const { rerender } = render( <BoxControl /> );
-			const user = setupUser();
 
 			// Make unit selection on all input control.
-			const allUnitSelect = getSelect();
-			await user.selectOptions( allUnitSelect, [ 'vw' ] );
+			await user.selectOptions(
+				screen.getByRole( 'combobox', {
+					name: 'Select unit',
+				} ),
+				[ 'vw' ]
+			);
 
 			// Unlink the controls.
-			await user.click( screen.getByLabelText( /Unlink sides/ ) );
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
+
+			const controls = screen.getAllByRole( 'combobox', {
+				name: 'Select unit',
+			} );
+
+			// Confirm we have exactly 4 controls.
+			expect( controls ).toHaveLength( 4 );
 
 			// Confirm that each individual control has the selected unit
-			const unlinkedSelects = screen.getAllByDisplayValue( 'vw' );
-			expect( unlinkedSelects.length ).toEqual( 4 );
+			controls.forEach( ( control ) => {
+				expect( control ).toHaveValue( 'vw' );
+			} );
 
 			// Rerender with individual side value & confirm unit is selected.
 			rerender( <BoxControl values={ { top: '2.5em' } } /> );
 
-			const topSelect = screen.getByDisplayValue( 'em' );
-			const otherSelects = screen.getAllByDisplayValue( 'vw' );
+			const rerenderedControls = screen.getAllByRole( 'combobox', {
+				name: 'Select unit',
+			} );
 
-			expect( topSelect ).toBeInTheDocument();
-			expect( otherSelects.length ).toEqual( 3 );
+			// Confirm we have exactly 4 controls.
+			expect( rerenderedControls ).toHaveLength( 4 );
+
+			// Confirm that each individual control has the right selected unit
+			rerenderedControls.forEach( ( control, index ) => {
+				const expected = index === 0 ? 'em' : 'vw';
+				expect( control ).toHaveValue( expected );
+			} );
 		} );
 	} );
 
 	describe( 'onChange updates', () => {
 		it( 'should call onChange when values contain more than just CSS units', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
 			const setState = jest.fn();
 
 			render( <BoxControl onChange={ setState } /> );
-			const user = setupUser();
-			const input = getInput();
 
-			await user.type( input, '7.5rem' );
+			await user.type(
+				screen.getByRole( 'textbox', {
+					name: 'Box Control',
+				} ),
+				'7.5rem'
+			);
 			await user.keyboard( '{Enter}' );
 
 			expect( setState ).toHaveBeenCalledWith( {
@@ -294,13 +359,19 @@ describe( 'BoxControl', () => {
 		} );
 
 		it( 'should not pass invalid CSS unit only values to onChange', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
 			const setState = jest.fn();
 
 			render( <BoxControl onChange={ setState } /> );
-			const user = setupUser();
 
-			const allUnitSelect = getSelect();
-			await user.selectOptions( allUnitSelect, 'rem' );
+			await user.selectOptions(
+				screen.getByRole( 'combobox', {
+					name: 'Select unit',
+				} ),
+				'rem'
+			);
 
 			expect( setState ).toHaveBeenCalledWith( {
 				top: undefined,

package/src/button/stories/index.js

@@ -128,6 +128,36 @@ Default.args = {
 	children: 'Code is poetry',
 };
 
+export const Primary = Template.bind( {} );
+Primary.args = {
+	...Default.args,
+	variant: 'primary',
+};
+
+export const Secondary = Template.bind( {} );
+Secondary.args = {
+	...Default.args,
+	variant: 'secondary',
+};
+
+export const Tertiary = Template.bind( {} );
+Tertiary.args = {
+	...Default.args,
+	variant: 'tertiary',
+};
+
+export const Link = Template.bind( {} );
+Link.args = {
+	...Default.args,
+	variant: 'link',
+};
+
+export const IsDestructive = Template.bind( {} );
+IsDestructive.args = {
+	...Default.args,
+	isDestructive: true,
+};
+
 export const Icon = Template.bind( {} );
 Icon.args = {
 	label: 'Code is poetry',

package/src/button/style.scss

@@ -16,7 +16,7 @@
 	box-sizing: border-box;
 	padding: 6px 12px;
 	border-radius: $radius-block-ui;
-	color: $gray-900;
+	color: $components-color-foreground;
 
 	&[aria-expanded="true"],
 	&:hover {
@@ -44,7 +44,7 @@
 	&.is-primary {
 		white-space: nowrap;
 		background: $components-color-accent;
-		color: $white;
+		color: $components-color-accent-inverted;
 		text-decoration: none;
 		text-shadow: none;
 
@@ -53,17 +53,17 @@
 
 		&:hover:not(:disabled) {
 			background: $components-color-accent-darker-10;
-			color: $white;
+			color: $components-color-accent-inverted;
 		}
 
 		&:active:not(:disabled) {
 			background: $components-color-accent-darker-20;
 			border-color: $components-color-accent-darker-20;
-			color: $white;
+			color: $components-color-accent-inverted;
 		}
 
 		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+			box-shadow: inset 0 0 0 1px $components-color-background, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 		}
 
 		&:disabled,
@@ -71,6 +71,7 @@
 		&[aria-disabled="true"],
 		&[aria-disabled="true"]:enabled, // This catches a situation where a Button is aria-disabled, but not disabled.
 		&[aria-disabled="true"]:active:enabled {
+			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
 			color: rgba($white, 0.4);
 			background: $components-color-accent;
 			border-color: $components-color-accent;
@@ -79,7 +80,7 @@
 
 			&:focus:enabled {
 				box-shadow:
-					0 0 0 $border-width $white,
+					0 0 0 $border-width $components-color-background,
 					0 0 0 3px $components-color-accent;
 			}
 		}
@@ -87,7 +88,7 @@
 		&.is-busy,
 		&.is-busy:disabled,
 		&.is-busy[aria-disabled="true"] {
-			color: $white;
+			color: $components-color-accent-inverted;
 			background-size: 100px 100%;
 			// Disable reason: This function call looks nicer when each argument is on its own line.
 			/* stylelint-disable */
@@ -113,7 +114,7 @@
 		outline: 1px solid transparent;
 
 		&:active:not(:disabled) {
-			background: $gray-300;
+			background: $components-color-gray-300;
 			color: $components-color-accent-darker-10;
 			box-shadow: none;
 		}
@@ -126,6 +127,7 @@
 		&:disabled,
 		&[aria-disabled="true"],
 		&[aria-disabled="true"]:hover {
+			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
 			color: lighten($gray-700, 5%);
 			background: lighten($gray-300, 5%);
 			transform: none;
@@ -222,7 +224,7 @@
 	}
 
 	&:not([aria-disabled="true"]):active {
-		color: inherit;
+		color: $components-color-foreground;
 	}
 
 	&:disabled,
@@ -242,6 +244,7 @@
 		/* stylelint-disable */
 		background-image: linear-gradient(
 			-45deg,
+			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
 			darken($white, 2%) 33%,
 			darken($white, 12%) 33%,
 			darken($white, 12%) 70%,
@@ -292,19 +295,19 @@
 
 	// Toggled style.
 	&.is-pressed {
-		color: $white;
-		background: $gray-900;
+		color: $components-color-foreground-inverted;
+		background: $components-color-foreground;
 
 		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+			box-shadow: inset 0 0 0 1px $components-color-background, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 
 			// Windows High Contrast mode will show this outline, but not the box-shadow.
 			outline: 2px solid transparent;
 		}
 
 		&:hover:not(:disabled) {
-			color: $white;
-			background: $gray-900;
+			color: $components-color-foreground-inverted;
+			background: $components-color-foreground;
 		}
 	}