@wordpress/components 28.4.0 → 28.5.0

package/src/button/style.scss

@@ -1,3 +1,10 @@
+/**
+ * For easier testing of potential regressions, you can use a Button variant matrix
+ * available in a special Storybook instance by running `npm run storybook:e2e:dev`.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/test/storybook-playwright/README.md
+ */
+
 .components-button {
 	display: inline-flex;
 	text-decoration: none;
@@ -23,16 +30,10 @@
 	}
 
 	&[aria-expanded="true"],
-	&:hover {
+	&:hover:not(:disabled, [aria-disabled="true"]) {
 		color: $components-color-accent;
 	}
 
-	// Unset some hovers, instead of adding :not specificity.
-	&:disabled:hover,
-	&[aria-disabled="true"]:hover {
-		color: initial;
-	}
-
 	// Focus.
 	// See https://github.com/WordPress/gutenberg/issues/13267 for more context on these selectors.
 	&:focus:not(:disabled) {
@@ -80,7 +81,6 @@
 			color: rgba($white, 0.4);
 			background: $components-color-accent;
 			border-color: $components-color-accent;
-			opacity: 1;
 			outline: none;
 
 			&:focus:enabled {
@@ -125,7 +125,6 @@
 			color: $gray-600;
 			background: transparent;
 			transform: none;
-			opacity: 1;
 		}
 	}
 
@@ -199,17 +198,32 @@
 		&:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link) {
 			color: $alert-red;
 
-			&:hover:not(:disabled) {
+			&:hover:not(:disabled, [aria-disabled="true"]) {
 				color: darken($alert-red, 20%);
 			}
 
-			&:focus:not(:disabled) {
+			&:focus {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $alert-red;
 			}
 
-			&:active:not(:disabled) {
+			&:active:not(:disabled, [aria-disabled="true"]) {
 				background: $gray-400;
 			}
+
+			&:disabled,
+			&[aria-disabled="true"] {
+				color: $gray-600;
+			}
+		}
+
+		&.is-tertiary {
+			&:hover:not(:disabled, [aria-disabled="true"]) {
+				background: rgba($alert-red, 0.04);
+			}
+
+			&:active:not(:disabled, [aria-disabled="true"]) {
+				background: rgba($alert-red, 0.08);
+			}
 		}
 	}
 
@@ -237,6 +251,11 @@
 		&:focus {
 			border-radius: $radius-block-ui;
 		}
+
+		&:disabled,
+		&[aria-disabled="true"] {
+			color: $gray-600;
+		}
 	}
 
 	&:not(:disabled, [aria-disabled="true"]):active {
@@ -246,7 +265,7 @@
 	&:disabled,
 	&[aria-disabled="true"] {
 		cursor: default;
-		opacity: 0.3;
+		color: $gray-600;
 	}
 
 	&.is-busy,
@@ -259,7 +278,6 @@
 		@media (prefers-reduced-motion: reduce) {
 			animation-duration: 0s;
 		}
-		opacity: 1;
 		background-size: 100px 100%;
 		/* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
 		background-image: linear-gradient(
@@ -325,8 +343,23 @@
 
 	// Toggled style.
 	&.is-pressed {
-		color: $components-color-foreground-inverted;
-		background: $components-color-foreground;
+		&,
+		&:hover {
+			color: $components-color-foreground-inverted;
+			&:not(:disabled, [aria-disabled="true"]) {
+				background: $components-color-foreground;
+			}
+		}
+
+		&:disabled,
+		&[aria-disabled="true"] {
+			color: $gray-600;
+
+			&:not(.is-primary):not(.is-secondary):not(.is-tertiary) {
+				color: $components-color-foreground-inverted;
+				background: $gray-600;
+			}
+		}
 
 		&:focus:not(:disabled) {
 			box-shadow: inset 0 0 0 1px $components-color-background, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
@@ -334,11 +367,6 @@
 			// Windows High Contrast mode will show this outline, but not the box-shadow.
 			outline: 2px solid transparent;
 		}
-
-		&:hover:not(:disabled) {
-			color: $components-color-foreground-inverted;
-			background: $components-color-foreground;
-		}
 	}
 
 	svg {

package/src/button/test/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -16,6 +15,7 @@ import { plusCircle } from '@wordpress/icons';
 import Button from '..';
 import Tooltip from '../../tooltip';
 import cleanupTooltip from '../../tooltip/test/utils';
+import { press } from '@ariakit/test';
 
 jest.mock( '../../icon', () => () => <div data-testid="test-icon" /> );
 
@@ -73,12 +73,10 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should render a button element with has-text when children are passed', async () => {
-			const user = userEvent.setup();
-
 			render( <Button icon={ plusCircle }>Children</Button> );
 
 			// Move focus to the button
-			await user.tab();
+			await press.Tab();
 
 			expect( screen.getByRole( 'button' ) ).toHaveClass( 'has-text' );
 		} );
@@ -113,8 +111,6 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should render correctly as a tooltip anchor', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<>
 					<Tooltip text="Tooltip text">
@@ -128,7 +124,7 @@ describe( 'Button', () => {
 				name: 'Tooltip anchor',
 			} );
 
-			await user.tab();
+			await press.Tab();
 
 			expect( anchor ).toHaveFocus();
 
@@ -138,7 +134,7 @@ describe( 'Button', () => {
 
 			expect( tooltip ).toBeVisible();
 
-			await user.tab();
+			await press.Tab();
 
 			expect(
 				screen.getByRole( 'button', { name: 'Focus me' } )
@@ -152,8 +148,6 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should render correctly as a tooltip anchor, ignoring its internal tooltip in favour of the external tooltip', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<>
 					<Tooltip text="Tooltip text">
@@ -167,7 +161,7 @@ describe( 'Button', () => {
 				name: 'Button label',
 			} );
 
-			await user.tab();
+			await press.Tab();
 
 			expect( anchor ).toHaveFocus();
 
@@ -184,7 +178,7 @@ describe( 'Button', () => {
 				} )
 			).not.toBeInTheDocument();
 
-			await user.tab();
+			await press.Tab();
 
 			expect(
 				screen.getByRole( 'button', { name: 'Focus me' } )
@@ -198,8 +192,6 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should not trash the rendered HTML elements when toggling between showing and not showing a tooltip', async () => {
-			const user = userEvent.setup();
-
 			const { rerender } = render(
 				<Button label="Button label">Test button</Button>
 			);
@@ -210,7 +202,7 @@ describe( 'Button', () => {
 
 			expect( button ).toBeVisible();
 
-			await user.tab();
+			await press.Tab();
 
 			expect( button ).toHaveFocus();
 
@@ -307,14 +299,12 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should add an aria-label when the label property is used, with Tooltip wrapper', async () => {
-			const user = userEvent.setup();
-
 			render( <Button icon={ plusCircle } label="WordPress" /> );
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
 			// Move focus to the button
-			await user.tab();
+			await press.Tab();
 
 			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 		} );
@@ -338,8 +328,6 @@ describe( 'Button', () => {
 		} );
 
 		it( 'should populate tooltip with label content for buttons without visible labels (no children)', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<Button
 					description="Description text"
@@ -351,16 +339,14 @@ describe( 'Button', () => {
 			expect( screen.queryByText( 'Label' ) ).not.toBeInTheDocument();
 
 			// Move focus to the button
-			await user.tab();
+			await press.Tab();
 
 			expect( screen.getByText( 'Label' ) ).toBeVisible();
 
-			await cleanupTooltip( user );
+			await cleanupTooltip();
 		} );
 
 		it( 'should populate tooltip with description content for buttons with visible labels (buttons with children)', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<Button
 					label="Label"
@@ -378,7 +364,7 @@ describe( 'Button', () => {
 				} )
 			).toBeVisible();
 
-			await user.tab();
+			await press.Tab();
 
 			expect(
 				screen.getByRole( 'tooltip', {
@@ -386,12 +372,10 @@ describe( 'Button', () => {
 				} )
 			).toBeVisible();
 
-			await cleanupTooltip( user );
+			await cleanupTooltip();
 		} );
 
 		it( 'should allow tooltip disable', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<Button
 					icon={ plusCircle }
@@ -407,14 +391,12 @@ describe( 'Button', () => {
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
 			// Move focus to the button
-			await user.tab();
+			await press.Tab();
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 		} );
 
 		it( 'should show the tooltip for empty children', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<Button icon={ plusCircle } label="WordPress" children={ [] } />
 			);
@@ -422,16 +404,14 @@ describe( 'Button', () => {
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
 			// Move focus to the button
-			await user.tab();
+			await press.Tab();
 
 			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 
-			await cleanupTooltip( user );
+			await cleanupTooltip();
 		} );
 
 		it( 'should not show the tooltip when icon and children defined', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<Button icon={ plusCircle } label="WordPress">
 					Children
@@ -441,14 +421,12 @@ describe( 'Button', () => {
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
 			// Move focus to the button
-			await user.tab();
+			await press.Tab();
 
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 		} );
 
 		it( 'should force showing the tooltip even if icon and children defined', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<Button icon={ plusCircle } label="WordPress" showTooltip>
 					Children
@@ -458,11 +436,11 @@ describe( 'Button', () => {
 			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
 
 			// Move focus to the button
-			await user.tab();
+			await press.Tab();
 
 			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
 
-			await cleanupTooltip( user );
+			await cleanupTooltip();
 		} );
 
 		describe( 'using `aria-pressed` prop', () => {

package/src/circular-option-picker/test/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
-import { press, sleep } from '@ariakit/test';
+import { press } from '@ariakit/test';
 
 /**
  * Internal dependencies
@@ -70,7 +70,6 @@ describe( 'CircularOptionPicker', () => {
 				/>
 			);
 
-			await sleep();
 			await press.Tab();
 			expect( getOption( 'Option One' ) ).toHaveFocus();
 			await press.ArrowRight();
@@ -90,7 +89,6 @@ describe( 'CircularOptionPicker', () => {
 				/>
 			);
 
-			await sleep();
 			await press.Tab();
 			expect( getOption( 'Option One' ) ).toHaveFocus();
 			await press.ArrowRight();
@@ -110,7 +108,6 @@ describe( 'CircularOptionPicker', () => {
 				/>
 			);
 
-			await sleep();
 			await press.Tab();
 			expect( getOption( 'Option One' ) ).toHaveFocus();
 			await press.ArrowRight();

package/src/color-palette/index.tsx

@@ -335,26 +335,28 @@ function UnforwardedColorPalette(
 					) }
 				/>
 			) }
-			<CircularOptionPicker
-				{ ...metaProps }
-				actions={ actions }
-				options={
-					hasMultipleColorOrigins ? (
-						<MultiplePalettes
-							{ ...paletteCommonProps }
-							headingLevel={ headingLevel }
-							colors={ colors as PaletteObject[] }
-							value={ value }
-						/>
-					) : (
-						<SinglePalette
-							{ ...paletteCommonProps }
-							colors={ colors as ColorObject[] }
-							value={ value }
-						/>
-					)
-				}
-			/>
+			{ ( colors.length > 0 || actions ) && (
+				<CircularOptionPicker
+					{ ...metaProps }
+					actions={ actions }
+					options={
+						hasMultipleColorOrigins ? (
+							<MultiplePalettes
+								{ ...paletteCommonProps }
+								headingLevel={ headingLevel }
+								colors={ colors as PaletteObject[] }
+								value={ value }
+							/>
+						) : (
+							<SinglePalette
+								{ ...paletteCommonProps }
+								colors={ colors as ColorObject[] }
+								value={ value }
+							/>
+						)
+					}
+				/>
+			) }
 		</VStack>
 	);
 }

package/src/composite/legacy/test/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { queryByAttribute, render, screen } from '@testing-library/react';
-import { press, sleep, waitFor } from '@ariakit/test';
+import { press, waitFor } from '@ariakit/test';
 
 /**
  * Internal dependencies
@@ -47,7 +47,7 @@ async function renderAndValidate( ...args: Parameters< typeof render > ) {
 		const activeButton = queryByAttribute(
 			'data-active-item',
 			view.baseElement,
-			''
+			'true'
 		);
 		expect( activeButton ).not.toBeNull();
 	} );
@@ -178,13 +178,10 @@ describe.each( [
 		);
 		renderAndValidate( <Test /> );
 
-		await sleep();
 		await press.Tab();
 		expect( screen.getByText( 'Before' ) ).toHaveFocus();
-		await sleep();
 		await press.Tab();
 		expect( screen.getByText( 'Item 1' ) ).toHaveFocus();
-		await sleep();
 		await press.Tab();
 		expect( screen.getByText( 'After' ) ).toHaveFocus();
 		await press.ShiftTab();
@@ -213,7 +210,6 @@ describe.each( [
 
 		expect( item2 ).toBeDisabled();
 
-		await sleep();
 		await press.Tab();
 		expect( item1 ).toHaveFocus();
 		await press.ArrowDown();
@@ -243,7 +239,6 @@ describe.each( [
 		expect( item2 ).toBeEnabled();
 		expect( item2 ).toHaveAttribute( 'aria-disabled', 'true' );
 
-		await sleep();
 		await press.Tab();
 		expect( item1 ).toHaveFocus();
 		await press.ArrowDown();
@@ -279,7 +274,6 @@ describe.each( [
 		renderAndValidate( <Test /> );
 		const { item2 } = getOneDimensionalItems();
 
-		await sleep();
 		await press.Tab();
 		await waitFor( () => expect( item2 ).toHaveFocus() );
 	} );
@@ -323,7 +317,6 @@ describe.each( [
 		test( 'All directions work with no orientation', async () => {
 			const { item1, item2, item3 } = useOneDimensionalTest();
 
-			await sleep();
 			await press.Tab();
 			expect( item1 ).toHaveFocus();
 			await press.ArrowDown();
@@ -361,7 +354,6 @@ describe.each( [
 				orientation: 'horizontal',
 			} );
 
-			await sleep();
 			await press.Tab();
 			expect( item1 ).toHaveFocus();
 			await press.ArrowDown();
@@ -391,7 +383,6 @@ describe.each( [
 				orientation: 'vertical',
 			} );
 
-			await sleep();
 			await press.Tab();
 			expect( item1 ).toHaveFocus();
 			await press( next );
@@ -421,7 +412,6 @@ describe.each( [
 				loop: true,
 			} );
 
-			await sleep();
 			await press.Tab();
 			expect( item1 ).toHaveFocus();
 			await press.ArrowDown();
@@ -444,7 +434,6 @@ describe.each( [
 			const { itemA1, itemA2, itemA3, itemB1, itemB2, itemC1, itemC3 } =
 				useTwoDimensionalTest();
 
-			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press.ArrowUp();
@@ -481,7 +470,6 @@ describe.each( [
 			const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
 				useTwoDimensionalTest( { loop: true } );
 
-			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press( next );
@@ -506,7 +494,6 @@ describe.each( [
 			const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
 				useTwoDimensionalTest( { wrap: true } );
 
-			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press( next );
@@ -539,7 +526,6 @@ describe.each( [
 				wrap: true,
 			} );
 
-			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press( previous );
@@ -555,7 +541,6 @@ describe.each( [
 		test( 'Focus shifts if vertical neighbour unavailable when shift enabled', async () => {
 			const { itemA1, itemB1, itemB2, itemC1 } = useShiftTest( true );
 
-			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press.ArrowDown();
@@ -577,7 +562,6 @@ describe.each( [
 		test( 'Focus does not shift if vertical neighbour unavailable when shift not enabled', async () => {
 			const { itemA1, itemB1, itemB2 } = useShiftTest( false );
 
-			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press.ArrowDown();