npm - @wordpress/components - Versions diffs - 39.0.0 → 40.0.0 - Mend

@wordpress/components 39.0.0 → 40.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1080) hide show

package/src/popover/stories/utils.tsx ADDED Viewed

@@ -0,0 +1,79 @@
+import { createPortal, useState } from '@wordpress/element';
+import Popover from '..';
+import { Provider as SlotFillProvider } from '../../slot-fill';
+import type { WordPressComponentProps } from '../../context';
+const GenericIframe = ( {
+	children,
+	...props
+}: WordPressComponentProps< { children: React.ReactNode }, 'iframe' > ) => {
+	const [ containerNode, setContainerNode ] = useState< HTMLElement >();
+	return (
+		<iframe
+			{ ...props }
+			title="My Iframe"
+			srcDoc="<!doctype html><html><body></body></html>"
+			// Waiting for the load event ensures that this works in Firefox.
+			// See: https://github.com/facebook/react/issues/22847#issuecomment-991394558
+			onLoad={ ( event ) => {
+				if ( event.currentTarget.contentDocument ) {
+					setContainerNode(
+						event.currentTarget.contentDocument.body
+					);
+				}
+			} }
+		>
+			{ containerNode && createPortal( children, containerNode ) }
+		</iframe>
+	);
+};
+export const PopoverInsideIframeRenderedInExternalSlot = (
+	props: React.ComponentProps< typeof Popover >
+) => {
+	const SLOT_NAME = 'my-slot';
+	const [ anchorRef, setAnchorRef ] = useState< HTMLParagraphElement | null >(
+		null
+	);
+	return (
+		<SlotFillProvider>
+			<Popover.Slot name={ SLOT_NAME } />
+			<GenericIframe
+				style={ {
+					width: '100%',
+					height: '400px',
+					border: '0',
+					outline: '1px solid purple',
+				} }
+			>
+				<div
+					style={ {
+						height: '200vh',
+						paddingTop: '10vh',
+					} }
+				>
+					<p
+						style={ {
+							padding: '8px',
+							background: 'salmon',
+							maxWidth: '200px',
+							marginTop: '100px',
+							marginLeft: 'auto',
+							marginRight: 'auto',
+						} }
+						ref={ setAnchorRef }
+					>
+						Popover&apos;s anchor
+					</p>
+					<Popover
+						{ ...props }
+						__unstableSlotName={ SLOT_NAME }
+						anchor={ anchorRef }
+					/>
+				</div>
+			</GenericIframe>
+		</SlotFillProvider>
+	);
+};

package/src/popover/test/index.tsx CHANGED Viewed

@@ -15,7 +15,7 @@ import {
 } from '../utils';
 import Popover from '..';
 import type { PopoverProps } from '../types';
-import { PopoverInsideIframeRenderedInExternalSlot } from './utils';
+import { PopoverInsideIframeRenderedInExternalSlot } from './utils/index.js';
 type PositionToPlacementTuple = [
 	NonNullable< PopoverProps[ 'position' ] >,

package/src/popover/test/utils/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { PopoverInsideIframeRenderedInExternalSlot } from '../../stories/utils';

package/src/popover/test/utils/index.tsx CHANGED Viewed

@@ -1,79 +1,5 @@
-import { createPortal, useState } from '@wordpress/element';
-import Popover from '../..';
-import { Provider as SlotFillProvider } from '../../../slot-fill';
-import type { WordPressComponentProps } from '../../../context';
+import type Popover from '../..';
-const GenericIframe = ( {
-	children,
-	...props
-}: WordPressComponentProps< { children: React.ReactNode }, 'iframe' > ) => {
-	const [ containerNode, setContainerNode ] = useState< HTMLElement >();
-	return (
-		<iframe
-			{ ...props }
-			title="My Iframe"
-			srcDoc="<!doctype html><html><body></body></html>"
-			// Waiting for the load event ensures that this works in Firefox.
-			// See https://github.com/facebook/react/issues/22847#issuecomment-991394558
-			onLoad={ ( event ) => {
-				if ( event.currentTarget.contentDocument ) {
-					setContainerNode(
-						event.currentTarget.contentDocument.body
-					);
-				}
-			} }
-		>
-			{ containerNode && createPortal( children, containerNode ) }
-		</iframe>
-	);
-};
-export const PopoverInsideIframeRenderedInExternalSlot = (
-	props: React.ComponentProps< typeof Popover >
-) => {
-	const SLOT_NAME = 'my-slot';
-	const [ anchorRef, setAnchorRef ] = useState< HTMLParagraphElement | null >(
-		null
-	);
-	return (
-		<SlotFillProvider>
-			<Popover.Slot name={ SLOT_NAME } />
-			<GenericIframe
-				style={ {
-					width: '100%',
-					height: '400px',
-					border: '0',
-					outline: '1px solid purple',
-				} }
-			>
-				<div
-					style={ {
-						height: '200vh',
-						paddingTop: '10vh',
-					} }
-				>
-					<p
-						style={ {
-							padding: '8px',
-							background: 'salmon',
-							maxWidth: '200px',
-							marginTop: '100px',
-							marginLeft: 'auto',
-							marginRight: 'auto',
-						} }
-						ref={ setAnchorRef }
-					>
-						Popover&apos;s anchor
-					</p>
-					<Popover
-						{ ...props }
-						__unstableSlotName={ SLOT_NAME }
-						anchor={ anchorRef }
-					/>
-				</div>
-			</GenericIframe>
-		</SlotFillProvider>
-	);
-};
+export declare const PopoverInsideIframeRenderedInExternalSlot: React.ComponentType<
+	React.ComponentProps< typeof Popover >
+>;

package/src/private-apis.ts CHANGED Viewed

@@ -6,14 +6,10 @@ import { Tabs } from './tabs';
 import { lock } from './lock-unlock';
 import Badge from './badge';
 import {
-	ValidatedComboboxControl,
 	ValidatedInputControl,
 	ValidatedContentEditableControl,
 	ValidatedTextareaControl,
-	ValidatedToggleControl,
-	ValidatedToggleGroupControl,
 } from './validated-form-controls';
-import { ValidatedFormTokenField } from './validated-form-controls/components/form-token-field';
 import ContentEditableControl from './content-editable-control';
 export const privateApis = {};
@@ -26,10 +22,6 @@ lock( privateApis, {
 	Badge,
 	useDrag,
 	ValidatedInputControl,
-	ValidatedComboboxControl,
 	ValidatedContentEditableControl,
 	ValidatedTextareaControl,
-	ValidatedToggleControl,
-	ValidatedToggleGroupControl,
-	ValidatedFormTokenField,
 } );

package/src/progress-bar/index.tsx CHANGED Viewed

@@ -1,7 +1,8 @@
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
-import * as ProgressBarStyled from './styles';
+import styles from './style.module.scss';
 import type { ProgressBarProps } from './types';
 import type { WordPressComponentProps } from '../context';
@@ -13,23 +14,26 @@ function UnforwardedProgressBar(
 	const isIndeterminate = ! Number.isFinite( value );
 	return (
-		<ProgressBarStyled.Track className={ className }>
-			<ProgressBarStyled.Indicator
+		<div className={ clsx( styles.track, className ) }>
+			<div
+				className={ clsx( styles.indicator, {
+					[ styles[ 'is-indeterminate' ] ]: isIndeterminate,
+				} ) }
 				style={ {
 					'--indicator-width': ! isIndeterminate
 						? `${ value }%`
 						: undefined,
 				} }
-				isIndeterminate={ isIndeterminate }
 			/>
-			<ProgressBarStyled.ProgressElement
+			<progress
+				className={ styles[ 'progress-element' ] }
 				max={ 100 }
 				value={ value }
 				aria-label={ __( 'Loading …' ) }
 				ref={ ref }
 				{ ...progressProps }
 			/>
-		</ProgressBarStyled.Track>
+		</div>
 	);
 }

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

@@ -0,0 +1,62 @@
+@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);
+	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;
+	}
+}
+@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 CHANGED Viewed

@@ -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/radio-control/README.md CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -37,6 +37,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 ],
@@ -81,6 +89,29 @@ 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();
 			render(
@@ -166,6 +197,34 @@ describe.each( [
 	} );
 	describe( 'interaction', () => {
+		it( 'should keep enabled options interactive when another option is disabled', async () => {
+			const user = userEvent.setup();
+			const onChangeSpy = jest.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();

package/src/radio-control/types.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/resizable-box/resize-tooltip/index.tsx CHANGED Viewed

@@ -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>
 	);
 }