@wordpress/components 25.8.2 → 25.9.0

package/src/border-control/border-control-style-picker/hook.ts

@@ -7,8 +7,8 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import * as styles from '../styles';
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
 
 import type { StylePickerProps } from '../types';

package/src/border-control/styles.ts

@@ -7,7 +7,7 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { COLORS, CONFIG, boxSizingReset, rtl } from '../utils';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { StyledLabel } from '../base-control/styles/base-control-styles';
 import {
 	ValueInput as UnitControlWrapper,

package/src/box-control/README.md

@@ -9,8 +9,8 @@ BoxControl components let users set values for Top, Right, Bottom, and Left. Thi
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const Example = () => {
 	const [ values, setValues ] = useState( {

package/src/box-control/icon.tsx

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import {
 	Root,
 	Viewbox,

package/src/button/README.md

@@ -186,6 +186,8 @@ Renders a red text-based button style to indicate destructive behavior.
 
 Renders a pressed button style.
 
+If the native `aria-pressed` attribute is also set, it will take precedence.
+
 -   Required: No
 
 #### `isSmall`: `boolean`

package/src/button/index.tsx

@@ -34,6 +34,7 @@ function useDeprecatedProps( {
 	isSecondary,
 	isTertiary,
 	isLink,
+	isPressed,
 	isSmall,
 	size,
 	variant,
@@ -42,6 +43,11 @@ function useDeprecatedProps( {
 	let computedSize = size;
 	let computedVariant = variant;
 
+	const newProps: { 'aria-pressed'?: boolean } = {
+		// @TODO Mark `isPressed` as deprecated
+		'aria-pressed': isPressed,
+	};
+
 	if ( isSmall ) {
 		computedSize ??= 'small';
 	}
@@ -73,6 +79,7 @@ function useDeprecatedProps( {
 	}
 
 	return {
+		...newProps,
 		...otherProps,
 		size: computedSize,
 		variant: computedVariant,
@@ -85,7 +92,6 @@ export function UnforwardedButton(
 ) {
 	const {
 		__next40pxDefaultSize,
-		isPressed,
 		isBusy,
 		isDestructive,
 		className,
@@ -106,10 +112,16 @@ export function UnforwardedButton(
 		...buttonOrAnchorProps
 	} = useDeprecatedProps( props );
 
-	const { href, target, ...additionalProps } =
-		'href' in buttonOrAnchorProps
-			? buttonOrAnchorProps
-			: { href: undefined, target: undefined, ...buttonOrAnchorProps };
+	const {
+		href,
+		target,
+		'aria-checked': ariaChecked,
+		'aria-pressed': ariaPressed,
+		'aria-selected': ariaSelected,
+		...additionalProps
+	} = 'href' in buttonOrAnchorProps
+		? buttonOrAnchorProps
+		: { href: undefined, target: undefined, ...buttonOrAnchorProps };
 
 	const instanceId = useInstanceId(
 		Button,
@@ -124,6 +136,12 @@ export function UnforwardedButton(
 			// Tooltip should not considered as a child
 			children?.[ 0 ]?.props?.className !== 'components-tooltip' );
 
+	const truthyAriaPressedValues: ( typeof ariaPressed )[] = [
+		true,
+		'true',
+		'mixed',
+	];
+
 	const classes = classnames( 'components-button', className, {
 		'is-next-40px-default-size': __next40pxDefaultSize,
 		'is-secondary': variant === 'secondary',
@@ -131,7 +149,10 @@ export function UnforwardedButton(
 		'is-small': size === 'small',
 		'is-compact': size === 'compact',
 		'is-tertiary': variant === 'tertiary',
-		'is-pressed': isPressed,
+
+		'is-pressed': truthyAriaPressedValues.includes( ariaPressed ),
+		'is-pressed-mixed': ariaPressed === 'mixed',
+
 		'is-busy': isBusy,
 		'is-link': variant === 'link',
 		'is-destructive': isDestructive,
@@ -146,7 +167,9 @@ export function UnforwardedButton(
 			? {
 					type: 'button',
 					disabled: trulyDisabled,
-					'aria-pressed': isPressed,
+					'aria-checked': ariaChecked,
+					'aria-pressed': ariaPressed,
+					'aria-selected': ariaSelected,
 			  }
 			: {};
 	const anchorProps: ComponentPropsWithoutRef< 'a' > =

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

@@ -26,6 +26,17 @@ const meta: Meta< typeof Button > = {
 	component: Button,
 	argTypes: {
 		// Overrides a limitation of the docgen interpreting our TS types for this as required.
+		'aria-pressed': {
+			control: { type: 'select' },
+			description:
+				'Indicates the current "pressed" state, implying it is a toggle button. Implicitly set by `isPressed`, but takes precedence if both are provided.',
+			options: [ undefined, 'true', 'false', 'mixed' ],
+			table: {
+				type: {
+					summary: 'boolean | "true" | "false" | "mixed"',
+				},
+			},
+		},
 		href: { type: { name: 'string', required: false } },
 		icon: {
 			control: { type: 'select' },

package/src/button/style.scss

@@ -145,7 +145,7 @@
 		color: $components-color-accent;
 		background: transparent;
 
-		&:hover:not(:disabled) {
+		&:hover:not(:disabled, [aria-disabled="true"]) {
 			box-shadow: inset 0 0 0 $border-width $components-color-accent-darker-10;
 		}
 	}
@@ -308,7 +308,8 @@
 	}
 
 	// Toggled style.
-	&.is-pressed {
+	&[aria-pressed="true"],
+	&[aria-pressed="mixed"] {
 		color: $components-color-foreground-inverted;
 		background: $components-color-foreground;
 

package/src/button/test/index.tsx

@@ -72,12 +72,6 @@ describe( 'Button', () => {
 			expect( button ).toHaveClass( 'is-link' );
 		} );
 
-		it( 'should render a button element with is-pressed without button class', () => {
-			render( <Button isPressed /> );
-
-			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-pressed' );
-		} );
-
 		it( 'should render a button element with has-text when children are passed', async () => {
 			const user = userEvent.setup();
 
@@ -347,6 +341,56 @@ describe( 'Button', () => {
 
 			await cleanupTooltip( user );
 		} );
+
+		describe( 'using `aria-pressed` prop', () => {
+			it( 'should render a button element with is-pressed when `true`', () => {
+				render( <Button aria-pressed /> );
+
+				expect( screen.getByRole( 'button' ) ).toHaveClass(
+					'is-pressed'
+				);
+			} );
+
+			it( 'should render a button element with is-pressed when `"true"`', () => {
+				render( <Button aria-pressed="true" /> );
+
+				expect( screen.getByRole( 'button' ) ).toHaveClass(
+					'is-pressed'
+				);
+			} );
+
+			it( 'should render a button element with is-pressed/is-pressed-mixed when `"mixed"`', () => {
+				render( <Button aria-pressed="mixed" /> );
+
+				expect( screen.getByRole( 'button' ) ).toHaveClass(
+					'is-pressed is-pressed-mixed'
+				);
+			} );
+
+			it( 'should render a button element without is-pressed when `undefined`', () => {
+				render( <Button aria-pressed={ undefined } /> );
+
+				expect( screen.getByRole( 'button' ) ).not.toHaveClass(
+					'is-pressed'
+				);
+			} );
+
+			it( 'should render a button element without is-pressed when `false`', () => {
+				render( <Button aria-pressed={ false } /> );
+
+				expect( screen.getByRole( 'button' ) ).not.toHaveClass(
+					'is-pressed'
+				);
+			} );
+
+			it( 'should render a button element without is-pressed when `"false"`', () => {
+				render( <Button aria-pressed="false" /> );
+
+				expect( screen.getByRole( 'button' ) ).not.toHaveClass(
+					'is-pressed'
+				);
+			} );
+		} );
 	} );
 
 	describe( 'with href property', () => {
@@ -434,6 +478,23 @@ describe( 'Button', () => {
 			);
 			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-compact' );
 		} );
+
+		it( 'should not break when the legacy isPressed prop is passed', () => {
+			render( <Button isPressed /> );
+
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+				'aria-pressed',
+				'true'
+			);
+		} );
+
+		it( 'should prioritize the `aria-pressed` prop over `isPressed`', () => {
+			render( <Button isPressed aria-pressed="mixed" /> );
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+				'aria-pressed',
+				'mixed'
+			);
+		} );
 	} );
 
 	describe( 'static typing', () => {

package/src/button/types.ts

@@ -8,7 +8,7 @@ import type { ReactNode } from 'react';
  */
 import type { Props as IconProps } from '../icon';
 import type { PopoverProps } from '../popover/types';
-import type { WordPressComponentProps } from '../ui/context/wordpress-component';
+import type { WordPressComponentProps } from '../context/wordpress-component';
 
 export type ButtonProps =
 	| WordPressComponentProps< ButtonAsButtonProps, 'button', false >

package/src/button-group/index.tsx

@@ -13,7 +13,7 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import type { ButtonGroupProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 function UnforwardedButtonGroup(
 	props: WordPressComponentProps< ButtonGroupProps, 'div', false >,

package/src/card/card/README.md

@@ -66,7 +66,7 @@ Determines the amount of padding within the component.
 
 ### Inherited props
 
-`Card` also inherits all of the [`Surface` props](/packages/components/src/ui/surface/README.md#props).
+`Card` also inherits all of the [`Surface` props](/packages/components/src/surface/README.md#props).
 
 ## Sub-Components
 

package/src/card/card/component.tsx

@@ -12,8 +12,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect, ContextSystemProvider } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect, ContextSystemProvider } from '../../context';
 import { Elevation } from '../../elevation';
 import { View } from '../../view';
 import * as styles from '../styles';

package/src/card/card/hook.ts

@@ -7,8 +7,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useSurface } from '../../surface';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';

package/src/card/card-body/component.tsx

@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { Scrollable } from '../../scrollable';
 import { View } from '../../view';
 import { useCardBody } from './hook';

package/src/card/card-body/hook.ts

@@ -6,8 +6,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { BodyProps } from '../types';

package/src/card/card-divider/component.tsx

@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import type { DividerProps } from '../../divider';
 import { Divider } from '../../divider';
 import { useCardDivider } from './hook';

package/src/card/card-divider/hook.ts

@@ -6,8 +6,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { DividerProps } from '../../divider';

package/src/card/card-footer/component.tsx

@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { Flex } from '../../flex';
 import { useCardFooter } from './hook';
 import type { FooterProps } from '../types';

package/src/card/card-footer/hook.ts

@@ -6,8 +6,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { FooterProps } from '../types';

package/src/card/card-header/component.tsx

@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { Flex } from '../../flex';
 import { useCardHeader } from './hook';
 import type { HeaderProps } from '../types';

package/src/card/card-header/hook.ts

@@ -6,8 +6,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { HeaderProps } from '../types';

package/src/card/card-media/component.tsx

@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { View } from '../../view';
 import { useCardMedia } from './hook';
 import type { MediaProps } from '../types';

package/src/card/card-media/hook.ts

@@ -6,8 +6,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { MediaProps } from '../types';

package/src/checkbox-control/README.md

@@ -56,8 +56,8 @@ If only a few child checkboxes are checked, the parent checkbox becomes a mixed
 Render an is author checkbox:
 
 ```jsx
+import { useState } from 'react';
 import { CheckboxControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyCheckboxControl = () => {
 	const [ isChecked, setChecked ] = useState( true );
@@ -85,7 +85,7 @@ If no prop is passed an empty label is rendered.
 
 -   Required: No
 
-#### `help`: `string|WPElement`
+#### `help`: `string|Element`
 
 If this property is added, a help text will be generated using help property as the content.
 

package/src/checkbox-control/index.tsx

@@ -17,7 +17,7 @@ import { Icon, check, reset } from '@wordpress/icons';
  */
 import BaseControl from '../base-control';
 import type { CheckboxControlProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 /**
  * Checkboxes allow the user to select one or more items from a set.

package/src/circular-option-picker/README.md

@@ -9,8 +9,8 @@ This component is not exported, and therefore can only be used internally to the
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { CircularOptionPicker } from '../circular-option-picker';
-import { useState } from '@wordpress/element';
 
 const Example = () => {
 	const [ currentColor, setCurrentColor ] = useState();

package/src/circular-option-picker/circular-option-picker-actions.tsx

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import Button from '../button';
 import Dropdown from '../dropdown';
 import type { DropdownLinkActionProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { ButtonAsButtonProps } from '../button/types';
 
 export function DropdownLinkAction( {

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

@@ -34,7 +34,14 @@ function UnforwardedOptionAsButton(
 	},
 	forwardedRef: ForwardedRef< any >
 ) {
-	return <Button { ...props } ref={ forwardedRef }></Button>;
+	const { isPressed, ...additionalProps } = props;
+	return (
+		<Button
+			{ ...additionalProps }
+			aria-pressed={ isPressed }
+			ref={ forwardedRef }
+		></Button>
+	);
 }
 
 const OptionAsButton = forwardRef( UnforwardedOptionAsButton );
@@ -48,7 +55,7 @@ function UnforwardedOptionAsOption(
 	},
 	forwardedRef: ForwardedRef< any >
 ) {
-	const { id, className, isSelected, context, ...additionalProps } = props;
+	const { id, isSelected, context, ...additionalProps } = props;
 	const { isComposite, ..._compositeState } = context;
 	const compositeState =
 		_compositeState as CircularOptionPickerCompositeState;
@@ -73,15 +80,6 @@ function UnforwardedOptionAsOption(
 			{ ...compositeState }
 			as={ Button }
 			id={ id }
-			// Ideally we'd let the underlying `Button` component
-			// handle this by passing `isPressed` as a prop.
-			// Unfortunately doing so also sets `aria-pressed` as
-			// an attribute on the element, which is incompatible
-			// with `role="option"`, and there is no way at this
-			// point to override that behaviour.
-			className={ classnames( className, {
-				'is-pressed': isSelected,
-			} ) }
 			role="option"
 			aria-selected={ !! isSelected }
 			ref={ forwardedRef }

package/src/circular-option-picker/style.scss

@@ -83,7 +83,8 @@ $color-palette-circle-spacing: 12px;
 		box-shadow: inset 0 0 0 ($color-palette-circle-size * 0.5) !important;
 	}
 
-	&.is-pressed {
+	&[aria-pressed="true"],
+	&[aria-selected="true"] {
 		box-shadow: inset 0 0 0 4px;
 		position: relative;
 		z-index: z-index(".components-circular-option-picker__option.is-pressed");

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

@@ -13,7 +13,7 @@ import type { Icon } from '@wordpress/icons';
  */
 import type { ButtonAsButtonProps } from '../button/types';
 import type { DropdownProps } from '../dropdown/types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { CompositeState } from '../composite';
 
 type CommonCircularOptionPickerProps = {

package/src/clipboard-button/README.md

@@ -11,8 +11,8 @@ With a clipboard button, users copy text (or other elements) with a single click
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { ClipboardButton } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyClipboardButton = () => {
 	const [ hasCopied, setHasCopied ] = useState( false );

package/src/clipboard-button/index.tsx

@@ -15,7 +15,7 @@ import deprecated from '@wordpress/deprecated';
  */
 import Button from '../button';
 import type { ClipboardButtonProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 const TIMEOUT = 4000;
 

package/src/color-indicator/index.tsx

@@ -12,7 +12,7 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { ColorIndicatorProps } from './types';
 
 function UnforwardedColorIndicator(

package/src/color-palette/README.md

@@ -5,8 +5,8 @@
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { ColorPalette } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyColorPalette = () => {
 	const [ color, setColor ] = useState ( '#f00' )

package/src/color-palette/index.tsx

@@ -32,7 +32,7 @@ import type {
 	PaletteObject,
 	SinglePaletteProps,
 } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { DropdownProps } from '../dropdown/types';
 import {
 	extractColorNameFromCurrentValue,

package/src/color-picker/README.md

@@ -5,8 +5,8 @@
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { ColorPicker } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 function Example() {
 	const [color, setColor] = useState();