@wordpress/components 36.0.1 → 37.0.0

package/src/utils/test/polymorphic-element.tsx

@@ -0,0 +1,231 @@
+import styled from '@emotion/styled';
+import { render, screen } from '@testing-library/react';
+import { renderToString } from 'react-dom/server';
+
+import { createElement, createRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { PolymorphicElement } from '../polymorphic-element';
+
+const StyledDiv = styled.div``;
+
+const components = [
+	{
+		name: 'PolymorphicElement',
+		Component: PolymorphicElement,
+	},
+	{
+		name: 'styled.div',
+		Component: StyledDiv,
+	},
+] as const;
+
+describe.each( components )( '$name', ( { Component: RawComponent } ) => {
+	const Component = RawComponent as typeof PolymorphicElement;
+
+	it( 'filters invalid props from intrinsic elements', () => {
+		render(
+			createElement( Component, {
+				as: 'label',
+				'data-testid': 'label',
+				htmlFor: 'field',
+				labelPosition: 'top',
+			} as Parameters< typeof Component >[ 0 ] & {
+				labelPosition: string;
+			} )
+		);
+
+		const label = screen.getByTestId( 'label' );
+
+		expect( label ).toHaveAttribute( 'for', 'field' );
+		expect( label ).not.toHaveAttribute( 'labelPosition' );
+		expect( label ).not.toHaveAttribute( 'labelposition' );
+	} );
+
+	it( 'preserves standard props for intrinsic elements', () => {
+		render(
+			<Component
+				aria-label="Notice"
+				className="custom-class"
+				data-testid="notice"
+				style={ { color: 'red' } }
+				title="Notice title"
+			/>
+		);
+
+		const element = screen.getByTestId( 'notice' );
+
+		expect( element ).toHaveAttribute( 'aria-label', 'Notice' );
+		expect( element ).toHaveAttribute( 'title', 'Notice title' );
+		expect( element ).toHaveClass( 'custom-class' );
+		expect( element ).toHaveStyle( { color: 'rgb(255, 0, 0)' } );
+	} );
+
+	it( 'preserves standard props without relying on the DOM', () => {
+		const view = renderToString(
+			createElement( Component, {
+				as: 'form',
+				acceptCharset: 'utf-8',
+			} as Parameters< typeof Component >[ 0 ] & {
+				acceptCharset: string;
+			} )
+		);
+
+		expect( view ).toContain( 'accept-charset="utf-8"' );
+	} );
+
+	it( 'preserves SVG props for SVG intrinsic elements', () => {
+		render(
+			<Component
+				as="svg"
+				data-testid="svg"
+				fill="currentColor"
+				preserveAspectRatio="xMidYMid meet"
+				stroke="none"
+				strokeWidth={ 2 }
+				viewBox="0 0 24 24"
+			/>
+		);
+
+		const svg = screen.getByTestId( 'svg' );
+
+		expect( svg ).toHaveAttribute( 'fill', 'currentColor' );
+		expect( svg ).toHaveAttribute( 'preserveAspectRatio', 'xMidYMid meet' );
+		expect( svg ).toHaveAttribute( 'stroke', 'none' );
+		expect( svg ).toHaveAttribute( 'stroke-width', '2' );
+		expect( svg ).toHaveAttribute( 'viewBox', '0 0 24 24' );
+	} );
+
+	it( 'preserves SVG props without relying on the DOM', () => {
+		const view = renderToString(
+			<Component
+				as="svg"
+				fill="currentColor"
+				strokeWidth={ 2 }
+				viewBox="0 0 24 24"
+			/>
+		);
+
+		expect( view ).toContain( 'fill="currentColor"' );
+		expect( view ).toContain( 'stroke-width="2"' );
+		expect( view ).toContain( 'viewBox="0 0 24 24"' );
+	} );
+
+	it( 'preserves SVG props for non-SVG-root intrinsic elements', () => {
+		render(
+			<svg>
+				<Component
+					as="path"
+					d="M0 0h24v24H0z"
+					data-testid="path"
+					fillRule="evenodd"
+					clipPath="url(#clip)"
+				/>
+			</svg>
+		);
+
+		const path = screen.getByTestId( 'path' );
+
+		expect( path ).toHaveAttribute( 'clip-path', 'url(#clip)' );
+		expect( path ).toHaveAttribute( 'd', 'M0 0h24v24H0z' );
+		expect( path ).toHaveAttribute( 'fill-rule', 'evenodd' );
+	} );
+
+	it( 'filters invalid props from SVG intrinsic elements', () => {
+		render(
+			createElement( Component, {
+				as: 'svg',
+				'data-testid': 'svg',
+				labelPosition: 'top',
+				viewBox: '0 0 24 24',
+			} as Parameters< typeof Component >[ 0 ] & {
+				labelPosition: string;
+			} )
+		);
+
+		const svg = screen.getByTestId( 'svg' );
+
+		expect( svg ).toHaveAttribute( 'viewBox', '0 0 24 24' );
+		expect( svg ).not.toHaveAttribute( 'labelPosition' );
+		expect( svg ).not.toHaveAttribute( 'labelposition' );
+	} );
+
+	it( 'passes custom props through to custom components', () => {
+		function CustomComponent( {
+			variant,
+			...props
+		}: JSX.IntrinsicElements[ 'section' ] & {
+			variant: string;
+		} ) {
+			return <section data-variant={ variant } { ...props } />;
+		}
+
+		render(
+			<Component
+				as={ CustomComponent }
+				data-testid="custom"
+				variant="primary"
+			/>
+		);
+
+		expect( screen.getByTestId( 'custom' ) ).toHaveAttribute(
+			'data-variant',
+			'primary'
+		);
+	} );
+
+	it( 'forwards refs to the rendered element', () => {
+		const ref = createRef< HTMLButtonElement >();
+
+		render(
+			<Component
+				as="button"
+				data-testid="button"
+				ref={ ref }
+				type="button"
+			/>
+		);
+
+		expect( ref.current ).toBe( screen.getByTestId( 'button' ) );
+	} );
+} );
+
+describe( 'PolymorphicElement prop filtering', () => {
+	it( 'filters invalid on-prefixed props from intrinsic elements', () => {
+		render(
+			createElement( PolymorphicElement, {
+				'data-testid': 'element',
+				on1: 'invalid',
+				'on-foo': 'invalid',
+			} as Parameters< typeof PolymorphicElement >[ 0 ] & {
+				on1: string;
+				'on-foo': string;
+			} )
+		);
+
+		const element = screen.getByTestId( 'element' );
+
+		expect( element ).not.toHaveAttribute( 'on1' );
+		expect( element ).not.toHaveAttribute( 'on-foo' );
+	} );
+
+	it( 'filters SVG-only props from HTML intrinsic elements', () => {
+		render(
+			createElement( PolymorphicElement, {
+				'data-testid': 'element',
+				fill: 'currentColor',
+				strokeWidth: 2,
+			} as Parameters< typeof PolymorphicElement >[ 0 ] & {
+				fill: string;
+				strokeWidth: number;
+			} )
+		);
+
+		const element = screen.getByTestId( 'element' );
+
+		expect( element ).not.toHaveAttribute( 'fill' );
+		expect( element ).not.toHaveAttribute( 'stroke-width' );
+	} );
+} );

package/src/v-stack/stories/index.story.tsx

@@ -45,7 +45,7 @@ const meta: Meta< typeof VStack > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Use `Stack` from `@wordpress/ui` instead.',
+			notes: 'Use [`Stack`](?path=/docs/design-system-components-stack--docs) from `@wordpress/ui` instead.',
 		},
 	},
 };

package/src/v-stack/test/__snapshots__/index.tsx.snap

@@ -1,121 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`props should render alignment 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 2);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0>* {
-  min-height: 0;
-}
-
 <div>
   <div
-    class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
+    class="style-flex style-items-column components-flex components-h-stack components-v-stack"
     data-wp-c16t="true"
     data-wp-component="VStack"
+    style="--wp-components-flex-align: center; --wp-components-flex-direction: column; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: center;"
   >
-    <div
-      class="emotion-2 emotion-1"
-    />
-    <div
-      class="emotion-2 emotion-1"
-    />
+    <div />
+    <div />
   </div>
 </div>
 `;
 
 exports[`props should render correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 2);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0>* {
-  min-height: 0;
-}
-
 <div>
   <div
-    class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
+    class="style-flex style-items-column components-flex components-h-stack components-v-stack"
     data-wp-c16t="true"
     data-wp-component="VStack"
+    style="--wp-components-flex-align: stretch; --wp-components-flex-direction: column; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: center;"
   >
-    <div
-      class="emotion-2 emotion-1"
-    />
-    <div
-      class="emotion-2 emotion-1"
-    />
+    <div />
+    <div />
   </div>
 </div>
 `;
 
 exports[`props should render spacing 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 5);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0>* {
-  min-height: 0;
-}
-
 <div>
   <div
-    class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
+    class="style-flex style-items-column components-flex components-h-stack components-v-stack"
     data-wp-c16t="true"
     data-wp-component="VStack"
+    style="--wp-components-flex-align: stretch; --wp-components-flex-direction: column; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 5); --wp-components-flex-justify: center;"
   >
-    <div
-      class="emotion-2 emotion-1"
-    />
-    <div
-      class="emotion-2 emotion-1"
-    />
+    <div />
+    <div />
   </div>
 </div>
 `;

package/src/validated-form-controls/components/combobox-control.tsx

@@ -52,7 +52,7 @@ const UnforwardedValidatedComboboxControl = (
 				)
 			}
 		>
-			<ComboboxControl __next40pxDefaultSize { ...restProps } />
+			<ComboboxControl { ...restProps } />
 		</ControlWithError>
 	);
 };

package/src/validated-form-controls/components/content-editable-control.tsx

@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import type { ValidatedControlProps } from './types';
+import ContentEditableControl from '../../content-editable-control';
+
+/**
+ * A `contentEditable` field does not participate in the Constraint Validation
+ * API, so — like `ValidatedToggleGroupControl` — the validity state lives on a
+ * visually hidden delegate input that mirrors whether the field has content.
+ */
+const UnforwardedValidatedContentEditableControl = (
+	{
+		required,
+		customValidity,
+		markWhenOptional,
+		value,
+		className,
+		...restProps
+	}: React.ComponentProps< typeof ContentEditableControl > &
+		ValidatedControlProps & {
+			/**
+			 * The field's current value as plain text, used only to drive the
+			 * hidden validity delegate (e.g. `required`). The visible content
+			 * is managed by the consumer through the forwarded ref, and any
+			 * markup-to-text transformation is the consumer's responsibility.
+			 */
+			value?: string;
+		},
+	forwardedRef: React.ForwardedRef< HTMLDivElement >
+) => {
+	const validityTargetRef = useRef< HTMLInputElement >( null );
+
+	return (
+		<div className="components-validated-control__wrapper-with-error-delegate">
+			<ControlWithError
+				required={ required }
+				markWhenOptional={ markWhenOptional }
+				customValidity={ customValidity }
+				getValidityTarget={ () => validityTargetRef.current }
+			>
+				<ContentEditableControl
+					ref={ forwardedRef }
+					className={ clsx(
+						'components-validated-control__content-editable',
+						className
+					) }
+					aria-invalid={
+						customValidity?.type === 'invalid' || undefined
+					}
+					{ ...restProps }
+				/>
+			</ControlWithError>
+			<input
+				className="components-validated-control__error-delegate"
+				type="text"
+				ref={ validityTargetRef }
+				required={ required }
+				// Whitespace-only content reads as empty, matching how a
+				// text-oriented form field is expected to validate `required`.
+				value={ value?.trim() ?? '' }
+				tabIndex={ -1 }
+				onChange={ () => {} }
+				onFocus={ ( e ) => {
+					e.target.previousElementSibling
+						?.querySelector< HTMLElement >( '[role="textbox"]' )
+						?.focus();
+				} }
+			/>
+		</div>
+	);
+};
+
+export const ValidatedContentEditableControl = forwardRef(
+	UnforwardedValidatedContentEditableControl
+);
+ValidatedContentEditableControl.displayName = 'ValidatedContentEditableControl';

package/src/validated-form-controls/components/custom-select-control.tsx

@@ -16,10 +16,7 @@ const UnforwardedValidatedCustomSelectControl = (
 		customValidity,
 		markWhenOptional,
 		...restProps
-	}: Omit<
-		React.ComponentProps< typeof CustomSelectControl >,
-		'__next40pxDefaultSize'
-	> &
+	}: React.ComponentProps< typeof CustomSelectControl > &
 		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLDivElement >
 ) => {
@@ -39,7 +36,6 @@ const UnforwardedValidatedCustomSelectControl = (
 				<CustomSelectControl
 					// TODO: Upstream limitation - Required isn't passed down correctly,
 					// so it needs to be set on a delegate element.
-					__next40pxDefaultSize
 					{ ...restProps }
 				/>
 			</ControlWithError>

package/src/validated-form-controls/components/form-token-field.tsx

@@ -16,11 +16,7 @@ const UnforwardedValidatedFormTokenField = (
 		customValidity,
 		markWhenOptional,
 		...restProps
-	}: Omit<
-		React.ComponentProps< typeof FormTokenField >,
-		'__next40pxDefaultSize'
-	> &
-		ValidatedControlProps,
+	}: React.ComponentProps< typeof FormTokenField > & ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLDivElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
@@ -36,7 +32,7 @@ const UnforwardedValidatedFormTokenField = (
 				customValidity={ customValidity }
 				getValidityTarget={ () => validityTargetRef.current }
 			>
-				<FormTokenField __next40pxDefaultSize { ...restProps } />
+				<FormTokenField { ...restProps } />
 			</ControlWithError>
 			<input
 				className="components-validated-control__error-delegate"

package/src/validated-form-controls/components/index.ts

@@ -6,6 +6,7 @@ export * from './input-control';
 export * from './number-control';
 export * from './radio-control';
 export * from './range-control';
+export * from './content-editable-control';
 export * from './select-control';
 export * from './text-control';
 export * from './textarea-control';

package/src/validated-form-controls/components/input-control.tsx

@@ -17,11 +17,7 @@ const UnforwardedValidatedInputControl = (
 		customValidity,
 		markWhenOptional,
 		...restProps
-	}: Omit<
-		React.ComponentProps< typeof InputControl >,
-		'__next40pxDefaultSize'
-	> &
-		ValidatedControlProps,
+	}: React.ComponentProps< typeof InputControl > & ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
@@ -34,11 +30,7 @@ const UnforwardedValidatedInputControl = (
 			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
-			<InputControl
-				__next40pxDefaultSize
-				ref={ mergedRefs }
-				{ ...restProps }
-			/>
+			<InputControl ref={ mergedRefs } { ...restProps } />
 		</ControlWithError>
 	);
 };

package/src/validated-form-controls/components/number-control.tsx

@@ -17,11 +17,7 @@ const UnforwardedValidatedNumberControl = (
 		customValidity,
 		markWhenOptional,
 		...restProps
-	}: Omit<
-		React.ComponentProps< typeof NumberControl >,
-		'__next40pxDefaultSize'
-	> &
-		ValidatedControlProps,
+	}: React.ComponentProps< typeof NumberControl > & ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
@@ -34,11 +30,7 @@ const UnforwardedValidatedNumberControl = (
 			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
-			<NumberControl
-				__next40pxDefaultSize
-				ref={ mergedRefs }
-				{ ...restProps }
-			/>
+			<NumberControl ref={ mergedRefs } { ...restProps } />
 		</ControlWithError>
 	);
 };

package/src/validated-form-controls/components/range-control.tsx

@@ -17,11 +17,7 @@ const UnforwardedValidatedRangeControl = (
 		customValidity,
 		markWhenOptional,
 		...restProps
-	}: Omit<
-		React.ComponentProps< typeof RangeControl >,
-		'__next40pxDefaultSize'
-	> &
-		ValidatedControlProps,
+	}: React.ComponentProps< typeof RangeControl > & ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
@@ -34,11 +30,7 @@ const UnforwardedValidatedRangeControl = (
 			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
-			<RangeControl
-				__next40pxDefaultSize
-				ref={ mergedRefs }
-				{ ...restProps }
-			/>
+			<RangeControl ref={ mergedRefs } { ...restProps } />
 		</ControlWithError>
 	);
 };

package/src/validated-form-controls/components/select-control.tsx

@@ -19,7 +19,7 @@ const UnforwardedValidatedSelectControl = (
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof SelectControl >,
-		'__next40pxDefaultSize' | 'multiple' | 'onChange' | 'value'
+		'multiple' | 'onChange' | 'value'
 	> & {
 		value?: string;
 		onChange: ( value: string ) => void;
@@ -36,11 +36,7 @@ const UnforwardedValidatedSelectControl = (
 			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
-			<SelectControl
-				__next40pxDefaultSize
-				ref={ mergedRefs }
-				{ ...restProps }
-			/>
+			<SelectControl ref={ mergedRefs } { ...restProps } />
 		</ControlWithError>
 	);
 };

package/src/validated-form-controls/components/stories/content-editable-control.story.tsx

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import type { StoryObj, Meta } from '@storybook/react-vite';
+/**
+ * Internal dependencies
+ */
+import { formDecorator } from './story-utils';
+import { ValidatedContentEditableControl } from '../content-editable-control';
+
+const meta: Meta< typeof ValidatedContentEditableControl > = {
+	title: 'Components/Selection & Input/Validated Form Controls/ValidatedContentEditableControl',
+	id: 'components-validatedcontenteditablecontrol',
+	component: ValidatedContentEditableControl,
+	tags: [ 'status-private' ],
+	decorators: formDecorator,
+	argTypes: { value: { control: false } },
+};
+export default meta;
+
+export const Default: StoryObj< typeof ValidatedContentEditableControl > = {
+	render: function Template( args ) {
+		// The control is presentational: the editable manages its own
+		// contents, and the consumer mirrors the plain text into `value`
+		// for the validity delegate.
+		const [ value, setValue ] = useState( '' );
+
+		return (
+			<ValidatedContentEditableControl
+				{ ...args }
+				value={ value }
+				onInput={ ( e ) =>
+					setValue( e.currentTarget.textContent ?? '' )
+				}
+				customValidity={
+					value.toLowerCase().includes( 'error' )
+						? {
+								type: 'invalid',
+								message: 'The word "error" is not allowed.',
+						  }
+						: undefined
+				}
+			/>
+		);
+	},
+};
+Default.args = {
+	required: true,
+	label: 'Content',
+	help: 'The word "error" will trigger an error.',
+};