@wordpress/ui 0.9.1-next.v.202603161435.0 → 0.10.0

package/src/alert-dialog/test/index.test.tsx

@@ -0,0 +1,537 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef, useState } from '@wordpress/element';
+
+import * as AlertDialog from '..';
+
+describe( 'AlertDialog', () => {
+	it( 'forwards ref', () => {
+		const triggerRef = createRef< HTMLButtonElement >();
+		const popupRef = createRef< HTMLDivElement >();
+
+		render(
+			<AlertDialog.Root defaultOpen>
+				<AlertDialog.Trigger ref={ triggerRef }>
+					Open
+				</AlertDialog.Trigger>
+				<AlertDialog.Popup
+					ref={ popupRef }
+					title="Test Title"
+					onConfirm={ jest.fn() }
+				>
+					Test message content
+				</AlertDialog.Popup>
+			</AlertDialog.Root>
+		);
+
+		expect( triggerRef.current ).toBeInstanceOf( HTMLButtonElement );
+		expect( popupRef.current ).toBeInstanceOf( HTMLDivElement );
+	} );
+
+	it( 'renders with title, message, and default buttons', async () => {
+		render(
+			<AlertDialog.Root open onOpenChange={ jest.fn() }>
+				<AlertDialog.Popup title="Test Title" onConfirm={ jest.fn() }>
+					Test message content
+				</AlertDialog.Popup>
+			</AlertDialog.Root>
+		);
+
+		await waitFor( () => {
+			expect( screen.getByText( 'Test Title' ) ).toBeVisible();
+		} );
+
+		expect( screen.getByText( 'Test message content' ) ).toBeVisible();
+		expect(
+			screen.queryByRole( 'button', { name: 'Close' } )
+		).not.toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'OK' } ) ).toBeVisible();
+		expect(
+			screen.getByRole( 'button', { name: 'Cancel' } )
+		).toBeVisible();
+	} );
+
+	it( 'renders with role="alertdialog" for default intent', async () => {
+		render(
+			<AlertDialog.Root open onOpenChange={ jest.fn() }>
+				<AlertDialog.Popup
+					title="Default Dialog"
+					onConfirm={ jest.fn() }
+				>
+					Content
+				</AlertDialog.Popup>
+			</AlertDialog.Root>
+		);
+
+		await waitFor( () => {
+			expect( screen.getByRole( 'alertdialog' ) ).toBeVisible();
+		} );
+	} );
+
+	it( 'renders with role="alertdialog" for irreversible intent', async () => {
+		render(
+			<AlertDialog.Root
+				intent="irreversible"
+				open
+				onOpenChange={ jest.fn() }
+			>
+				<AlertDialog.Popup
+					title="Irreversible Dialog"
+					onConfirm={ jest.fn() }
+				>
+					Content
+				</AlertDialog.Popup>
+			</AlertDialog.Root>
+		);
+
+		await waitFor( () => {
+			expect( screen.getByRole( 'alertdialog' ) ).toBeVisible();
+		} );
+	} );
+
+	it( 'calls onConfirm and onOpenChange when confirm button is clicked', async () => {
+		const onConfirm = jest.fn();
+		const onOpenChange = jest.fn();
+
+		render(
+			<AlertDialog.Root open onOpenChange={ onOpenChange }>
+				<AlertDialog.Popup
+					title="Confirm Action"
+					onConfirm={ onConfirm }
+				>
+					Are you sure?
+				</AlertDialog.Popup>
+			</AlertDialog.Root>
+		);
+
+		await waitFor( () => {
+			expect(
+				screen.getByRole( 'button', { name: 'OK' } )
+			).toBeVisible();
+		} );
+
+		await userEvent.click( screen.getByRole( 'button', { name: 'OK' } ) );
+
+		expect( onConfirm ).toHaveBeenCalledTimes( 1 );
+		expect( onOpenChange ).toHaveBeenCalledWith(
+			false,
+			expect.objectContaining( { reason: 'close-press' } )
+		);
+	} );
+
+	it( 'calls onOpenChange when cancel button is clicked', async () => {
+		const onConfirm = jest.fn();
+		const onOpenChange = jest.fn();
+
+		render(
+			<AlertDialog.Root open onOpenChange={ onOpenChange }>
+				<AlertDialog.Popup
+					title="Confirm Action"
+					onConfirm={ onConfirm }
+				>
+					Are you sure?
+				</AlertDialog.Popup>
+			</AlertDialog.Root>
+		);
+
+		await waitFor( () => {
+			expect(
+				screen.getByRole( 'button', { name: 'Cancel' } )
+			).toBeVisible();
+		} );
+
+		await userEvent.click(
+			screen.getByRole( 'button', { name: 'Cancel' } )
+		);
+
+		expect( onOpenChange ).toHaveBeenCalledWith(
+			false,
+			expect.objectContaining( { reason: 'close-press' } )
+		);
+		expect( onConfirm ).not.toHaveBeenCalled();
+	} );
+
+	it( 'calls onOpenChange on escape key for default intent', async () => {
+		const onOpenChange = jest.fn();
+
+		render(
+			<AlertDialog.Root open onOpenChange={ onOpenChange }>
+				<AlertDialog.Popup
+					title="Default Dialog"
+					onConfirm={ jest.fn() }
+				>
+					Content
+				</AlertDialog.Popup>
+			</AlertDialog.Root>
+		);
+
+		await waitFor( () => {
+			expect( screen.getByText( 'Default Dialog' ) ).toBeVisible();
+		} );
+
+		await userEvent.keyboard( '{Escape}' );
+
+		expect( onOpenChange ).toHaveBeenCalledWith(
+			false,
+			expect.objectContaining( { reason: 'escape-key' } )
+		);
+	} );
+
+	it( 'does not call onOpenChange on backdrop click for default intent', async () => {
+		const onOpenChange = jest.fn();
+
+		render(
+			<AlertDialog.Root open onOpenChange={ onOpenChange }>
+				<AlertDialog.Popup
+					title="Default Dialog"
+					onConfirm={ jest.fn() }
+				>
+					Content
+				</AlertDialog.Popup>
+			</AlertDialog.Root>
+		);
+
+		await waitFor( () => {
+			expect( screen.getByText( 'Default Dialog' ) ).toBeVisible();
+		} );
+
+		await userEvent.click( document.body );
+
+		expect( onOpenChange ).not.toHaveBeenCalled();
+	} );
+
+	it( 'renders with title, message, and default buttons for irreversible intent', async () => {
+		render(
+			<AlertDialog.Root
+				intent="irreversible"
+				open
+				onOpenChange={ jest.fn() }
+			>
+				<AlertDialog.Popup
+					title="Irreversible Dialog"
+					onConfirm={ jest.fn() }
+				>
+					Irreversible message content
+				</AlertDialog.Popup>
+			</AlertDialog.Root>
+		);
+
+		await waitFor( () => {
+			expect( screen.getByText( 'Irreversible Dialog' ) ).toBeVisible();
+		} );
+
+		expect(
+			screen.getByText( 'Irreversible message content' )
+		).toBeVisible();
+		expect(
+			screen.queryByRole( 'button', { name: 'Close' } )
+		).not.toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'OK' } ) ).toBeVisible();
+		expect(
+			screen.getByRole( 'button', { name: 'Cancel' } )
+		).toBeVisible();
+	} );
+
+	it( 'calls onOpenChange on escape key for irreversible intent', async () => {
+		const onOpenChange = jest.fn();
+
+		render(
+			<AlertDialog.Root
+				intent="irreversible"
+				open
+				onOpenChange={ onOpenChange }
+			>
+				<AlertDialog.Popup
+					title="Irreversible Dialog"
+					onConfirm={ jest.fn() }
+				>
+					Content
+				</AlertDialog.Popup>
+			</AlertDialog.Root>
+		);
+
+		await waitFor( () => {
+			expect( screen.getByText( 'Irreversible Dialog' ) ).toBeVisible();
+		} );
+
+		await userEvent.keyboard( '{Escape}' );
+
+		expect( onOpenChange ).toHaveBeenCalledWith(
+			false,
+			expect.objectContaining( { reason: 'escape-key' } )
+		);
+	} );
+
+	it( 'does not call onOpenChange on backdrop click for irreversible intent', async () => {
+		const onOpenChange = jest.fn();
+
+		render(
+			<AlertDialog.Root
+				intent="irreversible"
+				open
+				onOpenChange={ onOpenChange }
+			>
+				<AlertDialog.Popup
+					title="Irreversible Dialog"
+					onConfirm={ jest.fn() }
+				>
+					Content
+				</AlertDialog.Popup>
+			</AlertDialog.Root>
+		);
+
+		await waitFor( () => {
+			expect( screen.getByText( 'Irreversible Dialog' ) ).toBeVisible();
+		} );
+
+		await userEvent.click( document.body );
+
+		expect( onOpenChange ).not.toHaveBeenCalled();
+	} );
+
+	it( 'calls onOpenChange on cancel button click for irreversible intent', async () => {
+		const onOpenChange = jest.fn();
+		const onConfirm = jest.fn();
+
+		render(
+			<AlertDialog.Root
+				intent="irreversible"
+				open
+				onOpenChange={ onOpenChange }
+			>
+				<AlertDialog.Popup
+					title="Irreversible Dialog"
+					onConfirm={ onConfirm }
+				>
+					Content
+				</AlertDialog.Popup>
+			</AlertDialog.Root>
+		);
+
+		await waitFor( () => {
+			expect(
+				screen.getByRole( 'button', { name: 'Cancel' } )
+			).toBeVisible();
+		} );
+
+		await userEvent.click(
+			screen.getByRole( 'button', { name: 'Cancel' } )
+		);
+
+		expect( onOpenChange ).toHaveBeenCalledWith(
+			false,
+			expect.objectContaining( { reason: 'close-press' } )
+		);
+		expect( onConfirm ).not.toHaveBeenCalled();
+	} );
+
+	it( 'calls onConfirm and onOpenChange on confirm button click for irreversible intent', async () => {
+		const onOpenChange = jest.fn();
+		const onConfirm = jest.fn();
+
+		render(
+			<AlertDialog.Root
+				intent="irreversible"
+				open
+				onOpenChange={ onOpenChange }
+			>
+				<AlertDialog.Popup
+					title="Irreversible Dialog"
+					onConfirm={ onConfirm }
+				>
+					Content
+				</AlertDialog.Popup>
+			</AlertDialog.Root>
+		);
+
+		await waitFor( () => {
+			expect(
+				screen.getByRole( 'button', { name: 'OK' } )
+			).toBeVisible();
+		} );
+
+		await userEvent.click( screen.getByRole( 'button', { name: 'OK' } ) );
+
+		expect( onConfirm ).toHaveBeenCalledTimes( 1 );
+		expect( onOpenChange ).toHaveBeenCalledWith(
+			false,
+			expect.objectContaining( { reason: 'close-press' } )
+		);
+	} );
+
+	it( 'disables both buttons when loading', async () => {
+		render(
+			<AlertDialog.Root open onOpenChange={ jest.fn() }>
+				<AlertDialog.Popup
+					title="Loading Test"
+					onConfirm={ jest.fn() }
+					loading
+				>
+					Content
+				</AlertDialog.Popup>
+			</AlertDialog.Root>
+		);
+
+		await waitFor( () => {
+			expect(
+				screen.getByRole( 'button', { name: 'OK' } )
+			).toBeVisible();
+		} );
+
+		expect( screen.getByRole( 'button', { name: 'OK' } ) ).toHaveAttribute(
+			'aria-disabled',
+			'true'
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: 'Cancel' } )
+		).toHaveAttribute( 'aria-disabled', 'true' );
+	} );
+
+	it( 'does not disable buttons when loading is false', async () => {
+		render(
+			<AlertDialog.Root open onOpenChange={ jest.fn() }>
+				<AlertDialog.Popup
+					title="No Loading"
+					onConfirm={ jest.fn() }
+					loading={ false }
+				>
+					Content
+				</AlertDialog.Popup>
+			</AlertDialog.Root>
+		);
+
+		await waitFor( () => {
+			expect(
+				screen.getByRole( 'button', { name: 'OK' } )
+			).toBeVisible();
+		} );
+
+		expect(
+			screen.getByRole( 'button', { name: 'OK' } )
+		).not.toHaveAttribute( 'aria-disabled', 'true' );
+
+		expect(
+			screen.getByRole( 'button', { name: 'Cancel' } )
+		).not.toHaveAttribute( 'aria-disabled', 'true' );
+	} );
+
+	it( 'uses custom button text when provided', async () => {
+		render(
+			<AlertDialog.Root open onOpenChange={ jest.fn() }>
+				<AlertDialog.Popup
+					title="Custom Text"
+					onConfirm={ jest.fn() }
+					confirmButtonText="Yes, do it"
+					cancelButtonText="No, go back"
+				>
+					Custom message
+				</AlertDialog.Popup>
+			</AlertDialog.Root>
+		);
+
+		await waitFor( () => {
+			expect(
+				screen.getByRole( 'button', { name: 'Yes, do it' } )
+			).toBeVisible();
+		} );
+
+		expect(
+			screen.getByRole( 'button', { name: 'No, go back' } )
+		).toBeVisible();
+	} );
+
+	it( 'keeps dialog open when confirm is clicked with loading prop (async flow)', async () => {
+		function AsyncDialog() {
+			const [ isOpen, setIsOpen ] = useState( true );
+			const [ isLoading, setIsLoading ] = useState( false );
+
+			return (
+				<AlertDialog.Root
+					open={ isOpen }
+					onOpenChange={ ( open ) => {
+						if ( ! isLoading ) {
+							setIsOpen( open );
+						}
+					} }
+				>
+					<AlertDialog.Popup
+						title="Async Test"
+						loading={ isLoading }
+						onConfirm={ () => setIsLoading( true ) }
+					>
+						Content
+					</AlertDialog.Popup>
+				</AlertDialog.Root>
+			);
+		}
+
+		render( <AsyncDialog /> );
+
+		await waitFor( () => {
+			expect( screen.getByText( 'Async Test' ) ).toBeVisible();
+		} );
+
+		await userEvent.click( screen.getByRole( 'button', { name: 'OK' } ) );
+
+		expect( screen.getByText( 'Async Test' ) ).toBeVisible();
+		expect( screen.getByRole( 'button', { name: 'OK' } ) ).toHaveAttribute(
+			'aria-disabled',
+			'true'
+		);
+	} );
+
+	it( 'does not auto-close on confirm click when loading is false (manual-close mode)', async () => {
+		function ManualCloseDialog() {
+			const [ isOpen, setIsOpen ] = useState( true );
+
+			return (
+				<AlertDialog.Root
+					open={ isOpen }
+					onOpenChange={ ( open ) => setIsOpen( open ) }
+				>
+					<AlertDialog.Popup
+						title="Manual Close"
+						loading={ false }
+						onConfirm={ jest.fn() }
+					>
+						Content
+					</AlertDialog.Popup>
+				</AlertDialog.Root>
+			);
+		}
+
+		render( <ManualCloseDialog /> );
+
+		await waitFor( () => {
+			expect( screen.getByText( 'Manual Close' ) ).toBeVisible();
+		} );
+
+		await userEvent.click( screen.getByRole( 'button', { name: 'OK' } ) );
+
+		expect( screen.getByText( 'Manual Close' ) ).toBeVisible();
+	} );
+
+	it( 'opens dialog when Trigger is clicked', async () => {
+		render(
+			<AlertDialog.Root>
+				<AlertDialog.Trigger>Open</AlertDialog.Trigger>
+				<AlertDialog.Popup title="Trigger Test" onConfirm={ jest.fn() }>
+					Dialog content
+				</AlertDialog.Popup>
+			</AlertDialog.Root>
+		);
+
+		expect(
+			screen.queryByText( 'Dialog content' )
+		).not.toBeInTheDocument();
+
+		await userEvent.click( screen.getByRole( 'button', { name: 'Open' } ) );
+
+		await waitFor( () => {
+			expect( screen.getByText( 'Trigger Test' ) ).toBeVisible();
+		} );
+
+		expect( screen.getByText( 'Dialog content' ) ).toBeVisible();
+	} );
+} );

package/src/alert-dialog/trigger.tsx

@@ -0,0 +1,15 @@
+import { forwardRef } from '@wordpress/element';
+
+import * as Dialog from '../dialog';
+import type { TriggerProps } from './types';
+
+/**
+ * Renders a button that opens the alert dialog when clicked.
+ */
+const Trigger = forwardRef< HTMLButtonElement, TriggerProps >(
+	function AlertDialogTrigger( props, ref ) {
+		return <Dialog.Trigger ref={ ref } { ...props } />;
+	}
+);
+
+export { Trigger };

package/src/alert-dialog/types.ts

@@ -0,0 +1,83 @@
+import type { AlertDialog as _AlertDialog } from '@base-ui/react/alert-dialog';
+import type { ReactNode } from 'react';
+
+import type { TriggerProps as DialogTriggerProps } from '../dialog/types';
+
+export interface RootProps
+	extends Pick<
+		_AlertDialog.Root.Props,
+		'open' | 'onOpenChange' | 'defaultOpen'
+	> {
+	/**
+	 * The content to be rendered inside the component. Typically includes
+	 * `AlertDialog.Trigger` and `AlertDialog.Popup`.
+	 */
+	children: ReactNode;
+
+	/**
+	 * The semantic intent of the dialog, which determines its styling.
+	 *
+	 * All intents use `role="alertdialog"`, are always modal, and block
+	 * backdrop click dismissal. Escape key and the cancel/confirm buttons
+	 * still dismiss the dialog.
+	 *
+	 * - `'default'`: Standard confirmation dialog for reversible actions.
+	 * - `'irreversible'`: Confirmation dialog for irreversible actions that
+	 *   cannot be undone. The confirm button uses error/danger coloring.
+	 *
+	 * @default 'default'
+	 */
+	intent?: 'default' | 'irreversible';
+}
+
+export type TriggerProps = DialogTriggerProps;
+
+export interface PopupProps {
+	/**
+	 * The title displayed in the dialog header. This serves as both the
+	 * visible heading and the accessible label for the dialog.
+	 */
+	title: string;
+
+	/**
+	 * The message content displayed in the dialog body.
+	 */
+	children: ReactNode;
+
+	/**
+	 * Callback fired when the user confirms the action.
+	 */
+	onConfirm: () => void;
+
+	/**
+	 * Custom text for the confirm button.
+	 *
+	 * @default 'OK'
+	 */
+	confirmButtonText?: string;
+
+	/**
+	 * Custom text for the cancel button.
+	 *
+	 * @default 'Cancel'
+	 */
+	cancelButtonText?: string;
+
+	/**
+	 * Whether the confirm action is in a loading state (e.g. an async
+	 * operation is in progress). When `true`, the confirm button shows a
+	 * spinner and the cancel button is disabled.
+	 *
+	 * **Important:** Passing this prop — even as `false` — opts into
+	 * manual-close mode: the confirm button will no longer auto-close the
+	 * dialog. The consumer is responsible for setting `open={false}` when
+	 * the operation completes. Omit the prop entirely for the default
+	 * auto-close-on-confirm behavior.
+	 *
+	 * To implement an async confirm flow, use controlled mode
+	 * (`open` / `onOpenChange`) and manage the loading state externally:
+	 * prevent closing in `onOpenChange` while loading, and set
+	 * `open={false}` once the operation completes.
+	 */
+	loading?: boolean;
+}

package/src/button/style.module.css

@@ -50,6 +50,7 @@
 		line-height: var(--wpds-font-line-height-sm);
 		text-decoration: none;
 		color: var(--wp-ui-button-foreground-color);
+		cursor: var(--wpds-cursor-control);
 
 		@media not ( prefers-reduced-motion ) {
 			transition: color 0.1s ease-out;
@@ -61,6 +62,7 @@
 
 		/* Use pointer cursor for buttons that are links */
 		&[href] {
+			/* stylelint-disable-next-line declaration-property-value-disallowed-list -- Links should always use pointer. */
 			cursor: pointer;
 		}
 

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

@@ -10,7 +10,7 @@ function Text( { children }: { children: React.ReactNode } ) {
 		<p
 			style={ {
 				margin: 0,
-				fontFamily: [ 'var(--wp', 'ds-font-family-body)' ].join( '' ),
+				fontFamily: 'var(--wpds-font-family-body)',
 				fontSize: 'var(--wpds-font-size-md)',
 				fontWeight: 'var(--wpds-font-weight-regular)',
 				lineHeight: 'var(--wpds-font-line-height-sm)',

package/src/card/style.module.css

@@ -4,11 +4,13 @@
 	.root {
 		--wp-ui-card-padding: var(--wpds-dimension-padding-2xl);
 		--wp-ui-card-header-content-gap: var(--wpds-dimension-gap-xl);
+		--wp-ui-card-header-content-margin: calc(var(--wp-ui-card-header-content-gap) - var(--wp-ui-card-padding));
 
 		display: flex;
 		flex-direction: column;
 		border: 1px solid var(--wpds-color-stroke-surface-neutral-weak);
 		border-radius: var(--wpds-border-radius-lg);
+		overflow: clip;
 		background-color: var(--wpds-color-bg-surface-neutral-strong);
 	}
 
@@ -28,7 +30,7 @@
 	/* Custom vertical gap between header and content */
 	.header + .content {
 		padding-block-start: 0;
-		margin-block-start: calc(var(--wp-ui-card-header-content-gap) - var(--wp-ui-card-padding));
+		margin-block-start: var(--wp-ui-card-header-content-margin);
 	}
 
 	.fullbleed {
@@ -38,10 +40,6 @@
 
 	.title {
 		margin: 0;
-		font-family: var(--wpds-font-family-heading);
-		font-size: var(--wpds-font-size-lg);
-		font-weight: var(--wpds-font-weight-medium);
-		line-height: var(--wpds-font-line-height-sm);
 		color: var(--wpds-color-fg-content-neutral);
 	}
 }