@wordpress/ui 0.4.0 → 0.5.0

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

@@ -0,0 +1,35 @@
+import type { Fieldset as _Fieldset } from '@base-ui/react';
+import type { ComponentProps } from '../../../utils/types';
+
+export type FieldsetRootProps = ComponentProps< typeof _Fieldset.Root > & {
+	children?: React.ReactNode;
+};
+
+export type FieldsetLegendProps = ComponentProps< typeof _Fieldset.Legend > & {
+	children?: React.ReactNode;
+};
+
+export type FieldsetDescriptionProps = ComponentProps< 'p' > & {
+	/**
+	 * The accessible description, associated using `aria-describedby`.
+	 *
+	 * For screen reader accessibility, this should only contain plain text,
+	 * and no semantics such as links.
+	 */
+	children?: string;
+};
+
+export type FieldsetDetailsProps = ComponentProps< 'div' > & {
+	/**
+	 * Additional information about the fieldset, which unlike a normal description,
+	 * can include links and other semantic elements.
+	 *
+	 * Although this content is not associated with the fieldset using direct semantics,
+	 * it is made discoverable to screen reader users via a visually hidden description,
+	 * alerting them to the presence of additional information below.
+	 *
+	 * Do not use this component when the details content is only plain text,
+	 * as it makes the readout unnecessarily verbose for screen reader users.
+	 */
+	children?: React.ReactNode;
+};

package/src/form/primitives/index.ts

@@ -0,0 +1,4 @@
+export * as Field from './field';
+export * as Fieldset from './fieldset';
+export { Input } from './input';
+export { InputLayout } from './input-layout';

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

@@ -0,0 +1 @@
+export { Input } from './input';

package/src/form/primitives/input/input.tsx

@@ -0,0 +1,28 @@
+import { Input as _Input } from '@base-ui/react/input';
+import clsx from 'clsx';
+import { forwardRef } from '@wordpress/element';
+import focusStyles from '../../../utils/css/focus.module.css';
+import styles from './style.module.css';
+import type { InputProps } from './types';
+import { InputLayout } from '../input-layout';
+
+export const Input = forwardRef< HTMLInputElement, InputProps >( function Input(
+	{ className, size = 'default', prefix, suffix, style, ...restProps },
+	ref
+) {
+	return (
+		<InputLayout
+			className={ clsx(
+				focusStyles[ 'outset-ring--focus-within' ],
+				className
+			) }
+			style={ style }
+			size={ size }
+			visuallyDisabled={ restProps.disabled }
+			prefix={ prefix }
+			suffix={ suffix }
+		>
+			<_Input ref={ ref } className={ styles.input } { ...restProps } />
+		</InputLayout>
+	);
+} );

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Input, InputLayout } from '../../../..';
+
+const meta: Meta< typeof Input > = {
+	title: 'Design System/Components/Form/Primitives/Input',
+	component: Input,
+	argTypes: {
+		defaultValue: { control: false },
+		onValueChange: { action: 'onValueChange' },
+		value: { control: false },
+		type: { control: 'text' },
+	},
+};
+export default meta;
+
+type Story = StoryObj< typeof Input >;
+
+export const Default: Story = {
+	args: {
+		placeholder: 'Placeholder',
+	},
+};
+
+/**
+ * The `InputLayout.Slot` component can be used to add standard padding in
+ * the `prefix` or `suffix` slot.
+ */
+export const WithPrefix: Story = {
+	args: {
+		placeholder: 'username',
+		prefix: <InputLayout.Slot>@</InputLayout.Slot>,
+	},
+};
+
+export const Disabled: Story = {
+	args: {
+		...Default.args,
+		disabled: true,
+	},
+};

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

@@ -0,0 +1,34 @@
+@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
+
+@layer wp-ui-components {
+	.input {
+		padding-block: var(--wp-ui-input-padding-block, 0);
+		padding-inline: var(--wp-ui-input-layout-padding-inline, 0);
+		width: 100%;
+		background: transparent;
+		border: none;
+		outline: none;
+		color: var(--wpds-color-fg-interactive-neutral);
+		font-family: inherit;
+		font-size: inherit;
+		line-height: inherit;
+
+		&::placeholder {
+			color: var(--wpds-color-fg-interactive-neutral-disabled);
+		}
+
+		&:disabled,
+		&[aria-disabled="true"] {
+			color: var(--wpds-color-fg-interactive-neutral-disabled);
+
+			@media ( forced-colors: active ) {
+				color: GrayText;
+			}
+		}
+
+		&[type="email"],
+		&[type="url"] {
+			direction: ltr; /* maintain LTR in RTL languages */
+		}
+	}
+}

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

@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react';
+import { createRef } from '@wordpress/element';
+import { Input } from '../index';
+
+describe( 'Input', () => {
+	it( 'forwards ref', () => {
+		const ref = createRef< HTMLInputElement >();
+
+		render( <Input ref={ ref } /> );
+
+		expect( ref.current ).toBeInstanceOf( HTMLInputElement );
+	} );
+} );

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

@@ -0,0 +1,31 @@
+import type { Input } from '@base-ui/react/input';
+import type { InputLayoutProps } from '../input-layout/types';
+import type { ComponentProps } from '../../../utils/types';
+
+export type InputProps = Omit<
+	ComponentProps< typeof Input >,
+	'value' | 'defaultValue' | 'type' | 'disabled' | 'prefix' | 'size'
+> &
+	Pick< InputLayoutProps, 'prefix' | 'suffix' > & {
+		/**
+		 * Whether the field is disabled.
+		 */
+		disabled?: boolean;
+	} & {
+		/**
+		 * The type of the input element.
+		 */
+		type?: Input.Props[ 'type' ];
+		/**
+		 * The default value to use in uncontrolled mode.
+		 */
+		defaultValue?: Input.Props[ 'defaultValue' ];
+		/**
+		 * The value to use in controlled mode.
+		 */
+		value?: Input.Props[ 'value' ];
+		/**
+		 * The size of the field.
+		 */
+		size?: Exclude< InputLayoutProps[ 'size' ], 'small' >;
+	};

package/src/form/primitives/input-layout/context.tsx

@@ -0,0 +1,36 @@
+import { Children, createContext, useContext } from '@wordpress/element';
+import type { InputLayoutSlotType } from './types';
+
+/**
+ * Context for providing slot type information to child components.
+ */
+export const InputLayoutSlotTypeContext =
+	createContext< InputLayoutSlotType | null >( null );
+
+/**
+ * Hook to access the current slot context.
+ */
+export function useInputLayoutSlotContext() {
+	return useContext( InputLayoutSlotTypeContext );
+}
+
+/**
+ * Wrapper component that provides slot type context for prefix and suffix slots.
+ */
+export function SlotContextProvider( {
+	type,
+	children,
+}: {
+	type: InputLayoutSlotType;
+	children: React.ReactNode;
+} ) {
+	if ( Children.count( children ) === 0 ) {
+		return null;
+	}
+
+	return (
+		<InputLayoutSlotTypeContext.Provider value={ type }>
+			{ children }
+		</InputLayoutSlotTypeContext.Provider>
+	);
+}

package/src/form/primitives/input-layout/index.ts

@@ -0,0 +1,6 @@
+import { InputLayout as _InputLayout } from './input-layout';
+import { InputLayoutSlot } from './slot';
+
+export const InputLayout = Object.assign( _InputLayout, {
+	Slot: InputLayoutSlot,
+} );

package/src/form/primitives/input-layout/input-layout.tsx

@@ -0,0 +1,49 @@
+import clsx from 'clsx';
+import { forwardRef } from '@wordpress/element';
+import resetStyles from '../../../utils/css/resets.module.css';
+import styles from './style.module.css';
+import type { InputLayoutProps } from './types';
+import { SlotContextProvider } from './context';
+
+/**
+ * A low-level component that handles the visual layout of an input-like field,
+ * including disabled states and standard prefix/suffix slots.
+ */
+export const InputLayout = forwardRef< HTMLDivElement, InputLayoutProps >(
+	function InputLayout(
+		{
+			className,
+			children,
+			visuallyDisabled,
+			size = 'default',
+			isBorderless,
+			prefix,
+			suffix,
+			...restProps
+		},
+		ref
+	) {
+		return (
+			<div
+				ref={ ref }
+				className={ clsx(
+					resetStyles[ 'box-sizing' ],
+					styles[ 'input-layout' ],
+					styles[ `is-size-${ size }` ],
+					visuallyDisabled && styles[ 'is-disabled' ],
+					isBorderless && styles[ 'is-borderless' ],
+					className
+				) }
+				{ ...restProps }
+			>
+				<SlotContextProvider type="prefix">
+					{ prefix }
+				</SlotContextProvider>
+				{ children }
+				<SlotContextProvider type="suffix">
+					{ suffix }
+				</SlotContextProvider>
+			</div>
+		);
+	}
+);

package/src/form/primitives/input-layout/slot.tsx

@@ -0,0 +1,39 @@
+import clsx from 'clsx';
+import { forwardRef } from '@wordpress/element';
+import styles from './style.module.css';
+import type { InputLayoutSlotProps } from './types';
+import { useInputLayoutSlotContext } from './context';
+
+/**
+ * A layout helper to add paddings in a prefix or suffix.
+ */
+export const InputLayoutSlot = forwardRef<
+	HTMLDivElement,
+	InputLayoutSlotProps
+>( function InputLayoutSlot(
+	{ type: typeProp, padding = 'default', ...restProps },
+	ref
+) {
+	const typeContext = useInputLayoutSlotContext();
+	const type = typeProp ?? typeContext;
+
+	if ( ! type ) {
+		throw new Error(
+			'InputLayoutSlot requires a `type` prop or must be used within an InputLayout prefix/suffix slot.'
+		);
+	}
+
+	return (
+		<div
+			ref={ ref }
+			className={ clsx(
+				styles[ 'input-layout-slot' ],
+				styles[ `is-${ type }` ],
+				styles[ `is-padding-${ padding }` ]
+			) }
+			{ ...restProps }
+		/>
+	);
+} );
+
+InputLayoutSlot.displayName = 'InputLayout.Slot';

package/src/form/primitives/input-layout/stories/index.story.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { InputLayout } from '../../../..';
+
+const meta: Meta< typeof InputLayout > = {
+	title: 'Design System/Components/Form/Primitives/InputLayout',
+	component: InputLayout,
+	subcomponents: {
+		Slot: InputLayout.Slot,
+	},
+};
+export default meta;
+
+type Story = StoryObj< typeof InputLayout >;
+
+export const Default: Story = {
+	args: {},
+};
+
+/**
+ * By default, the `prefix` and `suffix` slots are rendered with no padding.
+ */
+export const WithPrefix: Story = {
+	args: {
+		prefix: (
+			<div
+				style={ {
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+					height: '100%',
+					aspectRatio: '1 / 1',
+					background: '#eee',
+				} }
+			>
+				$
+			</div>
+		),
+	},
+};
+
+/**
+ * The `InputLayout.Slot` component can be used to add standard padding in
+ * the `prefix` or `suffix` slot.
+ *
+ * The `padding="minimal"` setting will work best when the slot content is a button or icon.
+ */
+export const WithPaddedPrefix: Story = {
+	args: {
+		prefix: <InputLayout.Slot>https://</InputLayout.Slot>,
+	},
+};
+
+export const Compact: Story = {
+	args: {
+		size: 'compact',
+	},
+};
+
+/**
+ * The `small` size is intended only for rare cases like the trigger
+ * button of a low-profile `select` element.
+ */
+export const Small: Story = {
+	args: {
+		size: 'small',
+	},
+};

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

@@ -0,0 +1,82 @@
+@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
+
+@layer wp-ui-components {
+	.input-layout {
+		/* TODO: Use padding tokens */
+		--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 3);
+
+		display: flex;
+		height: 40px;
+		background-color: var(--wpds-color-bg-interactive-neutral-weak);
+		border-width: var(--wpds-border-width-surface-xs);
+		border-style: solid;
+		border-color: var(--wpds-color-stroke-interactive-neutral);
+		border-radius: var(--wpds-border-radius-surface-sm);
+		font-family: var(--wpds-font-family-body);
+		font-size: max(var(--wpds-font-size-md), 16px); /* avoid mobile zoom */
+		line-height: 1;
+		color: var(--wpds-color-fg-interactive-neutral);
+
+		@media (min-width: 600px) {
+			font-size: var(--wpds-font-size-md);
+		}
+
+		&.is-size-compact {
+			/* TODO: Use padding tokens */
+			--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);
+			height: 32px;
+		}
+
+		&.is-size-small {
+			/* TODO: Use padding tokens */
+			--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);
+			height: 24px;
+		}
+
+		&.is-disabled {
+			background-color: var(--wpds-color-bg-interactive-neutral-weak-disabled);
+			border-color: var(--wpds-color-stroke-interactive-neutral-disabled);
+			color: var(--wpds-color-fg-interactive-neutral-disabled);
+
+			@media (forced-colors: active) {
+				border-color: GrayText;
+				color: GrayText;
+			}
+		}
+
+		&.is-borderless {
+			border-color: transparent;
+		}
+
+		/* Don't show focus ring when the focus is in the prefix or suffix slots */
+		&:has(.input-layout-slot:focus-within) {
+			outline: none;
+		}
+
+		&:hover:not(.is-disabled, .is-borderless) {
+			border-color: var(--wpds-color-stroke-interactive-neutral-active);
+		}
+	}
+
+	.input-layout-slot {
+		display: flex;
+		align-items: center;
+
+		&.is-padding-minimal {
+			--wp-ui-input-layout-prefix-padding-start:
+				calc(var(--wp-ui-input-layout-padding-inline) -
+				var(--wpds-dimension-base));
+			--wp-ui-input-layout-suffix-padding-end:
+				calc(var(--wp-ui-input-layout-padding-inline) -
+				var(--wpds-dimension-base));
+		}
+
+		&.is-prefix {
+			padding-inline-start: var(--wp-ui-input-layout-prefix-padding-start, var(--wp-ui-input-layout-padding-inline));
+		}
+
+		&.is-suffix {
+			padding-inline-end: var(--wp-ui-input-layout-suffix-padding-end, var(--wp-ui-input-layout-padding-inline));
+		}
+	}
+}

package/src/form/primitives/input-layout/test/index.test.tsx

@@ -0,0 +1,23 @@
+import { render } from '@testing-library/react';
+import { createRef } from '@wordpress/element';
+import { InputLayout } from '../index';
+import { InputLayoutSlot } from '../slot';
+
+describe( 'InputLayout', () => {
+	it( 'forwards ref', () => {
+		const layoutRef = createRef< HTMLDivElement >();
+		const slotRef = createRef< HTMLDivElement >();
+
+		render(
+			<InputLayout
+				ref={ layoutRef }
+				prefix={
+					<InputLayoutSlot ref={ slotRef }>Prefix</InputLayoutSlot>
+				}
+			/>
+		);
+
+		expect( layoutRef.current ).toBeInstanceOf( HTMLDivElement );
+		expect( slotRef.current ).toBeInstanceOf( HTMLDivElement );
+	} );
+} );

package/src/form/primitives/input-layout/types.ts

@@ -0,0 +1,44 @@
+export interface InputLayoutProps
+	extends Omit< React.HTMLAttributes< HTMLDivElement >, 'prefix' > {
+	/**
+	 * Whether the field should be visually styled as disabled.
+	 */
+	visuallyDisabled?: boolean;
+	/**
+	 * The size of the field.
+	 *
+	 * @default 'default'
+	 */
+	size?: 'default' | 'compact' | 'small';
+	/**
+	 * Whether the field should hide the border.
+	 */
+	isBorderless?: boolean;
+	/**
+	 * Element to render before the input.
+	 */
+	prefix?: React.ReactNode;
+	/**
+	 * Element to render after the input.
+	 */
+	suffix?: React.ReactNode;
+}
+
+export type InputLayoutSlotType = 'prefix' | 'suffix';
+
+export interface InputLayoutSlotProps
+	extends Omit< React.HTMLAttributes< HTMLDivElement >, 'type' > {
+	/**
+	 * The type of the slot.
+	 *
+	 * When not provided, the type will be automatically inferred from the
+	 * `InputLayout` context if the slot is used within a `prefix` or `suffix`.
+	 */
+	type?: InputLayoutSlotType;
+	/**
+	 * The padding of the slot.
+	 *
+	 * `minimal` will work best when the slot content is a button or icon.
+	 */
+	padding?: 'default' | 'minimal';
+}

package/src/icon/icon.tsx

@@ -0,0 +1,30 @@
+import { forwardRef } from '@wordpress/element';
+import { SVG } from '@wordpress/primitives';
+import type { IconProps } from './types';
+
+/**
+ * Renders an SVG icon with a 24px default size.
+ *
+ * If no `fill` colors are explicitly set on the icon itself, it will be rendered with a `currentColor` fill.
+ *
+ * ```jsx
+ * import { wordpress } from '@wordpress/icons';
+ *
+ * <Icon icon={ wordpress } />
+ * ```
+ */
+export const Icon = forwardRef< SVGSVGElement, IconProps >( function Icon(
+	{ icon, size = 24, ...restProps },
+	ref
+) {
+	return (
+		<SVG
+			ref={ ref }
+			fill="currentColor"
+			{ ...icon.props }
+			{ ...restProps }
+			width={ size }
+			height={ size }
+		/>
+	);
+} );

package/src/icon/index.ts

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

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

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { wordpress } from '@wordpress/icons';
+import { Icon } from '../index';
+
+const meta: Meta< typeof Icon > = {
+	title: 'Design System/Components/Icon',
+	component: Icon,
+	decorators: [
+		( Story ) => {
+			return (
+				<div
+					style={ {
+						color: 'var( --wpds-color-fg-content-neutral )',
+					} }
+				>
+					<Story />
+				</div>
+			);
+		},
+	],
+};
+export default meta;
+
+type Story = StoryObj< typeof Icon >;
+
+export const Default: Story = {
+	args: {
+		icon: wordpress,
+	},
+};
+
+/**
+ * Explicit `fill` colors in the icon will be preserved.
+ */
+export const WithIntrinsicFillColor: Story = {
+	args: {
+		icon: (
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="blue"
+			>
+				<rect x="0" y="0" width="24" height="24" />
+			</svg>
+		),
+	},
+};

package/src/icon/test/icon.test.tsx

@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react';
+import { createRef } from '@wordpress/element';
+import { Icon } from '../index';
+
+describe( 'Icon', () => {
+	it( 'forwards ref', () => {
+		const ref = createRef< SVGSVGElement >();
+
+		render( <Icon ref={ ref } icon={ <svg /> } /> );
+
+		expect( ref.current ).toBeInstanceOf( SVGSVGElement );
+	} );
+} );

package/src/icon/types.ts

@@ -0,0 +1,14 @@
+export type IconProps = React.ComponentProps< 'svg' > & {
+	/**
+	 * The icon to render, which must be an svg element or an `SVG` from `@wordpress/primitives`.
+	 *
+	 * In most cases, you should use an icon from
+	 * [the `@wordpress/icons` package](https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library).
+	 */
+	icon: React.ReactElement< React.ComponentProps< 'svg' > >;
+	/**
+	 * The size (width and height) of the icon.
+	 * @default 24
+	 */
+	size?: number;
+};

package/src/index.ts

@@ -1 +1,7 @@
+export * from './badge';
 export * from './box';
+export * from './button';
+export * from './form/primitives';
+export * from './icon';
+export * from './stack';
+export * from './visually-hidden';

package/src/stack/index.ts

@@ -1,4 +1 @@
-/**
- * Internal dependencies
- */
 export { Stack } from './stack';