@wordpress/ui 0.7.2-next.v.202602241322.0 → 0.8.0

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

@@ -2,7 +2,6 @@ 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.
@@ -10,25 +9,12 @@ import { useInputLayoutSlotContext } from './context';
 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.'
-		);
-	}
-
+>( function InputLayoutSlot( { padding = 'default', ...restProps }, ref ) {
 	return (
 		<div
 			ref={ ref }
 			className={ clsx(
 				styles[ 'input-layout-slot' ],
-				styles[ `is-${ type }` ],
 				styles[ `is-padding-${ padding }` ]
 			) }
 			{ ...restProps }

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

@@ -56,6 +56,10 @@
 		}
 	}
 
+	.slot-wrapper {
+		display: contents;
+	}
+
 	.input-layout-slot {
 		display: flex;
 		align-items: center;
@@ -69,11 +73,11 @@
 				var(--wpds-dimension-padding-xs));
 		}
 
-		&.is-prefix {
+		[data-slot-type="prefix"] & {
 			padding-inline-start: var(--wp-ui-input-layout-prefix-padding-start, var(--wp-ui-input-layout-padding-inline));
 		}
 
-		&.is-suffix {
+		[data-slot-type="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

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { createRef } from '@wordpress/element';
 import { InputLayout } from '../index';
 import { InputLayoutSlot } from '../slot';
@@ -20,4 +20,37 @@ describe( 'InputLayout', () => {
 		expect( layoutRef.current ).toBeInstanceOf( HTMLDivElement );
 		expect( slotRef.current ).toBeInstanceOf( HTMLDivElement );
 	} );
+
+	// Testing the DOM contract that CSS selectors depend on.
+	it( 'wraps prefix and suffix with data-slot-type attributes', () => {
+		render(
+			<InputLayout
+				prefix={ <InputLayout.Slot>Prefix</InputLayout.Slot> }
+				suffix={ <InputLayout.Slot>Suffix</InputLayout.Slot> }
+			/>
+		);
+
+		/* eslint-disable testing-library/no-node-access */
+		const prefix = screen
+			.getByText( 'Prefix' )
+			.closest( '[data-slot-type]' );
+		expect( prefix ).toHaveAttribute( 'data-slot-type', 'prefix' );
+
+		const suffix = screen
+			.getByText( 'Suffix' )
+			.closest( '[data-slot-type]' );
+		expect( suffix ).toHaveAttribute( 'data-slot-type', 'suffix' );
+		/* eslint-enable testing-library/no-node-access */
+	} );
+
+	it( 'does not render slot wrappers when prefix/suffix are empty', () => {
+		render( <InputLayout data-testid="layout" /> );
+
+		const layout = screen.getByTestId( 'layout' );
+		/* eslint-disable testing-library/no-node-access */
+		expect(
+			layout.querySelector( '[data-slot-type]' )
+		).not.toBeInTheDocument();
+		/* eslint-enable testing-library/no-node-access */
+	} );
 } );

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

@@ -24,17 +24,8 @@ export interface InputLayoutProps
 	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;
+	extends React.HTMLAttributes< HTMLDivElement > {
 	/**
 	 * The padding of the slot.
 	 *

package/src/index.ts

@@ -4,6 +4,7 @@ export * as Dialog from './dialog';
 export * from './form/primitives';
 export * from './icon';
 export * from './icon-button';
+export * as Notice from './notice';
 export * from './stack';
 export * as Tabs from './tabs';
 export * as Tooltip from './tooltip';

package/src/notice/action-button.tsx

@@ -0,0 +1,36 @@
+import { forwardRef } from '@wordpress/element';
+import clsx from 'clsx';
+import { Button } from '../button';
+import type { ActionButtonProps } from './types';
+import styles from './style.module.css';
+
+/**
+ * An action button for use within Notice.Actions.
+ */
+export const ActionButton = forwardRef< HTMLButtonElement, ActionButtonProps >(
+	function NoticeActionButton(
+		{ className, loading, loadingAnnouncement, variant, ...props },
+		ref
+	) {
+		const loadingProps =
+			loading !== undefined
+				? { loading, loadingAnnouncement: loadingAnnouncement ?? '' }
+				: {};
+
+		return (
+			<Button
+				{ ...props }
+				{ ...loadingProps }
+				ref={ ref }
+				size="compact"
+				tone="neutral"
+				variant={ variant }
+				className={ clsx(
+					styles[ 'action-button' ],
+					styles[ `is-action-button-${ variant }` ],
+					className
+				) }
+			/>
+		);
+	}
+);

package/src/notice/action-link.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from '@wordpress/element';
+import { useRender, mergeProps } from '@base-ui/react';
+import clsx from 'clsx';
+import type { ActionLinkProps } from './types';
+import styles from './style.module.css';
+
+/**
+ * An action link for use within Notice.Actions.
+ *
+ * TODO: This should use a shared Link component.
+ */
+export const ActionLink = forwardRef< HTMLAnchorElement, ActionLinkProps >(
+	function NoticeActionLink( { className, render, ...props }, ref ) {
+		const element = useRender( {
+			defaultTagName: 'a',
+			render,
+			ref,
+			props: mergeProps< 'a' >(
+				{
+					className: clsx( styles[ 'action-link' ], className ),
+				},
+				props
+			),
+		} );
+
+		return element;
+	}
+);

package/src/notice/actions.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from '@wordpress/element';
+import { useRender, mergeProps } from '@base-ui/react';
+import type { ActionsProps } from './types';
+import styles from './style.module.css';
+
+/**
+ * A container for Notice.ActionButton and Notice.ActionLink.
+ */
+export const Actions = forwardRef< HTMLDivElement, ActionsProps >(
+	function NoticeActions( { render, ...props }, ref ) {
+		const element = useRender( {
+			defaultTagName: 'div',
+			render,
+			ref,
+			props: mergeProps< 'div' >(
+				{
+					className: styles.actions,
+				},
+				props
+			),
+		} );
+
+		return element;
+	}
+);

package/src/notice/close-icon.tsx

@@ -0,0 +1,30 @@
+import { forwardRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { closeSmall } from '@wordpress/icons';
+import clsx from 'clsx';
+import { IconButton } from '../icon-button';
+import type { CloseIconProps } from './types';
+import styles from './style.module.css';
+
+/**
+ * The close button for a notice. Renders an icon button with a close icon.
+ */
+export const CloseIcon = forwardRef< HTMLButtonElement, CloseIconProps >(
+	function NoticeCloseIcon(
+		{ className, icon = closeSmall, label = __( 'Dismiss' ), ...props },
+		ref
+	) {
+		return (
+			<IconButton
+				{ ...props }
+				ref={ ref }
+				className={ clsx( styles[ 'close-icon' ], className ) }
+				variant="minimal"
+				size="small"
+				tone="neutral"
+				icon={ icon }
+				label={ label }
+			/>
+		);
+	}
+);

package/src/notice/description.tsx

@@ -0,0 +1,23 @@
+import { forwardRef } from '@wordpress/element';
+import { useRender, mergeProps } from '@base-ui/react';
+import type { DescriptionProps } from './types';
+import styles from './style.module.css';
+
+/**
+ * The description text for a notice.
+ */
+export const Description = forwardRef< HTMLDivElement, DescriptionProps >(
+	function NoticeDescription( { render, ...props }, ref ) {
+		const element = useRender( {
+			defaultTagName: 'div',
+			render,
+			ref,
+			props: mergeProps< 'div' >(
+				{ className: styles.description },
+				props
+			),
+		} );
+
+		return element;
+	}
+);

package/src/notice/index.ts

@@ -0,0 +1,19 @@
+import { Root } from './root';
+import { Title } from './title';
+import { Description } from './description';
+import { Actions } from './actions';
+import { CloseIcon } from './close-icon';
+import { ActionButton } from './action-button';
+import { ActionLink } from './action-link';
+
+export {
+	Root,
+	Title,
+	Description,
+	Actions,
+	CloseIcon,
+	ActionButton,
+	ActionLink,
+};
+
+export type { NoticeIntent } from './types';

package/src/notice/root.tsx

@@ -0,0 +1,132 @@
+import { speak } from '@wordpress/a11y';
+import { forwardRef, renderToString, useEffect } from '@wordpress/element';
+import { info, published, error, caution } from '@wordpress/icons';
+import { useRender, mergeProps } from '@base-ui/react';
+import clsx from 'clsx';
+import { Icon } from '../icon';
+import resetStyles from '../utils/css/resets.module.css';
+import type { NoticeIntent, RootProps } from './types';
+import type { IconProps } from '../icon/types';
+import styles from './style.module.css';
+
+const icons: { [ key in NoticeIntent ]: IconProps[ 'icon' ] | null } = {
+	neutral: null,
+	info,
+	warning: caution,
+	success: published,
+	error,
+};
+
+/**
+ * Returns the default politeness level based on the notice intent.
+ * Error uses 'assertive' for urgent announcements, others use 'polite'.
+ */
+function getDefaultPoliteness( intent: NoticeIntent ): 'polite' | 'assertive' {
+	return intent === 'error' ? 'assertive' : 'polite';
+}
+
+/**
+ * Safely converts a message to a string for screen reader announcement.
+ * Returns undefined if the message can't be safely serialized.
+ */
+function safeRenderToString( message: RootProps[ 'spokenMessage' ] ) {
+	if ( ! message ) {
+		return undefined;
+	}
+	if ( typeof message === 'string' ) {
+		return message;
+	}
+	try {
+		return renderToString( message );
+	} catch {
+		// If renderToString fails (e.g., due to complex components like Tooltip),
+		// return undefined and skip the announcement
+		return undefined;
+	}
+}
+
+/**
+ * Custom hook which announces the message with the given politeness.
+ */
+function useSpokenMessage(
+	message: RootProps[ 'spokenMessage' ],
+	politeness: 'polite' | 'assertive'
+) {
+	const spokenMessage = safeRenderToString( message );
+
+	useEffect( () => {
+		if ( spokenMessage ) {
+			speak( spokenMessage, politeness );
+		}
+	}, [ spokenMessage, politeness ] );
+}
+
+/**
+ * A notice component that communicates system status and provides actions.
+ *
+ * ```jsx
+ * import { Notice } from '@wordpress/ui';
+ *
+ * function MyComponent() {
+ * 	return (
+ * 		<Notice.Root intent="info">
+ * 			<Notice.Title>Heading</Notice.Title>
+ * 			<Notice.Description>Body text</Notice.Description>
+ * 			<Notice.Actions>
+ * 				<Notice.ActionButton>Action</Notice.ActionButton>
+ * 			</Notice.Actions>
+ * 			<Notice.CloseIcon onClick={() => {}} />
+ * 		</Notice.Root>
+ * 	);
+ * }
+ * ```
+ */
+export const Root = forwardRef< HTMLDivElement, RootProps >( function Notice(
+	{
+		intent = 'neutral',
+		children,
+		icon,
+		spokenMessage = children,
+		politeness = getDefaultPoliteness( intent ),
+		render,
+		...restProps
+	},
+	ref
+) {
+	// Announce to screen readers via speak() API - no role attribute needed
+	// as it would cause double announcements
+	useSpokenMessage( spokenMessage, politeness );
+
+	const iconElement = icon === null ? null : icon ?? icons[ intent ];
+
+	const mergedClassName = clsx(
+		styles.notice,
+		styles[ `is-${ intent }` ],
+		resetStyles[ 'box-sizing' ]
+	);
+
+	const element = useRender( {
+		defaultTagName: 'div',
+		render,
+		ref,
+		props: mergeProps< 'div' >(
+			{
+				className: mergedClassName,
+				children: (
+					<>
+						{ children }
+						{ iconElement && (
+							<Icon
+								className={ styles.icon }
+								icon={ iconElement }
+							/>
+						) }
+					</>
+				),
+			},
+			restProps
+		),
+	} );
+
+	return element;
+} );

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

@@ -0,0 +1,157 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as Notice from '../index';
+
+const meta: Meta< typeof Notice.Root > = {
+	title: 'Design System/Components/Notice',
+	component: Notice.Root,
+	subcomponents: {
+		'Notice.Title': Notice.Title,
+		'Notice.Description': Notice.Description,
+		'Notice.Actions': Notice.Actions,
+		'Notice.CloseIcon': Notice.CloseIcon,
+		'Notice.ActionButton': Notice.ActionButton,
+		'Notice.ActionLink': Notice.ActionLink,
+	},
+};
+export default meta;
+
+type Story = StoryObj< typeof Notice.Root >;
+
+export const Default: Story = {
+	args: {
+		children: (
+			<>
+				<Notice.Title>Notice Title</Notice.Title>
+				<Notice.Description>
+					Description text with details about this notification.
+				</Notice.Description>
+				<Notice.Actions>
+					<Notice.ActionButton>Primary button</Notice.ActionButton>
+					<Notice.ActionButton variant="outline">
+						Secondary button
+					</Notice.ActionButton>
+					<Notice.ActionLink href="#">Link</Notice.ActionLink>
+				</Notice.Actions>
+				<Notice.CloseIcon />
+			</>
+		),
+	},
+};
+
+export const Info: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		intent: 'info',
+	},
+};
+
+export const Warning: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		intent: 'warning',
+	},
+};
+
+export const Success: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		intent: 'success',
+	},
+};
+
+export const Error: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		intent: 'error',
+	},
+};
+
+/**
+ * Omit Notice.CloseIcon to make the notice non-dismissable.
+ */
+export const NonDismissible: Story = {
+	args: {
+		intent: 'warning',
+		children: (
+			<>
+				<Notice.Title>Action Required</Notice.Title>
+				<Notice.Description>
+					This notice cannot be dismissed by the user.
+				</Notice.Description>
+				<Notice.Actions>
+					<Notice.ActionButton>Take Action</Notice.ActionButton>
+					<Notice.ActionLink href="#">Visit link</Notice.ActionLink>
+				</Notice.Actions>
+			</>
+		),
+	},
+};
+
+/**
+ * Pass `icon={ null }` to hide the default decorative icon.
+ */
+export const WithoutIcon: Story = {
+	args: {
+		intent: 'info',
+		icon: null,
+		children: (
+			<>
+				<Notice.Title>No Icon</Notice.Title>
+				<Notice.Description>
+					This notice has no decorative icon displayed.
+				</Notice.Description>
+				<Notice.CloseIcon />
+			</>
+		),
+	},
+};
+
+export const WithoutActions: Story = {
+	args: {
+		intent: 'info',
+		children: (
+			<>
+				<Notice.Title>Simple Notice</Notice.Title>
+				<Notice.Description>
+					A dismissable notice without any action buttons or links.
+				</Notice.Description>
+				<Notice.CloseIcon />
+			</>
+		),
+	},
+};
+
+/**
+ * Title only, no description or actions.
+ */
+export const TitleOnly: Story = {
+	args: {
+		children: (
+			<>
+				<Notice.Title>Just a title</Notice.Title>
+				<Notice.CloseIcon />
+			</>
+		),
+	},
+};
+
+/**
+ * Description only, no title or actions.
+ */
+export const DescriptionOnly: Story = {
+	args: {
+		intent: 'info',
+		children: (
+			<>
+				<Notice.Description>
+					Just a description without title or actions.
+				</Notice.Description>
+				<Notice.CloseIcon />
+			</>
+		),
+	},
+};