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

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

@@ -0,0 +1,143 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef, useState } from '@wordpress/element';
+import { Textarea } from '../index';
+
+describe( 'Textarea', () => {
+	it( 'forwards ref', () => {
+		const ref = createRef< HTMLTextAreaElement >();
+
+		render( <Textarea ref={ ref } /> );
+
+		expect( ref.current ).toBeInstanceOf( HTMLTextAreaElement );
+	} );
+
+	describe( 'value prop', () => {
+		it( 'renders with controlled value', () => {
+			render( <Textarea value="Hello, world!" /> );
+
+			const textarea = screen.getByRole( 'textbox' );
+			expect( textarea ).toHaveValue( 'Hello, world!' );
+		} );
+	} );
+
+	describe( 'defaultValue prop', () => {
+		it( 'renders with default value', () => {
+			render( <Textarea defaultValue="Default content" /> );
+
+			const textarea = screen.getByRole( 'textbox' );
+			expect( textarea ).toHaveValue( 'Default content' );
+		} );
+
+		it( 'allows user to modify uncontrolled value', async () => {
+			const user = userEvent.setup();
+			render( <Textarea defaultValue="Default content" /> );
+
+			const textarea = screen.getByRole( 'textbox' );
+			expect( textarea ).toHaveValue( 'Default content' );
+
+			// Clear and type new content
+			await user.clear( textarea );
+			await user.type( textarea, 'New content' );
+
+			expect( textarea ).toHaveValue( 'New content' );
+		} );
+	} );
+
+	describe( 'onValueChange prop', () => {
+		it( 'calls onValueChange when user types', async () => {
+			const user = userEvent.setup();
+			const handleValueChange = jest.fn();
+
+			render(
+				<Textarea defaultValue="" onValueChange={ handleValueChange } />
+			);
+
+			const textarea = screen.getByRole( 'textbox' );
+
+			await user.type( textarea, 'Hello' );
+
+			expect( handleValueChange ).toHaveBeenLastCalledWith(
+				'Hello',
+				expect.any( Object )
+			);
+
+			await user.clear( textarea );
+
+			expect( handleValueChange ).toHaveBeenLastCalledWith(
+				'',
+				expect.any( Object )
+			);
+		} );
+
+		it( 'works with controlled component pattern', async () => {
+			const user = userEvent.setup();
+			const handleValueChange = jest.fn();
+
+			const ControlledTextarea = () => {
+				const [ value, setValue ] = useState( 'Initial' );
+
+				return (
+					<Textarea
+						value={ value }
+						onValueChange={ ( newValue ) => {
+							handleValueChange( newValue );
+							setValue( newValue );
+						} }
+					/>
+				);
+			};
+
+			render( <ControlledTextarea /> );
+
+			const textarea = screen.getByRole( 'textbox' );
+
+			await user.clear( textarea );
+			await user.type( textarea, 'Updated' );
+
+			expect( handleValueChange ).toHaveBeenLastCalledWith( 'Updated' );
+		} );
+	} );
+
+	describe( 'render prop', () => {
+		it( 'correctly merges props with custom render function', () => {
+			render(
+				<Textarea
+					render={ ( props ) => (
+						<div data-testid="my-render" { ...props } />
+					) }
+					data-my-attribute
+				/>
+			);
+
+			expect( screen.getByTestId( 'my-render' ) ).toHaveAttribute(
+				'data-my-attribute'
+			);
+		} );
+
+		it( 'correctly merges props with custom render element', () => {
+			render(
+				<Textarea
+					render={ <div data-testid="my-render" /> }
+					data-my-attribute
+				/>
+			);
+
+			expect( screen.getByTestId( 'my-render' ) ).toHaveAttribute(
+				'data-my-attribute'
+			);
+		} );
+	} );
+
+	it( 'disables the textarea when disabled prop is true', () => {
+		render( <Textarea disabled /> );
+
+		expect( screen.getByRole( 'textbox' ) ).toBeDisabled();
+	} );
+
+	it( 'applies custom rows value', () => {
+		render( <Textarea rows={ 10 } /> );
+
+		expect( screen.getByRole( 'textbox' ) ).toHaveAttribute( 'rows', '10' );
+	} );
+} );

package/src/form/primitives/textarea/textarea.tsx

@@ -0,0 +1,51 @@
+import { mergeProps } from '@base-ui/react';
+import clsx from 'clsx';
+import { cloneElement, forwardRef } from '@wordpress/element';
+import styles from './style.module.css';
+import type { TextareaProps } from './types';
+import { Input } from '../input';
+
+const wrappedRender = (
+	render: NonNullable< TextareaProps[ 'render' ] >,
+	restProps: TextareaProps & { ref: React.Ref< HTMLTextAreaElement > }
+) => {
+	return function Render(
+		props: React.HTMLAttributes< HTMLTextAreaElement >
+	) {
+		return typeof render === 'function'
+			? render( mergeProps( props, restProps ) )
+			: cloneElement( render, mergeProps( props, restProps ) );
+	};
+};
+
+export const Textarea = forwardRef< HTMLTextAreaElement, TextareaProps >(
+	function Textarea(
+		{
+			className,
+			defaultValue,
+			disabled,
+			onValueChange,
+			render,
+			rows = 4,
+			style,
+			value,
+			...restProps
+		},
+		ref
+	) {
+		return (
+			<Input
+				className={ clsx( styles.wrapper, className ) }
+				style={ style }
+				render={ wrappedRender(
+					render || ( ( props ) => <textarea { ...props } /> ),
+					{ className: styles.textarea, ref, rows, ...restProps }
+				) }
+				value={ value }
+				defaultValue={ defaultValue }
+				onValueChange={ onValueChange }
+				disabled={ disabled }
+			/>
+		);
+	}
+);

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

@@ -0,0 +1,18 @@
+import type { InputProps } from '../input/types';
+import type { ComponentProps } from '../../../utils/types';
+
+export type TextareaProps = Omit<
+	ComponentProps< 'textarea' >,
+	'disabled' | 'rows' | 'value' | 'defaultValue'
+> &
+	Pick<
+		InputProps,
+		'value' | 'defaultValue' | 'onValueChange' | 'disabled'
+	> & {
+		/**
+		 * The number of rows the textarea should contain.
+		 *
+		 * @default 4
+		 */
+		rows?: React.ComponentProps< 'textarea' >[ 'rows' ];
+	};

package/src/icon-button/icon-button.tsx

@@ -0,0 +1,65 @@
+import clsx from 'clsx';
+import { forwardRef } from '@wordpress/element';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import * as Tooltip from '../tooltip';
+import styles from './style.module.css';
+import { type IconButtonProps } from './types';
+
+/**
+ * An icon-only button with automatic tooltip and optimized styling.
+ * Inherits all Button props while providing icon-specific enhancements.
+ */
+export const IconButton = forwardRef< HTMLButtonElement, IconButtonProps >(
+	function IconButton(
+		{
+			label,
+			className,
+			// Prevent accidental forwarding of `children`
+			children: _children,
+			icon,
+			size,
+			shortcut,
+			...restProps
+		}: IconButtonProps & { children?: unknown },
+		ref
+	) {
+		const classes = clsx( styles[ 'icon-button' ], className );
+
+		return (
+			<Tooltip.Provider delay={ 0 }>
+				<Tooltip.Root>
+					<Tooltip.Trigger
+						ref={ ref }
+						render={
+							<Button
+								{ ...restProps }
+								size={ size }
+								aria-label={ label }
+								aria-keyshortcuts={ shortcut?.ariaKeyShortcut }
+							/>
+						}
+						className={ classes }
+					>
+						<Icon
+							icon={ icon }
+							size={ 24 }
+							className={ styles.icon }
+						/>
+					</Tooltip.Trigger>
+					<Tooltip.Popup>
+						{ label }
+						{ shortcut && (
+							<>
+								{ ' ' }
+								<span aria-hidden="true">
+									{ shortcut.displayShortcut }
+								</span>
+							</>
+						) }
+					</Tooltip.Popup>
+				</Tooltip.Root>
+			</Tooltip.Provider>
+		);
+	}
+);

package/src/icon-button/index.ts

@@ -0,0 +1 @@
+export { IconButton } from './icon-button';

package/src/icon-button/stories/index.story.tsx

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+	cog,
+	copy,
+	download,
+	pencil,
+	plus,
+	trash,
+	upload,
+	wordpress,
+} from '@wordpress/icons';
+import { displayShortcut, ariaKeyShortcut } from '@wordpress/keycodes';
+import { IconButton } from '../index';
+
+const meta: Meta< typeof IconButton > = {
+	title: 'Design System/Components/IconButton',
+	component: IconButton,
+	argTypes: {
+		'aria-pressed': {
+			control: { type: 'boolean' },
+		},
+	},
+};
+export default meta;
+
+type Story = StoryObj< typeof IconButton >;
+
+export const Default: Story = {
+	args: {
+		icon: cog,
+		label: 'Settings',
+	},
+};
+
+export const Outline: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		variant: 'outline',
+	},
+};
+
+export const Minimal: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		variant: 'minimal',
+	},
+};
+
+export const Neutral: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		tone: 'neutral',
+		label: 'Settings',
+	},
+};
+
+export const NeutralOutline: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		tone: 'neutral',
+		variant: 'outline',
+		label: 'Settings',
+	},
+};
+
+export const Disabled: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		disabled: true,
+		label: 'Settings',
+	},
+};
+
+export const WithDifferentIcons: Story = {
+	...Default,
+	render: ( args ) => (
+		<div
+			style={ {
+				display: 'flex',
+				gap: '1rem',
+				alignItems: 'center',
+				flexWrap: 'wrap',
+			} }
+		>
+			<IconButton { ...args } icon={ wordpress } label="WordPress" />
+			<IconButton { ...args } icon={ plus } label="Add" />
+			<IconButton { ...args } icon={ pencil } label="Edit" />
+			<IconButton { ...args } icon={ trash } label="Delete" />
+			<IconButton { ...args } icon={ download } label="Download" />
+			<IconButton { ...args } icon={ upload } label="Upload" />
+		</div>
+	),
+};
+
+/**
+ * The pressed state is only available for buttons with `tone="neutral"` and
+ * `variant="minimal"` and can be toggled via the `aria-pressed` HTML attribute.
+ */
+export const Pressed: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		tone: 'neutral',
+		variant: 'minimal',
+		label: 'Toggle Settings',
+		'aria-pressed': true,
+	},
+};
+
+const EXAMPLE_SHORTCUT_OBJECT = {
+	displayShortcut: displayShortcut.primary( 'c' ),
+	ariaKeyShortcut: ariaKeyShortcut.primary( 'c' ),
+};
+
+export const WithShortcut: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		icon: copy,
+		label: 'Copy',
+		shortcut: EXAMPLE_SHORTCUT_OBJECT,
+	},
+};

package/src/icon-button/style.module.css

@@ -0,0 +1,16 @@
+@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
+
+@layer wp-ui-compositions {
+	.icon-button {
+		--wp-ui-button-aspect-ratio: 1;
+		--wp-ui-button-padding-inline: 0;
+		--wp-ui-button-min-width: unset;
+	}
+
+	.icon {
+		/* Compensate for the button's 1px border so the icon extends
+			 edge-to-edge and doesn't inflate the button's dimensions
+			 (e.g. 24px icon inside a 24px-tall small button). */
+		margin: -1px;
+	}
+}

package/src/icon-button/test/index.test.tsx

@@ -0,0 +1,86 @@
+import { render, waitFor, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef } from '@wordpress/element';
+import { IconButton } from '../index';
+
+describe( 'IconButton', () => {
+	it( 'forwards ref', () => {
+		const ref = createRef< HTMLButtonElement >();
+
+		render( <IconButton ref={ ref } label="Click me" icon={ <svg /> } /> );
+
+		expect( ref.current ).toBeInstanceOf( HTMLButtonElement );
+	} );
+
+	it( 'respects custom render prop as handled by Button', () => {
+		render(
+			<IconButton
+				label="Click me"
+				icon={ <svg /> }
+				variant="outline"
+				disabled
+				focusableWhenDisabled
+				render={ <button data-testid="button" /> }
+			/>
+		);
+
+		// Should render as a button from `render` prop...
+		const button = screen.getByRole( 'button', { name: 'Click me' } );
+		expect( button ).toHaveAttribute( 'data-testid', 'button' );
+
+		// ...and still inherit the behavior of Button
+		expect( button ).toBeEnabled();
+		expect( button ).toHaveAttribute( 'aria-disabled', 'true' );
+	} );
+
+	describe( 'shortcut', () => {
+		it( 'sets aria-keyshortcuts attribute on the button', () => {
+			const { rerender } = render(
+				<IconButton
+					label="Save"
+					icon={ <svg /> }
+					shortcut={ {
+						displayShortcut: '⌘S',
+						ariaKeyShortcut: 'Meta+S',
+					} }
+				/>
+			);
+
+			const button = screen.getByRole( 'button', { name: 'Save' } );
+			expect( button ).toHaveAttribute( 'aria-keyshortcuts', 'Meta+S' );
+
+			// The aria-keyshortcuts attribute is removed when there is no
+			// `shortcut` prop.
+			rerender( <IconButton label="Save" icon={ <svg /> } /> );
+			expect( button ).not.toHaveAttribute( 'aria-keyshortcuts' );
+		} );
+
+		it( 'displays the shortcut in the tooltip but hides it from assistive technology', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<IconButton
+					label="Save"
+					icon={ <svg /> }
+					shortcut={ {
+						displayShortcut: '⌘S',
+						ariaKeyShortcut: 'Meta+S',
+					} }
+				/>
+			);
+
+			const button = screen.getByRole( 'button', { name: 'Save' } );
+			await user.hover( button );
+
+			await waitFor( () => {
+				const shortcutElement = screen.getByText( '⌘S' );
+				expect( shortcutElement ).toBeVisible();
+			} );
+
+			expect( screen.getByText( '⌘S' ) ).toHaveAttribute(
+				'aria-hidden',
+				'true'
+			);
+		} );
+	} );
+} );

package/src/icon-button/types.ts

@@ -0,0 +1,38 @@
+import { type ButtonProps } from '../button/types';
+import { type IconProps } from '../icon/types';
+
+export type IconButtonProps = Omit< ButtonProps, 'children' > & {
+	/**
+	 * A label describing the button's action, shown as a tooltip and to
+	 * assistive technology.
+	 */
+	label: string;
+
+	/**
+	 * The icon to display in the button.
+	 */
+	icon: IconProps[ 'icon' ];
+
+	/**
+	 * The keyboard shortcut associated with this button. When provided, the
+	 * shortcut is displayed in the tooltip and announced to assistive technology.
+	 *
+	 * **Note**: This prop is for display and accessibility purposes only — the
+	 * consumer is responsible for implementing the actual keyboard event handler.
+	 */
+	shortcut?: {
+		/**
+		 * The human-readable representation of the shortcut, displayed in the
+		 * tooltip. Use platform-appropriate symbols (e.g., "⌘S" on macOS,
+		 * "Ctrl+S" on Windows).
+		 */
+		displayShortcut: string;
+		/**
+		 * The shortcut in a format compatible with the
+		 * [aria-keyshortcuts](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-keyshortcuts)
+		 * attribute. Use "+" to separate keys and standard key names
+		 * (e.g., "Meta+S", "Control+Shift+P").
+		 */
+		ariaKeyShortcut: string;
+	};
+};

package/src/index.ts

@@ -1,8 +1,10 @@
 export * from './badge';
-export * from './box';
 export * from './button';
+export * as Dialog from './dialog';
 export * from './form/primitives';
 export * from './icon';
+export * from './icon-button';
 export * from './stack';
+export * as Tabs from './tabs';
 export * as Tooltip from './tooltip';
 export * from './visually-hidden';

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

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Stack } from '../index';
-import { Box } from '../../box';
 
 const meta: Meta< typeof Stack > = {
 	title: 'Design System/Components/Stack',
@@ -9,9 +8,9 @@ const meta: Meta< typeof Stack > = {
 export default meta;
 
 const DemoBox = ( { variant }: { variant?: 'lg' } ) => (
-	<Box
-		backgroundColor="brand"
+	<div
 		style={ {
+			backgroundColor: 'var(--wpds-color-bg-surface-brand)',
 			width: variant === 'lg' ? '150px' : '100px',
 			height: variant === 'lg' ? '150px' : '100px',
 		} }
@@ -22,7 +21,7 @@ type Story = StoryObj< typeof Stack >;
 
 export const Default: Story = {
 	args: {
-		gap: 'sm',
+		gap: 'md',
 		children: (
 			<>
 				<DemoBox />
@@ -91,7 +90,7 @@ export const Nested: Story = {
 		children: (
 			<>
 				<DemoBox variant="lg" />
-				<Stack gap="md">
+				<Stack gap="lg">
 					<DemoBox />
 					<DemoBox />
 				</Stack>

package/src/tabs/index.ts

@@ -0,0 +1,6 @@
+import { List } from './list';
+import { Panel } from './panel';
+import { Root } from './root';
+import { Tab } from './tab';
+
+export { Root, List, Panel, Tab };