@wordpress/components 36.0.1 → 37.0.0

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

@@ -0,0 +1,164 @@
+/**
+ * External dependencies
+ */
+import { render, screen, fireEvent } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import ContentEditableControl from '..';
+
+// The presentational shell is deliberately decoupled from `@wordpress/rich-text`:
+// the editable behavior and any focus/selection tracking are owned by the
+// consumer, wired through the forwarded ref and native event props. These
+// tests exercise only the chrome the shell owns -- the label and the
+// `contentEditable` element -- with no rich-text wiring at all.
+describe( 'ContentEditableControl', () => {
+	it( 'renders a labeled contenteditable textbox', () => {
+		render( <ContentEditableControl label="Description" /> );
+
+		const textbox = screen.getByRole( 'textbox' );
+		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' );
+	} );
+
+	it( 'visually hides the label when `hideLabelFromVision` is set', () => {
+		render( <ContentEditableControl label="Note" hideLabelFromVision /> );
+
+		const label = screen.getByText( 'Note' );
+		expect( label ).toHaveClass( 'components-visually-hidden' );
+	} );
+
+	it( 'is multiline by default and accepts an `aria-multiline` override', () => {
+		const { rerender } = render(
+			<ContentEditableControl label="Single line" />
+		);
+		expect( screen.getByRole( 'textbox' ) ).toHaveAttribute(
+			'aria-multiline',
+			'true'
+		);
+
+		rerender(
+			<ContentEditableControl
+				label="Single line"
+				aria-multiline={ false }
+			/>
+		);
+		expect( screen.getByRole( 'textbox' ) ).toHaveAttribute(
+			'aria-multiline',
+			'false'
+		);
+	} );
+
+	it( 'exposes `disabled` as a non-editable, aria-disabled textbox', () => {
+		render( <ContentEditableControl label="Note" disabled /> );
+
+		const textbox = screen.getByRole( 'textbox' );
+		expect( textbox ).toHaveAttribute( 'aria-disabled', 'true' );
+		expect( textbox ).toHaveAttribute( 'contenteditable', 'false' );
+	} );
+
+	it( 'exposes `required` via aria-required', () => {
+		render( <ContentEditableControl label="Note" required /> );
+
+		expect( screen.getByRole( 'textbox' ) ).toBeRequired();
+	} );
+
+	it( 'exposes `placeholder` via aria-placeholder', () => {
+		render(
+			<ContentEditableControl label="Note" placeholder="Add a note…" />
+		);
+
+		expect( screen.getByRole( 'textbox' ) ).toHaveAttribute(
+			'aria-placeholder',
+			'Add a note…'
+		);
+	} );
+
+	it( 'uses a consumer-supplied `id` for the textbox and label', () => {
+		render(
+			<ContentEditableControl
+				label="Custom id"
+				// eslint-disable-next-line no-restricted-syntax
+				id="my-custom-id"
+			/>
+		);
+
+		expect( screen.getByRole( 'textbox' ) ).toHaveAttribute(
+			'id',
+			'my-custom-id'
+		);
+		expect( screen.getByText( 'Custom id' ) ).toHaveAttribute(
+			'for',
+			'my-custom-id'
+		);
+	} );
+
+	it( 'applies a consumer-supplied className to the outermost wrapper', () => {
+		const { container } = render(
+			<ContentEditableControl
+				label="Styled"
+				className="my-custom-class"
+			/>
+		);
+
+		// The package convention is to put the consumer's `className` on the
+		// outermost wrapper (the `BaseControl` root), not the editable.
+		expect(
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			container.querySelector( '.components-base-control' )
+		).toHaveClass( 'my-custom-class' );
+		expect( screen.getByRole( 'textbox' ) ).not.toHaveClass(
+			'my-custom-class'
+		);
+	} );
+
+	it( 'forwards additional native props to the textbox', () => {
+		render(
+			<ContentEditableControl
+				label="Note"
+				dir="rtl"
+				data-testid="my-textbox"
+			/>
+		);
+
+		const textbox = screen.getByRole( 'textbox' );
+		expect( textbox ).toHaveAttribute( 'dir', 'rtl' );
+		expect( textbox ).toHaveAttribute( 'data-testid', 'my-textbox' );
+	} );
+
+	it( 'forwards its ref to the contenteditable element', () => {
+		// The rich-text wiring (the `useRichText` ref, event-listener refs,
+		// an anchor ref, …) is injected through this forwarded ref.
+		const ref = jest.fn();
+		render( <ContentEditableControl label="Note" ref={ ref } /> );
+
+		expect( ref ).toHaveBeenCalledWith( screen.getByRole( 'textbox' ) );
+	} );
+
+	it( 'calls consumer-supplied focus and blur handlers', () => {
+		const onFocus = jest.fn();
+		const onBlur = jest.fn();
+		render(
+			<ContentEditableControl
+				label="Field"
+				onFocus={ onFocus }
+				onBlur={ onBlur }
+			/>
+		);
+		const textbox = screen.getByRole( 'textbox' );
+
+		fireEvent.focus( textbox );
+		expect( onFocus ).toHaveBeenCalledTimes( 1 );
+
+		fireEvent.blur( textbox );
+		expect( onBlur ).toHaveBeenCalledTimes( 1 );
+	} );
+} );

package/src/content-editable-control/types.ts

@@ -0,0 +1,35 @@
+/**
+ * Internal dependencies
+ */
+import type { BaseControlProps } from '../base-control/types';
+
+export type ContentEditableControlProps = Pick<
+	BaseControlProps,
+	'className' | 'hideLabelFromVision' | 'help'
+> & {
+	/**
+	 * Label text for the control.
+	 */
+	label: string;
+	/**
+	 * Whether the field is non-editable. A disabled field is not
+	 * `contentEditable` (so it is neither focusable nor editable) and exposes
+	 * `aria-disabled` to assistive technology.
+	 *
+	 * @default false
+	 */
+	disabled?: boolean;
+	/**
+	 * Whether the field is required. Exposed to assistive technology via
+	 * `aria-required`.
+	 *
+	 * @default false
+	 */
+	required?: boolean;
+	/**
+	 * Placeholder text shown while the element has no content. Exposed to
+	 * assistive technology via `aria-placeholder` and drawn by the stylesheet
+	 * when the element is empty.
+	 */
+	placeholder?: string;
+};

package/src/context/stories/ComponentsProvider.stories.jsx

@@ -6,9 +6,9 @@ import { createContext, useContext, memo, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { Card, CardBody } from '../../../card';
-import { View } from '../../../view';
-import { Text } from '../../../text';
+import { Card, CardBody } from '../../card';
+import { View } from '../../view';
+import { Text } from '../../text';
 import { ContextSystemProvider } from '../index';
 
 const SomeContext = createContext();

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

@@ -120,7 +120,6 @@ const GradientTypePicker = ( {
 			labelPosition="top"
 			onChange={ handleOnChange }
 			options={ GRADIENT_OPTIONS }
-			size="__unstable-large"
 			value={ hasGradient ? type : undefined }
 		/>
 	);

package/src/custom-select-control/README.md

@@ -41,7 +41,6 @@ function MyCustomSelectControl() {
 	const [ , setFontSize ] = useState();
 	return (
 		<CustomSelectControl
-			__next40pxDefaultSize
 			label="Font Size"
 			options={ options }
 			onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }
@@ -53,7 +52,6 @@ function MyControlledCustomSelectControl() {
 	const [ fontSize, setFontSize ] = useState( options[ 0 ] );
 	return (
 		<CustomSelectControl
-			__next40pxDefaultSize
 			label="Font Size"
 			options={ options }
 			onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }
@@ -144,13 +142,6 @@ A handler for `blur` events on the trigger button.
 
 -   Required: No
 
-#### `__next40pxDefaultSize`: `boolean`
-
-Start opting into the larger default height that will become the default size in a future version.
-
-- Required: No
-- Default: `false`
-
 ## Related components
 
 -   Like this component, but implemented using a native `<select>` for when custom styling is not necessary, the `SelectControl` component.

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

@@ -18,7 +18,6 @@ import CustomSelectItem from '../custom-select-control-v2/item';
 import * as Styled from '../custom-select-control-v2/styles';
 import type { CustomSelectProps, CustomSelectOption } from './types';
 import { VisuallyHidden } from '../visually-hidden';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 function useDeprecatedProps< T extends CustomSelectOption >( {
 	__experimentalShowSelectedHint,
@@ -52,12 +51,18 @@ function getDescribedBy( currentName: string, describedBy?: string ) {
 	return sprintf( __( 'Currently selected: %s' ), currentName );
 }
 
+/**
+ * `CustomSelectControl` is a dropdown for selecting a single option from a
+ * list, with support for custom styling. Use it instead of the `SelectControl`
+ * when options need richer markup (e.g. per-option styles or hints).
+ */
 function CustomSelectControl< T extends CustomSelectOption >(
 	props: CustomSelectProps< T >
 ) {
 	const {
-		__next40pxDefaultSize = false,
-		__shouldNotWarnDeprecated36pxSize,
+		// Prevent passing legacy props to internal component.
+		__next40pxDefaultSize: _next40pxDefaultSize,
+		__shouldNotWarnDeprecated36pxSize: _shouldNotWarnDeprecated36pxSize,
 		describedBy,
 		options,
 		onChange,
@@ -68,13 +73,6 @@ function CustomSelectControl< T extends CustomSelectOption >(
 		...restProps
 	} = useDeprecatedProps( props );
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'CustomSelectControl',
-		__next40pxDefaultSize,
-		size,
-		__shouldNotWarnDeprecated36pxSize,
-	} );
-
 	const descriptionId = useInstanceId(
 		CustomSelectControl,
 		'custom-select-control__description'
@@ -174,25 +172,12 @@ function CustomSelectControl< T extends CustomSelectOption >(
 		);
 	};
 
-	const translatedSize = ( () => {
-		if (
-			( __next40pxDefaultSize && size === 'default' ) ||
-			size === '__unstable-large'
-		) {
-			return 'default';
-		}
-		if ( ! __next40pxDefaultSize && size === 'default' ) {
-			return 'compact';
-		}
-		return size;
-	} )();
-
 	return (
 		<>
 			<CustomSelect
 				aria-describedby={ descriptionId }
 				renderSelectedValue={ renderSelectedValue }
-				size={ translatedSize }
+				size={ size === '__unstable-large' ? 'default' : size }
 				store={ store }
 				className={ clsx(
 					// Keeping the classname for legacy reasons

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

@@ -34,7 +34,7 @@ const meta: Meta< typeof CustomSelectControl > = {
 		componentStatus: {
 			status: 'recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by `SelectControl` in `@wordpress/ui`, but continue using for now.',
+			notes: 'Will be superseded by [`SelectControl`](?path=/docs/design-system-components-form-selectcontrol--docs) in `@wordpress/ui`, but continue using for now.',
 		},
 	},
 	decorators: [
@@ -63,7 +63,6 @@ const Template: StoryFn< typeof CustomSelectControl > = ( props ) => {
 
 	return (
 		<CustomSelectControl
-			__next40pxDefaultSize
 			{ ...props }
 			onChange={ onChange }
 			value={ value }
@@ -73,7 +72,6 @@ const Template: StoryFn< typeof CustomSelectControl > = ( props ) => {
 
 export const Default = Template.bind( {} );
 Default.args = {
-	__next40pxDefaultSize: true,
 	label: 'Label',
 	options: [
 		{

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

@@ -17,7 +17,7 @@ import _CustomSelectControl from '..';
 
 const UncontrolledCustomSelectControl = (
 	props: React.ComponentProps< typeof _CustomSelectControl >
-) => <_CustomSelectControl __next40pxDefaultSize { ...props } />;
+) => <_CustomSelectControl { ...props } />;
 
 const customClassName = 'amber-skies';
 const customStyles = {

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

@@ -117,7 +117,8 @@ export type CustomSelectProps< T extends CustomSelectOption > = {
 	/**
 	 * Start opting into the larger default height that will become the default size in a future version.
 	 *
-	 * @default false
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 * @ignore
 	 */
 	__next40pxDefaultSize?: boolean;
 	/**

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

@@ -131,11 +131,7 @@ function CustomSelect(
 			>
 				{ label }
 			</Ariakit.SelectLabel>
-			<InputBase
-				__next40pxDefaultSize
-				size={ size }
-				suffix={ <SelectControlChevronDown /> }
-			>
+			<InputBase size={ size } suffix={ <SelectControlChevronDown /> }>
 				<CustomSelectButton
 					{ ...restProps }
 					size={ size }

package/src/custom-select-control-v2/stories/index.story.tsx

@@ -34,7 +34,7 @@ const meta: Meta< typeof CustomSelectControlV2 > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by `SelectControl` in `@wordpress/ui`. Continue using `CustomSelectControl` (v1) for now.',
+			notes: 'Will be superseded by [`SelectControl`](?path=/docs/design-system-components-form-selectcontrol--docs) in `@wordpress/ui`. Continue using `CustomSelectControl` (v1) for now.',
 		},
 	},
 	decorators: [

package/src/date-time/date-picker/styles.ts

@@ -38,7 +38,7 @@ export const NavigatorHeading = styled( Heading )`
 	grid-column: 2 / 7;
 
 	strong {
-		font-weight: ${ CONFIG.fontWeightHeading };
+		font-weight: ${ CONFIG.fontWeightEmphasis };
 	}
 `;
 

package/src/date-time/time-picker/index.tsx

@@ -136,7 +136,6 @@ export function TimePicker( {
 			className="components-datetime__time-field components-datetime__time-field-day" // Unused, for backwards compatibility.
 			label={ __( 'Day' ) }
 			hideLabelFromVision
-			__next40pxDefaultSize
 			value={ day }
 			step={ 1 }
 			min={ 1 }
@@ -156,7 +155,6 @@ export function TimePicker( {
 				className="components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility.
 				label={ __( 'Month' ) }
 				hideLabelFromVision
-				__next40pxDefaultSize
 				value={ month }
 				options={ monthOptions }
 				onChange={ ( value ) => {
@@ -178,7 +176,6 @@ export function TimePicker( {
 			className="components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
 			label={ __( 'Year' ) }
 			hideLabelFromVision
-			__next40pxDefaultSize
 			value={ year }
 			step={ 1 }
 			min={ 1 }

package/src/date-time/time-picker/time-input/index.tsx

@@ -113,7 +113,6 @@ export function TimeInput( {
 						className="components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
 						label={ __( 'Hours' ) }
 						hideLabelFromVision
-						__next40pxDefaultSize
 						value={ String(
 							is12Hour ? hours12Format : value.hours
 						).padStart( 2, '0' ) }
@@ -143,7 +142,6 @@ export function TimeInput( {
 						) }
 						label={ __( 'Minutes' ) }
 						hideLabelFromVision
-						__next40pxDefaultSize
 						value={ String( value.minutes ).padStart( 2, '0' ) }
 						step={ 1 }
 						min={ 0 }
@@ -167,7 +165,6 @@ export function TimeInput( {
 				</TimeWrapper>
 				{ is12Hour && (
 					<ToggleGroupControl
-						__next40pxDefaultSize
 						isBlock
 						label={ __( 'Select AM or PM' ) }
 						hideLabelFromVision

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

@@ -56,7 +56,6 @@ const Form = () => {
 				onChange={ setTextAreaValue }
 			/>
 			<SelectControl
-				__next40pxDefaultSize
 				label="Select Control"
 				onChange={ () => {} }
 				options={ [

package/src/divider/style.module.scss

@@ -2,7 +2,9 @@
 	border: 0;
 	margin: 0;
 
-	&[aria-orientation="horizontal"] {
+	// Keep the orientation selectors at the pre-#79444 specificity so existing
+	// border overrides continue to win.
+	&:where([aria-orientation="horizontal"]) {
 		border-block-end: 1px solid currentColor;
 		block-size: 0;
 		inline-size: auto;
@@ -10,7 +12,7 @@
 		margin-block-end: var(--wp-components-divider-margin-end, 0);
 	}
 
-	&[aria-orientation="vertical"] {
+	&:where([aria-orientation="vertical"]) {
 		display: inline;
 		border-inline-end: 1px solid currentColor;
 		block-size: auto;

package/src/dropdown-menu/style.scss

@@ -18,7 +18,7 @@
 		outline: none;
 		cursor: var(--wpds-cursor-control);
 		white-space: nowrap;
-		font-weight: $font-weight-regular;
+		font-weight: var(--wpds-typography-font-weight-default);
 
 		&.has-separator {
 			margin-top: 6px;

package/src/elevation/hook.ts

@@ -108,14 +108,15 @@ export function useElevation(
 			`;
 		}
 
-		return cx(
+		const elevationStyles = css(
 			styles.Elevation,
 			sx.Base,
 			sx.hover,
 			sx.focus,
-			sx.active,
-			className
+			sx.active
 		);
+
+		return cx( elevationStyles, className );
 	}, [
 		active,
 		borderRadius,

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

@@ -24,7 +24,7 @@ const meta: Meta< typeof Elevation > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Planned for deprecation. Use [elevation tokens](?path=/docs/foundations-design-language-elevation--page) from `@wordpress/base-styles` instead.',
+			notes: 'Planned for deprecation. Use [`elevation tokens`](?path=/docs/foundations-design-language-elevation--page) from `@wordpress/base-styles` instead.',
 		},
 	},
 };

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

@@ -34,7 +34,7 @@ exports[`props should render active 1`] = `
 
 <div
   aria-hidden="true"
-  class="components-elevation emotion-0 emotion-1"
+  class="emotion-0 components-elevation"
   data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
@@ -67,7 +67,7 @@ exports[`props should render correctly 1`] = `
 
 <div
   aria-hidden="true"
-  class="components-elevation emotion-0 emotion-1"
+  class="emotion-0 components-elevation"
   data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
@@ -104,7 +104,7 @@ exports[`props should render hover 1`] = `
 
 <div
   aria-hidden="true"
-  class="components-elevation emotion-0 emotion-1"
+  class="emotion-0 components-elevation"
   data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
@@ -145,7 +145,7 @@ exports[`props should render isInteractive 1`] = `
 
 <div
   aria-hidden="true"
-  class="components-elevation emotion-0 emotion-1"
+  class="emotion-0 components-elevation"
   data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
@@ -186,7 +186,7 @@ exports[`props should render offset 1`] = `
 
 <div
   aria-hidden="true"
-  class="components-elevation emotion-0 emotion-1"
+  class="emotion-0 components-elevation"
   data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
@@ -219,7 +219,7 @@ exports[`props should render value 1`] = `
 
 <div
   aria-hidden="true"
-  class="components-elevation emotion-0 emotion-1"
+  class="emotion-0 components-elevation"
   data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"

package/src/elevation/test/index.tsx

@@ -8,6 +8,11 @@ import { render, screen } from '@testing-library/react';
  */
 import { Elevation } from '..';
 
+const getGeneratedEmotionClassNames = ( element: HTMLElement ) =>
+	Array.from( element.classList ).filter( ( className ) =>
+		/^(css|emotion)-/.test( className )
+	);
+
 describe( 'props', () => {
 	test( 'should render correctly', () => {
 		render( <Elevation data-testid="elevation" /> );
@@ -61,4 +66,20 @@ describe( 'props', () => {
 
 		expect( screen.getByTestId( 'elevation' ) ).toMatchSnapshot();
 	} );
+
+	test( 'should compose interactive styles in a single generated class', () => {
+		render(
+			<Elevation
+				active={ 5 }
+				focus={ 9 }
+				hover={ 14 }
+				value={ 7 }
+				data-testid="elevation"
+			/>
+		);
+
+		expect(
+			getGeneratedEmotionClassNames( screen.getByTestId( 'elevation' ) )
+		).toHaveLength( 1 );
+	} );
 } );

package/src/external-link/index.tsx

@@ -23,12 +23,7 @@ function UnforwardedExternalLink(
 	>,
 	ref: ForwardedRef< HTMLAnchorElement >
 ) {
-	const { href, children, className, rel = '', ...additionalProps } = props;
-	const optimizedRel = [
-		...new Set(
-			[ ...rel.split( ' ' ), 'external', 'noopener' ].filter( Boolean )
-		),
-	].join( ' ' );
+	const { href, children, className, ...additionalProps } = props;
 	const classes = clsx( 'components-external-link', className );
 	/* Anchor links are perceived as external links.
 	This constant helps check for on page anchor links,
@@ -55,7 +50,6 @@ function UnforwardedExternalLink(
 			href={ href }
 			onClick={ onClickHandler }
 			target="_blank"
-			rel={ optimizedRel }
 			ref={ ref }
 		>
 			<span className="components-external-link__contents">

package/src/external-link/stories/index.story.tsx

@@ -23,7 +23,7 @@ const meta: Meta< typeof ExternalLink > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Use `Link` from `@wordpress/ui` instead, with the `openInNewTab` prop set.',
+			notes: 'Use [`Link`](?path=/docs/design-system-components-link--docs) from `@wordpress/ui` instead, with the `openInNewTab` prop set.',
 		},
 	},
 };

package/src/external-link/style.scss

@@ -40,5 +40,5 @@
 	line-height: 1;
 	display: inline-block;
 	margin-inline-start: var(--wpds-dimension-padding-xs);
-	font-weight: var(--wpds-typography-font-weight-regular);
+	font-weight: var(--wpds-typography-font-weight-default);
 }