@wordpress/ui 0.4.1-next.76cff8c98.0 → 0.5.0

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

@@ -1,11 +1,10 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+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',
 	component: Stack,
-	tags: [ 'status-experimental' ],
 };
 export default meta;
 

package/src/stories/introduction.mdx

@@ -0,0 +1,6 @@
+import { Meta, Markdown } from '@storybook/addon-docs/blocks';
+import Readme from '../../README.md?raw';
+
+<Meta title="Design System/Components/Introduction" />
+
+<Markdown>{Readme}</Markdown>

package/src/utils/css/focus.module.css

@@ -0,0 +1,31 @@
+@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
+
+@layer wp-ui-utilities {
+	.outset-ring--focus,
+	.outset-ring--focus-except-active,
+	.outset-ring--focus-visible,
+	.outset-ring--focus-within,
+	.outset-ring--focus-within-except-active,
+	.outset-ring--focus-within-visible {
+		@media not ( prefers-reduced-motion ) {
+			transition: outline 0.1s ease-out;
+		}
+
+		/* Outline width must be kept at 0 even with a transparent color,
+		or else the outline will be visible in forced-colors mode. */
+		outline-width: 0;
+		outline-style: solid;
+		outline-color: transparent;
+		outline-offset: 1px;
+	}
+
+	.outset-ring--focus:focus,
+	.outset-ring--focus-except-active:focus:not(:active),
+	.outset-ring--focus-visible:focus-visible,
+	.outset-ring--focus-within:focus-within,
+	.outset-ring--focus-within-except-active:focus-within:not(:has(:active)),
+	.outset-ring--focus-within-visible:focus-within:has(:focus-visible) {
+		outline-width: var(--wpds-border-width-interactive-focus);
+		outline-color: var(--wpds-color-stroke-focus-brand);
+	}
+}

package/src/visually-hidden/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 { VisuallyHidden } from '../';
 
 const meta: Meta< typeof VisuallyHidden > = {