@wordpress/components 30.9.0 → 31.0.0

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

@@ -12,7 +12,6 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { useDebounce, useInstanceId, usePrevious } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 import isShallowEqual from '@wordpress/is-shallow-equal';
-import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -27,7 +26,6 @@ import {
 	StyledHelp,
 	StyledLabel,
 } from '../base-control/styles/base-control-styles';
-import { Spacer } from '../spacer';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
@@ -75,18 +73,9 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		__experimentalShowHowTo = true,
 		__next40pxDefaultSize = false,
 		__experimentalAutoSelectFirstMatch = false,
-		__nextHasNoMarginBottom = false,
 		tokenizeOnBlur = false,
 	} = useDeprecated36pxDefaultSizeProp< FormTokenFieldProps >( props );
 
-	if ( ! __nextHasNoMarginBottom ) {
-		deprecated( 'Bottom margin styles for wp.components.FormTokenField', {
-			since: '6.7',
-			version: '7.0',
-			hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
-		} );
-	}
-
 	maybeWarnDeprecated36pxSize( {
 		componentName: 'FormTokenField',
 		size: undefined,
@@ -760,12 +749,11 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 					/>
 				) }
 			</div>
-			{ ! __nextHasNoMarginBottom && <Spacer marginBottom={ 2 } /> }
 			{ __experimentalShowHowTo && (
 				<StyledHelp
 					id={ `components-form-token-suggestions-howto-${ instanceId }` }
 					className="components-form-token-field__help"
-					__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+					__nextHasNoMarginBottom
 				>
 					{ tokenizeOnSpace
 						? __(

package/src/form-token-field/stories/index.story.tsx

@@ -63,7 +63,6 @@ export const Default: StoryFn< typeof FormTokenField > = DefaultTemplate.bind(
 Default.args = {
 	label: 'Type a continent',
 	suggestions: continents,
-	__nextHasNoMarginBottom: true,
 	__next40pxDefaultSize: true,
 };
 
@@ -102,7 +101,6 @@ export const Async: StoryFn< typeof FormTokenField > = ( {
 Async.args = {
 	label: 'Type a continent',
 	suggestions: continents,
-	__nextHasNoMarginBottom: true,
 	__next40pxDefaultSize: true,
 };
 

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

@@ -48,7 +48,6 @@ const FormTokenFieldWithState = ( {
 				setSelectedValue( tokens );
 				onChange?.( tokens );
 			} }
-			__nextHasNoMarginBottom
 		/>
 	);
 };

package/src/form-token-field/types.ts

@@ -178,12 +178,6 @@ export interface FormTokenFieldProps
 	 * Custom renderer for suggestions.
 	 */
 	__experimentalRenderItem?: ( args: { item: string } ) => ReactNode;
-	/**
-	 * Start opting into the new margin-free styles that will become the default in a future version.
-	 *
-	 * @default false
-	 */
-	__nextHasNoMarginBottom?: boolean;
 	/**
 	 * If true, add any incompleteTokenValue as a new token when the field loses focus.
 	 *

package/src/guide/style.scss

@@ -59,7 +59,7 @@
 		height: $button-size;
 		justify-content: center;
 		margin: 0 0 $grid-unit-30 0;
-		padding: 0 $grid-unit-40;
+		padding: 0 $grid-unit-30;
 		position: relative;
 		width: 100%;
 	}
@@ -103,11 +103,11 @@
 	}
 
 	&.components-guide__back-button {
-		left: $grid-unit-40;
+		left: $grid-unit-30;
 	}
 
 	&.components-guide__forward-button,
 	&.components-guide__finish-button {
-		right: $grid-unit-40;
+		right: $grid-unit-30;
 	}
 }

package/src/menu/styles.ts

@@ -25,7 +25,7 @@ const ANIMATION_PARAMS = {
 };
 
 const CONTENT_WRAPPER_PADDING = space( 1 );
-const ITEM_PADDING_BLOCK = space( 2 );
+const ITEM_PADDING_BLOCK = space( 1 );
 const ITEM_PADDING_INLINE = space( 3 );
 
 // TODO:
@@ -152,7 +152,7 @@ const baseItem = css`
 	all: unset;
 
 	position: relative;
-	min-height: ${ space( 10 ) };
+	min-height: ${ space( 8 ) };
 	box-sizing: border-box;
 
 	/* Occupy the width of all grid columns (ie. full width) */

package/src/menu-item/index.tsx

@@ -56,7 +56,7 @@ function UnforwardedMenuItem(
 
 	return (
 		<Button
-			__next40pxDefaultSize
+			size="compact"
 			ref={ ref }
 			// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
 			aria-checked={

package/src/menu-item/test/__snapshots__/index.js.snap

@@ -3,7 +3,7 @@
 exports[`MenuItem should match snapshot when all props provided 1`] = `
 <button
   aria-checked="true"
-  class="components-button components-menu-item__button my-class is-next-40px-default-size"
+  class="components-button components-menu-item__button my-class is-compact"
   role="menuitemcheckbox"
   type="button"
 >
@@ -35,7 +35,7 @@ exports[`MenuItem should match snapshot when all props provided 1`] = `
 
 exports[`MenuItem should match snapshot when info is provided 1`] = `
 <button
-  class="components-button components-menu-item__button is-next-40px-default-size"
+  class="components-button components-menu-item__button is-compact"
   role="menuitem"
   type="button"
 >
@@ -62,7 +62,7 @@ exports[`MenuItem should match snapshot when info is provided 1`] = `
 
 exports[`MenuItem should match snapshot when isSelected and role are optionally provided 1`] = `
 <button
-  class="components-button components-menu-item__button my-class is-next-40px-default-size"
+  class="components-button components-menu-item__button my-class is-compact"
   role="menuitem"
   type="button"
 >
@@ -94,7 +94,7 @@ exports[`MenuItem should match snapshot when isSelected and role are optionally
 
 exports[`MenuItem should match snapshot when only label provided 1`] = `
 <button
-  class="components-button components-menu-item__button is-next-40px-default-size"
+  class="components-button components-menu-item__button is-compact"
   role="menuitem"
   type="button"
 >

package/src/modal/style.scss

@@ -109,10 +109,10 @@
 
 	&.is-full-screen {
 		// When full screen, make sure the children container is full height.
-		.components-modal__content {
+		:where(.components-modal__content) {
 			display: flex;
 			// If this container is scrollable, bottom padding won't apply so we use margin instead.
-			margin-bottom: $grid-unit-40;
+			margin-bottom: $grid-unit-30;
 			padding-bottom: 0;
 
 			> :last-child {
@@ -152,7 +152,7 @@
 .components-modal__header {
 	box-sizing: border-box;
 	border-bottom: $border-width solid transparent;
-	padding: $grid-unit-30 $grid-unit-40 $grid-unit-10;
+	padding: $grid-unit-30;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
@@ -206,12 +206,12 @@
 	flex: 1;
 	margin-top: $header-height + $grid-unit-10;
 	// Small top padding required to avoid cutting off the visible outline when the first child element is focusable.
-	padding: $grid-unit-05 $grid-unit-40 $grid-unit-40;
+	padding: $grid-unit-05 $grid-unit-30 $grid-unit-30;
 	overflow: auto;
 
 	&.hide-header {
 		margin-top: 0;
-		padding-top: $grid-unit-40;
+		padding-top: $grid-unit-30;
 	}
 
 	&.is-scrollable:focus-visible {

package/src/notice/index.tsx

@@ -111,53 +111,60 @@ function Notice( {
 			<VisuallyHidden>{ getStatusLabel( status ) }</VisuallyHidden>
 			<div className="components-notice__content">
 				{ children }
-				<div className="components-notice__actions">
-					{ actions.map(
-						(
-							{
-								className: buttonCustomClasses,
-								label,
-								isPrimary,
-								variant,
-								noDefaultClasses = false,
-								onClick,
-								url,
-							}: 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';
-							}
+				{ actions.length > 0 && (
+					<div className="components-notice__actions">
+						{ actions.map(
+							(
+								{
+									className: buttonCustomClasses,
+									label,
+									isPrimary,
+									variant,
+									noDefaultClasses = false,
+									onClick,
+									url,
+								}: 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={ url ? undefined : onClick }
-									className={ clsx(
-										'components-notice__action',
-										buttonCustomClasses
-									) }
-								>
-									{ label }
-								</Button>
-							);
-						}
-					) }
-				</div>
+								return (
+									<Button
+										__next40pxDefaultSize
+										key={ index }
+										href={ url }
+										variant={ computedVariant }
+										onClick={ url ? undefined : onClick }
+										className={ clsx(
+											'components-notice__action',
+											buttonCustomClasses
+										) }
+									>
+										{ label }
+									</Button>
+								);
+							}
+						) }
+					</div>
+				) }
 			</div>
 			{ isDismissible && (
 				<Button

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

@@ -89,7 +89,7 @@ WithActions.args = {
 };
 
 export const NoticeListSubcomponent: StoryFn< typeof NoticeList > = () => {
-	const exampleNotices = [
+	const exampleNotices: NoticeListProps[ 'notices' ] = [
 		{
 			id: 'second-notice',
 			content: 'second notice content',
@@ -97,6 +97,22 @@ export const NoticeListSubcomponent: StoryFn< typeof NoticeList > = () => {
 		{
 			id: 'first-notice',
 			content: 'first notice content',
+			actions: [
+				{
+					label: 'Click me!',
+					onClick: () => {},
+					variant: 'primary',
+				},
+				{
+					label: 'Or click me instead!',
+					onClick: () => {},
+				},
+				{
+					label: 'Or visit a link for more info',
+					url: 'https://wordpress.org',
+					variant: 'link',
+				},
+			],
 		},
 	];
 	const [ notices, setNotices ] = useState( exampleNotices );

package/src/notice/style.scss

@@ -41,20 +41,9 @@
 .components-notice__actions {
 	display: flex;
 	flex-wrap: wrap;
-}
-
-.components-notice__action.components-button {
-	&,
-	&.is-link {
-		margin-left: $grid-unit-15;
-	}
-	&.is-secondary {
-		vertical-align: initial;
-	}
-
-	// When it has better support, this can be replaced
-	// with column-gap since these are flex items.
-	margin-right: $grid-unit-10;
+	align-items: center;
+	gap: $grid-unit-15;
+	margin-top: $grid-unit-15;
 }
 
 .components-notice__dismiss {
@@ -86,10 +75,4 @@
 		margin-bottom: $grid-unit-15;
 		line-height: 2;
 	}
-
-	.components-notice__action.components-button {
-		display: block;
-		margin-left: 0;
-		margin-top: $grid-unit-10;
-	}
 }

package/src/query-controls/index.tsx

@@ -154,7 +154,6 @@ export function QueryControls( {
 					props.onCategoryChange && (
 						<FormTokenField
 							__next40pxDefaultSize
-							__nextHasNoMarginBottom
 							key="query-controls-categories-select"
 							label={ __( 'Categories' ) }
 							value={

package/src/snackbar/index.tsx

@@ -27,7 +27,7 @@ import type { SnackbarProps } from './types';
 import type { NoticeAction } from '../notice/types';
 import type { WordPressComponentProps } from '../context';
 
-const NOTICE_TIMEOUT = 10000;
+const NOTICE_TIMEOUT = 6000;
 
 /**
  * Custom hook which announces the message with the given politeness, if a

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

@@ -10,37 +10,28 @@ import { forwardRef, useRef } from '@wordpress/element';
 import { ControlWithError } from '../control-with-error';
 import type { ValidatedControlProps } from './types';
 import CheckboxControl from '../../checkbox-control';
-import type { CheckboxControlProps } from '../../checkbox-control/types';
-
-type Value = CheckboxControlProps[ 'checked' ];
 
 const UnforwardedValidatedCheckboxControl = (
 	{
 		required,
-		onValidate,
 		customValidity,
-		onChange,
 		markWhenOptional,
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof CheckboxControl >,
 		'__nextHasNoMarginBottom'
 	> &
-		ValidatedControlProps< Value >,
+		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLDivElement >( null );
 	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
-	const valueRef = useRef< Value >( restProps.checked );
 
 	return (
 		<ControlWithError
 			required={ required }
 			markWhenOptional={ markWhenOptional }
 			ref={ mergedRefs }
-			onValidate={ () => {
-				return onValidate?.( valueRef.current );
-			} }
 			customValidity={ customValidity }
 			getValidityTarget={ () =>
 				validityTargetRef.current?.querySelector< HTMLInputElement >(
@@ -50,10 +41,6 @@ const UnforwardedValidatedCheckboxControl = (
 		>
 			<CheckboxControl
 				__nextHasNoMarginBottom
-				onChange={ ( value ) => {
-					valueRef.current = value;
-					onChange?.( value );
-				} }
 				// TODO: Upstream limitation - CheckboxControl doesn't support uncontrolled mode, visually.
 				{ ...restProps }
 			/>

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

@@ -10,28 +10,22 @@ import { forwardRef, useEffect, useRef } from '@wordpress/element';
 import { ControlWithError } from '../control-with-error';
 import type { ValidatedControlProps } from './types';
 import ComboboxControl from '../../combobox-control';
-import type { ComboboxControlProps } from '../../combobox-control/types';
-
-type Value = ComboboxControlProps[ 'value' ];
 
 const UnforwardedValidatedComboboxControl = (
 	{
 		required,
-		onValidate,
 		customValidity,
-		onChange,
 		markWhenOptional,
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof ComboboxControl >,
 		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
 	> &
-		ValidatedControlProps< Value >,
+		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
 	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
-	const valueRef = useRef< Value >( restProps.value );
 
 	// TODO: Upstream limitation - The `required` attribute is not passed down to the input,
 	// so we need to set it manually.
@@ -51,9 +45,6 @@ const UnforwardedValidatedComboboxControl = (
 			required={ required }
 			markWhenOptional={ markWhenOptional }
 			ref={ mergedRefs }
-			onValidate={ () => {
-				return onValidate?.( valueRef.current );
-			} }
 			customValidity={ customValidity }
 			getValidityTarget={ () =>
 				validityTargetRef.current?.querySelector< HTMLInputElement >(
@@ -65,10 +56,6 @@ const UnforwardedValidatedComboboxControl = (
 				__nextHasNoMarginBottom
 				__next40pxDefaultSize
 				{ ...restProps }
-				onChange={ ( value ) => {
-					valueRef.current = value;
-					onChange?.( value );
-				} }
 			/>
 		</ControlWithError>
 	);

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

@@ -9,32 +9,21 @@ import { forwardRef, useRef } from '@wordpress/element';
 import { ControlWithError } from '../control-with-error';
 import type { ValidatedControlProps } from './types';
 import CustomSelectControl from '../../custom-select-control';
-import type {
-	CustomSelectOption,
-	CustomSelectProps,
-} from '../../custom-select-control/types';
-
-type CustomSelectControlProps = CustomSelectProps< CustomSelectOption >;
-
-type Value = CustomSelectControlProps[ 'value' ];
 
 const UnforwardedValidatedCustomSelectControl = (
 	{
 		required,
-		onValidate,
 		customValidity,
-		onChange,
 		markWhenOptional,
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof CustomSelectControl >,
 		'__next40pxDefaultSize'
 	> &
-		ValidatedControlProps< Value >,
+		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLDivElement >
 ) => {
 	const validityTargetRef = useRef< HTMLSelectElement >( null );
-	const valueRef = useRef< Value >( restProps.value );
 
 	return (
 		<div
@@ -44,9 +33,6 @@ const UnforwardedValidatedCustomSelectControl = (
 			<ControlWithError
 				required={ required }
 				markWhenOptional={ markWhenOptional }
-				onValidate={ () => {
-					return onValidate?.( valueRef.current );
-				} }
 				customValidity={ customValidity }
 				getValidityTarget={ () => validityTargetRef.current }
 			>
@@ -54,10 +40,6 @@ const UnforwardedValidatedCustomSelectControl = (
 					// TODO: Upstream limitation - Required isn't passed down correctly,
 					// so it needs to be set on a delegate element.
 					__next40pxDefaultSize
-					onChange={ ( value ) => {
-						valueRef.current = value.selectedItem;
-						onChange?.( value );
-					} }
 					{ ...restProps }
 				/>
 			</ControlWithError>

package/src/validated-form-controls/components/form-token-field.tsx

@@ -9,27 +9,21 @@ import { forwardRef, useRef } from '@wordpress/element';
 import { ControlWithError } from '../control-with-error';
 import type { ValidatedControlProps } from './types';
 import { FormTokenField } from '../../form-token-field';
-import type { FormTokenFieldProps } from '../../form-token-field/types';
-
-type Value = FormTokenFieldProps[ 'value' ];
 
 const UnforwardedValidatedFormTokenField = (
 	{
 		required,
-		onValidate,
 		customValidity,
-		onChange,
 		markWhenOptional,
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof FormTokenField >,
-		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
+		'__next40pxDefaultSize'
 	> &
-		ValidatedControlProps< FormTokenFieldProps[ 'value' ] >,
+		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLDivElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
-	const valueRef = useRef< Value >( restProps.value );
 
 	return (
 		<div
@@ -39,21 +33,10 @@ const UnforwardedValidatedFormTokenField = (
 			<ControlWithError
 				required={ required }
 				markWhenOptional={ markWhenOptional }
-				onValidate={ () => {
-					return onValidate?.( valueRef.current );
-				} }
 				customValidity={ customValidity }
 				getValidityTarget={ () => validityTargetRef.current }
 			>
-				<FormTokenField
-					__next40pxDefaultSize
-					__nextHasNoMarginBottom
-					{ ...restProps }
-					onChange={ ( value, ...args ) => {
-						valueRef.current = value;
-						onChange?.( value, ...args );
-					} }
-				/>
+				<FormTokenField __next40pxDefaultSize { ...restProps } />
 			</ControlWithError>
 			<input
 				className="components-validated-control__error-delegate"
@@ -61,7 +44,7 @@ const UnforwardedValidatedFormTokenField = (
 				ref={ validityTargetRef }
 				required={ required }
 				value={
-					valueRef.current && valueRef.current.length > 0
+					restProps.value && restProps.value.length > 0
 						? 'hasvalue'
 						: ''
 				}

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

@@ -10,46 +10,33 @@ import { useMergeRefs } from '@wordpress/compose';
 import { ControlWithError } from '../control-with-error';
 import type { ValidatedControlProps } from './types';
 import InputControl from '../../input-control';
-import type { InputControlProps } from '../../input-control/types';
-
-type Value = InputControlProps[ 'value' ];
 
 const UnforwardedValidatedInputControl = (
 	{
 		required,
-		onValidate,
 		customValidity,
-		onChange,
 		markWhenOptional,
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof InputControl >,
 		'__next40pxDefaultSize'
 	> &
-		ValidatedControlProps< InputControlProps[ 'value' ] >,
+		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
 	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
-	const valueRef = useRef< Value >( restProps.value );
 
 	return (
 		<ControlWithError
 			required={ required }
 			markWhenOptional={ markWhenOptional }
-			onValidate={ () => {
-				return onValidate?.( valueRef.current );
-			} }
 			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
 			<InputControl
 				__next40pxDefaultSize
 				ref={ mergedRefs }
-				onChange={ ( value, ...args ) => {
-					valueRef.current = value;
-					onChange?.( value, ...args );
-				} }
 				{ ...restProps }
 			/>
 		</ControlWithError>