@wordpress/components 33.1.1-next.v.202605131032.0 → 35.0.0

package/src/form-token-field/test/index.tsx

@@ -1929,6 +1929,195 @@ describe( 'FormTokenField', () => {
 			expect( onChangeSpy ).toHaveBeenCalledTimes( 2 );
 			expectTokensToBeInTheDocument( [ 'cherry', 'Cranberry' ] );
 		} );
+
+		it( 'should still preventDefault on Enter when validation rejects the value', async () => {
+			const user = userEvent.setup();
+
+			const onChangeSpy = jest.fn();
+			const onSubmitSpy = jest.fn( ( e: React.FormEvent ) =>
+				e.preventDefault()
+			);
+			const startsWithCapitalLetter = ( tokenText: string ) =>
+				/^[A-Z]/.test( tokenText );
+
+			render(
+				<form onSubmit={ onSubmitSpy }>
+					<FormTokenFieldWithState
+						onChange={ onChangeSpy }
+						__experimentalValidateInput={ startsWithCapitalLetter }
+					/>
+				</form>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			// Type 'hello' — lowercase, fails validation.
+			// Press Enter — should NOT submit the parent form.
+			await user.type( input, 'hello[Enter]' );
+			expect( onChangeSpy ).not.toHaveBeenCalled();
+			expect( onSubmitSpy ).not.toHaveBeenCalled();
+			expect( input ).toHaveValue( 'hello' );
+		} );
+
+		it( 'should not preventDefault on space when validation fails and `tokenizeOnSpace` is true', async () => {
+			const user = userEvent.setup();
+
+			const onChangeSpy = jest.fn();
+			const startsWithCapitalLetter = ( tokenText: string ) =>
+				/^[A-Z]/.test( tokenText );
+
+			render(
+				<FormTokenFieldWithState
+					onChange={ onChangeSpy }
+					tokenizeOnSpace
+					__experimentalValidateInput={ startsWithCapitalLetter }
+				/>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			// Type 'hello ', lowercase, fails validation.
+			// The space should be typed into the input (not prevented), and
+			// the trailing space should be preserved by the rejoin so the
+			// user can keep typing past the failed-validation space.
+			await user.type( input, 'hello ' );
+			expect( onChangeSpy ).not.toHaveBeenCalled();
+			expect( input ).toHaveValue( 'hello ' );
+
+			// User can keep typing past the failed-validation space.
+			await user.type( input, 'w' );
+			expect( input ).toHaveValue( 'hello w' );
+
+			// Clear and type 'Hello ', capital letter, passes validation.
+			// The space should be prevented, and a token should be created.
+			await user.clear( input );
+			await user.type( input, 'Hello ' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeSpy ).toHaveBeenCalledWith( [ 'Hello' ] );
+			expectTokensToBeInTheDocument( [ 'Hello' ] );
+		} );
+
+		it( 'should filter out invalid tokens when pasting with separators', async () => {
+			const user = userEvent.setup();
+
+			const onChangeSpy = jest.fn();
+			const startsWithCapitalLetter = ( tokenText: string ) =>
+				/^[A-Z]/.test( tokenText );
+
+			render(
+				<FormTokenFieldWithState
+					onChange={ onChangeSpy }
+					__experimentalValidateInput={ startsWithCapitalLetter }
+				/>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			// Paste values separated by comma, only valid ones should be added.
+			// Uses paste (not type) because comma keystrokes go through
+			// handleCommaKey, while pasted text goes through
+			// onInputChangeHandler which splits by separator.
+			await user.click( input );
+			await user.paste( 'Apple,banana,Cherry,' );
+			expect( onChangeSpy ).toHaveBeenCalledWith( [ 'Apple', 'Cherry' ] );
+			expectTokensToBeInTheDocument( [ 'Apple', 'Cherry' ] );
+			expectTokensNotToBeInTheDocument( [ 'banana' ] );
+			expect( input ).toHaveValue( 'banana,' );
+		} );
+
+		it( 'should leave all segments in the input when none pass validation on paste', async () => {
+			const user = userEvent.setup();
+
+			const onChangeSpy = jest.fn();
+			const startsWithCapitalLetter = ( tokenText: string ) =>
+				/^[A-Z]/.test( tokenText );
+
+			render(
+				<FormTokenFieldWithState
+					onChange={ onChangeSpy }
+					__experimentalValidateInput={ startsWithCapitalLetter }
+				/>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			await user.click( input );
+			await user.paste( 'apple,banana,cherry,' );
+
+			expect( onChangeSpy ).not.toHaveBeenCalled();
+			expect( input ).toHaveValue( 'apple,banana,cherry,' );
+		} );
+
+		it( 'should commit a trailing valid segment and leave only failed segments in the input when pasting without a trailing separator', async () => {
+			const user = userEvent.setup();
+
+			const onChangeSpy = jest.fn();
+			const startsWithCapitalLetter = ( tokenText: string ) =>
+				/^[A-Z]/.test( tokenText );
+
+			render(
+				<FormTokenFieldWithState
+					onChange={ onChangeSpy }
+					__experimentalValidateInput={ startsWithCapitalLetter }
+				/>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			await user.click( input );
+			await user.paste( 'Apple,banana,Cherry' );
+
+			expect( onChangeSpy ).toHaveBeenCalledWith( [ 'Apple', 'Cherry' ] );
+			expectTokensToBeInTheDocument( [ 'Apple', 'Cherry' ] );
+			expect( input ).toHaveValue( 'banana' );
+		} );
+
+		it( 'should not leave a duplicate of an existing token in the input when pasting comma-separated values', async () => {
+			const user = userEvent.setup();
+
+			const onChangeSpy = jest.fn();
+
+			render(
+				<FormTokenFieldWithState
+					onChange={ onChangeSpy }
+					initialValue={ [ 'Apple' ] }
+				/>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			await user.click( input );
+			await user.paste( 'Apple,Cherry,' );
+
+			expect( onChangeSpy ).toHaveBeenCalledWith( [ 'Apple', 'Cherry' ] );
+			expectTokensToBeInTheDocument( [ 'Apple', 'Cherry' ] );
+			expect( input ).toHaveValue( '' );
+		} );
+
+		it( 'should not leave a duplicate of an existing token in the input when pasting comma-separated values with `__experimentalValidateInput`', async () => {
+			const user = userEvent.setup();
+
+			const onChangeSpy = jest.fn();
+			const startsWithCapitalLetter = ( tokenText: string ) =>
+				/^[A-Z]/.test( tokenText );
+
+			render(
+				<FormTokenFieldWithState
+					onChange={ onChangeSpy }
+					initialValue={ [ 'Apple' ] }
+					__experimentalValidateInput={ startsWithCapitalLetter }
+				/>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			await user.click( input );
+			await user.paste( 'Apple,Cherry,' );
+
+			expect( onChangeSpy ).toHaveBeenCalledWith( [ 'Apple', 'Cherry' ] );
+			expectTokensToBeInTheDocument( [ 'Apple', 'Cherry' ] );
+			expect( input ).toHaveValue( '' );
+		} );
 	} );
 
 	describe( 'maxLength', () => {

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

@@ -1,31 +1,19 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
-
-/**
- * WordPress dependencies
- */
 import { SVG, Path } from '@wordpress/primitives';
 import { wordpress } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import Icon from '..';
 import { VStack } from '../../v-stack';
 
 const meta: Meta< typeof Icon > = {
-	tags: [ 'manifest' ],
 	title: 'Components/Icon',
 	component: Icon,
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'recommended',
+			status: 'use-with-caution',
 			whereUsed: 'global',
-			notes: 'Prefer this component over the `Icon` component from `@wordpress/icons`.',
+			notes: 'When rendering SVGs, use `Icon` from `@wordpress/ui` instead.',
 		},
 	},
 };

package/src/index.ts

@@ -45,7 +45,6 @@ export {
 	/** @deprecated Import `BoxControl` instead. */
 	default as __experimentalBoxControl,
 	default as BoxControl,
-	applyValueToSides as __experimentalApplyValueToSides,
 } from './box-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
@@ -118,11 +117,6 @@ export { default as MenuItemsChoice } from './menu-items-choice';
 export { default as Modal } from './modal';
 export { default as ScrollLock } from './scroll-lock';
 export { NavigableMenu, TabbableContainer } from './navigable-container';
-export { default as __experimentalNavigation } from './navigation';
-export { default as __experimentalNavigationBackButton } from './navigation/back-button';
-export { default as __experimentalNavigationGroup } from './navigation/group';
-export { default as __experimentalNavigationItem } from './navigation/item';
-export { default as __experimentalNavigationMenu } from './navigation/menu';
 export {
 	/** @deprecated Import `Navigator` instead. */
 	NavigatorProvider as __experimentalNavigatorProvider,

package/src/menu/test/index.tsx

@@ -156,7 +156,7 @@ describe( 'Menu', () => {
 			await waitForFocusedMenuItem( 'First item' );
 		} );
 
-		it( 'should open and focus the first item when pressing the space key on the trigger', async () => {
+		it( 'should open when pressing the space key on the trigger', async () => {
 			render(
 				<Menu>
 					<Menu.TriggerButton>Open dropdown</Menu.TriggerButton>
@@ -181,11 +181,16 @@ describe( 'Menu', () => {
 			expect( screen.queryByRole( 'menuitem' ) ).not.toBeInTheDocument();
 
 			// Keyboard-triggered clicks have `detail: 0`, which Ariakit uses to
-			// choose the initial item focus path instead of the pointer path.
+			// distinguish keyboard activation from pointer activation.
 			await press.Space( toggleButton, { detail: 0 } );
 
-			// Menu open, focus is on the first focusable item
-			await waitForFocusedMenuItem( 'First item' );
+			await waitFor( () =>
+				expect( toggleButton ).toHaveAttribute(
+					'aria-expanded',
+					'true'
+				)
+			);
+			expect( screen.getByRole( 'menu' ) ).toBeVisible();
 		} );
 
 		it( 'should close when pressing the escape key', async () => {

package/src/modal/style.scss

@@ -200,7 +200,8 @@
 	align-items: center;
 	height: $header-height + $grid-unit-10; // 72px
 	width: 100%;
-	z-index: z-index(".components-modal__header");
+	// Stack above modal content that may overlap the header.
+	z-index: 10;
 	position: absolute;
 	top: 0;
 	left: 0;

package/src/notice/README.md

@@ -17,7 +17,6 @@ Notices display at the top of the screen, below any toolbars anchored to the top
 Notices are color-coded to indicate the type of message being communicated:
 
 - **Informational** notices are **blue** by default.
-- If there is a parent `Theme` component with an `accent` color prop, informational notices will take on that color instead.
 - **Success** notices are **green.**
 - **Warning** notices are **yellow.**
 - **Error** notices are **red.**
@@ -101,7 +100,7 @@ Used to provide a custom spoken message in place of the `children` default.
 
 #### `status`: `'warning' | 'success' | 'error' | 'info'`
 
-Determines the color of the notice: `warning` (yellow), `success` (green), `error` (red), or `'info'`. By default `'info'` will be blue, but if there is a parent Theme component with an accent color prop, the notice will take on that color instead.
+Determines the color of the notice: `warning` (yellow), `success` (green), `error` (red), or `'info'`. By default `'info'` will be blue.
 
 - Required: No
 - Default: `info`

package/src/notice/index.tsx

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import { RawHTML, useEffect, renderToString } from '@wordpress/element';
 import { speak } from '@wordpress/a11y';
-import { close } from '@wordpress/icons';
+import { closeSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -93,9 +93,9 @@ function Notice( {
 }: NoticeProps ) {
 	useSpokenMessage( spokenMessage, politeness );
 
-	const classes = clsx( className, 'components-notice', 'is-' + status, {
-		'is-dismissible': isDismissible,
-	} );
+	// Dismissibility is not a wrapper modifier; target `.components-notice__dismiss`
+	// or `.components-notice:has(.components-notice__dismiss)` from outside CSS.
+	const classes = clsx( className, 'components-notice', 'is-' + status );
 
 	if ( __unstableHTML && typeof children === 'string' ) {
 		children = <RawHTML>{ children }</RawHTML>;
@@ -109,71 +109,64 @@ function Notice( {
 	return (
 		<div className={ classes }>
 			<VisuallyHidden>{ getStatusLabel( status ) }</VisuallyHidden>
-			<div className="components-notice__content">
-				{ children }
-				{ actions.length > 0 && (
-					<div className="components-notice__actions">
-						{ actions.map(
-							(
-								{
-									className: buttonCustomClasses,
-									label,
-									isPrimary,
-									variant,
-									noDefaultClasses = false,
-									onClick,
-									url,
-									disabled,
-								}: NoticeAction &
-									// `isPrimary` is a legacy prop included for
-									// backcompat, but `variant` should be used
-									// instead.
-									Pick< DeprecatedButtonProps, 'isPrimary' >,
-								index
-							) => {
-								let computedVariant = variant;
-								if (
-									variant !== 'primary' &&
-									! noDefaultClasses
-								) {
-									computedVariant = ! url
-										? 'secondary'
-										: 'link';
-								}
-								if (
-									typeof computedVariant === 'undefined' &&
-									isPrimary
-								) {
-									computedVariant = 'primary';
-								}
-
-								return (
-									<Button
-										__next40pxDefaultSize
-										key={ index }
-										href={ url }
-										variant={ computedVariant }
-										onClick={ onClick }
-										disabled={ disabled }
-										accessibleWhenDisabled
-										className={ clsx(
-											'components-notice__action',
-											buttonCustomClasses
-										) }
-									>
-										{ label }
-									</Button>
-								);
+			<div className="components-notice__content">{ children }</div>
+			{ actions.length > 0 && (
+				<div className="components-notice__actions">
+					{ actions.map(
+						(
+							{
+								className: buttonCustomClasses,
+								label,
+								isPrimary,
+								variant,
+								noDefaultClasses = false,
+								onClick,
+								url,
+								disabled,
+							}: NoticeAction &
+								// `isPrimary` is a legacy prop included for
+								// backcompat, but `variant` should be used
+								// instead.
+								Pick< DeprecatedButtonProps, 'isPrimary' >,
+							index
+						) => {
+							let computedVariant = variant;
+							if ( variant !== 'primary' && ! noDefaultClasses ) {
+								computedVariant = ! url ? 'secondary' : 'link';
+							}
+							if (
+								typeof computedVariant === 'undefined' &&
+								isPrimary
+							) {
+								computedVariant = 'primary';
 							}
-						) }
-					</div>
-				) }
-			</div>
+
+							return (
+								<Button
+									size="compact"
+									key={ index }
+									href={ url }
+									variant={ computedVariant }
+									onClick={ onClick }
+									disabled={ disabled }
+									accessibleWhenDisabled
+									className={ clsx(
+										'components-notice__action',
+										buttonCustomClasses
+									) }
+								>
+									{ label }
+								</Button>
+							);
+						}
+					) }
+				</div>
+			) }
 			{ isDismissible && (
 				<Button
 					size="small"
 					className="components-notice__dismiss"
-					icon={ close }
+					icon={ closeSmall }
 					label={ __( 'Close' ) }
 					onClick={ onDismissNotice }
 				/>

package/src/notice/style.scss

@@ -1,67 +1,77 @@
-@use "sass:color";
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
-@use "../utils/theme-variables" as *;
 
 .components-notice {
-	display: flex;
-	font-family: $default-font;
-	font-size: $default-font-size;
-	background-color: $white;
-	border-left: 4px solid $components-color-accent;
-	padding: 8px 12px;
-	align-items: center;
-	color: $gray-900;
-
-	&.is-dismissible {
-		position: relative;
+	--wp-components-notice-background-color: var(--wpds-color-bg-surface-info-weak);
+	--wp-components-notice-border-color: var(--wpds-color-stroke-surface-info);
+	--wp-components-notice-text-color: var(--wpds-color-fg-content-info);
 
-		.components-notice__content {
-			margin-right: #{ $button-size-small + $border-width };
-		}
-	}
+	box-sizing: border-box;
+	display: grid;
+	grid-template-columns: 1fr auto;
+	align-items: start;
+	padding: var(--wpds-dimension-padding-md);
+	border: var(--wpds-border-width-xs) solid var(--wp-components-notice-border-color);
+	border-radius: var(--wpds-border-radius-lg);
+	background-color: var(--wp-components-notice-background-color);
+	color: var(--wp-components-notice-text-color);
+	font-family: var(--wpds-typography-font-family-body);
+	font-size: var(--wpds-typography-font-size-md);
+	line-height: var(--wpds-typography-line-height-sm);
 
 	&.is-success {
-		border-left-color: $alert-green;
-		background-color: color.adjust($alert-green, $lightness: +45%);
+		--wp-components-notice-background-color: var(--wpds-color-bg-surface-success-weak);
+		--wp-components-notice-border-color: var(--wpds-color-stroke-surface-success);
+		--wp-components-notice-text-color: var(--wpds-color-fg-content-success);
 	}
 
 	&.is-warning {
-		border-left-color: $alert-yellow;
-		background-color: color.adjust($alert-yellow, $lightness: +35%);
+		--wp-components-notice-background-color: var(--wpds-color-bg-surface-warning-weak);
+		--wp-components-notice-border-color: var(--wpds-color-stroke-surface-warning);
+		--wp-components-notice-text-color: var(--wpds-color-fg-content-warning);
 	}
 
 	&.is-error {
-		border-left-color: $alert-red;
-		background-color: color.adjust($alert-red, $lightness: +35%);
+		--wp-components-notice-background-color: var(--wpds-color-bg-surface-error-weak);
+		--wp-components-notice-border-color: var(--wpds-color-stroke-surface-error);
+		--wp-components-notice-text-color: var(--wpds-color-fg-content-error);
 	}
 }
 
 .components-notice__content {
-	flex-grow: 1;
-	margin-top: $grid-unit-05;
-	margin-bottom: $grid-unit-05;
+	grid-column: 1;
+	grid-row: 1;
+
+	// Centers single-line copy with the dismiss row when it is present. The same
+	// padding is kept when the notice is not dismissible so block height stays
+	// consistent across variants, matching `@wordpress/ui` Notice (`.title` /
+	// `.description` always use `--text-vertical-padding` whether or not `CloseIcon`
+	// is rendered).
+	// TODO: Replace `$button-size-small` with a WPDS size token once size tokens
+	// land in `@wordpress/theme`.
+	padding-block: calc((#{$button-size-small} - 1lh) / 2);
 }
 
 .components-notice__actions {
+	grid-column: 1;
+	grid-row: 2;
+
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
-	gap: $grid-unit-15;
-	margin-top: $grid-unit-15;
+	gap: var(--wpds-dimension-gap-md);
+	margin-top: var(--wpds-dimension-gap-sm);
 }
 
 .components-notice__dismiss {
-	color: $gray-700;
-
-	// Place the dismiss button at the top of the container, even when text wraps onto two lines.
-	align-self: flex-start;
-	flex-shrink: 0;
+	grid-column: 2;
+	grid-row: 1;
+	color: var(--wpds-color-fg-interactive-neutral);
+	margin-inline-start: var(--wpds-dimension-gap-xs);
 
 	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover,
 	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):active,
 	&:not(:disabled):not([aria-disabled="true"]):focus {
-		color: $gray-900;
+		color: var(--wpds-color-fg-interactive-neutral-active);
 		background-color: transparent;
 	}
 
@@ -71,13 +81,11 @@
 }
 
 .components-notice-list {
+	display: flex;
+	flex-direction: column;
+	gap: var(--wpds-dimension-gap-md);
+
 	// The notice should never be wider than the viewport, or the close button might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket.
 	max-width: 100vw;
 	box-sizing: border-box;
-
-	.components-notice__content {
-		margin-top: $grid-unit-15;
-		margin-bottom: $grid-unit-15;
-		line-height: 2;
-	}
 }

package/src/notice/test/__snapshots__/index.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Notice should match snapshot 1`] = `
 <div>
   <div
-    class="components-notice is-success is-dismissible"
+    class="components-notice is-success"
   >
     <div
       class="components-visually-hidden css-1ragr82-PolymorphicDiv emotion-0"
@@ -18,28 +18,28 @@ exports[`Notice should match snapshot 1`] = `
       class="components-notice__content"
     >
       Example
-      <div
-        class="components-notice__actions"
+    </div>
+    <div
+      class="components-notice__actions"
+    >
+      <a
+        class="components-button components-notice__action is-compact is-link"
+        href="https://example.com"
+      >
+        More information
+      </a>
+      <button
+        class="components-button components-notice__action is-secondary is-compact"
+        type="button"
+      >
+        Cancel
+      </button>
+      <button
+        class="components-button components-notice__action is-primary is-compact"
+        type="button"
       >
-        <a
-          class="components-button components-notice__action is-next-40px-default-size is-link"
-          href="https://example.com"
-        >
-          More information
-        </a>
-        <button
-          class="components-button components-notice__action is-next-40px-default-size is-secondary"
-          type="button"
-        >
-          Cancel
-        </button>
-        <button
-          class="components-button components-notice__action is-next-40px-default-size is-primary"
-          type="button"
-        >
-          Submit
-        </button>
-      </div>
+        Submit
+      </button>
     </div>
     <button
       aria-label="Close"
@@ -55,7 +55,7 @@ exports[`Notice should match snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z"
+          d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"
         />
       </svg>
     </button>

package/src/notice/test/index.tsx

@@ -43,14 +43,14 @@ describe( 'Notice', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should not have is-dismissible class when isDismissible prop is false', () => {
-		const { container } = render(
+	it( 'should not render a dismiss control when isDismissible prop is false', () => {
+		render(
 			<Notice isDismissible={ false }>I cannot be dismissed!</Notice>
 		);
-		const wrapper = getNoticeWrapper( container );
 
-		expect( wrapper ).toHaveClass( 'components-notice' );
-		expect( wrapper ).not.toHaveClass( 'is-dismissible' );
+		expect(
+			screen.queryByRole( 'button', { name: 'Close' } )
+		).not.toBeInTheDocument();
 	} );
 
 	it( 'should default to info status', () => {