@wordpress/components 28.2.0 → 28.4.0

package/src/toggle-group-control/test/index.tsx

@@ -80,6 +80,13 @@ const optionsWithTooltip = (
 		/>
 	</>
 );
+const optionsWithDisabledOption = (
+	<>
+		<ToggleGroupControlOption value="pizza" label="Pizza" />
+		<ToggleGroupControlOption value="rice" label="Rice" disabled />
+		<ToggleGroupControlOption value="pasta" label="Pasta" />
+	</>
+);
 
 describe.each( [
 	[ 'uncontrolled', ToggleGroupControl ],
@@ -351,6 +358,53 @@ describe.each( [
 
 				expect( expectedFocusTarget ).toHaveFocus();
 			} );
+
+			it( 'should ignore disabled radio options', async () => {
+				const mockOnChange = jest.fn();
+
+				render(
+					<Component
+						value="pizza"
+						onChange={ mockOnChange }
+						label="Test Toggle Group Control"
+					>
+						{ optionsWithDisabledOption }
+					</Component>
+				);
+
+				await sleep();
+				await press.Tab();
+
+				expect(
+					screen.getByRole( 'radio', { name: 'Pizza' } )
+				).toBeChecked();
+				expect(
+					screen.getByRole( 'radio', { name: 'Rice' } )
+				).toBeDisabled();
+
+				// Arrow navigation skips the disabled option
+				await press.ArrowRight();
+				expect(
+					screen.getByRole( 'radio', { name: 'Pasta' } )
+				).toBeChecked();
+				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+				expect( mockOnChange ).toHaveBeenLastCalledWith( 'pasta' );
+
+				// Arrow navigation skips the disabled option
+				await press.ArrowLeft();
+				expect(
+					screen.getByRole( 'radio', { name: 'Pizza' } )
+				).toBeChecked();
+				expect( mockOnChange ).toHaveBeenCalledTimes( 2 );
+				expect( mockOnChange ).toHaveBeenLastCalledWith( 'pizza' );
+
+				// Clicks don't cause the option to be selected
+				await click( screen.getByRole( 'radio', { name: 'Rice' } ) );
+				expect(
+					screen.getByRole( 'radio', { name: 'Pizza' } )
+				).toBeChecked();
+				expect( mockOnChange ).toHaveBeenCalledTimes( 2 );
+			} );
 		} );
 
 		describe( 'isDeselectable = true', () => {
@@ -421,6 +475,66 @@ describe.each( [
 					} )
 				).toHaveFocus();
 			} );
+
+			it( 'should ignore disabled options', async () => {
+				const mockOnChange = jest.fn();
+
+				render(
+					<Component
+						value="pizza"
+						isDeselectable
+						onChange={ mockOnChange }
+						label="Test Toggle Group Control"
+					>
+						{ optionsWithDisabledOption }
+					</Component>
+				);
+
+				await sleep();
+				await press.Tab();
+
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Pizza',
+						pressed: true,
+					} )
+				).toBeVisible();
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Rice',
+						pressed: false,
+					} )
+				).toBeDisabled();
+
+				// Tab key navigation skips the disabled option
+				await press.Tab();
+				await press.Space();
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Pasta',
+						pressed: true,
+					} )
+				).toHaveFocus();
+				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+				expect( mockOnChange ).toHaveBeenLastCalledWith( 'pasta' );
+
+				// Tab key navigation skips the disabled option
+				await press.ShiftTab();
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Pizza',
+						pressed: false,
+					} )
+				).toHaveFocus();
+
+				// Clicks don't cause the option to be selected.
+				await click(
+					screen.getByRole( 'button', {
+						name: 'Rice',
+					} )
+				);
+				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+			} );
 		} );
 	} );
 } );

package/src/toggle-group-control/toggle-group-control/as-radio-group.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 
 /**

package/src/toggle-group-control/toggle-group-control/component.tsx

@@ -2,14 +2,12 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-// eslint-disable-next-line no-restricted-imports
 import { LayoutGroup } from 'framer-motion';
 
 /**
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 
 /**

package/src/toggle-group-control/toggle-group-control-option-base/component.tsx

@@ -2,9 +2,7 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
-// eslint-disable-next-line no-restricted-imports
 import { motion } from 'framer-motion';
 
 /**
@@ -54,7 +52,9 @@ function ToggleGroupControlOptionBase(
 			false
 		>,
 		// the element's id is generated internally
-		'id'
+		| 'id'
+		// due to how the component works, only the `disabled` prop should be used
+		| 'aria-disabled'
 	>,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -84,6 +84,7 @@ function ToggleGroupControlOptionBase(
 		children,
 		showTooltip = false,
 		onFocus: onFocusProp,
+		disabled,
 		...otherButtonProps
 	} = buttonProps;
 
@@ -132,6 +133,7 @@ function ToggleGroupControlOptionBase(
 				{ isDeselectable ? (
 					<button
 						{ ...commonProps }
+						disabled={ disabled }
 						onFocus={ onFocusProp }
 						aria-pressed={ isPressed }
 						type="button"
@@ -141,6 +143,7 @@ function ToggleGroupControlOptionBase(
 					</button>
 				) : (
 					<Ariakit.Radio
+						disabled={ disabled }
 						render={
 							<button
 								type="button"

package/src/toggle-group-control/toggle-group-control-option-base/styles.ts

@@ -64,6 +64,11 @@ export const buttonView = ( {
 		border: 0;
 	}
 
+	&[disabled] {
+		opacity: 0.4;
+		cursor: default;
+	}
+
 	&:active {
 		background: ${ CONFIG.toggleGroupControlBackgroundColor };
 	}

package/src/toolbar/toolbar/README.md

@@ -74,6 +74,15 @@ Leave undefined for the default style. Or `'unstyled'` which removes the border
 -   Required: No
 -   Default: `undefined`
 
+#### `orientation`: `'horizontal' | 'vertical'`
+
+Specifies the toolbar's orientation.
+
+Leave undefined or 'horizontal' for horizontal orientation keyboard interactions, choose 'vertical' for the alternative.
+
+-   Required: No
+-   Default: `horizontal`
+
 ## Related components
 
 -   Toolbar may contain [ToolbarGroup](/packages/components/src/toolbar-group/README.md), [ToolbarButton](/packages/components/src/toolbar-button/README.md) and [ToolbarItem](/packages/components/src/toolbar-Item/README.md) as children.

package/src/toolbar/toolbar/style.scss

@@ -20,6 +20,13 @@
 
 .components-accessible-toolbar,
 .components-toolbar {
+
+	&[aria-orientation="vertical"] {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
 	.components-button {
 		position: relative;
 		height: $block-toolbar-height;

package/src/toolbar/toolbar/toolbar-container.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 import type { ForwardedRef } from 'react';
 

package/src/toolbar/toolbar/types.ts

@@ -22,4 +22,10 @@ export type ToolbarProps = {
 	 * @default undefined
 	 */
 	variant?: 'unstyled' | undefined;
+	/**
+	 * Orientation of the toolbar keyboard interactions.
+	 *
+	 * @default 'horizontal'
+	 */
+	orientation?: 'horizontal' | 'vertical';
 };

package/src/toolbar/toolbar-button/index.tsx

@@ -16,22 +16,36 @@ import Button from '../../button';
 import ToolbarItem from '../toolbar-item';
 import ToolbarContext from '../toolbar-context';
 import ToolbarButtonContainer from './toolbar-button-container';
-import type { ToolbarButtonProps } from './types';
+import type { ToolbarButtonOverriddenProps, ToolbarButtonProps } from './types';
 import type { WordPressComponentProps } from '../../context';
 
+function useDeprecatedProps( {
+	isDisabled,
+	...otherProps
+}: React.ComponentProps< typeof ToolbarButton > ) {
+	return {
+		disabled: isDisabled,
+		...otherProps,
+	};
+}
+
 function UnforwardedToolbarButton(
-	{
+	props: Omit<
+		WordPressComponentProps< ToolbarButtonProps, typeof Button, false >,
+		'accessibleWhenDisabled' // By default, ToolbarButton will be focusable when disabled.
+	> &
+		ToolbarButtonOverriddenProps,
+	ref: ForwardedRef< any >
+) {
+	const {
 		children,
 		className,
 		containerClassName,
 		extraProps,
 		isActive,
-		isDisabled,
 		title,
-		...props
-	}: WordPressComponentProps< ToolbarButtonProps, typeof Button, false >,
-	ref: ForwardedRef< any >
-) {
+		...restProps
+	} = useDeprecatedProps( props );
 	const accessibleToolbarState = useContext( ToolbarContext );
 
 	if ( ! accessibleToolbarState ) {
@@ -39,10 +53,10 @@ function UnforwardedToolbarButton(
 			<ToolbarButtonContainer className={ containerClassName }>
 				<Button
 					ref={ ref }
-					icon={ props.icon }
+					icon={ restProps.icon }
 					label={ title }
-					shortcut={ props.shortcut }
-					data-subscript={ props.subscript }
+					shortcut={ restProps.shortcut }
+					data-subscript={ restProps.subscript }
 					onClick={ (
 						event: ReactMouseEvent<
 							HTMLButtonElement & HTMLAnchorElement,
@@ -50,9 +64,9 @@ function UnforwardedToolbarButton(
 						>
 					) => {
 						event.stopPropagation();
-						// TODO: Possible bug; maybe use onClick instead of props.onClick.
-						if ( props.onClick ) {
-							props.onClick( event );
+						// TODO: Possible bug; maybe use onClick instead of restProps.onClick.
+						if ( restProps.onClick ) {
+							restProps.onClick( event );
 						}
 					} }
 					className={ clsx(
@@ -60,10 +74,10 @@ function UnforwardedToolbarButton(
 						className
 					) }
 					isPressed={ isActive }
-					disabled={ isDisabled }
+					accessibleWhenDisabled
 					data-toolbar-item
 					{ ...extraProps }
-					{ ...props }
+					{ ...restProps }
 				>
 					{ children }
 				</Button>
@@ -78,14 +92,13 @@ function UnforwardedToolbarButton(
 		<ToolbarItem
 			className={ clsx( 'components-toolbar-button', className ) }
 			{ ...extraProps }
-			{ ...props }
+			{ ...restProps }
 			ref={ ref }
 		>
 			{ ( toolbarItemProps ) => (
 				<Button
 					label={ title }
 					isPressed={ isActive }
-					disabled={ isDisabled }
 					{ ...toolbarItemProps }
 				>
 					{ children }

package/src/toolbar/toolbar-button/types.ts

@@ -22,6 +22,9 @@ export type ToolbarButtonProps = {
 	isActive?: boolean;
 	/**
 	 * Indicates if the button is disabled.
+	 *
+	 * @deprecated Use `disabled` instead.
+	 * @ignore
 	 */
 	isDisabled?: boolean;
 	/**
@@ -34,6 +37,22 @@ export type ToolbarButtonProps = {
 	title?: string;
 };
 
+export type ToolbarButtonOverriddenProps = {
+	/**
+	 * Whether to keep the button focusable when disabled.
+	 *
+	 * In most cases, it is recommended to set this to `true`. Disabling a control without maintaining focusability
+	 * can cause accessibility issues, by hiding their presence from screen reader users,
+	 * or by preventing focus from returning to a trigger element.
+	 *
+	 * Learn more about the [focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols)
+	 * in the WAI-ARIA Authoring Practices Guide.
+	 *
+	 * @default true
+	 */
+	accessibleWhenDisabled?: boolean;
+};
+
 export type ToolbarButtonContainerProps = {
 	/**
 	 * Children to be rendered inside the button container.

package/src/toolbar/toolbar-context/index.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type * as Ariakit from '@ariakit/react';
 
 /**

package/src/toolbar/toolbar-item/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 import type { ForwardedRef } from 'react';
 
@@ -50,6 +49,7 @@ function ToolbarItem(
 
 	return (
 		<Ariakit.ToolbarItem
+			accessibleWhenDisabled
 			{ ...allProps }
 			store={ accessibleToolbarStore }
 			render={ render }

package/src/tools-panel/tools-panel-header/component.tsx

@@ -200,7 +200,7 @@ const ToolsPanelHeader = (
 					menuProps={ { className: dropdownMenuClassName } }
 					toggleProps={ {
 						size: 'small',
-						describedBy: dropdownMenuDescriptionText,
+						description: dropdownMenuDescriptionText,
 					} }
 				>
 					{ () => (

package/src/tooltip/index.tsx

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -45,6 +45,7 @@ function UnforwardedTooltip(
 ) {
 	const {
 		children,
+		className,
 		delay = TOOLTIP_DELAY,
 		hideOnClick = true,
 		placement,
@@ -113,7 +114,7 @@ function UnforwardedTooltip(
 			{ isOnlyChild && ( text || shortcut ) && (
 				<Ariakit.Tooltip
 					{ ...restProps }
-					className="components-tooltip"
+					className={ clsx( 'components-tooltip', className ) }
 					unmountOnHide
 					gutter={ 4 }
 					id={ describedById }

package/src/tooltip/test/index.tsx

@@ -105,6 +105,24 @@ describe( 'Tooltip', () => {
 				screen.getByRole( 'button', { name: 'Anchor' } )
 			).not.toHaveAttribute( 'data-foo' );
 		} );
+
+		it( 'should add default and custom class names to the tooltip', async () => {
+			render( <Tooltip { ...props } className="foo" /> );
+
+			// Hover over the anchor, tooltip should show
+			await hover(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			);
+
+			// Check default and custom classnames
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'tooltip', {
+						name: 'tooltip text',
+					} )
+				).toHaveClass( 'components-tooltip', 'foo' )
+			);
+		} );
 	} );
 
 	describe( 'keyboard focus', () => {

package/src/tooltip/types.ts

@@ -16,6 +16,10 @@ export type TooltipProps = {
 	 * **Note**: Accepts only one child element.
 	 */
 	children: React.ReactElement;
+	/**
+	 * Custom class name for the tooltip.
+	 */
+	className?: string;
 	/**
 	 * Option to hide the tooltip when the anchor is clicked.
 	 *

package/src/tree-select/README.md

@@ -15,6 +15,7 @@ const MyTreeSelect = () => {
 
 	return (
 		<TreeSelect
+		  __nextHasNoMarginBottom
 			label="Parent page"
 			noOptionLabel="No parent page"
 			onChange={ ( newPage ) => setPage( newPage ) }
@@ -89,3 +90,11 @@ An array containing the tree objects with the possible nodes the user can select
 
 -   Type: `Object[]`
 -   Required: No
+
+#### __nextHasNoMarginBottom
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`

package/src/tree-select/index.tsx

@@ -37,6 +37,7 @@ function getSelectOptions(
  *
  * 	return (
  * 		<TreeSelect
+ *      __nextHasNoMarginBottom
  * 			label="Parent page"
  * 			noOptionLabel="No parent page"
  * 			onChange={ ( newPage ) => setPage( newPage ) }

package/src/unit-control/index.tsx

@@ -167,11 +167,12 @@ function UnforwardedUnitControl(
 	if ( ! disableUnits && isUnitSelectTabbable && units.length ) {
 		handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {
 			props.onKeyDown?.( event );
-			// Unless the meta key was pressed (to avoid interfering with
-			// shortcuts, e.g. pastes), moves focus to the unit select if a key
+			// Unless the meta or ctrl key was pressed (to avoid interfering with
+			// shortcuts, e.g. pastes), move focus to the unit select if a key
 			// matches the first character of a unit.
 			if (
 				! event.metaKey &&
+				! event.ctrlKey &&
 				reFirstCharacterOfUnits.test( event.key )
 			) {
 				refInputSuffix.current?.focus();

package/src/unit-control/styles/unit-control-styles.ts

@@ -40,12 +40,15 @@ const baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {
 			box-sizing: border-box;
 			padding: 2px 1px;
 			width: 20px;
-			color: ${ COLORS.gray[ 800 ] };
 			font-size: 8px;
 			line-height: 1;
 			letter-spacing: -0.5px;
 			text-transform: uppercase;
 			text-align-last: center;
+
+			&:not( :disabled ) {
+				color: ${ COLORS.gray[ 800 ] };
+			}
 		`,
 		default: css`
 			box-sizing: border-box;
@@ -54,13 +57,17 @@ const baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {
 			height: 24px;
 			margin-inline-end: ${ space( 2 ) };
 			padding: ${ space( 1 ) };
-			color: ${ COLORS.theme.accent };
+
 			font-size: 13px;
 			line-height: 1;
 			text-align-last: center;
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
+
+			&:not( :disabled ) {
+				color: ${ COLORS.theme.accent };
+			}
 		`,
 	};
 
@@ -106,8 +113,7 @@ const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {
 			justify-content: center;
 			align-items: center;
 
-			&:hover {
-				color: ${ COLORS.ui.borderFocus };
+			&:where( :not( :disabled ) ):hover {
 				box-shadow: inset 0 0 0
 					${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };
 				outline: ${ CONFIG.borderWidth } solid transparent; // For High Contrast Mode