@wordpress/components 37.0.0 → 38.0.0

package/src/combobox-control/style.scss

@@ -33,7 +33,7 @@ input.components-combobox-control__input[type="text"] {
 }
 
 .components-combobox-control__suggestions-container {
-	@include input-control($components-color-accent);
+	@include input-control;
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-start;
@@ -41,7 +41,7 @@ input.components-combobox-control__input[type="text"] {
 	padding: 0;
 
 	&:focus-within {
-		@include input-style__focus($components-color-accent);
+		@include input-style__focus;
 	}
 
 	.components-spinner {

package/src/confirm-dialog/component.tsx

@@ -15,8 +15,7 @@ import { Flex } from '../flex';
 import Button from '../button';
 import { Text } from '../text';
 import { VStack } from '../v-stack';
-import * as styles from './styles';
-import { useCx } from '../utils/hooks/use-cx';
+import styles from './style.module.scss';
 
 const UnconnectedConfirmDialog = (
 	props: WordPressComponentProps< ConfirmDialogProps, 'div', false >,
@@ -33,8 +32,7 @@ const UnconnectedConfirmDialog = (
 		...otherProps
 	} = useContextSystem( props, 'ConfirmDialog' );
 
-	const cx = useCx();
-	const wrapperClassName = cx( styles.wrapper );
+	const wrapperClassName = styles.wrapper;
 	const cancelButtonRef = useRef< HTMLButtonElement >( null );
 	const confirmButtonRef = useRef< HTMLButtonElement >( null );
 

package/src/confirm-dialog/style.module.scss

@@ -0,0 +1,7 @@
+@use "@wordpress/base-styles/z-index" as *;
+
+// Match the previous Emotion `&&` specificity so this rule continues to
+// override the Modal overlay's default z-index regardless of source order.
+.wrapper.wrapper {
+	z-index: z-index(".components-confirm-dialog");
+}

package/src/confirm-dialog/test/index.tsx

@@ -8,6 +8,7 @@ import userEvent from '@testing-library/user-event';
  * Internal dependencies
  */
 import { ConfirmDialog } from '..';
+import styles from '../style.module.scss';
 
 const noop = () => {};
 
@@ -25,6 +26,10 @@ describe( 'Confirm', () => {
 				const elementsTexts = [ 'Are you sure?', 'OK', 'Cancel' ];
 
 				expect( dialog ).toBeInTheDocument();
+				expect( dialog ).toHaveClass( 'components-confirm-dialog' );
+				// Disable reason: Semantic queries can't reach the overlay.
+				// eslint-disable-next-line testing-library/no-node-access
+				expect( dialog.parentElement ).toHaveClass( styles.wrapper );
 
 				elementsTexts.forEach( ( txt ) => {
 					const el = screen.getByText( txt );

package/src/content-editable-control/index.tsx

@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
+import { forwardRef, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -14,6 +15,7 @@ import { forwardRef } from '@wordpress/element';
 import BaseControl from '../base-control';
 import { useBaseControlProps } from '../base-control/hooks';
 import type { WordPressComponentProps } from '../context';
+import { VisuallyHidden } from '../visually-hidden';
 import type { ContentEditableControlProps } from './types';
 import styles from './style.module.scss';
 
@@ -31,25 +33,42 @@ function UnforwardedContentEditableControl(
 	}: WordPressComponentProps< ContentEditableControlProps, 'div', false >,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
+	// The label is not passed through to `BaseControl`: it would render a
+	// `<label for>` pointing at the `contentEditable` `div`, which is not a
+	// labelable element, making the association invalid. The label is instead
+	// rendered here without `for` and wired up via `aria-labelledby`.
 	const { baseControlProps, controlProps } = useBaseControlProps( {
 		id,
 		className,
 		help,
-		hideLabelFromVision,
-		label,
 	} );
 
+	const labelId = `${ controlProps.id }__label`;
+	const editableRef = useRef< HTMLDivElement >( null );
+	const mergedRefs = useMergeRefs( [ editableRef, forwardedRef ] );
+
 	return (
 		<BaseControl { ...baseControlProps }>
+			{ hideLabelFromVision ? (
+				<VisuallyHidden id={ labelId }>{ label }</VisuallyHidden>
+			) : (
+				<BaseControl.VisualLabel
+					id={ labelId }
+					// Focus the field on label click, like `<label for>` would.
+					onClick={ () => editableRef.current?.focus() }
+				>
+					{ label }
+				</BaseControl.VisualLabel>
+			) }
 			<div
 				className={ styles.editable }
 				role="textbox"
 				aria-multiline
-				aria-label={ label }
+				aria-labelledby={ labelId }
 				aria-placeholder={ placeholder || undefined }
 				aria-disabled={ disabled || undefined }
 				aria-required={ required || undefined }
-				ref={ forwardedRef }
+				ref={ mergedRefs }
 				// A disabled field is not `contentEditable`, which also
 				// removes it from the tab order.
 				contentEditable={ ! disabled }

package/src/content-editable-control/style.module.scss

@@ -6,7 +6,7 @@
 	width: 100%;
 	background: $components-color-background;
 	color: $components-color-foreground;
-	@include input-control( $components-color-accent );
+	@include input-control;
 	border-color: $components-color-border;
 
 	// `::placeholder` only applies to native form fields, so draw the text

package/src/content-editable-control/test/index.tsx

@@ -21,12 +21,20 @@ describe( 'ContentEditableControl', () => {
 		const label = screen.getByText( 'Description' );
 
 		expect( textbox ).toHaveAttribute( 'contenteditable', 'true' );
-		// `BaseControl` wires the label's `for` to the control's `id`.
-		expect( label ).toHaveAttribute( 'for', textbox.id );
-		// `<label for>` does not contribute an accessible name to a non-form
-		// element (a `<div role="textbox">`), so the label is also mirrored
-		// onto `aria-label` for assistive tech and test locators.
-		expect( textbox ).toHaveAttribute( 'aria-label', 'Description' );
+		// A `<div contenteditable>` is not a labelable element, so the label
+		// must not use `for` (Chrome logs a console error for the invalid
+		// association). The name is wired through `aria-labelledby` instead.
+		expect( label ).not.toHaveAttribute( 'for' );
+		expect( textbox ).toHaveAttribute( 'aria-labelledby', label.id );
+		expect( textbox ).toHaveAccessibleName( 'Description' );
+	} );
+
+	it( 'focuses the textbox when the label is clicked', () => {
+		render( <ContentEditableControl label="Description" /> );
+
+		fireEvent.click( screen.getByText( 'Description' ) );
+
+		expect( screen.getByRole( 'textbox' ) ).toHaveFocus();
 	} );
 
 	it( 'visually hides the label when `hideLabelFromVision` is set', () => {
@@ -95,9 +103,13 @@ describe( 'ContentEditableControl', () => {
 			'id',
 			'my-custom-id'
 		);
+		expect( screen.getByRole( 'textbox' ) ).toHaveAttribute(
+			'aria-labelledby',
+			'my-custom-id__label'
+		);
 		expect( screen.getByText( 'Custom id' ) ).toHaveAttribute(
-			'for',
-			'my-custom-id'
+			'id',
+			'my-custom-id__label'
 		);
 	} );
 

package/src/context/test/__snapshots__/context-system-provider.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`props should render _override props 1`] = `
 <div>

package/src/context/wordpress-component.ts

@@ -34,8 +34,13 @@ export type WordPressComponent<
 	IsPolymorphic extends boolean,
 > = {
 	< TT extends React.ElementType >(
-		props: WordPressComponentProps< O, TT, IsPolymorphic > &
-			( IsPolymorphic extends true ? { as: TT } : {} )
+		props: WordPressComponentProps< O, TT, false > &
+			( IsPolymorphic extends true
+				? {
+						/** The HTML element or React component to render the component as. */
+						as: TT;
+				  }
+				: {} )
 	): React.ReactNode;
 	( props: WordPressComponentProps< O, T, IsPolymorphic > ): React.ReactNode;
 	displayName?: string;

package/src/custom-gradient-picker/test/index.tsx

@@ -1,15 +1,125 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import CustomGradientPicker from '../';
 
+function ControlledCustomGradientPicker( {
+	initialValue = 'linear-gradient(90deg,rgb(0,0,0) 0%,rgb(255,255,255) 100%)',
+}: {
+	initialValue?: string;
+} ) {
+	const [ value, setValue ] = useState( initialValue );
+	return <CustomGradientPicker value={ value } onChange={ setValue } />;
+}
+
 describe( 'CustomGradientPicker', () => {
+	describe( 'new gradient stop color picker', () => {
+		it( 'preserves visual saturation when setting a new stop color through black', async () => {
+			const { container } = render( <ControlledCustomGradientPicker /> );
+
+			// Presentational gradient bar markup; no accessible roles.
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			const markers = container.querySelector(
+				'.components-custom-gradient-picker__markers-container'
+			) as HTMLElement;
+			markers.getBoundingClientRect = () =>
+				( {
+					left: 0,
+					x: 0,
+					width: 200,
+					top: 0,
+					height: 20,
+					right: 200,
+					bottom: 20,
+					y: 0,
+					toJSON: () => ( {} ),
+				} ) as DOMRect;
+
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			const bar = container.querySelector(
+				'.components-custom-gradient-picker__gradient-bar'
+			) as HTMLElement;
+			// Hover mid-bar so the insert-point control appears (away from 0%/100%).
+			fireEvent.mouseMove( bar, { clientX: 100 } );
+
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			const insertButton = container.querySelector(
+				'.components-custom-gradient-picker__insert-point-dropdown'
+			) as HTMLElement;
+			expect( insertButton ).toBeTruthy();
+			fireEvent.click( insertButton );
+
+			const colorSlider = screen.getByRole( 'slider', { name: 'Color' } );
+			colorSlider.getBoundingClientRect = () =>
+				( {
+					left: 0,
+					top: 0,
+					width: 100,
+					height: 100,
+					right: 100,
+					bottom: 100,
+					x: 0,
+					y: 0,
+					toJSON: () => ( {} ),
+				} ) as DOMRect;
+
+			// Choose a saturated mid-brightness color — creates the new stop and
+			// exercises parent gradient updates while picking.
+			fireEvent.mouseDown( colorSlider, {
+				buttons: 1,
+				pageX: 80,
+				pageY: 20,
+				clientX: 80,
+				clientY: 20,
+			} );
+
+			// ColorPicker content is portaled; pointer has no accessible role.
+			// eslint-disable-next-line testing-library/no-node-access
+			const pointer = document.querySelector(
+				'.react-colorful__saturation-pointer'
+			) as HTMLElement;
+			expect( pointer ).toBeTruthy();
+			const leftBefore = pointer.style.left;
+			expect( parseFloat( leftBefore ) ).toBeGreaterThan( 50 );
+
+			// Keyboard to black — must not reset saturation via HSVA↔HSLA echo
+			// while the gradient parent keeps updating (#80110 / #80205).
+			colorSlider.focus();
+			for ( let i = 0; i < 20; i++ ) {
+				fireEvent.keyDown( colorSlider, {
+					key: 'ArrowDown',
+					keyCode: 40,
+					which: 40,
+				} );
+			}
+
+			expect( pointer ).toHaveStyle( {
+				top: '100%',
+				left: leftBefore,
+			} );
+
+			// Close the portaled popover so later tests are not affected by
+			// asynchronous Popover position updates.
+			fireEvent.click( insertButton );
+			await waitFor( () => {
+				expect(
+					screen.queryByRole( 'slider', { name: 'Color' } )
+				).not.toBeInTheDocument();
+			} );
+		} );
+	} );
+
 	describe( 'GradientTypePicker angle persistence', () => {
 		it( 'should restore the previous linear angle when switching from radial back to linear', async () => {
 			const user = userEvent.setup();

package/src/custom-select-control/index.tsx

@@ -62,7 +62,6 @@ function CustomSelectControl< T extends CustomSelectOption >(
 	const {
 		// Prevent passing legacy props to internal component.
 		__next40pxDefaultSize: _next40pxDefaultSize,
-		__shouldNotWarnDeprecated36pxSize: _shouldNotWarnDeprecated36pxSize,
 		describedBy,
 		options,
 		onChange,
@@ -177,7 +176,7 @@ function CustomSelectControl< T extends CustomSelectOption >(
 			<CustomSelect
 				aria-describedby={ descriptionId }
 				renderSelectedValue={ renderSelectedValue }
-				size={ size === '__unstable-large' ? 'default' : size }
+				size={ size }
 				store={ store }
 				className={ clsx(
 					// Keeping the classname for legacy reasons

package/src/custom-select-control/test/__snapshots__/index.tsx.snap

@@ -0,0 +1,6 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Legacy size support treats __unstable-large the same as default 1`] = `
+Snapshot Diff:
+Compared values have no visual difference.
+`;

package/src/custom-select-control/test/index.tsx

@@ -694,6 +694,29 @@ describe.each( [
 	} );
 } );
 
+describe( 'Legacy size support', () => {
+	it( 'treats __unstable-large the same as default', async () => {
+		const options = [ { key: 'one', name: 'One' } ];
+
+		await render(
+			<UncontrolledCustomSelectControl label="Test" options={ options } />
+		);
+		await render(
+			<UncontrolledCustomSelectControl
+				label="Test"
+				options={ options }
+				// @ts-expect-error testing legacy runtime support for removed size type
+				size="__unstable-large"
+			/>
+		);
+
+		const comboboxes = screen.getAllByRole( 'combobox' );
+		const [ defaultCombobox, legacyCombobox ] = comboboxes;
+
+		expect( legacyCombobox ).toMatchStyleDiffSnapshot( defaultCombobox );
+	} );
+} );
+
 describe( 'Type checking', () => {
 	// eslint-disable-next-line jest/expect-expect
 	it( 'should infer the value type from available `options`, but not the `value` or `onChange` prop', () => {

package/src/custom-select-control/types.ts

@@ -89,7 +89,7 @@ export type CustomSelectProps< T extends CustomSelectOption > = {
 	 *
 	 * @default 'default'
 	 */
-	size?: 'default' | 'small' | '__unstable-large';
+	size?: 'default' | 'small';
 	/**
 	 * Can be used to externally control the value of the control.
 	 */
@@ -121,11 +121,4 @@ export type CustomSelectProps< T extends CustomSelectOption > = {
 	 * @ignore
 	 */
 	__next40pxDefaultSize?: boolean;
-	/**
-	 * Do not throw a warning for the deprecated 36px default size.
-	 * For internal components of other components that already throw the warning.
-	 *
-	 * @ignore
-	 */
-	__shouldNotWarnDeprecated36pxSize?: boolean;
 };

package/src/disabled/index.tsx

@@ -1,8 +1,8 @@
-import { disabledStyles } from './styles/disabled-styles';
+import clsx from 'clsx';
 import type { DisabledProps } from './types';
 import type { WordPressComponentProps } from '../context';
-import { useCx } from '../utils';
 import Context from './context';
+import styles from './style.module.scss';
 
 const { Consumer, Provider } = Context;
 
@@ -54,8 +54,6 @@ function Disabled( {
 	isDisabled = true,
 	...props
 }: WordPressComponentProps< DisabledProps, 'div' > ) {
-	const cx = useCx();
-
 	return (
 		<Provider value={ isDisabled }>
 			<div
@@ -63,7 +61,11 @@ function Disabled( {
 				inert={ isDisabled ? 'true' : undefined }
 				className={
 					isDisabled
-						? cx( disabledStyles, className, 'components-disabled' )
+						? clsx(
+								styles.disabled,
+								className,
+								'components-disabled'
+						  )
 						: undefined
 				}
 				{ ...props }

package/src/disabled/style.module.scss

@@ -0,0 +1,15 @@
+.disabled {
+	position: relative;
+	pointer-events: none;
+
+	&::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+	}
+
+	// Also make nested blocks unselectable.
+	* {
+		pointer-events: none;
+	}
+}

package/src/disabled/test/index.tsx

@@ -2,12 +2,13 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import Disabled from '../';
-import userEvent from '@testing-library/user-event';
+import styles from '../style.module.scss';
 
 describe( 'Disabled', () => {
 	const Form = () => (
@@ -24,9 +25,10 @@ describe( 'Disabled', () => {
 			</Disabled>
 		);
 
-		expect( screen.getByTestId( 'disabled-wrapper' ) ).toHaveAttribute(
-			'inert'
-		);
+		const wrapper = screen.getByTestId( 'disabled-wrapper' );
+		expect( wrapper ).toHaveAttribute( 'inert' );
+		expect( wrapper ).toHaveClass( 'components-disabled' );
+		expect( wrapper ).toHaveClass( styles.disabled );
 	} );
 
 	it( 'should cleanly un-disable via reconciliation', () => {

package/src/elevation/test/__snapshots__/index.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`props should render active 1`] = `
 .emotion-0 {

package/src/external-link/style.scss

@@ -1,16 +1,9 @@
+@use "@wordpress/base-styles/mixins";
+
 .components-external-link {
 	color: var(--wpds-color-foreground-interactive-brand);
 	text-decoration: none;
 
-	// Match the `outset-ring--focus` utility used by `Link` in `@wordpress/ui`.
-	@media not ( prefers-reduced-motion ) {
-		transition: outline 0.1s ease-out;
-	}
-	// Outline width must be kept at 0 even with a transparent color,
-	// or else the outline will be visible in forced-colors mode.
-	outline: 0 solid transparent;
-	outline-offset: 1px;
-
 	&:visited {
 		color: var(--wpds-color-foreground-interactive-brand);
 	}
@@ -21,12 +14,13 @@
 	}
 
 	&:focus {
-		outline:
-			var(--wpds-border-width-focus) solid
-			var(--wpds-color-stroke-focus);
 		// Override style from wp-admin common.css.
 		box-shadow: none;
 		border-radius: 0;
+
+		&:not(:active) {
+			@include mixins.outset-ring__focus();
+		}
 	}
 }
 

package/src/flex/test/__snapshots__/index.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`props should render correctly 1`] = `
 <div

package/src/font-size-picker/types.ts

@@ -1,4 +1,9 @@
-export type FontSizePickerProps = {
+import type { ToggleGroupControlProps } from '../toggle-group-control/types';
+
+export type FontSizePickerProps = Pick<
+	ToggleGroupControlProps,
+	'__next40pxDefaultSize' | 'size'
+> & {
 	/**
 	 * If `true`, it will not be possible to choose a custom fontSize. The user
 	 * will be forced to pick one of the pre-defined sizes passed in fontSizes.
@@ -74,20 +79,6 @@ export type FontSizePickerProps = {
 	 * @ignore
 	 */
 	__nextHasNoMarginBottom?: boolean;
-	/**
-	 * Start opting into the larger default height that will become the default size in a future version.
-	 *
-	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
-	 * @ignore
-	 */
-	__next40pxDefaultSize?: boolean;
-	/**
-	 * Size of the control.
-	 *
-	 * @deprecated This prop no longer has any effect.
-	 * @ignore
-	 */
-	size?: 'default' | '__unstable-large';
 };
 
 export type FontSize = {

package/src/form-toggle/test/__snapshots__/index.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`FormToggle basic rendering should render a span element with an unchecked checkbox 1`] = `
 <div>

package/src/form-token-field/index.tsx

@@ -25,10 +25,10 @@ import deprecated from '@wordpress/deprecated';
  */
 import Token from './token';
 import TokenInput from './token-input';
-import { TokensAndInputWrapperFlex } from './styles';
 import SuggestionsList from './suggestions-list';
 import type { FormTokenFieldProps, TokenItem } from './types';
-import { FlexItem } from '../flex';
+import { Flex, FlexItem } from '../flex';
+import styles from './style.module.scss';
 import {
 	StyledHelp,
 	StyledLabel,
@@ -826,14 +826,15 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 				onMouseDown={ onContainerTouched }
 				onTouchStart={ onContainerTouched }
 			>
-				<TokensAndInputWrapperFlex
+				<Flex
+					className={ styles[ 'tokens-and-input' ] }
 					justify="flex-start"
 					align="center"
 					gap={ 1 }
 					wrap
 				>
 					{ renderTokensAndInput() }
-				</TokensAndInputWrapperFlex>
+				</Flex>
 				{ isExpanded && (
 					<SuggestionsList
 						instanceId={ instanceId }

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

@@ -0,0 +1,6 @@
+@use "@wordpress/base-styles/mixins" as mixins;
+
+.tokens-and-input {
+	padding: 7px;
+	@include mixins.reset;
+}

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

@@ -5,7 +5,7 @@
 @use "../utils/theme-variables" as *;
 
 .components-form-token-field__input-container {
-	@include input-control($components-color-accent);
+	@include input-control;
 	width: 100%;
 	padding: 0;
 	cursor: text;
@@ -17,7 +17,7 @@
 	}
 
 	&.is-active {
-		@include input-style__focus($components-color-accent);
+		@include input-style__focus;
 	}
 
 	// Token input