@wordpress/components 25.6.1 → 25.8.0

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

@@ -1,13 +1,8 @@
 /**
  * External dependencies
  */
-import {
-	act,
-	fireEvent,
-	render,
-	screen,
-	waitFor,
-} from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -43,36 +38,28 @@ function createProps( customProps ) {
 
 const toggleLabelRegex = /Border color( and style)* picker/;
 
-function getWrappingPopoverElement( element ) {
-	return element.closest( '.components-popover' );
-}
-
-const openPopover = async () => {
+const openPopover = async ( user ) => {
 	const toggleButton = screen.getByLabelText( toggleLabelRegex );
-	fireEvent.click( toggleButton );
+	await user.click( toggleButton );
 
 	// Wait for color picker popover to fully appear
 	const pickerButton = screen.getByRole( 'button', {
 		name: /^Custom color picker/,
 	} );
 
-	await waitFor( () =>
-		expect(
-			getWrappingPopoverElement( pickerButton )
-		).toBePositionedPopover()
-	);
+	await waitFor( () => expect( pickerButton ).toBePositionedPopover() );
 };
 
 const getButton = ( name ) => {
 	return screen.getByRole( 'button', { name } );
 };
 
-const queryButton = ( name ) => {
-	return screen.queryByRole( 'button', { name } );
+const getColorOption = ( color ) => {
+	return screen.getByRole( 'option', { name: `Color: ${ color }` } );
 };
 
-const clickButton = ( name ) => {
-	fireEvent.click( getButton( name ) );
+const queryButton = ( name ) => {
+	return screen.queryByRole( 'button', { name } );
 };
 
 const getSliderInput = () => {
@@ -82,15 +69,6 @@ const getSliderInput = () => {
 const getWidthInput = () => {
 	return screen.getByRole( 'spinbutton', { name: 'Border width' } );
 };
-const setWidthInput = ( value ) => {
-	const widthInput = getWidthInput();
-	act( () => {
-		widthInput.focus();
-	} );
-	fireEvent.change( widthInput, { target: { value } } );
-};
-
-const clearWidthInput = () => setWidthInput( '' );
 
 describe( 'BorderControl', () => {
 	describe( 'basic rendering', () => {
@@ -146,19 +124,20 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should render color and style popover', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
 			render( <BorderControl { ...props } /> );
-			await openPopover();
+			await openPopover( user );
 
 			const customColorPicker = getButton( /Custom color picker/ );
-			const colorSwatchButtons = screen.getAllByRole( 'button', {
+			const colorSwatchButtons = screen.getAllByRole( 'option', {
 				name: /^Color:/,
 			} );
 			const styleLabel = screen.getByText( 'Style' );
 			const solidButton = getButton( 'Solid' );
 			const dashedButton = getButton( 'Dashed' );
 			const dottedButton = getButton( 'Dotted' );
-			const resetButton = getButton( 'Reset to default' );
+			const resetButton = getButton( 'Reset' );
 
 			expect( customColorPicker ).toBeInTheDocument();
 			expect( colorSwatchButtons.length ).toEqual( colors.length );
@@ -170,9 +149,10 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should render color and style popover header', async () => {
+			const user = userEvent.setup();
 			const props = createProps( { showDropdownHeader: true } );
 			render( <BorderControl { ...props } /> );
-			await openPopover();
+			await openPopover( user );
 
 			const headerLabel = screen.getByText( 'Border color' );
 			const closeButton = getButton( 'Close border color' );
@@ -182,9 +162,10 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should not render style options when opted out of', async () => {
+			const user = userEvent.setup();
 			const props = createProps( { enableStyle: false } );
 			render( <BorderControl { ...props } /> );
-			await openPopover();
+			await openPopover( user );
 
 			const styleLabel = screen.queryByText( 'Style' );
 			const solidButton = queryButton( 'Solid' );
@@ -307,6 +288,10 @@ describe( 'BorderControl', () => {
 			const { rerender } = render( <BorderControl { ...props } /> );
 
 			const slider = getSliderInput();
+			// As per [1], it is not currently possible to reasonably
+			// replicate this interaction using `userEvent`, so leaving
+			// `fireEvent` in place to cover it.
+			// [1]: https://github.com/testing-library/user-event/issues/871
 			fireEvent.change( slider, { target: { value: '5' } } );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
@@ -321,10 +306,11 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should update color selection', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
 			render( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Color: Green' );
+			await openPopover( user );
+			await user.click( getColorOption( 'Green' ) );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
 				...defaultBorder,
@@ -333,10 +319,11 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should clear color selection when toggling swatch off', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
 			render( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Color: Blue' );
+			await openPopover( user );
+			await user.click( getColorOption( 'Blue' ) );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
 				...defaultBorder,
@@ -345,10 +332,11 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should update style selection', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
 			render( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Dashed' );
+			await openPopover( user );
+			await user.click( getButton( 'Dashed' ) );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
 				...defaultBorder,
@@ -357,19 +345,21 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should take no action when color and style popover is closed', async () => {
+			const user = userEvent.setup();
 			const props = createProps( { showDropdownHeader: true } );
 			render( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Close border color' );
+			await openPopover( user );
+			await user.click( getButton( 'Close border color' ) );
 
 			expect( props.onChange ).not.toHaveBeenCalled();
 		} );
 
 		it( 'should reset color and style only when popover reset button clicked', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
 			render( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Reset to default' );
+			await openPopover( user );
+			await user.click( getButton( 'Reset' ) );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
 				color: undefined,
@@ -379,25 +369,27 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should sanitize border when width and color are undefined', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
 			const { rerender } = render( <BorderControl { ...props } /> );
-			clearWidthInput();
+			await user.clear( getWidthInput() );
 			rerender( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Color: Blue' );
+			await openPopover( user );
+			await user.click( getColorOption( 'Blue' ) );
 
 			expect( props.onChange ).toHaveBeenCalledWith( undefined );
 		} );
 
 		it( 'should not sanitize border when requested', async () => {
+			const user = userEvent.setup();
 			const props = createProps( {
 				shouldSanitizeBorder: false,
 			} );
 			const { rerender } = render( <BorderControl { ...props } /> );
-			clearWidthInput();
+			await user.clear( getWidthInput() );
 			rerender( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Color: Blue' );
+			await openPopover( user );
+			await user.click( getColorOption( 'Blue' ) );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 2, {
 				color: undefined,
@@ -407,12 +399,16 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should clear color and set style to `none` when setting zero width', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
 			render( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Color: Green' );
-			clickButton( 'Dotted' );
-			setWidthInput( '0' );
+			await openPopover( user );
+			await user.click( getColorOption( 'Green' ) );
+			await user.click( getButton( 'Dotted' ) );
+			await user.type( getWidthInput(), '0', {
+				initialSelectionStart: 0,
+				initialSelectionEnd: 1,
+			} );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 3, {
 				color: undefined,
@@ -422,15 +418,23 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should reselect color and style selections when changing to non-zero width', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
 			const { rerender } = render( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Color: Green' );
+			await openPopover( user );
+			await user.click( getColorOption( 'Green' ) );
 			rerender( <BorderControl { ...props } /> );
-			clickButton( 'Dotted' );
+			await user.click( getButton( 'Dotted' ) );
 			rerender( <BorderControl { ...props } /> );
-			setWidthInput( '0' );
-			setWidthInput( '5' );
+			const widthInput = getWidthInput();
+			await user.type( widthInput, '0', {
+				initialSelectionStart: 0,
+				initialSelectionEnd: 1,
+			} );
+			await user.type( widthInput, '5', {
+				initialSelectionStart: 0,
+				initialSelectionEnd: 1,
+			} );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 4, {
 				color: '#00a32a',
@@ -440,10 +444,11 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should set a non-zero width when applying color to zero width border', async () => {
+			const user = userEvent.setup();
 			const props = createProps( { value: undefined } );
 			const { rerender } = render( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Color: Yellow' );
+			await openPopover( user );
+			await user.click( getColorOption( 'Yellow' ) );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
 				color: '#bd8600',
@@ -451,9 +456,11 @@ describe( 'BorderControl', () => {
 				width: undefined,
 			} );
 
-			setWidthInput( '0' );
+			await user.type( getWidthInput(), '0' );
+
 			rerender( <BorderControl { ...props } /> );
-			clickButton( 'Color: Green' );
+			await openPopover( user );
+			await user.click( getColorOption( 'Green' ) );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
 				color: '#00a32a',
@@ -463,13 +470,14 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should set a non-zero width when applying style to zero width border', async () => {
+			const user = userEvent.setup();
 			const props = createProps( {
 				value: undefined,
 				shouldSanitizeBorder: false,
 			} );
 			const { rerender } = render( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Dashed' );
+			await openPopover( user );
+			await user.click( getButton( 'Dashed' ) );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
 				color: undefined,
@@ -477,9 +485,11 @@ describe( 'BorderControl', () => {
 				width: undefined,
 			} );
 
-			setWidthInput( '0' );
+			await user.type( getWidthInput(), '0' );
+
 			rerender( <BorderControl { ...props } /> );
-			clickButton( 'Dotted' );
+			await openPopover( user );
+			await user.click( getButton( 'Dotted' ) );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
 				color: undefined,

package/src/box-control/unit-control.tsx

@@ -67,7 +67,7 @@ function Tooltip( {
 	 * https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
 	 */
 	return (
-		<BaseTooltip text={ text } position="top">
+		<BaseTooltip text={ text } placement="top">
 			<div>{ children }</div>
 		</BaseTooltip>
 	);

package/src/button/README.md

@@ -145,12 +145,6 @@ Whether the button is disabled. If `true`, this will force a `button` element to
 
 -   Required: No
 
-#### `focus`: `boolean`
-
-Whether the button is focused.
-
--   Required: No
-
 #### `href`: `string`
 
 If provided, renders `a` instead of `button`.

package/src/button/index.tsx

@@ -24,6 +24,7 @@ import Tooltip from '../tooltip';
 import Icon from '../icon';
 import { VisuallyHidden } from '../visually-hidden';
 import type { ButtonProps, DeprecatedButtonProps } from './types';
+import { positionToPlacement } from '../popover/utils';
 
 const disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ] as const;
 
@@ -225,6 +226,13 @@ export function UnforwardedButton(
 			</button>
 		);
 
+	// Convert legacy `position` values to be used with the new `placement` prop
+	let computedPlacement;
+	// if `tooltipPosition` is defined, compute value to `placement`
+	if ( tooltipPosition !== undefined ) {
+		computedPlacement = positionToPlacement( tooltipPosition );
+	}
+
 	if ( ! shouldShowTooltip ) {
 		return (
 			<>
@@ -248,7 +256,7 @@ export function UnforwardedButton(
 						: label
 				}
 				shortcut={ shortcut }
-				position={ tooltipPosition }
+				placement={ computedPlacement }
 			>
 				{ element }
 			</Tooltip>

package/src/button/stories/e2e/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Story, Meta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ const meta: Meta< typeof Button > = {
 };
 export default meta;
 
-export const VariantStates: Story< typeof Button > = (
+export const VariantStates: StoryFn< typeof Button > = (
 	props: ButtonAsButtonProps
 ) => {
 	const variants: ( typeof props.variant )[] = [
@@ -57,7 +57,7 @@ Icon.args = {
 	icon: wordpress,
 };
 
-export const Dashicons: Story< typeof Button > = ( props ) => {
+export const Dashicons: StoryFn< typeof Button > = ( props ) => {
 	return (
 		<div style={ { display: 'flex', gap: 8 } }>
 			<Button { ...props } />

package/src/button/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ReactNode } from 'react';
 
 /**
@@ -44,52 +44,52 @@ const meta: Meta< typeof Button > = {
 };
 export default meta;
 
-const Template: Story< typeof Button > = ( props ) => {
+const Template: StoryFn< typeof Button > = ( props ) => {
 	return <Button { ...props }></Button>;
 };
 
-export const Default: Story< typeof Button > = Template.bind( {} );
+export const Default = Template.bind( {} );
 Default.args = {
 	children: 'Code is poetry',
 };
 
-export const Primary: Story< typeof Button > = Template.bind( {} );
+export const Primary = Template.bind( {} );
 Primary.args = {
 	...Default.args,
 	variant: 'primary',
 };
 
-export const Secondary: Story< typeof Button > = Template.bind( {} );
+export const Secondary = Template.bind( {} );
 Secondary.args = {
 	...Default.args,
 	variant: 'secondary',
 };
 
-export const Tertiary: Story< typeof Button > = Template.bind( {} );
+export const Tertiary = Template.bind( {} );
 Tertiary.args = {
 	...Default.args,
 	variant: 'tertiary',
 };
 
-export const Link: Story< typeof Button > = Template.bind( {} );
+export const Link = Template.bind( {} );
 Link.args = {
 	...Default.args,
 	variant: 'link',
 };
 
-export const IsDestructive: Story< typeof Button > = Template.bind( {} );
+export const IsDestructive = Template.bind( {} );
 IsDestructive.args = {
 	...Default.args,
 	isDestructive: true,
 };
 
-export const Icon: Story< typeof Button > = Template.bind( {} );
+export const Icon = Template.bind( {} );
 Icon.args = {
 	label: 'Code is poetry',
 	icon: 'wordpress',
 };
 
-export const GroupedIcons: Story< typeof Button > = () => {
+export const GroupedIcons = () => {
 	const GroupContainer = ( { children }: { children: ReactNode } ) => (
 		<div style={ { display: 'inline-flex' } }>{ children }</div>
 	);

package/src/button/test/index.tsx

@@ -15,6 +15,7 @@ import { plusCircle } from '@wordpress/icons';
  */
 import Button from '..';
 import Tooltip from '../../tooltip';
+import cleanupTooltip from '../../tooltip/test/utils';
 
 jest.mock( '../../icon', () => () => <div data-testid="test-icon" /> );
 
@@ -236,9 +237,13 @@ describe( 'Button', () => {
 			await user.tab();
 
 			expect( screen.getByText( 'Label' ) ).toBeVisible();
+
+			await cleanupTooltip( user );
 		} );
 
 		it( 'should populate tooltip with description content for buttons with visible labels (buttons with children)', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<Button
 					label="Label"
@@ -255,6 +260,16 @@ describe( 'Button', () => {
 					description: 'Description text',
 				} )
 			).toBeVisible();
+
+			await user.tab();
+
+			expect(
+				screen.getByRole( 'tooltip', {
+					name: 'Description text',
+				} )
+			).toBeVisible();
+
+			await cleanupTooltip( user );
 		} );
 
 		it( 'should allow tooltip disable', async () => {
@@ -293,6 +308,8 @@ describe( 'Button', () => {
 			await user.tab();
 
 			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
+
+			await cleanupTooltip( user );
 		} );
 
 		it( 'should not show the tooltip when icon and children defined', async () => {
@@ -327,6 +344,8 @@ describe( 'Button', () => {
 			await user.tab();
 
 			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
+
+			await cleanupTooltip( user );
 		} );
 	} );
 

package/src/button/types.ts

@@ -33,10 +33,6 @@ type BaseButtonProps = {
 	 * An accessible description for the button.
 	 */
 	describedBy?: string;
-	/**
-	 * Whether the button is focused.
-	 */
-	focus?: boolean;
 	/**
 	 * If provided, renders an Icon component inside the button.
 	 */

package/src/button-group/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import ButtonGroup from '..';
 import Button from '../../button';
 
-const meta: ComponentMeta< typeof ButtonGroup > = {
+const meta: Meta< typeof ButtonGroup > = {
 	title: 'Components/ButtonGroup',
 	component: ButtonGroup,
 	argTypes: {
@@ -22,7 +22,7 @@ const meta: ComponentMeta< typeof ButtonGroup > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ButtonGroup > = ( args ) => {
+const Template: StoryFn< typeof ButtonGroup > = ( args ) => {
 	const style = { margin: '0 4px' };
 	return (
 		<ButtonGroup { ...args }>
@@ -36,6 +36,4 @@ const Template: ComponentStory< typeof ButtonGroup > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof ButtonGroup > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof ButtonGroup > = Template.bind( {} );

package/src/card/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -18,8 +18,10 @@ import { Text } from '../../text';
 import { Heading } from '../../heading';
 import Button from '../../button';
 
-const meta: ComponentMeta< typeof Card > = {
+const meta: Meta< typeof Card > = {
 	component: Card,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { CardHeader, CardBody, CardDivider, CardMedia, CardFooter },
 	title: 'Components/Card',
 	argTypes: {
 		as: {
@@ -39,9 +41,7 @@ const meta: ComponentMeta< typeof Card > = {
 
 export default meta;
 
-const Template: ComponentStory< typeof Card > = ( args ) => (
-	<Card { ...args } />
-);
+const Template: StoryFn< typeof Card > = ( args ) => <Card { ...args } />;
 
 export const Default = Template.bind( {} );
 Default.args = {

package/src/checkbox-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import CheckboxControl from '..';
 import { VStack } from '../../v-stack';
 
-const meta: ComponentMeta< typeof CheckboxControl > = {
+const meta: Meta< typeof CheckboxControl > = {
 	component: CheckboxControl,
 	title: 'Components/CheckboxControl',
 	argTypes: {
@@ -36,7 +36,7 @@ const meta: ComponentMeta< typeof CheckboxControl > = {
 };
 export default meta;
 
-const DefaultTemplate: ComponentStory< typeof CheckboxControl > = ( {
+const DefaultTemplate: StoryFn< typeof CheckboxControl > = ( {
 	onChange,
 	...args
 } ) => {
@@ -54,14 +54,15 @@ const DefaultTemplate: ComponentStory< typeof CheckboxControl > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof CheckboxControl > =
-	DefaultTemplate.bind( {} );
+export const Default: StoryFn< typeof CheckboxControl > = DefaultTemplate.bind(
+	{}
+);
 Default.args = {
 	label: 'Is author',
 	help: 'Is the user an author or not?',
 };
 
-export const Indeterminate: ComponentStory< typeof CheckboxControl > = ( {
+export const Indeterminate: StoryFn< typeof CheckboxControl > = ( {
 	onChange,
 	...args
 } ) => {