@wordpress/components 29.1.0 → 29.2.0

package/build-types/text/utils.d.ts

@@ -15,7 +15,7 @@ import type { FindAllArgs } from 'highlight-words-core';
  * @property {string | Record<string, unknown>}                           [highlightClassName='']   Classname to apply to highlighted text or a Record of classnames to apply to given text (which should be the key).
  * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [highlightStyle={}]       Styles to apply to highlighted text.
  * @property {keyof JSX.IntrinsicElements}                                [highlightTag='mark']     Tag to use for the highlighted text.
- * @property {import('highlight-words-core').FindAllArgs['sanitize']}     [sanitize]                Custom `santize` function to pass to `highlight-words-core`.
+ * @property {import('highlight-words-core').FindAllArgs['sanitize']}     [sanitize]                Custom `sanitize` function to pass to `highlight-words-core`.
  * @property {string[]}                                                   [searchWords=[]]          Words to search for and highlight.
  * @property {string}                                                     [unhighlightClassName=''] Classname to apply to unhighlighted text.
  * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [unhighlightStyle]        Style to apply to unhighlighted text.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "29.1.0",
+	"version": "29.2.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,23 +44,23 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.15.0",
-		"@wordpress/compose": "^7.15.0",
-		"@wordpress/date": "^5.15.0",
-		"@wordpress/deprecated": "^4.15.0",
-		"@wordpress/dom": "^4.15.0",
-		"@wordpress/element": "^6.15.0",
-		"@wordpress/escape-html": "^3.15.0",
-		"@wordpress/hooks": "^4.15.0",
-		"@wordpress/html-entities": "^4.15.0",
-		"@wordpress/i18n": "^5.15.0",
-		"@wordpress/icons": "^10.15.0",
-		"@wordpress/is-shallow-equal": "^5.15.0",
-		"@wordpress/keycodes": "^4.15.0",
-		"@wordpress/primitives": "^4.15.0",
-		"@wordpress/private-apis": "^1.15.0",
-		"@wordpress/rich-text": "^7.15.0",
-		"@wordpress/warning": "^3.15.0",
+		"@wordpress/a11y": "^4.16.0",
+		"@wordpress/compose": "^7.16.0",
+		"@wordpress/date": "^5.16.0",
+		"@wordpress/deprecated": "^4.16.0",
+		"@wordpress/dom": "^4.16.0",
+		"@wordpress/element": "^6.16.0",
+		"@wordpress/escape-html": "^3.16.0",
+		"@wordpress/hooks": "^4.16.0",
+		"@wordpress/html-entities": "^4.16.0",
+		"@wordpress/i18n": "^5.16.0",
+		"@wordpress/icons": "^10.16.0",
+		"@wordpress/is-shallow-equal": "^5.16.0",
+		"@wordpress/keycodes": "^4.16.0",
+		"@wordpress/primitives": "^4.16.0",
+		"@wordpress/private-apis": "^1.16.0",
+		"@wordpress/rich-text": "^7.16.0",
+		"@wordpress/warning": "^3.16.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "75a65eb8ffc168a92042544052f46d080a71ea45"
+	"gitHead": "f48b9f56629e400891abb5ae491504de475237ff"
 }

package/src/animate/style.scss

@@ -1,7 +1,8 @@
 .components-animate__appear {
-	animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
-	animation-fill-mode: forwards;
-	@include reduce-motion("animation");
+	@media not (prefers-reduced-motion) {
+		animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
+		animation-fill-mode: forwards;
+	}
 
 	&.is-from-top,
 	&.is-from-top.is-from-left {
@@ -29,16 +30,17 @@
 }
 
 .components-animate__slide-in {
-	animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1);
-	animation-fill-mode: forwards;
-	@include reduce-motion("animation");
+	@media not (prefers-reduced-motion) {
+		animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1);
+		animation-fill-mode: forwards;
 
-	&.is-from-left {
-		transform: translateX(+100%);
-	}
+		&.is-from-left {
+			transform: translateX(+100%);
+		}
 
-	&.is-from-right {
-		transform: translateX(-100%);
+		&.is-from-right {
+			transform: translateX(-100%);
+		}
 	}
 }
 
@@ -49,7 +51,9 @@
 }
 
 .components-animate__loading {
-	animation: components-animate__loading 1.6s ease-in-out infinite;
+	@media not (prefers-reduced-motion) {
+		animation: components-animate__loading 1.6s ease-in-out infinite;
+	}
 }
 
 @keyframes components-animate__loading {

package/src/badge/index.tsx

@@ -15,45 +15,46 @@ import type { BadgeProps } from './types';
 import type { WordPressComponentProps } from '../context';
 import Icon from '../icon';
 
+/**
+ * Returns an icon based on the badge context.
+ *
+ * @return The corresponding icon for the provided context.
+ */
+function contextBasedIcon( intent: BadgeProps[ 'intent' ] = 'default' ) {
+	switch ( intent ) {
+		case 'info':
+			return info;
+		case 'success':
+			return published;
+		case 'warning':
+			return caution;
+		case 'error':
+			return error;
+		default:
+			return null;
+	}
+}
+
 function Badge( {
 	className,
 	intent = 'default',
 	children,
 	...props
 }: WordPressComponentProps< BadgeProps, 'span', false > ) {
-	/**
-	 * Returns an icon based on the badge context.
-	 *
-	 * @return The corresponding icon for the provided context.
-	 */
-	function contextBasedIcon() {
-		switch ( intent ) {
-			case 'info':
-				return info;
-			case 'success':
-				return published;
-			case 'warning':
-				return caution;
-			case 'error':
-				return error;
-			default:
-				return null;
-		}
-	}
+	const icon = contextBasedIcon( intent );
+	const hasIcon = !! icon;
 
 	return (
 		<span
-			className={ clsx(
-				'components-badge',
-				`is-${ intent }`,
-				intent !== 'default' && 'has-icon',
-				className
-			) }
+			className={ clsx( 'components-badge', className, {
+				[ `is-${ intent }` ]: intent,
+				'has-icon': hasIcon,
+			} ) }
 			{ ...props }
 		>
-			{ intent !== 'default' && (
+			{ hasIcon && (
 				<Icon
-					icon={ contextBasedIcon() }
+					icon={ icon }
 					size={ 16 }
 					fill="currentColor"
 					className="components-badge__icon"

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

@@ -1,7 +1,13 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import {
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+	within,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -56,7 +62,7 @@ const getButton = ( name ) => {
 };
 
 const getColorOption = ( color ) => {
-	return screen.getByRole( 'option', { name: `Color: ${ color }` } );
+	return screen.getByRole( 'option', { name: `${ color }` } );
 };
 
 const queryButton = ( name ) => {
@@ -131,9 +137,11 @@ describe( 'BorderControl', () => {
 			await openPopover( user );
 
 			const customColorPicker = getButton( /Custom color picker/ );
-			const colorSwatchButtons = screen.getAllByRole( 'option', {
-				name: /^Color:/,
+			const circularOptionPicker = screen.getByRole( 'listbox', {
+				name: 'Custom color picker.',
 			} );
+			const colorSwatchButtons =
+				within( circularOptionPicker ).getAllByRole( 'option' );
 			const styleLabel = screen.getByText( 'Style' );
 			const solidButton = getButton( 'Solid' );
 			const dashedButton = getButton( 'Dashed' );

package/src/button/style.scss

@@ -15,8 +15,11 @@
 	cursor: pointer;
 	-webkit-appearance: none;
 	background: none;
-	transition: box-shadow 0.1s linear;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: box-shadow 0.1s linear;
+	}
+
 	height: $button-size;
 	align-items: center;
 	box-sizing: border-box;
@@ -245,10 +248,13 @@
 		text-align: left;
 		color: $components-color-accent;
 		text-decoration: underline;
-		transition-property: border, background, color;
-		transition-duration: 0.05s;
-		transition-timing-function: ease-in-out;
-		@include reduce-motion("transition");
+
+		@media not (prefers-reduced-motion) {
+			transition-property: border, background, color;
+			transition-duration: 0.05s;
+			transition-timing-function: ease-in-out;
+		}
+
 		height: auto;
 
 		&:focus {
@@ -275,11 +281,8 @@
 	&.is-secondary.is-busy,
 	&.is-secondary.is-busy:disabled,
 	&.is-secondary.is-busy[aria-disabled="true"] {
-		animation: components-button__busy-animation 2500ms infinite linear;
-		// This should be refactored to use the reduce-motion("animation") mixin
-		// as soon as https://github.com/WordPress/gutenberg/issues/55566 is closed.
-		@media (prefers-reduced-motion: reduce) {
-			animation-duration: 0s;
+		@media not (prefers-reduced-motion) {
+			animation: components-button__busy-animation 2500ms infinite linear;
 		}
 		background-size: 100px 100%;
 		/* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
@@ -376,7 +379,7 @@
 		fill: currentColor;
 		outline: none;
 
-		// Optimizate for high contrast modes.
+		// Optimize for high contrast modes.
 		// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
 		@media (forced-colors: active) {
 			fill: CanvasText;

package/src/checkbox-control/style.scss

@@ -32,8 +32,10 @@
 	height: var(--checkbox-input-size);
 
 	appearance: none;
-	transition: 0.1s border-color ease-in-out;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: 0.1s border-color ease-in-out;
+	}
 
 	&:focus {
 		@include button-style-outset__focus(var(--wp-admin-theme-color));

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

@@ -29,7 +29,6 @@ const Example = () => {
 						style={ { backgroundColor: color, color } }
 						isSelected={ index === currentColor }
 						onClick={ () => setCurrentColor( index ) }
-						aria-label={ name }
 					/>
 				);
 			} ) }
@@ -150,6 +149,6 @@ Inherits all of the [`Dropdown` props](/packages/components/src/dropdown/README.
 
 Props for the underlying `Button` component.
 
-Inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href`, `target`, and `children`. 
+Inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href`, `target`, and `children`.
 
 - Required: No

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

@@ -17,7 +17,6 @@ import { Icon, check } from '@wordpress/icons';
 import { CircularOptionPickerContext } from './circular-option-picker-context';
 import Button from '../button';
 import { Composite } from '../composite';
-import Tooltip from '../tooltip';
 import type { OptionProps } from './types';
 
 function UnforwardedOptionAsButton(
@@ -25,15 +24,17 @@ function UnforwardedOptionAsButton(
 		id?: string;
 		className?: string;
 		isPressed?: boolean;
+		label?: string;
 	},
 	forwardedRef: ForwardedRef< any >
 ) {
-	const { isPressed, ...additionalProps } = props;
+	const { isPressed, label, ...additionalProps } = props;
 	return (
 		<Button
 			{ ...additionalProps }
 			aria-pressed={ isPressed }
 			ref={ forwardedRef }
+			label={ label }
 		/>
 	);
 }
@@ -45,10 +46,11 @@ function UnforwardedOptionAsOption(
 		id: string;
 		className?: string;
 		isSelected?: boolean;
+		label?: string;
 	},
 	forwardedRef: ForwardedRef< any >
 ) {
-	const { id, isSelected, ...additionalProps } = props;
+	const { id, isSelected, label, ...additionalProps } = props;
 
 	const { setActiveId, activeId } = useContext( CircularOptionPickerContext );
 
@@ -69,6 +71,7 @@ function UnforwardedOptionAsOption(
 					role="option"
 					aria-selected={ !! isSelected }
 					ref={ forwardedRef }
+					label={ label }
 				/>
 			}
 			id={ id }
@@ -100,9 +103,17 @@ export function Option( {
 
 	const isListbox = setActiveId !== undefined;
 	const optionControl = isListbox ? (
-		<OptionAsOption { ...commonProps } isSelected={ isSelected } />
+		<OptionAsOption
+			{ ...commonProps }
+			label={ tooltipText }
+			isSelected={ isSelected }
+		/>
 	) : (
-		<OptionAsButton { ...commonProps } isPressed={ isSelected } />
+		<OptionAsButton
+			{ ...commonProps }
+			label={ tooltipText }
+			isPressed={ isSelected }
+		/>
 	);
 
 	return (
@@ -112,11 +123,7 @@ export function Option( {
 				'components-circular-option-picker__option-wrapper'
 			) }
 		>
-			{ tooltipText ? (
-				<Tooltip text={ tooltipText }>{ optionControl }</Tooltip>
-			) : (
-				optionControl
-			) }
+			{ optionControl }
 			{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }
 		</div>
 	);

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

@@ -51,7 +51,6 @@ import {
  * 						style={ { backgroundColor: color, color } }
  * 						isSelected={ index === currentColor }
  * 						onClick={ () => setCurrentColor( index ) }
- * 						aria-label={ name }
  * 					/>
  * 				);
  * 			} ) }

package/src/circular-option-picker/stories/index.story.tsx

@@ -87,7 +87,6 @@ const DefaultOptions = () => {
 						onClick={ () => {
 							setCurrentColor?.( color );
 						} }
-						aria-label={ name }
 					/>
 				);
 			} ) }

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

@@ -35,9 +35,11 @@ $color-palette-circle-spacing: 12px;
 	width: $color-palette-circle-size;
 	vertical-align: top;
 	transform: scale(1);
-	transition: 100ms transform ease;
-	will-change: transform;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: 100ms transform ease;
+		will-change: transform;
+	}
 
 	&:hover {
 		transform: scale(1.2);
@@ -73,8 +75,11 @@ $color-palette-circle-spacing: 12px;
 	border-radius: $radius-round;
 	background: transparent;
 	box-shadow: inset 0 0 0 ($color-palette-circle-size * 0.5);
-	transition: 100ms box-shadow ease;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: 100ms box-shadow ease;
+	}
+
 	cursor: pointer;
 
 	&:hover {

package/src/color-palette/index.tsx

@@ -79,13 +79,6 @@ function SinglePalette( {
 					onClick={
 						isSelected ? clearColor : () => onChange( color, index )
 					}
-					aria-label={
-						name
-							? // translators: %s: The name of the color e.g: "vivid red".
-							  sprintf( __( 'Color: %s' ), name )
-							: // translators: %s: color hex code e.g: "#f00".
-							  sprintf( __( 'Color code: %s' ), color )
-					}
 				/>
 			);
 		} );

package/src/color-palette/test/index.tsx

@@ -50,9 +50,7 @@ describe( 'ColorPalette', () => {
 			/>
 		);
 
-		expect(
-			screen.getAllByRole( 'option', { name: /^Color:/ } )
-		).toHaveLength( 3 );
+		expect( screen.getAllByRole( 'option' ) ).toHaveLength( 3 );
 	} );
 
 	it( 'should call onClick on an active button with undefined', async () => {
@@ -67,9 +65,7 @@ describe( 'ColorPalette', () => {
 			/>
 		);
 
-		await user.click(
-			screen.getByRole( 'option', { name: /^Color:/, selected: true } )
-		);
+		await user.click( screen.getByRole( 'option', { selected: true } ) );
 
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
 		expect( onChange ).toHaveBeenCalledWith( undefined );
@@ -91,7 +87,6 @@ describe( 'ColorPalette', () => {
 		// (i.e. a button representing a color that is not the current color)
 		await user.click(
 			screen.getAllByRole( 'option', {
-				name: /^Color:/,
 				selected: false,
 			} )[ 0 ]
 		);
@@ -230,7 +225,6 @@ describe( 'ColorPalette', () => {
 		// Click the first unpressed button
 		await user.click(
 			screen.getAllByRole( 'option', {
-				name: /^Color:/,
 				selected: false,
 			} )[ 0 ]
 		);

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

@@ -348,7 +348,7 @@ describe.each( [
 			expect( option ).toHaveTextContent( matches[ optionIndex ].label );
 		} );
 
-		// Confirm that the corrent option is selected
+		// Confirm that the current option is selected
 		await user.keyboard( '{Enter}' );
 
 		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );

package/src/drop-zone/style.scss

@@ -46,9 +46,8 @@
 		.components-drop-zone__content {
 			opacity: 1;
 
-			transition: opacity 0.2s ease-in-out;
-			@media (prefers-reduced-motion) {
-				transition: none;
+			@media not (prefers-reduced-motion) {
+				transition: opacity 0.2s ease-in-out;
 			}
 		}
 
@@ -56,12 +55,10 @@
 			opacity: 1;
 			transform: scale(1);
 
-			transition:
-				opacity 0.1s ease-in-out 0.1s,
-				transform 0.1s ease-in-out 0.1s;
-
-			@media (prefers-reduced-motion) {
-				transition: none;
+			@media not (prefers-reduced-motion) {
+				transition:
+					opacity 0.1s ease-in-out 0.1s,
+					transform 0.1s ease-in-out 0.1s;
 			}
 		}
 	}

package/src/font-size-picker/index.native.js

@@ -126,7 +126,7 @@ function FontSizePicker( {
 						</View>
 					</BottomSheet.Cell>
 					{ fontSizes.map( ( item, index ) => {
-						// Only display a choice that we can currenly select.
+						// Only display a choice that we can currently select.
 						if ( ! parseFloat( item.sizePx ) ) {
 							return null;
 						}

package/src/form-toggle/style.scss

@@ -24,10 +24,13 @@ $transition-duration: 0.2s;
 		width: $toggle-width;
 		height: $toggle-height;
 		border-radius: math.div($toggle-height, 2);
-		transition:
-			$transition-duration background-color ease,
-			$transition-duration border-color ease;
-		@include reduce-motion("transition");
+
+		@media not (prefers-reduced-motion) {
+			transition:
+				$transition-duration background-color ease,
+				$transition-duration border-color ease;
+		}
+
 		overflow: hidden;
 
 		// Windows High Contrast Mode
@@ -39,8 +42,9 @@ $transition-duration: 0.2s;
 			// Expand the border to fake a solid in Windows High Contrast Mode.
 			border-top: #{ $toggle-height } solid transparent;
 
-			transition: $transition-duration opacity ease;
-			@include reduce-motion("transition");
+			@media not (prefers-reduced-motion) {
+				transition: $transition-duration opacity ease;
+			}
 
 			opacity: 0;
 		}
@@ -55,10 +59,13 @@ $transition-duration: 0.2s;
 		width: $toggle-thumb-size;
 		height: $toggle-thumb-size;
 		border-radius: $radius-round;
-		transition:
-			$transition-duration transform ease,
-			$transition-duration background-color ease-out;
-		@include reduce-motion("transition");
+
+		@media not (prefers-reduced-motion) {
+			transition:
+				$transition-duration transform ease,
+				$transition-duration background-color ease-out;
+		}
+
 		background-color: $gray-900;
 		box-shadow: $elevation-x-small;
 

package/src/form-token-field/style.scss

@@ -124,8 +124,10 @@
 	height: auto;
 	background: $gray-300;
 	min-width: unset;
-	transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
-	@include reduce-motion;
+
+	@media not (prefers-reduced-motion) {
+		transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
+	}
 }
 
 .components-form-token-field__token-text {
@@ -154,8 +156,11 @@
 	min-width: 100%;
 	max-height: $grid-unit-80 * 2;
 	overflow-y: auto;
-	transition: all 0.15s ease-in-out;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: all 0.15s ease-in-out;
+	}
+
 	list-style: none;
 	box-shadow: inset 0 $border-width 0 0 $gray-600; // Matches the border color of the input.
 	margin: 0;

package/src/higher-order/navigate-regions/style.scss

@@ -8,7 +8,7 @@ $regionOutlineRatio: 2;
 [role="region"] {
 	position: relative;
 
-	// Handles the focus when we programatically send focus to this region
+	// Handles the focus when we programmatically send focus to this region
 	&.interface-interface-skeleton__content:focus-visible::after {
 		@include region-selection-focus;
 	}
@@ -26,7 +26,7 @@ $regionOutlineRatio: 2;
 	// the navigable regions should always have a computed size. For now, we can
 	// fix some edge cases but these CSS rules should be later removed in favor of
 	// a more abstracted approach to make the navigable regions focus style work
-	// regardles of the CSS used on other components.
+	// regardless of the CSS used on other components.
 
 	// Header top bar when Distraction free mode is on.
 	&.is-distraction-free .interface-interface-skeleton__header .edit-post-header,

package/src/higher-order/with-focus-return/index.tsx

@@ -32,7 +32,7 @@ type Props = {
  *                describing the component and the
  *                focus return characteristics.
  *
- * @return Higher Order Component with the focus restauration behaviour.
+ * @return Higher Order Component with the focus restoration behaviour.
  */
 export default createHigherOrderComponent(
 	// @ts-expect-error TODO: Reconcile with intended `createHigherOrderComponent` types

package/src/input-control/styles/input-control-styles.tsx

@@ -287,6 +287,12 @@ export const Input = styled.input< InputProps >`
 		&::-webkit-input-placeholder {
 			line-height: normal;
 		}
+
+		&[type='email'],
+		&[type='url'] {
+			/* rtl:ignore */
+			direction: ltr;
+		}
 	}
 `;