@wordpress/components 25.1.0 → 25.1.2

package/src/autocomplete/autocompleter-ui.tsx

@@ -13,7 +13,9 @@ import {
 	useState,
 } from '@wordpress/element';
 import { useAnchor } from '@wordpress/rich-text';
-import { useMergeRefs, useRefEffect } from '@wordpress/compose';
+import { useDebounce, useMergeRefs, useRefEffect } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
+import { __, _n, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -23,7 +25,7 @@ import Button from '../button';
 import Popover from '../popover';
 import { VisuallyHidden } from '../visually-hidden';
 import { createPortal } from 'react-dom';
-import type { AutocompleterUIProps, WPCompleter } from './types';
+import type { AutocompleterUIProps, KeyedOption, WPCompleter } from './types';
 
 export function getAutoCompleterUI( autocompleter: WPCompleter ) {
 	const useItems = autocompleter.useItems
@@ -69,8 +71,48 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) {
 
 		useOnClickOutside( popoverRef, reset );
 
+		const debouncedSpeak = useDebounce( speak, 500 );
+
+		function announce( options: Array< KeyedOption > ) {
+			if ( ! debouncedSpeak ) {
+				return;
+			}
+			if ( !! options.length ) {
+				if ( filterValue ) {
+					debouncedSpeak(
+						sprintf(
+							/* translators: %d: number of results. */
+							_n(
+								'%d result found, use up and down arrow keys to navigate.',
+								'%d results found, use up and down arrow keys to navigate.',
+								options.length
+							),
+							options.length
+						),
+						'assertive'
+					);
+				} else {
+					debouncedSpeak(
+						sprintf(
+							/* translators: %d: number of results. */
+							_n(
+								'Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.',
+								'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.',
+								options.length
+							),
+							options.length
+						),
+						'assertive'
+					);
+				}
+			} else {
+				debouncedSpeak( __( 'No results.' ), 'assertive' );
+			}
+		}
+
 		useLayoutEffect( () => {
 			onChangeOptions( items );
+			announce( items );
 			// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
 			// See https://github.com/WordPress/gutenberg/pull/41820
 			// eslint-disable-next-line react-hooks/exhaustive-deps

package/src/autocomplete/index.tsx

@@ -13,13 +13,8 @@ import {
 	useRef,
 	useMemo,
 } from '@wordpress/element';
-import { __, _n, sprintf } from '@wordpress/i18n';
-import {
-	useInstanceId,
-	useDebounce,
-	useMergeRefs,
-	useRefEffect,
-} from '@wordpress/compose';
+import { __, _n } from '@wordpress/i18n';
+import { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';
 import {
 	create,
 	slice,
@@ -27,7 +22,6 @@ import {
 	isCollapsed,
 	getTextContent,
 } from '@wordpress/rich-text';
-import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -54,7 +48,6 @@ export function useAutocomplete( {
 	completers,
 	contentRef,
 }: UseAutocompleteProps ) {
-	const debouncedSpeak = useDebounce( speak, 500 );
 	const instanceId = useInstanceId( useAutocomplete );
 	const [ selectedIndex, setSelectedIndex ] = useState( 0 );
 
@@ -137,28 +130,6 @@ export function useAutocomplete( {
 		setAutocompleterUI( null );
 	}
 
-	function announce( options: Array< KeyedOption > ) {
-		if ( ! debouncedSpeak ) {
-			return;
-		}
-		if ( !! options.length ) {
-			debouncedSpeak(
-				sprintf(
-					/* translators: %d: number of results. */
-					_n(
-						'%d result found, use up and down arrow keys to navigate.',
-						'%d results found, use up and down arrow keys to navigate.',
-						options.length
-					),
-					options.length
-				),
-				'assertive'
-			);
-		} else {
-			debouncedSpeak( __( 'No results.' ), 'assertive' );
-		}
-	}
-
 	/**
 	 * Load options for an autocompleter.
 	 *
@@ -169,7 +140,6 @@ export function useAutocomplete( {
 			options.length === filteredOptions.length ? selectedIndex : 0
 		);
 		setFilteredOptions( options );
-		announce( options );
 	}
 
 	function handleKeyDown( event: KeyboardEvent ) {

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

@@ -46,15 +46,10 @@ describe( 'BoxControl', () => {
 				name: 'Box Control',
 			} );
 
-			await user.type( input, '100%' );
+			await user.type( input, '100' );
 			await user.keyboard( '{Enter}' );
 
 			expect( input ).toHaveValue( '100' );
-			expect(
-				screen.getByRole( 'combobox', {
-					name: 'Select unit',
-				} )
-			).toHaveValue( '%' );
 		} );
 	} );
 
@@ -67,20 +62,15 @@ describe( 'BoxControl', () => {
 			const input = screen.getByRole( 'textbox', {
 				name: 'Box Control',
 			} );
-			const select = screen.getByRole( 'combobox', {
-				name: 'Select unit',
-			} );
 
-			await user.type( input, '100px' );
+			await user.type( input, '100' );
 			await user.keyboard( '{Enter}' );
 
 			expect( input ).toHaveValue( '100' );
-			expect( select ).toHaveValue( 'px' );
 
 			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 () => {
@@ -91,20 +81,15 @@ describe( 'BoxControl', () => {
 			const input = screen.getByRole( 'textbox', {
 				name: 'Box Control',
 			} );
-			const select = screen.getByRole( 'combobox', {
-				name: 'Select unit',
-			} );
 
-			await user.type( input, '100px' );
+			await user.type( input, '100' );
 			await user.keyboard( '{Enter}' );
 
 			expect( input ).toHaveValue( '100' );
-			expect( select ).toHaveValue( 'px' );
 
 			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 () => {
@@ -115,20 +100,15 @@ describe( 'BoxControl', () => {
 			const input = screen.getByRole( 'textbox', {
 				name: 'Box Control',
 			} );
-			const select = screen.getByRole( 'combobox', {
-				name: 'Select unit',
-			} );
 
-			await user.type( input, '100px' );
+			await user.type( input, '100' );
 			await user.keyboard( '{Enter}' );
 
 			expect( input ).toHaveValue( '100' );
-			expect( select ).toHaveValue( 'px' );
 
 			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
 
 			expect( input ).toHaveValue( '' );
-			expect( select ).toHaveValue( 'px' );
 		} );
 
 		it( 'should persist cleared value when focus changes', async () => {
@@ -141,15 +121,10 @@ describe( 'BoxControl', () => {
 				name: 'Box Control',
 			} );
 
-			await user.type( input, '100%' );
+			await user.type( input, '100' );
 			await user.keyboard( '{Enter}' );
 
 			expect( input ).toHaveValue( '100' );
-			expect(
-				screen.getByRole( 'combobox', {
-					name: 'Select unit',
-				} )
-			).toHaveValue( '%' );
 
 			await user.clear( input );
 			expect( input ).toHaveValue( '' );
@@ -178,9 +153,8 @@ describe( 'BoxControl', () => {
 
 			await user.type(
 				screen.getByRole( 'textbox', { name: 'Top' } ),
-				'100px'
+				'100'
 			);
-			await user.keyboard( '{Enter}' );
 
 			expect(
 				screen.getByRole( 'textbox', { name: 'Top' } )
@@ -194,12 +168,6 @@ describe( 'BoxControl', () => {
 			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 () => {
@@ -215,9 +183,8 @@ describe( 'BoxControl', () => {
 				screen.getByRole( 'textbox', {
 					name: 'Vertical',
 				} ),
-				'100px'
+				'100'
 			);
-			await user.keyboard( '{Enter}' );
 
 			expect(
 				screen.getByRole( 'textbox', { name: 'Vertical' } )
@@ -225,12 +192,6 @@ describe( 'BoxControl', () => {
 			expect(
 				screen.getByRole( 'textbox', { name: 'Horizontal' } )
 			).not.toHaveValue();
-
-			screen
-				.getAllByRole( 'combobox', { name: 'Select unit' } )
-				.forEach( ( combobox ) => {
-					expect( combobox ).toHaveValue( 'px' );
-				} );
 		} );
 	} );
 
@@ -321,23 +282,30 @@ describe( 'BoxControl', () => {
 	describe( 'onChange updates', () => {
 		it( 'should call onChange when values contain more than just CSS units', async () => {
 			const user = userEvent.setup();
-			const setState = jest.fn();
+			const onChangeSpy = jest.fn();
 
-			render( <BoxControl onChange={ setState } /> );
+			render( <BoxControl onChange={ onChangeSpy } /> );
 
-			await user.type(
-				screen.getByRole( 'textbox', {
-					name: 'Box Control',
-				} ),
-				'7.5rem'
-			);
-			await user.keyboard( '{Enter}' );
+			const valueInput = screen.getByRole( 'textbox', {
+				name: 'Box Control',
+			} );
+			const unitSelect = screen.getByRole( 'combobox', {
+				name: 'Select unit',
+			} );
 
-			expect( setState ).toHaveBeenCalledWith( {
-				top: '7.5rem',
-				right: '7.5rem',
-				bottom: '7.5rem',
-				left: '7.5rem',
+			// Typing the first letter of a unit blurs the input and focuses the combobox.
+			await user.type( valueInput, '7r' );
+
+			expect( unitSelect ).toHaveFocus();
+
+			// The correct expected behavior would be for the values to have "rem"
+			// as their unit, but the test environment doesn't seem to change
+			// values on `select` elements when using the keyboard.
+			expect( onChangeSpy ).toHaveBeenLastCalledWith( {
+				top: '7px',
+				right: '7px',
+				bottom: '7px',
+				left: '7px',
 			} );
 		} );
 

package/src/button/README.md

@@ -198,6 +198,8 @@ Renders a pressed button style.
 
 Decreases the size of the button.
 
+Deprecated in favor of the `size` prop. If both props are defined, the `size` prop will take precedence.
+
 -   Required: No
 
 #### `label`: `string`
@@ -218,6 +220,19 @@ If provided, renders a [Tooltip](/packages/components/src/tooltip/README.md) com
 
 -   Required: No
 
+#### `size`: `'default'` | `'compact'` | `'small'`
+
+The size of the button.
+
+-   `'default'`: For normal text-label buttons, unless it is a toggle button.
+-   `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either.
+-   `'small'`: For icon buttons associated with more advanced or auxiliary features.
+
+If the deprecated `isSmall` prop is also defined, this prop will take precedence.
+
+-   Required: No
+-   Default: `'default'`
+
 #### `target`: `string`
 
 If provided with `href`, sets the `target` attribute to the `a`.

package/src/button/index.tsx

@@ -33,11 +33,18 @@ function useDeprecatedProps( {
 	isSecondary,
 	isTertiary,
 	isLink,
+	isSmall,
+	size,
 	variant,
 	...otherProps
 }: ButtonProps & DeprecatedButtonProps ): ButtonProps {
+	let computedSize = size;
 	let computedVariant = variant;
 
+	if ( isSmall ) {
+		computedSize ??= 'small';
+	}
+
 	if ( isPrimary ) {
 		computedVariant ??= 'primary';
 	}
@@ -66,6 +73,7 @@ function useDeprecatedProps( {
 
 	return {
 		...otherProps,
+		size: computedSize,
 		variant: computedVariant,
 	};
 }
@@ -76,8 +84,6 @@ export function UnforwardedButton(
 ) {
 	const {
 		__next40pxDefaultSize,
-		__next32pxSmallSize,
-		isSmall,
 		isPressed,
 		isBusy,
 		isDestructive,
@@ -91,6 +97,7 @@ export function UnforwardedButton(
 		shortcut,
 		label,
 		children,
+		size = 'default',
 		text,
 		variant,
 		__experimentalIsFocusable: isFocusable,
@@ -118,10 +125,10 @@ export function UnforwardedButton(
 
 	const classes = classnames( 'components-button', className, {
 		'is-next-40px-default-size': __next40pxDefaultSize,
-		'is-next-32px-small-size': __next32pxSmallSize,
 		'is-secondary': variant === 'secondary',
 		'is-primary': variant === 'primary',
-		'is-small': isSmall,
+		'is-small': size === 'small',
+		'is-compact': size === 'compact',
 		'is-tertiary': variant === 'tertiary',
 		'is-pressed': isPressed,
 		'is-busy': isBusy,

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

@@ -56,3 +56,25 @@ export const Icon = VariantStates.bind( {} );
 Icon.args = {
 	icon: wordpress,
 };
+
+export const Dashicons: ComponentStory< typeof Button > = ( props ) => {
+	return (
+		<div style={ { display: 'flex', gap: 8 } }>
+			<Button { ...props } />
+			<Button { ...props }>Children</Button>
+			<Button { ...props } iconPosition="right">
+				Children (icon right)
+			</Button>
+			<Button { ...props } text="Text" />
+			<Button
+				{ ...props }
+				text="Text (icon right)"
+				iconPosition="right"
+			/>
+		</div>
+	);
+};
+Dashicons.args = {
+	icon: 'editor-help',
+	variant: 'primary',
+};

package/src/button/style.scss

@@ -168,11 +168,6 @@
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 		}
 
-		.dashicon {
-			display: inline-block;
-			flex: 0 0 auto;
-		}
-
 		// Pull left if the tertiary button stands alone after a description, so as to vertically align with items above.
 		p + & {
 			margin-left: -($grid-unit-15 * 0.5);
@@ -262,25 +257,26 @@
 		/* stylelint-enable */
 	}
 
+	&.is-compact {
+		height: $button-size-compact;
+
+		&.has-icon:not(.has-text) {
+			padding: 0;
+			width: $button-size-compact;
+			min-width: $button-size-compact;
+		}
+	}
+
 	&.is-small {
-		height: $button-size-small-next-default-32px;
+		height: $button-size-small;
 		line-height: 22px;
 		padding: 0 8px;
 		font-size: 11px;
 
 		&.has-icon:not(.has-text) {
 			padding: 0;
-			width: $button-size-small-next-default-32px;
-			min-width: $button-size-small-next-default-32px;
-		}
-
-		&:not(.is-next-32px-small-size) {
-			height: $button-size-small;
-
-			&.has-icon:not(.has-text) {
-				width: $button-size-small;
-				min-width: $button-size-small;
-			}
+			width: $button-size-small;
+			min-width: $button-size-small;
 		}
 	}
 
@@ -296,10 +292,11 @@
 		}
 
 		.dashicon {
-			display: inline-block;
-			flex: 0 0 auto;
-			margin-left: 2px;
-			margin-right: 2px;
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+			padding: 2px;
+			box-sizing: content-box;
 		}
 
 		&.has-text {
@@ -308,10 +305,6 @@
 			padding-left: $grid-unit-10;
 			gap: $grid-unit-05;
 		}
-
-		&.has-text .dashicon {
-			margin-right: $grid-unit-10 + 2px;
-		}
 	}
 
 	// Toggled style.

package/src/button/test/index.tsx

@@ -402,6 +402,19 @@ describe( 'Button', () => {
 			);
 			expect( console ).toHaveWarned();
 		} );
+
+		it( 'should not break when the legacy isSmall prop is passed', () => {
+			render( <Button isSmall /> );
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-small' );
+		} );
+
+		it( 'should prioritize the `size` prop over `isSmall`', () => {
+			render( <Button size="compact" isSmall /> );
+			expect( screen.getByRole( 'button' ) ).not.toHaveClass(
+				'is-small'
+			);
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-compact' );
+		} );
 	} );
 
 	describe( 'static typing', () => {

package/src/button/types.ts

@@ -25,15 +25,6 @@ type BaseButtonProps = {
 	 * @default false
 	 */
 	__next40pxDefaultSize?: boolean;
-	/**
-	 * Start opting into the larger `isSmall` button size that will become the
-	 * default small size in a future version.
-	 *
-	 * Only takes effect when the `isSmall` prop is `true`.
-	 *
-	 * @default false
-	 */
-	__next32pxSmallSize?: boolean;
 	/**
 	 * The button's children.
 	 */
@@ -74,8 +65,13 @@ type BaseButtonProps = {
 	 * Renders a pressed button style.
 	 */
 	isPressed?: boolean;
+	// TODO: Deprecate officially (add console warning and move to DeprecatedButtonProps).
 	/**
 	 * Decreases the size of the button.
+	 *
+	 * Deprecated in favor of the `size` prop. If both props are defined, the `size` prop will take precedence.
+	 *
+	 * @deprecated Use the `'small'` value on the `size` prop instead.
 	 */
 	isSmall?: boolean;
 	/**
@@ -92,6 +88,18 @@ type BaseButtonProps = {
 	 * If provided, renders a Tooltip component for the button.
 	 */
 	showTooltip?: boolean;
+	/**
+	 * The size of the button.
+	 *
+	 * - `'default'`: For normal text-label buttons, unless it is a toggle button.
+	 * - `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either.
+	 * - `'small'`: For icon buttons associated with more advanced or auxiliary features.
+	 *
+	 * If the deprecated `isSmall` prop is also defined, this prop will take precedence.
+	 *
+	 * @default 'default'
+	 */
+	size?: 'default' | 'compact' | 'small';
 	/**
 	 * If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them.
 	 */

package/src/circular-option-picker/types.ts

@@ -12,7 +12,7 @@ import type { Icon } from '@wordpress/icons';
  * Internal dependencies
  */
 import type { ButtonAsButtonProps } from '../button/types';
-import type Dropdown from '../dropdown';
+import type { DropdownProps } from '../dropdown/types';
 import type { WordPressComponentProps } from '../ui/context';
 
 export type CircularOptionPickerProps = {
@@ -44,10 +44,7 @@ export type DropdownLinkActionProps = {
 		'children'
 	>;
 	linkText: string;
-	dropdownProps: Omit<
-		React.ComponentProps< typeof Dropdown >,
-		'className' | 'renderToggle'
-	>;
+	dropdownProps: Omit< DropdownProps, 'className' | 'renderToggle' >;
 	className?: string;
 };
 

package/src/clipboard-button/{index.js → index.tsx}

@@ -14,17 +14,11 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import Button from '../button';
+import type { ClipboardButtonProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
 
 const TIMEOUT = 4000;
 
-/**
- * @param {Object}                    props
- * @param {string}                    [props.className]
- * @param {import('react').ReactNode} props.children
- * @param {() => void}                props.onCopy
- * @param {() => void}                [props.onFinishCopy]
- * @param {string}                    props.text
- */
 export default function ClipboardButton( {
 	className,
 	children,
@@ -32,18 +26,18 @@ export default function ClipboardButton( {
 	onFinishCopy,
 	text,
 	...buttonProps
-} ) {
+}: WordPressComponentProps< ClipboardButtonProps, 'button', false > ) {
 	deprecated( 'wp.components.ClipboardButton', {
 		since: '5.8',
 		alternative: 'wp.compose.useCopyToClipboard',
 	} );
 
-	/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */
-	const timeoutId = useRef();
+	const timeoutId = useRef< NodeJS.Timeout >();
 	const ref = useCopyToClipboard( text, () => {
 		onCopy();
-		// @ts-expect-error: Should check if .current is defined, but not changing because this component is deprecated.
-		clearTimeout( timeoutId.current );
+		if ( timeoutId.current ) {
+			clearTimeout( timeoutId.current );
+		}
 
 		if ( onFinishCopy ) {
 			timeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );
@@ -51,8 +45,9 @@ export default function ClipboardButton( {
 	} );
 
 	useEffect( () => {
-		// @ts-expect-error: Should check if .current is defined, but not changing because this component is deprecated.
-		clearTimeout( timeoutId.current );
+		if ( timeoutId.current ) {
+			clearTimeout( timeoutId.current );
+		}
 	}, [] );
 
 	const classes = classnames( 'components-clipboard-button', className );
@@ -62,8 +57,7 @@ export default function ClipboardButton( {
 	// This causes documentHasSelection() in the copy-handler component to
 	// mistakenly override the ClipboardButton, and copy a serialized string
 	// of the current block instead.
-	/** @type {import('react').ClipboardEventHandler<HTMLButtonElement>} */
-	const focusOnCopyEventTarget = ( event ) => {
+	const focusOnCopyEventTarget: React.ClipboardEventHandler = ( event ) => {
 		// @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.
 		event.target.focus();
 	};

package/src/clipboard-button/types.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export interface ClipboardButtonProps {
+	children: ReactNode;
+	onCopy: () => void;
+	onFinishCopy?: () => void;
+	text: string;
+}