@wordpress/ui 0.5.1-next.v.0 → 0.6.0

package/src/badge/stories/choosing-intent.story.tsx

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Badge } from '../index';
+import { Stack } from '../../stack';
+
+const meta: Meta< typeof Badge > = {
+	title: 'Design System/Components/Badge/Choosing intent',
+	component: Badge,
+	decorators: [
+		( Story ) => (
+			<Stack direction="row" gap="xs" wrap="wrap">
+				<Story />
+			</Stack>
+		),
+	],
+	parameters: {
+		controls: { disable: true },
+	},
+	tags: [ '!dev' /* Hide individual story pages from sidebar */ ],
+};
+export default meta;
+
+type Story = StoryObj< typeof Badge >;
+
+export const AllIntents: Story = {
+	render: () => (
+		<>
+			<Badge intent="high">high</Badge>
+			<Badge intent="medium">medium</Badge>
+			<Badge intent="low">low</Badge>
+			<Badge intent="stable">stable</Badge>
+			<Badge intent="informational">informational</Badge>
+			<Badge intent="draft">draft</Badge>
+			<Badge intent="none">none</Badge>
+		</>
+	),
+};
+
+export const High: Story = {
+	render: () => (
+		<>
+			<Badge intent="high">Payment declined</Badge>
+			<Badge intent="high">Security issue</Badge>
+		</>
+	),
+};
+
+export const Medium: Story = {
+	render: () => (
+		<>
+			<Badge intent="medium">Approval required</Badge>
+			<Badge intent="medium">Review needed</Badge>
+		</>
+	),
+};
+
+export const Low: Story = {
+	render: () => (
+		<>
+			<Badge intent="low">Pending</Badge>
+			<Badge intent="low">Queued</Badge>
+		</>
+	),
+};
+
+export const Informational: Story = {
+	render: () => (
+		<>
+			<Badge intent="informational">Scheduled</Badge>
+			<Badge intent="informational">Beta</Badge>
+		</>
+	),
+};
+
+export const Draft: Story = {
+	render: () => (
+		<>
+			<Badge intent="draft">Draft</Badge>
+			<Badge intent="draft">Unpublished</Badge>
+		</>
+	),
+};
+
+export const Stable: Story = {
+	render: () => (
+		<>
+			<Badge intent="stable">Healthy</Badge>
+			<Badge intent="stable">Active</Badge>
+		</>
+	),
+};
+
+export const None: Story = {
+	render: () => (
+		<>
+			<Badge intent="none">Inactive</Badge>
+			<Badge intent="none">Expired</Badge>
+		</>
+	),
+};
+
+export const CommentStatus: Story = {
+	render: () => (
+		<>
+			<Badge intent="none">Approved</Badge>
+			<Badge intent="medium">Approval required</Badge>
+		</>
+	),
+};
+
+export const PageStatus: Story = {
+	render: () => (
+		<>
+			<Badge intent="none">Published</Badge>
+			<Badge intent="low">Pending</Badge>
+			<Badge intent="draft">Draft</Badge>
+			<Badge intent="informational">Scheduled</Badge>
+			<Badge intent="informational">Private</Badge>
+		</>
+	),
+};
+
+export const PluginStatus: Story = {
+	render: () => (
+		<>
+			<Badge intent="stable">Active</Badge>
+			<Badge intent="none">Inactive</Badge>
+		</>
+	),
+};

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Fragment } from '@wordpress/element';
 import { Badge } from '../index';
 

package/src/box/box.tsx

@@ -96,11 +96,11 @@ export const Box = forwardRef< HTMLDivElement, BoxProps >( function Box(
 	}
 
 	if ( borderRadius ) {
-		style.borderRadius = `var(--wpds-border-radius-${ target }-${ borderRadius }, var(--wpds-border-radius-surface-${ borderRadius }))`;
+		style.borderRadius = `var(--wpds-border-radius-${ target }-${ borderRadius }, var(--wpds-border-radius-${ borderRadius }))`;
 	}
 
 	if ( borderWidth ) {
-		style.borderWidth = `var(--wpds-border-width-${ target }-${ borderWidth }, var(--wpds-border-width-surface-${ borderWidth }))`;
+		style.borderWidth = `var(--wpds-border-width-${ target }-${ borderWidth }, var(--wpds-border-width-${ borderWidth }))`;
 		style.borderStyle = 'solid';
 	}
 

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

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react-webpack5';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { type PaddingSize } from '@wordpress/theme';
 import { Box } from '../box';
 

package/src/box/test/box.test.tsx

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
 import { createRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { Box } from '../box';
 
 describe( 'Box', () => {

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

@@ -1,5 +1,5 @@
 import { Fragment, useState } from '@wordpress/element';
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { cog } from '@wordpress/icons';
 import { Button } from '../index';
 
@@ -131,11 +131,6 @@ export const AllTonesAndVariants: Story = {
 									{ ...args }
 									tone={ tone }
 									variant={ variant }
-									// Disabling because this lint rule was meant for the
-									// `@wordpress/components` Button, but is being applied here.
-									// TODO: rework the lint rule so that it checks the package
-									// where the Button comes from.
-									// eslint-disable-next-line no-restricted-syntax
 									disabled
 								/>
 							</div>

package/src/button/style.module.css

@@ -39,7 +39,7 @@
 		border-style: solid;
 		border-width: 1px;
 		border-color: var(--wp-ui-button-border-color);
-		border-radius: var(--wpds-border-radius-surface-sm);
+		border-radius: var(--wpds-border-radius-sm);
 		background-color: var(--wp-ui-button-background-color);
 		background-clip: padding-box;
 		font-family: var(--wpds-font-family-body);
@@ -102,7 +102,7 @@
 			height: var(--wp-ui-button-font-size);
 			aspect-ratio: 1;
 
-			border: var(--wpds-border-width-interactive-focus) solid;
+			border: var(--wpds-border-width-focus) solid;
 			border-block-start-color: var(--wp-ui-button-foreground-color);
 			border-inline-end-color: var(--wp-ui-button-foreground-color);
 			border-block-end-color: transparent;

package/src/button/test/button.test.tsx

@@ -25,11 +25,6 @@ describe( 'Button', () => {
 
 		const onClickMock = jest.fn();
 		render(
-			// Disabling because this lint rule was meant for the
-			// `@wordpress/components` Button, but is being applied here.
-			// TODO: rework the lint rule so that it checks the package
-			// where the Button comes from.
-			// eslint-disable-next-line no-restricted-syntax
 			<Button disabled onClick={ onClickMock }>
 				Click me
 			</Button>
@@ -57,12 +52,6 @@ describe( 'Button', () => {
 
 	it( 'can be enabled explicitly when loading', () => {
 		render(
-			// Disabling because this lint rule was meant for the
-			// `@wordpress/components` Button, but is being applied here.
-			// TODO: rework the lint rule so that it checks the package
-			// where the Button comes from.
-			// TODO: Additional improvement in the original lint rule: only error if disabled=true?
-			// eslint-disable-next-line no-restricted-syntax
 			<Button loading disabled={ false }>
 				Click me
 			</Button>
@@ -76,11 +65,7 @@ describe( 'Button', () => {
 
 	it( 'supports custom render prop while retaining the default focusable when disabled behavior', () => {
 		render(
-			// Disabling because this lint rule was meant for the
-			// `@wordpress/components` Button, but is being applied here.
-			// TODO: rework the lint rule so that it checks the package
-			// where the Button comes from.
-			// eslint-disable-next-line jsx-a11y/anchor-has-content, no-restricted-syntax
+			// eslint-disable-next-line jsx-a11y/anchor-has-content
 			<Button render={ <a href="/" /> } nativeButton={ false } disabled>
 				Click me
 			</Button>

package/src/form/primitives/constants.ts

@@ -0,0 +1,10 @@
+import type { Select as _Select } from '@base-ui/react/select';
+
+/**
+ * Shared positioning props for item popups (Select, Combobox, etc.).
+ */
+export const ITEM_POPUP_POSITIONER_PROPS = {
+	align: 'start',
+	sideOffset: 8,
+	collisionPadding: 12,
+} satisfies Partial< _Select.Positioner.Props >;

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useId } from '@wordpress/element';
 import '@wordpress/theme/design-tokens.css';
 import { Field } from '../../../..';

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Fieldset } from '../../../..';
 
 const meta: Meta< typeof Fieldset.Root > = {

package/src/form/primitives/index.ts

@@ -1,3 +1,5 @@
 export * as Field from './field';
 export * as Fieldset from './fieldset';
+export { Input } from './input';
 export { InputLayout } from './input-layout';
+export * as Select from './select';

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/stories/index.story.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { InputLayout } from '../../../..';
 
 const meta: Meta< typeof InputLayout > = {

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

@@ -8,10 +8,10 @@
 		display: flex;
 		height: 40px;
 		background-color: var(--wpds-color-bg-interactive-neutral-weak);
-		border-width: var(--wpds-border-width-surface-xs);
+		border-width: var(--wpds-border-width-xs);
 		border-style: solid;
 		border-color: var(--wpds-color-stroke-interactive-neutral);
-		border-radius: var(--wpds-border-radius-surface-sm);
+		border-radius: var(--wpds-border-radius-sm);
 		font-family: var(--wpds-font-family-body);
 		font-size: max(var(--wpds-font-size-md), 16px); /* avoid mobile zoom */
 		line-height: 1;
@@ -33,7 +33,8 @@
 			height: 24px;
 		}
 
-		&.is-disabled {
+		&.is-disabled,
+		&:has([data-can-disable-input-layout][data-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);
@@ -53,7 +54,7 @@
 			outline: none;
 		}
 
-		&:hover:not(.is-disabled, .is-borderless) {
+		&:hover:not(.is-disabled, :has([data-can-disable-input-layout][data-disabled]), .is-borderless) {
 			border-color: var(--wpds-color-stroke-interactive-neutral-active);
 		}
 	}

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

@@ -0,0 +1,4 @@
+export { Item } from './item';
+export { Popup } from './popup';
+export { Root } from './root';
+export { Trigger } from './trigger';

package/src/form/primitives/select/item.tsx

@@ -0,0 +1,39 @@
+import { Select as _Select } from '@base-ui/react/select';
+import clsx from 'clsx';
+import { forwardRef } from '@wordpress/element';
+import { check } from '@wordpress/icons';
+import itemPopupStyles from '../../../utils/css/item-popup.module.css';
+import resetStyles from '../../../utils/css/resets.module.css';
+import { Icon } from '../../../icon';
+import type { SelectItemProps } from './types';
+
+export const Item = forwardRef< HTMLDivElement, SelectItemProps >(
+	function Item(
+		{ className, value, size = 'default', children = value, ...restProps },
+		ref
+	) {
+		return (
+			<_Select.Item
+				className={ clsx(
+					resetStyles[ 'box-sizing' ],
+					itemPopupStyles.item,
+					itemPopupStyles[ `is-size-${ size }` ],
+					className
+				) }
+				value={ value }
+				ref={ ref }
+				{ ...restProps }
+			>
+				<Icon
+					icon={ check }
+					className={ clsx(
+						itemPopupStyles[ 'item-indicator' ],
+						itemPopupStyles[ 'item-indicator-icon' ]
+					) }
+					size={ size === 'small' ? 20 : 24 }
+				/>
+				<_Select.ItemText>{ children }</_Select.ItemText>
+			</_Select.Item>
+		);
+	}
+);

package/src/form/primitives/select/popup.tsx

@@ -0,0 +1,55 @@
+import { Select as _Select } from '@base-ui/react/select';
+import clsx from 'clsx';
+import { forwardRef } from '@wordpress/element';
+import {
+	type ThemeProvider as ThemeProviderType,
+	privateApis as themePrivateApis,
+} from '@wordpress/theme';
+import { unlock } from '../../../lock-unlock';
+import itemPopupStyles from '../../../utils/css/item-popup.module.css';
+import resetStyles from '../../../utils/css/resets.module.css';
+import styles from './style.module.css';
+import type { SelectPopupProps } from './types';
+import { ITEM_POPUP_POSITIONER_PROPS } from '../constants';
+
+const ThemeProvider: typeof ThemeProviderType =
+	unlock( themePrivateApis ).ThemeProvider;
+
+export const Popup = forwardRef< HTMLDivElement, SelectPopupProps >(
+	function Popup( { className, children, style, ...restProps }, ref ) {
+		return (
+			<_Select.Portal>
+				<_Select.Positioner
+					{ ...ITEM_POPUP_POSITIONER_PROPS }
+					alignItemWithTrigger={ false }
+					style={ style }
+					className={ clsx(
+						resetStyles[ 'box-sizing' ],
+						styles.positioner,
+						className
+					) }
+				>
+					<ThemeProvider>
+						<_Select.Popup
+							ref={ ref }
+							className={ itemPopupStyles.popup }
+							{ ...restProps }
+						>
+							<_Select.List className={ itemPopupStyles.list }>
+								<div
+									className={
+										itemPopupStyles[
+											'list-scrollable-container'
+										]
+									}
+								>
+									{ children }
+								</div>
+							</_Select.List>
+						</_Select.Popup>
+					</ThemeProvider>
+				</_Select.Positioner>
+			</_Select.Portal>
+		);
+	}
+);

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

@@ -0,0 +1,6 @@
+import { Select as _Select } from '@base-ui/react/select';
+import type { SelectRootProps } from './types';
+
+export function Root( props: SelectRootProps ) {
+	return <_Select.Root< string, false > { ...props } />;
+}