@wordpress/components 39.0.0 → 40.1.0

package/src/progress-bar/style.module.scss

@@ -0,0 +1,70 @@
+@use "../utils/theme-variables" as *;
+
+$indeterminate-indicator-width: 50%;
+
+.track {
+	position: relative;
+	overflow: hidden;
+	height: 1.5px;
+	/* Text color at 10% opacity */
+	background-color: color-mix(in srgb, $components-color-foreground, transparent 90%);
+	border-radius: 9999px;
+
+	// Windows high contrast mode.
+	outline: 2px solid transparent;
+	outline-offset: 2px;
+
+	:where(&) {
+		width: 160px;
+	}
+}
+
+.indicator {
+	display: inline-block;
+	position: absolute;
+	top: 0;
+	height: 100%;
+	border-radius: 9999px;
+	/* Text color at 90% opacity */
+	background-color: color-mix(in srgb, $components-color-foreground, transparent 10%);
+
+	// Windows high contrast mode.
+	outline: 2px solid transparent;
+	outline-offset: -2px;
+
+	width: var(--indicator-width);
+
+	@media not (prefers-reduced-motion) {
+		transition: width 0.4s ease-in-out;
+	}
+
+	&.is-indeterminate {
+		--indicator-width: #{$indeterminate-indicator-width};
+		animation: indeterminate-slide 1.5s ease-in-out infinite;
+		transition: none;
+
+		@media (prefers-reduced-motion: reduce) {
+			animation-duration: 3s;
+			animation-timing-function: steps(4, end);
+		}
+	}
+}
+
+@keyframes indeterminate-slide {
+	0% {
+		inset-inline-start: -$indeterminate-indicator-width;
+	}
+
+	100% {
+		inset-inline-start: 100%;
+	}
+}
+
+.progress-element {
+	position: absolute;
+	top: 0;
+	inset-inline-start: 0;
+	opacity: 0;
+	width: 100%;
+	height: 100%;
+}

package/src/progress-bar/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,7 +1,13 @@
 import { render, screen } from '@testing-library/react';
 import { ProgressBar } from '..';
-import { INDETERMINATE_TRACK_WIDTH } from '../styles';
 
+/*
+ * TODO: the stylesheet is mocked in these tests, so nothing the SCSS module is
+ * responsible for can be asserted here — that the `progress` element is visually
+ * hidden and only exposed for semantics, and that the indeterminate indicator is
+ * 50% wide and slides across the track. Assert those against real styles once
+ * browser-backed component tests are available.
+ */
 describe( 'ProgressBar', () => {
 	it( 'should render an indeterminate semantic progress bar element', () => {
 		render( <ProgressBar /> );
@@ -9,7 +15,6 @@ describe( 'ProgressBar', () => {
 		const progressBar = screen.getByRole( 'progressbar' );
 
 		expect( progressBar ).toBeInTheDocument();
-		expect( progressBar ).not.toBeVisible();
 		expect( progressBar ).not.toHaveValue();
 	} );
 
@@ -19,11 +24,10 @@ describe( 'ProgressBar', () => {
 		const progressBar = screen.getByRole( 'progressbar' );
 
 		expect( progressBar ).toBeInTheDocument();
-		expect( progressBar ).not.toBeVisible();
 		expect( progressBar ).toHaveValue( 55 );
 	} );
 
-	it( 'should use `INDETERMINATE_TRACK_WIDTH`% as track width for indeterminate progress bar', () => {
+	it( 'should not set an inline indicator width for indeterminate progress bar', () => {
 		const { container } = render( <ProgressBar /> );
 
 		/**
@@ -31,14 +35,12 @@ describe( 'ProgressBar', () => {
 		 * the track is an intentionally non-interactive presentation element.
 		 */
 		// eslint-disable-next-line testing-library/no-node-access
-		const indicator = container.firstChild?.firstChild;
+		const indicator = container.firstChild?.firstChild as HTMLElement;
 
-		expect( indicator ).toHaveStyle( {
-			width: `${ INDETERMINATE_TRACK_WIDTH }%`,
-		} );
-		expect( indicator ).not.toHaveStyle( {
-			'--indicator-width': expect.any( String ),
-		} );
+		// The indeterminate width is left to the stylesheet.
+		expect( indicator.style.getPropertyValue( '--indicator-width' ) ).toBe(
+			''
+		);
 	} );
 
 	it( 'should use `value`% as width for determinate progress bar', () => {

package/src/query-controls/test/terms.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { buildTermsTree } from '../terms';
 
 describe( 'buildTermsTree()', () => {

package/src/radio-control/README.md

@@ -100,12 +100,14 @@ A function that receives the value of the new option that is being selected as i
 
 -   Required: Yes
 
-#### `options`: `{ label: string, value: string }[]`
+#### `options`: `{ label: string, value: string, description?: string, disabled?: boolean }[]`
 
 An array of objects containing the value and label of the options.
 
 -   `label`: `string` The label to be shown to the user.
 -   `value`: `string` The internal value compared against select and passed to onChange.
+-   `description`: `string` Optional help text shown below the label.
+-   `disabled`: `boolean` Whether the option is disabled.
 
 *   Required: No
 

package/src/radio-control/index.tsx

@@ -107,6 +107,7 @@ export function RadioControl(
 							type="radio"
 							name={ id }
 							value={ option.value }
+							disabled={ option.disabled }
 							onChange={ onChangeValue }
 							checked={ option.value === selected }
 							aria-describedby={

package/src/radio-control/stories/index.story.tsx

@@ -87,3 +87,15 @@ WithOptionDescriptions.args = {
 		},
 	],
 };
+
+export const WithDisabledOption: StoryFn< typeof RadioControl > = Template.bind(
+	{}
+);
+WithDisabledOption.args = {
+	...Default.args,
+	options: [
+		{ label: 'Public', value: 'public' },
+		{ label: 'Private', value: 'private', disabled: true },
+		{ label: 'Password Protected', value: 'password' },
+	],
+};

package/src/radio-control/style.scss

@@ -10,7 +10,6 @@
 
 	font-family: $default-font;
 	font-size: $default-font-size;
-
 }
 
 .components-radio-control__group-wrapper.has-help {
@@ -62,7 +61,6 @@
 		&:checked::before {
 			border-color: $components-color-gray-400;
 			opacity: 1; // Override style from wp-admin forms.css.
-
 		}
 	}
 }
@@ -71,7 +69,7 @@
 	grid-column: 2;
 	grid-row: 1;
 
-	.components-radio-control:not(:disabled) & {
+	.components-radio-control__input:not(:disabled) + & {
 		cursor: var(--wpds-cursor-control);
 	}
 

package/src/radio-control/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,8 +1,11 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from '@wordpress/element';
 import RadioControl from '../';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const ControlledRadioControl = ( {
 	...props
 }: React.ComponentProps< typeof RadioControl > ) => {
@@ -37,6 +40,14 @@ const defaultPropsWithDescriptions = {
 	} ) ),
 };
 
+const defaultPropsWithDisabledOption = {
+	...defaultProps,
+	options: defaultProps.options.map( ( option, index ) => ( {
+		...option,
+		disabled: index === 1,
+	} ) ),
+};
+
 describe.each( [
 	// TODO: `RadioControl` doesn't currently support uncontrolled mode.
 	// [ 'uncontrolled', RadioControl ],
@@ -46,7 +57,7 @@ describe.each( [
 
 	describe( 'semantics and labelling', () => {
 		it( 'should render a radiogroup with an accessible label (legend)', () => {
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component { ...defaultProps } onChange={ onChangeSpy } />
 			);
@@ -57,7 +68,7 @@ describe.each( [
 		} );
 
 		it( 'should render a radiogroup with an accessible label even when the label is visually hidden', () => {
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component
 					{ ...defaultProps }
@@ -81,8 +92,31 @@ describe.each( [
 			).toBeDisabled();
 		} );
 
+		it( 'should disable an individual option without disabling the radio group', () => {
+			render(
+				<Component
+					{ ...defaultPropsWithDisabledOption }
+					onChange={ () => {} }
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'radiogroup', { name: defaultProps.label } )
+			).toBeEnabled();
+			expect(
+				screen.getByRole( 'radio', {
+					name: defaultProps.options[ 0 ].label,
+				} )
+			).toBeEnabled();
+			expect(
+				screen.getByRole( 'radio', {
+					name: defaultProps.options[ 1 ].label,
+				} )
+			).toBeDisabled();
+		} );
+
 		it( 'should describe the radio group with the help text', () => {
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component
 					{ ...defaultProps }
@@ -97,7 +131,7 @@ describe.each( [
 		} );
 
 		it( 'should render radio inputs with accessible labels', () => {
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component { ...defaultProps } onChange={ onChangeSpy } />
 			);
@@ -112,7 +146,7 @@ describe.each( [
 		} );
 
 		it( 'should not select have a selected value when the `selected` prop does not match any available options', () => {
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component { ...defaultProps } onChange={ onChangeSpy } />
 			);
@@ -125,7 +159,7 @@ describe.each( [
 		} );
 
 		it( 'should render mutually exclusive radio inputs', () => {
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component
 					{ ...defaultProps }
@@ -142,7 +176,7 @@ describe.each( [
 		} );
 
 		it( 'should use the option description text to describe individual options', () => {
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component
 					{ ...defaultPropsWithDescriptions }
@@ -166,9 +200,37 @@ describe.each( [
 	} );
 
 	describe( 'interaction', () => {
+		it( 'should keep enabled options interactive when another option is disabled', async () => {
+			const user = userEvent.setup();
+			const onChangeSpy = vi.fn();
+			render(
+				<Component
+					{ ...defaultPropsWithDisabledOption }
+					onChange={ onChangeSpy }
+				/>
+			);
+
+			await user.click(
+				screen.getByRole( 'radio', {
+					name: defaultProps.options[ 1 ].label,
+				} )
+			);
+			expect( onChangeSpy ).not.toHaveBeenCalled();
+
+			await user.click(
+				screen.getByRole( 'radio', {
+					name: defaultProps.options[ 2 ].label,
+				} )
+			);
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				defaultProps.options[ 2 ].value
+			);
+		} );
+
 		it( 'should select a new value when clicking on the radio input', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component { ...defaultProps } onChange={ onChangeSpy } />
 			);
@@ -193,7 +255,7 @@ describe.each( [
 
 		it( 'should select a new value when clicking on the radio label', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component { ...defaultProps } onChange={ onChangeSpy } />
 			);
@@ -216,7 +278,7 @@ describe.each( [
 
 		it( 'should select a new value when using the arrow keys', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component { ...defaultProps } onChange={ onChangeSpy } />
 			);

package/src/radio-control/types.ts

@@ -31,6 +31,12 @@ export type RadioControlProps = Pick<
 		 * Optional help text to be shown in addition the label.
 		 */
 		description?: string;
+		/**
+		 * Whether the option should be disabled.
+		 *
+		 * @default false
+		 */
+		disabled?: boolean;
 	}[];
 	/**
 	 * The value property of the currently selected option.

package/src/range-control/stories/index.story.tsx

@@ -168,6 +168,12 @@ const marksWithNegatives = [
 export const WithIntegerStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
+WithIntegerStepAndMarks.parameters = {
+	// FIXME: Mark labels fail color-contrast; stories without a `label` arg also render an empty heading (color-contrast, empty-heading).
+	// See: https://github.com/WordPress/gutenberg/issues/81596
+	a11y: { test: 'todo' },
+};
+
 WithIntegerStepAndMarks.args = {
 	label: 'Integer Step',
 	marks: marksBase,
@@ -184,6 +190,12 @@ WithIntegerStepAndMarks.args = {
 export const WithDecimalStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
+WithDecimalStepAndMarks.parameters = {
+	// FIXME: Mark labels fail color-contrast; stories without a `label` arg also render an empty heading (color-contrast, empty-heading).
+	// See: https://github.com/WordPress/gutenberg/issues/81596
+	a11y: { test: 'todo' },
+};
+
 WithDecimalStepAndMarks.args = {
 	marks: [
 		...marksBase,
@@ -203,6 +215,12 @@ WithDecimalStepAndMarks.args = {
 export const WithNegativeMinimumAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
+WithNegativeMinimumAndMarks.parameters = {
+	// FIXME: Mark labels fail color-contrast; stories without a `label` arg also render an empty heading (color-contrast, empty-heading).
+	// See: https://github.com/WordPress/gutenberg/issues/81596
+	a11y: { test: 'todo' },
+};
+
 WithNegativeMinimumAndMarks.args = {
 	marks: marksWithNegatives,
 	max: 10,
@@ -218,6 +236,12 @@ WithNegativeMinimumAndMarks.args = {
 export const WithNegativeRangeAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
+WithNegativeRangeAndMarks.parameters = {
+	// FIXME: Mark labels fail color-contrast; stories without a `label` arg also render an empty heading (color-contrast, empty-heading).
+	// See: https://github.com/WordPress/gutenberg/issues/81596
+	a11y: { test: 'todo' },
+};
+
 WithNegativeRangeAndMarks.args = {
 	marks: marksWithNegatives,
 	max: -1,
@@ -233,6 +257,12 @@ WithNegativeRangeAndMarks.args = {
 export const WithAnyStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
+WithAnyStepAndMarks.parameters = {
+	// FIXME: Mark labels fail color-contrast; stories without a `label` arg also render an empty heading (color-contrast, empty-heading).
+	// See: https://github.com/WordPress/gutenberg/issues/81596
+	a11y: { test: 'todo' },
+};
+
 WithAnyStepAndMarks.args = {
 	marks: marksBase,
 	max: 10,

package/src/range-control/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,6 +1,9 @@
+import { describe, expect, it, vi } from 'vitest';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import RangeControl from '../';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const getRangeInput = (): HTMLInputElement => screen.getByRole( 'slider' );
 const getNumberInput = (): HTMLInputElement => screen.getByRole( 'spinbutton' );
 const getResetButton = (): HTMLButtonElement => screen.getByRole( 'button' );
@@ -11,7 +14,7 @@ const fireChangeEvent = ( input: HTMLInputElement, value?: number | string ) =>
 describe( 'RangeControl', () => {
 	describe( '#render()', () => {
 		it( 'should trigger change callback with numeric value', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			render( <RangeControl onChange={ onChange } /> );
 
@@ -76,7 +79,7 @@ describe( 'RangeControl', () => {
 		} );
 
 		it( 'should not call onChange if new value is invalid', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			render(
 				<RangeControl onChange={ onChange } min={ 10 } max={ 20 } />
 			);
@@ -90,7 +93,7 @@ describe( 'RangeControl', () => {
 		} );
 
 		it( 'should keep invalid values in number input until loss of focus', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			render(
 				<RangeControl onChange={ onChange } min={ -1 } max={ 1 } />
 			);
@@ -141,7 +144,7 @@ describe( 'RangeControl', () => {
 		} );
 
 		it( 'should take into account the step starting from min', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			render(
 				<RangeControl
 					onChange={ onChange }
@@ -286,7 +289,7 @@ describe( 'RangeControl', () => {
 
 	describe( 'reset', () => {
 		it( 'should clear the input value when clicking the reset button', () => {
-			const spy = jest.fn();
+			const spy = vi.fn();
 			render( <RangeControl allowReset onChange={ spy } /> );
 
 			const resetButton = getResetButton();
@@ -310,7 +313,7 @@ describe( 'RangeControl', () => {
 		} );
 
 		it( 'should reset to the `initialPosition` value when clicking the reset button', () => {
-			const spy = jest.fn();
+			const spy = vi.fn();
 			render(
 				<RangeControl
 					allowReset
@@ -339,7 +342,7 @@ describe( 'RangeControl', () => {
 		} );
 
 		it( 'should reset to the `resetFallbackValue` value when clicking the reset button', () => {
-			const spy = jest.fn();
+			const spy = vi.fn();
 			render(
 				<RangeControl
 					initialPosition={ 10 }

package/src/resizable-box/index.tsx

@@ -102,7 +102,7 @@ function UnforwardedResizableBox(
 			) }
 			// Add a focusable element within the drag handle. Unfortunately,
 			// `re-resizable` does not make them properly focusable by default,
-			// causing focus to move the the block wrapper which triggers block
+			// causing focus to move the block wrapper which triggers block
 			// drag.
 			handleComponent={ Object.fromEntries(
 				Object.keys( HANDLE_CLASSES ).map( ( key ) => [

package/src/resizable-box/resize-tooltip/index.tsx

@@ -1,12 +1,14 @@
 import clsx from 'clsx';
-import type { Ref, ForwardedRef } from 'react';
+import type { ElementType, Ref, ForwardedRef } from 'react';
 import { forwardRef } from '@wordpress/element';
+import { PolymorphicElement } from '../../utils/polymorphic-element';
 import Label from './label';
 import type { Axis, Position } from './utils';
 import { useResizeLabel, POSITIONS } from './utils';
-import { Root } from './styles/resize-tooltip.styles';
+import styles from './style.module.scss';
 
-type ResizeTooltipProps = React.ComponentProps< typeof Root > & {
+type ResizeTooltipProps = React.ComponentPropsWithoutRef< 'div' > & {
+	as?: ElementType;
 	'aria-hidden'?: boolean;
 	axis?: Axis;
 	className?: string;
@@ -23,6 +25,7 @@ const noop = () => {};
 
 function ResizeTooltip(
 	{
+		as = 'div',
 		axis,
 		className,
 		fadeTimeout = 180,
@@ -34,7 +37,7 @@ function ResizeTooltip(
 		zIndex = 1000,
 		...props
 	}: ResizeTooltipProps,
-	ref: ForwardedRef< HTMLDivElement >
+	ref: ForwardedRef< HTMLElement >
 ) {
 	const { label, resizeListener } = useResizeLabel( {
 		axis,
@@ -48,10 +51,16 @@ function ResizeTooltip(
 		return null;
 	}
 
-	const classes = clsx( 'components-resize-tooltip', className );
+	const classes = clsx( 'components-resize-tooltip', styles.root, className );
 
 	return (
-		<Root aria-hidden="true" className={ classes } ref={ ref } { ...props }>
+		<PolymorphicElement
+			aria-hidden="true"
+			as={ as }
+			{ ...props }
+			className={ classes }
+			ref={ ref }
+		>
 			{ resizeListener }
 			<Label
 				aria-hidden={ props[ 'aria-hidden' ] }
@@ -60,7 +69,7 @@ function ResizeTooltip(
 				ref={ labelRef }
 				zIndex={ zIndex }
 			/>
-		</Root>
+		</PolymorphicElement>
 	);
 }
 

package/src/resizable-box/resize-tooltip/label.tsx

@@ -1,13 +1,11 @@
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 import { forwardRef } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
+import { Text } from '../../text';
 import type { Position } from './utils';
 import { POSITIONS } from './utils';
-import {
-	TooltipWrapper,
-	Tooltip,
-	LabelText,
-} from './styles/resize-tooltip.styles';
+import styles from './style.module.scss';
 
 const CORNER_OFFSET = 4;
 const CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;
@@ -66,20 +64,28 @@ function Label(
 	}
 
 	return (
-		<TooltipWrapper
+		<div
 			aria-hidden="true"
-			className="components-resizable-tooltip__tooltip-wrapper"
+			className={ clsx(
+				'components-resizable-tooltip__tooltip-wrapper',
+				styles[ 'tooltip-wrapper' ]
+			) }
 			ref={ ref }
 			style={ style }
 			{ ...props }
 		>
-			<Tooltip
-				className="components-resizable-tooltip__tooltip"
+			<div
+				className={ clsx(
+					'components-resizable-tooltip__tooltip',
+					styles.tooltip
+				) }
 				style={ labelStyle }
 			>
-				<LabelText as="span">{ label }</LabelText>
-			</Tooltip>
-		</TooltipWrapper>
+				<Text as="span" className={ styles[ 'label-text' ] }>
+					{ label }
+				</Text>
+			</div>
+		</div>
 	);
 }
 

package/src/resizable-box/resize-tooltip/style.module.scss

@@ -0,0 +1,40 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "../../utils/theme-variables" as *;
+
+.root {
+	box-sizing: border-box;
+	pointer-events: none;
+	position: absolute;
+	inset: 0;
+}
+
+.tooltip-wrapper {
+	align-items: center;
+	box-sizing: border-box;
+	display: inline-flex;
+	justify-content: center;
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 120ms linear;
+}
+
+.tooltip {
+	background: $components-color-foreground;
+	border-radius: $radius-small;
+	box-sizing: border-box;
+	font-family: $default-font;
+	font-size: 12px;
+	color: $components-color-foreground-inverted;
+	padding: $grid-unit-05 $grid-unit-10;
+	position: relative;
+}
+
+// Match the previous Emotion `&&&` specificity so label styles continue to
+// override Text / consumer typography.
+.label-text.label-text.label-text {
+	color: $components-color-foreground-inverted;
+	display: block;
+	font-size: 13px;
+	line-height: 1.4;
+	white-space: nowrap;
+}