@wordpress/components 39.0.0 → 40.1.1-next.v.202608281122.0

package/src/snackbar/test/list.tsx

@@ -1,12 +1,19 @@
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import { click } from '@ariakit/test';
+import { useEffect, useState } from '@wordpress/element';
 import SnackbarList from '../list';
 
+jest.mock( '@wordpress/compose', () => ( {
+	...jest.requireActual( '@wordpress/compose' ),
+	useReducedMotion: () => false,
+} ) );
+
 window.scrollTo = jest.fn();
 
 describe( 'SnackbarList', () => {
 	afterEach( () => {
 		jest.resetAllMocks();
+		jest.useRealTimers();
 	} );
 
 	it( 'should get focus after a snackbar is dismissed', async () => {
@@ -36,4 +43,57 @@ describe( 'SnackbarList', () => {
 
 		expect( screen.getByTestId( 'snackbar-list' ) ).toHaveFocus();
 	} );
+
+	it( 'should restart auto-dismissal when a notice is replaced with the same ID', async () => {
+		jest.useFakeTimers();
+		const onRemove = jest.fn();
+		const notice = {
+			id: 'ID_1',
+			content: 'A collaborator joined.',
+		};
+
+		function RecreatedNotice() {
+			const [ notices, setNotices ] = useState( [ notice ] );
+			const [ shouldRecreate, setShouldRecreate ] = useState( false );
+
+			useEffect( () => {
+				if ( ! shouldRecreate ) {
+					return;
+				}
+
+				const timeoutHandle = setTimeout( () => {
+					setNotices( [ { ...notice } ] );
+					setShouldRecreate( false );
+				}, 50 );
+
+				return () => clearTimeout( timeoutHandle );
+			}, [ shouldRecreate ] );
+
+			return (
+				<SnackbarList
+					notices={ notices }
+					onRemove={ ( id ) => {
+						onRemove( id );
+						setNotices( [] );
+						setShouldRecreate( true );
+					} }
+				/>
+			);
+		}
+
+		render( <RecreatedNotice /> );
+
+		await act( async () => jest.advanceTimersByTime( 6000 ) );
+		expect( onRemove ).toHaveBeenCalledTimes( 1 );
+
+		// Recreate the notice before its 100ms exit animation completes.
+		await act( async () => jest.advanceTimersByTime( 50 ) );
+
+		expect( screen.getByTestId( 'snackbar' ) ).toHaveTextContent(
+			notice.content
+		);
+
+		await act( async () => jest.advanceTimersByTime( 6000 ) );
+		expect( onRemove ).toHaveBeenCalledTimes( 2 );
+	} );
 } );

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

@@ -3,7 +3,6 @@ import Spinner from '../';
 import { space } from '../../utils/space';
 
 const meta: Meta< typeof Spinner > = {
-	tags: [ 'manifest' ],
 	title: 'Components/Feedback/Spinner',
 	id: 'components-spinner',
 	component: Spinner,
@@ -13,8 +12,9 @@ const meta: Meta< typeof Spinner > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'recommended',
+			status: 'not-recommended',
 			whereUsed: 'global',
+			notes: 'Use [`Spinner`](?path=/docs/design-system-components-spinner--docs) from `@wordpress/ui` instead.',
 		},
 	},
 };

package/src/style.scss

@@ -21,6 +21,7 @@
 @use "./form-token-field/style.scss" as *;
 @use "./guide/style.scss" as *;
 @use "./higher-order/navigate-regions/style.scss" as *;
+@use "./input-control/style.scss" as *;
 @use "./menu-group/style.scss" as *;
 @use "./menu-item/style.scss" as *;
 @use "./menu-items-choice/style.scss" as *;

package/src/text-control/stories/index.story.tsx

@@ -3,7 +3,6 @@ import { useState } from '@wordpress/element';
 import TextControl from '..';
 
 const meta: Meta< typeof TextControl > = {
-	tags: [ 'manifest' ],
 	component: TextControl,
 	title: 'Components/Selection & Input/Common/TextControl',
 	id: 'components-textcontrol',
@@ -19,9 +18,9 @@ const meta: Meta< typeof TextControl > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'recommended',
+			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Prefer `InputControl` when placing buttons or icons in the prefix/suffix slots.',
+			notes: 'Use [`InputControl`](?path=/docs/design-system-components-form-inputcontrol--docs) from `@wordpress/ui` instead. See the [migration guide](?path=/docs/components-inputcontrol--migration-guide).',
 		},
 	},
 };

package/src/text-control/style.scss

@@ -24,7 +24,6 @@
 	background: $components-color-background;
 	color: $components-color-foreground;
 	@include input-control;
-	border-color: $components-color-border;
 
 	// Subtract 1px to account for the border, which isn't included on the element
 	// on newer components like InputControl, SelectControl, etc.

package/src/textarea-control/index.tsx

@@ -2,9 +2,9 @@ import clsx from 'clsx';
 import { useInstanceId } from '@wordpress/compose';
 import { forwardRef } from '@wordpress/element';
 import BaseControl from '../base-control';
-import { StyledTextarea } from './styles/textarea-control-styles';
 import type { TextareaControlProps } from './types';
 import type { WordPressComponentProps } from '../context';
+import styles from './style.module.scss';
 
 function UnforwardedTextareaControl(
 	props: WordPressComponentProps< TextareaControlProps, 'textarea', false >,
@@ -37,8 +37,11 @@ function UnforwardedTextareaControl(
 			help={ help }
 			className={ classes }
 		>
-			<StyledTextarea
-				className="components-textarea-control__input"
+			<textarea
+				className={ clsx(
+					'components-textarea-control__input',
+					styles.textarea
+				) }
 				id={ id }
 				rows={ rows }
 				onChange={ onChangeValue }

package/src/textarea-control/stories/index.story.tsx

@@ -3,7 +3,6 @@ import { useState } from '@wordpress/element';
 import TextareaControl from '..';
 
 const meta: Meta< typeof TextareaControl > = {
-	tags: [ 'manifest' ],
 	component: TextareaControl,
 	title: 'Components/Selection & Input/Common/TextareaControl',
 	id: 'components-textareacontrol',
@@ -22,9 +21,9 @@ const meta: Meta< typeof TextareaControl > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'recommended',
+			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by [`TextareaControl`](?path=/docs/design-system-components-form-primitives-textarea--docs) in `@wordpress/ui`, but continue using for now.',
+			notes: 'Use [`TextareaControl`](?path=/docs/design-system-components-form-textareacontrol--docs) from `@wordpress/ui` instead. See the [migration guide](?path=/docs/components-textareacontrol--migration-guide).',
 		},
 	},
 };

package/src/textarea-control/stories/migration-guide.mdx

@@ -0,0 +1,79 @@
+import { Markdown, Meta } from '@storybook/addon-docs/blocks';
+import * as TextareaControlStories from './index.story';
+
+<Meta of={ TextareaControlStories } name="Migration Guide" />
+
+# TextareaControl migration guide
+
+Migrate from [`TextareaControl`](?path=/docs/components-textareacontrol--docs) in `@wordpress/components` to [`TextareaControl`](?path=/docs/design-system-components-form-textareacontrol--docs) in `@wordpress/ui`.
+
+## Basic migration
+
+Update the import and swap the callback prop:
+
+```jsx
+// Before
+import { TextareaControl } from '@wordpress/components';
+
+<TextareaControl
+	label="Description"
+	value={ value }
+	onChange={ setValue }
+	help="Enter a short description."
+/>;
+
+// After
+import { TextareaControl } from '@wordpress/ui';
+
+<TextareaControl
+	label="Description"
+	value={ value }
+	onValueChange={ setValue }
+	description="Enter a short description."
+/>;
+```
+
+## Prop mapping
+
+<Markdown>{ `
+| \`@wordpress/components\` | \`@wordpress/ui\` | Notes |
+| --- | --- | --- |
+| \`onChange\` | \`onValueChange\` | Receives the next string value on every change. |
+| \`help\` | \`description\` | Use plain text only. |
+| \`help\` with links or other markup | \`details\` | Use when the help text needs semantic content. |
+| \`hideLabelFromVision\` | \`hideLabelFromVision\` | Same behavior. |
+| \`rows\` | \`rows\` | Same default (\`4\`). |
+` }</Markdown>
+
+## Labels
+
+`TextareaControl` requires a `label` prop with a plain `string` value. The legacy component treats `label` as optional.
+
+When the visible label text already exists elsewhere, pass a descriptive string and hide it visually:
+
+```jsx
+<TextareaControl
+	label="Notes"
+	hideLabelFromVision
+	value={ value }
+	onValueChange={ setValue }
+/>;
+```
+
+When the label is not a plain string, or you need a custom layout, compose the [`Textarea`](?path=/docs/design-system-components-form-primitives-textarea--docs) and [`Field`](?path=/docs/design-system-components-form-primitives-field--docs) primitives instead of `TextareaControl`:
+
+```jsx
+import { Field, Textarea } from '@wordpress/ui';
+
+<Field.Root>
+	<Field.Label>
+		Custom <strong>label</strong> content
+	</Field.Label>
+	<Textarea
+		value={ value }
+		onValueChange={ setValue }
+	/>
+</Field.Root>
+```
+
+See the [`Field` stories](?path=/docs/design-system-components-form-primitives-field--docs) for other association patterns, such as external labels with `aria-labelledby`.

package/src/textarea-control/style.module.scss

@@ -0,0 +1,56 @@
+@use "@wordpress/base-styles/mixins" as *;
+@use "../utils/theme-variables" as *;
+
+.textarea {
+	width: 100%;
+	display: block;
+	background: $components-color-background;
+	color: $components-color-foreground;
+	/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Preserve Emotion `resize: vertical`; `block` is not equivalent in vertical writing modes. */
+	resize: vertical;
+
+	@include input-control;
+
+	// Vertical padding is to match the standard 40px control height when rows=1,
+	// in conjunction with the 20px line-height.
+	// "Standard" metrics are 10px 12px, but subtracts 1px each to account for the border width.
+	line-height: 20px;
+	padding: 9px 11px;
+
+	// Matching the 20px line-height + the 9px top and bottom padding.
+	min-height: 38px;
+
+	&:disabled {
+		background: $components-color-gray-100;
+		border-color: $components-color-gray-400;
+		color: $components-color-gray-600;
+	}
+
+	// Use opacity to work in various editor styles.
+	// Keep the legacy vendor placeholders from the Emotion styles for parity
+	&::-webkit-input-placeholder {
+		color: $components-color-dark-gray-placeholder;
+	}
+
+	&::-moz-placeholder {
+		color: $components-color-dark-gray-placeholder;
+	}
+
+	&:-ms-input-placeholder {
+		color: $components-color-dark-gray-placeholder;
+	}
+
+	:global(.is-dark-theme) & {
+		&::-webkit-input-placeholder {
+			color: $components-color-light-gray-placeholder;
+		}
+
+		&::-moz-placeholder {
+			color: $components-color-light-gray-placeholder;
+		}
+
+		&:-ms-input-placeholder {
+			color: $components-color-light-gray-placeholder;
+		}
+	}
+}

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -1,41 +1,15 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ToggleGroupControl controlled should render correctly with icons 1`] = `
-.emotion-0 {
-  font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
-  font-size: 13px;
-  box-sizing: border-box;
-}
-
-.emotion-0 *,
-.emotion-0 *::before,
-.emotion-0 *::after {
-  box-sizing: inherit;
-}
-
-.components-panel__row .emotion-2 {
-  margin-bottom: inherit;
-}
-
-.emotion-4 {
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.4;
-  text-transform: uppercase;
-  display: block;
-  margin-bottom: calc(4px * 2);
-  padding: 0;
-}
-
 <div>
   <div
-    class="components-base-control emotion-0 emotion-1"
+    class="style-wrapper components-base-control"
   >
     <div
-      class="components-base-control__field emotion-2 emotion-3"
+      class="style-field components-base-control__field"
     >
       <label
-        class="components-base-control__label emotion-4 emotion-5"
+        class="style-label components-base-control__label"
         for="wp-components-base-control-19"
       >
         Test Toggle Group Control
@@ -132,41 +106,15 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 `;
 
 exports[`ToggleGroupControl controlled should render correctly with text options 1`] = `
-.emotion-0 {
-  font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
-  font-size: 13px;
-  box-sizing: border-box;
-}
-
-.emotion-0 *,
-.emotion-0 *::before,
-.emotion-0 *::after {
-  box-sizing: inherit;
-}
-
-.components-panel__row .emotion-2 {
-  margin-bottom: inherit;
-}
-
-.emotion-4 {
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.4;
-  text-transform: uppercase;
-  display: block;
-  margin-bottom: calc(4px * 2);
-  padding: 0;
-}
-
 <div>
   <div
-    class="components-base-control emotion-0 emotion-1"
+    class="style-wrapper components-base-control"
   >
     <div
-      class="components-base-control__field emotion-2 emotion-3"
+      class="style-field components-base-control__field"
     >
       <label
-        class="components-base-control__label emotion-4 emotion-5"
+        class="style-label components-base-control__label"
         for="wp-components-base-control-18"
       >
         Test Toggle Group Control
@@ -238,41 +186,15 @@ exports[`ToggleGroupControl controlled should render correctly with text options
 `;
 
 exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] = `
-.emotion-0 {
-  font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
-  font-size: 13px;
-  box-sizing: border-box;
-}
-
-.emotion-0 *,
-.emotion-0 *::before,
-.emotion-0 *::after {
-  box-sizing: inherit;
-}
-
-.components-panel__row .emotion-2 {
-  margin-bottom: inherit;
-}
-
-.emotion-4 {
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.4;
-  text-transform: uppercase;
-  display: block;
-  margin-bottom: calc(4px * 2);
-  padding: 0;
-}
-
 <div>
   <div
-    class="components-base-control emotion-0 emotion-1"
+    class="style-wrapper components-base-control"
   >
     <div
-      class="components-base-control__field emotion-2 emotion-3"
+      class="style-field components-base-control__field"
     >
       <label
-        class="components-base-control__label emotion-4 emotion-5"
+        class="style-label components-base-control__label"
         for="wp-components-base-control-1"
       >
         Test Toggle Group Control
@@ -363,41 +285,15 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 `;
 
 exports[`ToggleGroupControl uncontrolled should render correctly with text options 1`] = `
-.emotion-0 {
-  font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
-  font-size: 13px;
-  box-sizing: border-box;
-}
-
-.emotion-0 *,
-.emotion-0 *::before,
-.emotion-0 *::after {
-  box-sizing: inherit;
-}
-
-.components-panel__row .emotion-2 {
-  margin-bottom: inherit;
-}
-
-.emotion-4 {
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.4;
-  text-transform: uppercase;
-  display: block;
-  margin-bottom: calc(4px * 2);
-  padding: 0;
-}
-
 <div>
   <div
-    class="components-base-control emotion-0 emotion-1"
+    class="style-wrapper components-base-control"
   >
     <div
-      class="components-base-control__field emotion-2 emotion-3"
+      class="style-field components-base-control__field"
     >
       <label
-        class="components-base-control__label emotion-4 emotion-5"
+        class="style-label components-base-control__label"
         for="wp-components-base-control-0"
       >
         Test Toggle Group Control

package/src/toggle-group-control/toggle-group-control/style.module.scss

@@ -52,8 +52,6 @@
 	&:focus-within {
 		z-index: 1;
 		@include mixins.outset-ring__focus();
-		// Preserve validated-control accent overrides.
-		outline-color: $components-color-focus;
 	}
 }
 

package/src/toggle-group-control/toggle-group-control-option-base/style.module.scss

@@ -59,8 +59,6 @@
 .is-deselectable {
 	&:focus {
 		@include mixins.outset-ring__focus();
-		// Preserve validated-control accent overrides.
-		outline-color: $components-color-focus;
 
 		// Hide overlapping border.
 		&[aria-pressed="false"] {

package/src/tools-panel/test/index.tsx

@@ -1153,6 +1153,45 @@ describe( 'ToolsPanel', () => {
 			expect( altControlProps.onDeselect ).not.toHaveBeenCalled();
 		} );
 
+		it( 'should not contain menu items for an item belonging to another panel', async () => {
+			// A fill can mount after the panel it is rendered into has already
+			// settled. An item whose `panelId` doesn't match must stay out of
+			// that panel's menu entirely, including out of the value flagging
+			// that populates it.
+			const Panel = ( { withForeign }: { withForeign: boolean } ) => (
+				<ToolsPanel { ...defaultProps } panelId="1234">
+					<ToolsPanelItem
+						label="Mine"
+						panelId="1234"
+						isShownByDefault
+						hasValue={ () => false }
+					>
+						<div>My control</div>
+					</ToolsPanelItem>
+					{ withForeign && (
+						<ToolsPanelItem
+							label="Foreign"
+							panelId="9999"
+							hasValue={ () => true }
+						>
+							<div>Foreign control</div>
+						</ToolsPanelItem>
+					) }
+				</ToolsPanel>
+			);
+
+			// Let the panel settle with only its own item registered, then
+			// bring in an item that belongs to a different panel.
+			const { rerender } = render( <Panel withForeign={ false } /> );
+			rerender( <Panel withForeign /> );
+
+			await openDropdownMenu();
+
+			expect(
+				screen.queryByRole( 'menuitemcheckbox', { name: /Foreign/i } )
+			).not.toBeInTheDocument();
+		} );
+
 		it( 'should not contain orphaned menu items when panelId changes', async () => {
 			// As fills and the panel can update independently this aims to
 			// test that no orphaned items appear registered in the panel menu.

package/src/tools-panel/tools-panel-item/hook.ts

@@ -113,13 +113,16 @@ export function useToolsPanelItem(
 	const isValueSet = hasValue();
 	// Notify the panel when an item's value has changed except for optional
 	// items without value because the item should not cause itself to hide.
+	// Items that don't belong to the panel on screen stay silent, otherwise
+	// they would leave an orphaned entry in its menu.
 	useEffect( () => {
-		if ( ! isShownByDefault && ! isValueSet ) {
+		if ( ! hasMatchingPanel || ( ! isShownByDefault && ! isValueSet ) ) {
 			return;
 		}
 
 		flagItemCustomization( isValueSet, label, menuGroup );
 	}, [
+		hasMatchingPanel,
 		isValueSet,
 		menuGroup,
 		label,

package/src/utils/config-values.js

@@ -20,9 +20,6 @@ const CONTROL_PROPS = {
 // TypeScript type declarations.
 export default Object.assign( {}, CONTROL_PROPS, {
 	colorDivider: 'rgba(0, 0, 0, 0.1)',
-	colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',
-	colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',
-	colorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',
 	elevationIntensity: 1,
 	radiusXSmall: '1px',
 	radiusSmall: '2px',

package/src/utils/theme-variables.scss

@@ -37,4 +37,3 @@ $components-color-light-gray-placeholder: color-mix(in srgb, $components-color-b
 // Semantic aliases (prefer these over raw gray values when applicable).
 $components-color-border: #{ $components-color-gray-600 };
 $components-color-disabled: #{ $components-color-gray-600 };
-$components-color-focus: var(--wp-components-color-accent, var(--wpds-color-stroke-focus));

package/src/validated-form-controls/components/content-editable-control.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { forwardRef, useRef } from '@wordpress/element';
-import { ControlWithError } from '../control-with-error';
+import { ControlWithError } from '@wordpress/ui';
 import type { ValidatedControlProps } from './types';
 import ContentEditableControl from '../../content-editable-control';
 
@@ -34,6 +34,7 @@ const UnforwardedValidatedContentEditableControl = (
 	return (
 		<div className="components-validated-control__wrapper-with-error-delegate">
 			<ControlWithError
+				className="components-validated-control"
 				required={ required }
 				markWhenOptional={ markWhenOptional }
 				customValidity={ customValidity }

package/src/validated-form-controls/components/custom-select-control.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, useRef } from '@wordpress/element';
-import { ControlWithError } from '../control-with-error';
+import { ControlWithError } from '@wordpress/ui';
 import type { ValidatedControlProps } from './types';
 import CustomSelectControl from '../../custom-select-control';
 
@@ -21,6 +21,7 @@ const UnforwardedValidatedCustomSelectControl = (
 			ref={ forwardedRef }
 		>
 			<ControlWithError
+				className="components-validated-control"
 				required={ required }
 				markWhenOptional={ markWhenOptional }
 				customValidity={ customValidity }

package/src/validated-form-controls/components/index.ts

@@ -1,9 +1,5 @@
-export * from './combobox-control';
 export * from './custom-select-control';
-export * from './form-token-field';
 export * from './input-control';
 export * from './range-control';
 export * from './content-editable-control';
 export * from './textarea-control';
-export * from './toggle-control';
-export * from './toggle-group-control';

package/src/validated-form-controls/components/input-control.tsx

@@ -1,6 +1,7 @@
 import { forwardRef, useRef } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
-import { ControlWithError } from '../control-with-error';
+import deprecated from '@wordpress/deprecated';
+import { ControlWithError } from '@wordpress/ui';
 import type { ValidatedControlProps } from './types';
 import InputControl from '../../input-control';
 
@@ -13,11 +14,18 @@ const UnforwardedValidatedInputControl = (
 	}: React.ComponentProps< typeof InputControl > & ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
+	deprecated( 'wp.components.privateApis.ValidatedInputControl', {
+		since: '7.2',
+		alternative: 'ValidatedInputControl from @wordpress/ui',
+		hint: 'This private API will be completely removed within a few Gutenberg plugin releases.',
+	} );
+
 	const validityTargetRef = useRef< HTMLInputElement >( null );
 	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
 
 	return (
 		<ControlWithError
+			className="components-validated-control"
 			required={ required }
 			markWhenOptional={ markWhenOptional }
 			customValidity={ customValidity }