@wordpress/ui 0.6.1-next.v.0 → 0.7.0

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

@@ -0,0 +1,309 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Component, createRef } from '@wordpress/element';
+import type { ReactNode } from 'react';
+import * as Dialog from '../index';
+
+class TestErrorBoundary extends Component<
+	{ children: ReactNode; onError: ( error: Error ) => void },
+	{ hasError: boolean }
+> {
+	constructor( props: {
+		children: ReactNode;
+		onError: ( error: Error ) => void;
+	} ) {
+		super( props );
+		this.state = { hasError: false };
+	}
+
+	static getDerivedStateFromError() {
+		return { hasError: true };
+	}
+
+	componentDidCatch( error: Error ) {
+		this.props.onError( error );
+	}
+
+	render() {
+		if ( this.state.hasError ) {
+			return null;
+		}
+
+		return this.props.children;
+	}
+}
+
+describe( 'Dialog', () => {
+	it( 'forwards ref', async () => {
+		const user = userEvent.setup();
+		const triggerRef = createRef< HTMLButtonElement >();
+		const popupRef = createRef< HTMLDivElement >();
+		const actionRef = createRef< HTMLButtonElement >();
+		const headerRef = createRef< HTMLDivElement >();
+		const titleRef = createRef< HTMLHeadingElement >();
+		const closeIconRef = createRef< HTMLButtonElement >();
+		const footerRef = createRef< HTMLDivElement >();
+
+		render(
+			<Dialog.Root>
+				<Dialog.Trigger ref={ triggerRef }>Open Dialog</Dialog.Trigger>
+				<Dialog.Popup ref={ popupRef }>
+					<Dialog.Header ref={ headerRef }>
+						<Dialog.Title ref={ titleRef }>
+							Test Dialog
+						</Dialog.Title>
+						<Dialog.CloseIcon ref={ closeIconRef } />
+					</Dialog.Header>
+					<Dialog.Footer ref={ footerRef }>
+						<Dialog.Action ref={ actionRef }>Close</Dialog.Action>
+					</Dialog.Footer>
+				</Dialog.Popup>
+			</Dialog.Root>
+		);
+
+		// Test trigger ref before interaction
+		expect( triggerRef.current ).toBeInstanceOf( HTMLButtonElement );
+
+		// Click trigger to open dialog
+		await user.click( triggerRef.current! );
+
+		// Wait for the dialog to appear
+		await waitFor( () => {
+			expect( popupRef.current ).toBeInstanceOf( HTMLDivElement );
+		} );
+
+		// Now that the dialog is open, verify all inner refs
+		expect( headerRef.current ).toBeInstanceOf( HTMLDivElement );
+		expect( titleRef.current ).toBeInstanceOf( HTMLHeadingElement );
+		expect( closeIconRef.current ).toBeInstanceOf( HTMLButtonElement );
+		expect( actionRef.current ).toBeInstanceOf( HTMLButtonElement );
+		expect( footerRef.current ).toBeInstanceOf( HTMLDivElement );
+	} );
+
+	describe( 'Development mode validation', () => {
+		// Suppress React's error boundary logging for these tests.
+		let originalConsoleError: typeof console.error;
+
+		beforeEach( () => {
+			// eslint-disable-next-line no-console
+			originalConsoleError = console.error;
+			// eslint-disable-next-line no-console
+			console.error = jest.fn();
+		} );
+
+		afterEach( () => {
+			// eslint-disable-next-line no-console
+			console.error = originalConsoleError;
+		} );
+
+		it( 'should throw when Dialog.Title is missing', async () => {
+			const user = userEvent.setup();
+			const onError = jest.fn();
+
+			render(
+				<TestErrorBoundary onError={ onError }>
+					<Dialog.Root>
+						<Dialog.Trigger>Open Dialog</Dialog.Trigger>
+						<Dialog.Popup>
+							<Dialog.Header>
+								{ /* Missing Dialog.Title */ }
+							</Dialog.Header>
+							<p>Content without a title</p>
+							<Dialog.Footer>
+								<Dialog.Action>Close</Dialog.Action>
+							</Dialog.Footer>
+						</Dialog.Popup>
+					</Dialog.Root>
+				</TestErrorBoundary>
+			);
+
+			// Open the dialog - this will trigger the error in useEffect
+			await user.click(
+				screen.getByRole( 'button', { name: 'Open Dialog' } )
+			);
+
+			await waitFor( () => {
+				expect( onError ).toHaveBeenCalled();
+			} );
+
+			expect( onError.mock.calls[ 0 ][ 0 ] ).toBeInstanceOf( Error );
+			expect( ( onError.mock.calls[ 0 ][ 0 ] as Error ).message ).toBe(
+				'Dialog: Missing <Dialog.Title>. ' +
+					'For accessibility, every dialog requires a title. ' +
+					'If needed, the title can be visually hidden but must not be omitted.'
+			);
+		} );
+
+		it( 'should not throw before opening the dialog', async () => {
+			const onError = jest.fn();
+
+			render(
+				<TestErrorBoundary onError={ onError }>
+					<Dialog.Root>
+						<Dialog.Trigger>Open Dialog</Dialog.Trigger>
+						<Dialog.Popup>
+							<Dialog.Header>
+								<Dialog.Title>My Title</Dialog.Title>
+							</Dialog.Header>
+							<p>Content with a title</p>
+							<Dialog.Footer>
+								<Dialog.Action>Close</Dialog.Action>
+							</Dialog.Footer>
+						</Dialog.Popup>
+					</Dialog.Root>
+				</TestErrorBoundary>
+			);
+
+			// Check that the dialog itself hasn't been rendered in the DOM.
+			await expect( screen.findByRole( 'dialog' ) ).rejects.toThrow();
+
+			expect( onError ).not.toHaveBeenCalled();
+		} );
+
+		it( 'should not throw when Dialog.Title is present', async () => {
+			const user = userEvent.setup();
+			const onError = jest.fn();
+
+			render(
+				<TestErrorBoundary onError={ onError }>
+					<Dialog.Root>
+						<Dialog.Trigger>Open Dialog</Dialog.Trigger>
+						<Dialog.Popup>
+							<Dialog.Header>
+								<Dialog.Title>My Title</Dialog.Title>
+							</Dialog.Header>
+							<p>Content with a title</p>
+							<Dialog.Footer>
+								<Dialog.Action>Close</Dialog.Action>
+							</Dialog.Footer>
+						</Dialog.Popup>
+					</Dialog.Root>
+				</TestErrorBoundary>
+			);
+
+			// Open the dialog - should not throw
+			await user.click(
+				screen.getByRole( 'button', { name: 'Open Dialog' } )
+			);
+
+			// Wait for the dialog to appear and ensure validation does not trigger errors
+			await waitFor( () => {
+				expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
+			} );
+			expect( onError ).not.toHaveBeenCalled();
+		} );
+
+		it( 'should throw when Dialog.Title is empty', async () => {
+			const user = userEvent.setup();
+			const onError = jest.fn();
+
+			render(
+				<TestErrorBoundary onError={ onError }>
+					<Dialog.Root>
+						<Dialog.Trigger>Open Dialog</Dialog.Trigger>
+						<Dialog.Popup>
+							<Dialog.Header>
+								{ /* @ts-expect-error this is just for test purposes */ }
+								<Dialog.Title>
+									{ /* Empty title */ }
+								</Dialog.Title>
+							</Dialog.Header>
+							<p>Content with empty title</p>
+							<Dialog.Footer>
+								<Dialog.Action>Close</Dialog.Action>
+							</Dialog.Footer>
+						</Dialog.Popup>
+					</Dialog.Root>
+				</TestErrorBoundary>
+			);
+
+			// Open the dialog - this will trigger the error
+			await user.click(
+				screen.getByRole( 'button', { name: 'Open Dialog' } )
+			);
+
+			await waitFor( () => {
+				expect( onError ).toHaveBeenCalled();
+			} );
+
+			expect( onError.mock.calls[ 0 ][ 0 ] ).toBeInstanceOf( Error );
+			expect( ( onError.mock.calls[ 0 ][ 0 ] as Error ).message ).toBe(
+				'Dialog: <Dialog.Title> cannot be empty. ' +
+					'Provide meaningful text content for the dialog title.'
+			);
+		} );
+
+		it( 'should throw when Dialog.Title contains only whitespace', async () => {
+			const user = userEvent.setup();
+			const onError = jest.fn();
+
+			render(
+				<TestErrorBoundary onError={ onError }>
+					<Dialog.Root>
+						<Dialog.Trigger>Open Dialog</Dialog.Trigger>
+						<Dialog.Popup>
+							<Dialog.Header>
+								<Dialog.Title> </Dialog.Title>
+							</Dialog.Header>
+							<p>Content with whitespace-only title</p>
+							<Dialog.Footer>
+								<Dialog.Action>Close</Dialog.Action>
+							</Dialog.Footer>
+						</Dialog.Popup>
+					</Dialog.Root>
+				</TestErrorBoundary>
+			);
+
+			// Open the dialog - this will trigger the error
+			await user.click(
+				screen.getByRole( 'button', { name: 'Open Dialog' } )
+			);
+
+			await waitFor( () => {
+				expect( onError ).toHaveBeenCalled();
+			} );
+
+			expect( onError.mock.calls[ 0 ][ 0 ] ).toBeInstanceOf( Error );
+			expect( ( onError.mock.calls[ 0 ][ 0 ] as Error ).message ).toBe(
+				'Dialog: <Dialog.Title> cannot be empty. ' +
+					'Provide meaningful text content for the dialog title.'
+			);
+		} );
+
+		it( 'should not throw when Dialog.Title contains mixed content with text', async () => {
+			const user = userEvent.setup();
+			const onError = jest.fn();
+
+			render(
+				<TestErrorBoundary onError={ onError }>
+					<Dialog.Root>
+						<Dialog.Trigger>Open Dialog</Dialog.Trigger>
+						<Dialog.Popup>
+							<Dialog.Header>
+								<Dialog.Title>
+									<span aria-hidden="true">🎉</span>
+									Settings
+								</Dialog.Title>
+							</Dialog.Header>
+							<p>Content with icon and text title</p>
+							<Dialog.Footer>
+								<Dialog.Action>Close</Dialog.Action>
+							</Dialog.Footer>
+						</Dialog.Popup>
+					</Dialog.Root>
+				</TestErrorBoundary>
+			);
+
+			// Open the dialog - should not throw
+			await user.click(
+				screen.getByRole( 'button', { name: 'Open Dialog' } )
+			);
+
+			// Wait for the dialog to appear and ensure validation does not trigger errors
+			await waitFor( () => {
+				expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
+			} );
+			expect( onError ).not.toHaveBeenCalled();
+		} );
+	} );
+} );

package/src/dialog/title.tsx

@@ -0,0 +1,39 @@
+import { Dialog as _Dialog } from '@base-ui/react/dialog';
+import clsx from 'clsx';
+import { useMergeRefs } from '@wordpress/compose';
+import { forwardRef, useLayoutEffect, useRef } from '@wordpress/element';
+import { useDialogValidationContext } from './context';
+import styles from './style.module.css';
+import type { TitleProps } from './types';
+
+/**
+ * Renders the dialog title. This component is required for accessibility
+ * and serves as both the visible heading and the accessible label for
+ * the dialog.
+ *
+ * Base UI's Dialog.Title renders an `<h2>` by default. Use the `render` prop
+ * to customize the element if needed.
+ */
+const Title = forwardRef< HTMLHeadingElement, TitleProps >(
+	function DialogTitle( { className, render, ...props }, forwardedRef ) {
+		const validationContext = useDialogValidationContext();
+		const internalRef = useRef< HTMLHeadingElement >( null );
+		const mergedRef = useMergeRefs( [ internalRef, forwardedRef ] );
+
+		// Register this title with the parent Popup for validation (dev only)
+		useLayoutEffect( () => {
+			validationContext?.registerTitle( internalRef.current );
+		}, [ validationContext ] );
+
+		return (
+			<_Dialog.Title
+				ref={ mergedRef }
+				className={ clsx( styles.title, className ) }
+				render={ render }
+				{ ...props }
+			/>
+		);
+	}
+);
+
+export { Title };

package/src/dialog/trigger.tsx

@@ -0,0 +1,14 @@
+import { Dialog as _Dialog } from '@base-ui/react/dialog';
+import { forwardRef } from '@wordpress/element';
+import type { TriggerProps } from './types';
+
+/**
+ * Renders a button that opens the dialog popup when clicked.
+ */
+const Trigger = forwardRef< HTMLButtonElement, TriggerProps >(
+	function DialogTrigger( props, ref ) {
+		return <_Dialog.Trigger ref={ ref } { ...props } />;
+	}
+);
+
+export { Trigger };

package/src/dialog/types.ts

@@ -0,0 +1,93 @@
+import type { Dialog as _Dialog } from '@base-ui/react/dialog';
+import type { ReactNode } from 'react';
+import type { Button } from '../button';
+import type { IconButton } from '../icon-button';
+import type { ComponentProps } from '../utils/types';
+
+export interface RootProps
+	extends Pick<
+		_Dialog.Root.Props,
+		'open' | 'onOpenChange' | 'defaultOpen' | 'modal'
+	> {
+	/**
+	 * The content to be rendered inside the component.
+	 */
+	children?: ReactNode;
+}
+
+export interface TriggerProps extends ComponentProps< 'button' > {
+	/**
+	 * The content to be rendered inside the component.
+	 */
+	children?: ReactNode;
+}
+
+export interface PopupProps extends ComponentProps< 'div' > {
+	/**
+	 * The content to be rendered inside the component.
+	 */
+	children?: ReactNode;
+
+	/**
+	 * Renders the dialog at a preset width (excluding additional padding from
+	 * the viewport edges).
+	 *
+	 * - `'small'` — max-width of 384px.
+	 * - `'medium'` — max-width of 512px.
+	 * - `'large'` — max-width of 840px.
+	 * - `'stretch'` — no max-width, stretches to fill available space.
+	 * - `'full'` — stretches to fill available width and height.
+	 *
+	 * @default 'medium'
+	 */
+	size?: 'small' | 'medium' | 'large' | 'stretch' | 'full';
+}
+
+export interface ActionProps extends ComponentProps< typeof Button > {
+	/**
+	 * The content to be rendered inside the component.
+	 */
+	children?: ReactNode;
+}
+
+export interface FooterProps extends ComponentProps< 'div' > {
+	/**
+	 * The content to be rendered inside the component.
+	 */
+	children?: ReactNode;
+}
+
+export interface HeaderProps extends ComponentProps< 'div' > {
+	/**
+	 * The content to be rendered inside the component.
+	 */
+	children?: ReactNode;
+}
+
+export interface TitleProps extends ComponentProps< 'h2' > {
+	/**
+	 * The title content to be rendered. This serves as both the visible
+	 * heading and the accessible label for the dialog.
+	 */
+	children: ReactNode;
+}
+
+export interface CloseIconProps
+	extends Omit<
+		ComponentProps< typeof IconButton >,
+		'label' | 'icon' | 'loading' | 'loadingAnnouncement'
+	> {
+	/**
+	 * A label describing the button's action, shown as a tooltip and to
+	 * assistive technology.
+	 *
+	 * @default __( 'Close' )
+	 */
+	label?: ComponentProps< typeof IconButton >[ 'label' ];
+	/**
+	 * The icon to display in the button.
+	 *
+	 * @default the `close` icon from `@wordpress/icons`
+	 */
+	icon?: ComponentProps< typeof IconButton >[ 'icon' ];
+}

package/src/form/primitives/field/root.tsx

@@ -6,7 +6,7 @@ import type { FieldRootProps } from './types';
 import { Stack } from '../../../stack';
 
 const DEFAULT_RENDER = ( props: React.ComponentProps< typeof Stack > ) => (
-	<Stack { ...props } direction="column" gap="xs" />
+	<Stack { ...props } direction="column" gap="sm" />
 );
 
 /**

package/src/form/primitives/field/stories/index.story.tsx

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useId } from '@wordpress/element';
-import '@wordpress/theme/design-tokens.css';
 import { Field } from '../../../..';
 
 const meta: Meta< typeof Field.Root > = {

package/src/form/primitives/fieldset/style.module.css

@@ -4,7 +4,7 @@
 	.root {
 		display: flex;
 		flex-direction: column;
-		gap: var(--wpds-dimension-gap-2xs);
+		gap: var(--wpds-dimension-gap-xs);
 		border: 0;
 		margin: 0;
 		padding: 0;

package/src/form/primitives/index.ts

@@ -3,3 +3,4 @@ export * as Fieldset from './fieldset';
 export { Input } from './input';
 export { InputLayout } from './input-layout';
 export * as Select from './select';
+export { Textarea } from './textarea';

package/src/form/primitives/input-layout/style.module.css

@@ -2,8 +2,7 @@
 
 @layer wp-ui-components {
 	.input-layout {
-		/* TODO: Use padding tokens */
-		--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 3);
+		--wp-ui-input-layout-padding-inline: var(--wpds-dimension-padding-md);
 
 		display: flex;
 		height: 40px;
@@ -22,14 +21,12 @@
 		}
 
 		&.is-size-compact {
-			/* TODO: Use padding tokens */
-			--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);
+			--wp-ui-input-layout-padding-inline: var(--wpds-dimension-padding-sm);
 			height: 32px;
 		}
 
 		&.is-size-small {
-			/* TODO: Use padding tokens */
-			--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);
+			--wp-ui-input-layout-padding-inline: var(--wpds-dimension-padding-sm);
 			height: 24px;
 		}
 
@@ -66,10 +63,10 @@
 		&.is-padding-minimal {
 			--wp-ui-input-layout-prefix-padding-start:
 				calc(var(--wp-ui-input-layout-padding-inline) -
-				var(--wpds-dimension-base));
+				var(--wpds-dimension-padding-xs));
 			--wp-ui-input-layout-suffix-padding-end:
 				calc(var(--wp-ui-input-layout-padding-inline) -
-				var(--wpds-dimension-base));
+				var(--wpds-dimension-padding-xs));
 		}
 
 		&.is-prefix {

package/src/form/primitives/select/stories/index.story.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import '@wordpress/theme/design-tokens.css';
 import { Select } from '../../../..';
 
 const meta: Meta< typeof Select.Root > = {

package/src/form/primitives/select/test/index.test.tsx

@@ -3,8 +3,6 @@ import userEvent from '@testing-library/user-event';
 import { createRef } from '@wordpress/element';
 import * as Select from '../index';
 
-jest.setTimeout( 10000 );
-
 describe( 'Select', () => {
 	it( 'forwards ref', async () => {
 		const user = userEvent.setup();

package/src/form/primitives/textarea/index.ts

@@ -0,0 +1 @@
+export { Textarea } from './textarea';

package/src/form/primitives/textarea/stories/index.story.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Textarea } from '../index';
+
+const meta: Meta< typeof Textarea > = {
+	title: 'Design System/Components/Form/Primitives/Textarea',
+	component: Textarea,
+};
+export default meta;
+
+type Story = StoryObj< typeof Textarea >;
+
+export const Default: Story = {
+	args: {
+		placeholder: 'Placeholder',
+	},
+};
+
+export const Disabled: Story = {
+	args: {
+		...Default.args,
+		disabled: true,
+	},
+};
+
+export const WithOverflow: Story = {
+	args: {
+		...Default.args,
+		defaultValue: `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`,
+	},
+};
+
+/**
+ * When `rows` is set to `1`, the textarea will have the same footprint as a default `Input`.
+ */
+export const WithOneRow: Story = {
+	args: {
+		...Default.args,
+		rows: 1,
+	},
+};

package/src/form/primitives/textarea/style.module.css

@@ -0,0 +1,22 @@
+@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
+
+@layer wp-ui-components {
+	.wrapper {
+		--wp-ui-textarea-min-height: 40px;
+	}
+
+	.textarea {
+		/* Prevents users from resizing the textarea below this height. */
+		min-height: calc(var(--wp-ui-textarea-min-height) - 2px);
+		resize: block;
+	}
+}
+
+@layer wp-ui-compositions {
+	.wrapper {
+		--wp-ui-input-padding-block: 9.9px;
+
+		height: auto;
+		line-height: 1.4; /* TODO: Use variable */
+	}
+}