@wordpress/components 36.0.1 → 37.0.0

package/src/font-size-picker/index.tsx

@@ -27,7 +27,6 @@ import { Container, Header, HeaderLabel, HeaderToggle } from './styles';
 import { Spacer } from '../spacer';
 import FontSizePickerSelect from './font-size-picker-select';
 import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
 
@@ -38,12 +37,10 @@ const UnforwardedFontSizePicker = (
 	ref: ForwardedRef< any >
 ) => {
 	const {
-		__next40pxDefaultSize = false,
 		fallbackFontSize,
 		fontSizes = [],
 		disableCustomFontSizes = false,
 		onChange,
-		size = 'default',
 		units: unitsProp = DEFAULT_UNITS,
 		value,
 		valueMode = 'literal',
@@ -117,12 +114,6 @@ const UnforwardedFontSizePicker = (
 		!! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit );
 	const isDisabled = value === undefined;
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'FontSizePicker',
-		__next40pxDefaultSize,
-		size,
-	} );
-
 	return (
 		<Container
 			ref={ ref }
@@ -155,12 +146,10 @@ const UnforwardedFontSizePicker = (
 			<div>
 				{ currentPickerType === 'select' && (
 					<FontSizePickerSelect
-						__next40pxDefaultSize={ __next40pxDefaultSize }
 						fontSizes={ fontSizes }
 						value={ value }
 						valueMode={ valueMode }
 						disableCustomFontSizes={ disableCustomFontSizes }
-						size={ size }
 						onChange={ ( newValue, selectedItem ) => {
 							if ( newValue === undefined ) {
 								onChange?.( undefined, selectedItem );
@@ -179,8 +168,6 @@ const UnforwardedFontSizePicker = (
 						fontSizes={ fontSizes }
 						value={ value }
 						valueMode={ valueMode }
-						__next40pxDefaultSize={ __next40pxDefaultSize }
-						size={ size }
 						onChange={ ( newValue, selectedItem ) => {
 							if ( newValue === undefined ) {
 								onChange?.( undefined, selectedItem );
@@ -197,8 +184,6 @@ const UnforwardedFontSizePicker = (
 					<Flex className="components-font-size-picker__custom-size-control">
 						<FlexItem isBlock>
 							<UnitControl
-								__next40pxDefaultSize={ __next40pxDefaultSize }
-								__shouldNotWarnDeprecated36pxSize
 								label={ __( 'Font size' ) }
 								labelPosition="top"
 								hideLabelFromVision
@@ -226,7 +211,6 @@ const UnforwardedFontSizePicker = (
 										);
 									}
 								} }
-								size={ size }
 								units={ hasUnits ? units : [] }
 								min={ 0 }
 							/>
@@ -235,10 +219,6 @@ const UnforwardedFontSizePicker = (
 							<FlexItem isBlock>
 								<Spacer marginX={ 2 } marginBottom={ 0 }>
 									<RangeControl
-										__next40pxDefaultSize={
-											__next40pxDefaultSize
-										}
-										__shouldNotWarnDeprecated36pxSize
 										className="components-font-size-picker__custom-input"
 										label={ __( 'Font size' ) }
 										hideLabelFromVision
@@ -276,12 +256,7 @@ const UnforwardedFontSizePicker = (
 									} }
 									variant="secondary"
 									__next40pxDefaultSize
-									size={
-										size === '__unstable-large' ||
-										props.__next40pxDefaultSize
-											? 'default'
-											: 'small'
-									}
+									size="default"
 								>
 									{ __( 'Reset' ) }
 								</Button>

package/src/font-size-picker/stories/e2e/index.story.tsx

@@ -25,7 +25,6 @@ const FontSizePickerWithState: StoryFn< typeof FontSizePicker > = ( {
 	const [ fontSize, setFontSize ] = useState( value );
 	return (
 		<FontSizePicker
-			__next40pxDefaultSize
 			{ ...props }
 			value={ fontSize }
 			onChange={ setFontSize }
@@ -36,7 +35,6 @@ const FontSizePickerWithState: StoryFn< typeof FontSizePicker > = ( {
 export const Default: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 Default.args = {
-	__next40pxDefaultSize: true,
 	fontSizes: [
 		{
 			name: 'Small',

package/src/font-size-picker/stories/index.story.tsx

@@ -48,7 +48,6 @@ const FontSizePickerWithState = ( {
 	const [ fontSize, setFontSize ] = useState( value );
 	return (
 		<FontSizePicker
-			__next40pxDefaultSize
 			{ ...props }
 			value={ fontSize }
 			onChange={ ( nextValue ) => {
@@ -80,7 +79,6 @@ const TwoFontSizePickersWithState = ( {
 export const Default: FontSizePickerStory = {
 	render: FontSizePickerWithState,
 	args: {
-		__next40pxDefaultSize: true,
 		disableCustomFontSizes: false,
 		fontSizes: [
 			{

package/src/font-size-picker/test/font-size-picker-select.tsx

@@ -41,8 +41,6 @@ describe( 'FontSizePickerSelect', () => {
 					onChange={ onChange }
 					onSelectCustom={ jest.fn() }
 					disableCustomFontSizes={ false }
-					__next40pxDefaultSize={ false }
-					size="default"
 				/>
 			);
 			// Should select the medium option (16px)
@@ -61,8 +59,6 @@ describe( 'FontSizePickerSelect', () => {
 					onChange={ onChange }
 					onSelectCustom={ jest.fn() }
 					disableCustomFontSizes={ false }
-					__next40pxDefaultSize={ false }
-					size="default"
 				/>
 			);
 			// Should select the medium option
@@ -81,8 +77,6 @@ describe( 'FontSizePickerSelect', () => {
 					onChange={ onChange }
 					onSelectCustom={ jest.fn() }
 					disableCustomFontSizes={ false }
-					__next40pxDefaultSize={ false }
-					size="default"
 				/>
 			);
 			// Should show default option
@@ -101,8 +95,6 @@ describe( 'FontSizePickerSelect', () => {
 					onChange={ onChange }
 					onSelectCustom={ jest.fn() }
 					disableCustomFontSizes={ false }
-					__next40pxDefaultSize={ false }
-					size="default"
 				/>
 			);
 			// Should show default option
@@ -122,8 +114,6 @@ describe( 'FontSizePickerSelect', () => {
 					onChange={ onChange }
 					onSelectCustom={ jest.fn() }
 					disableCustomFontSizes={ false }
-					__next40pxDefaultSize={ false }
-					size="default"
 				/>
 			);
 			await user.click(
@@ -145,8 +135,6 @@ describe( 'FontSizePickerSelect', () => {
 					onChange={ onChange }
 					onSelectCustom={ jest.fn() }
 					disableCustomFontSizes={ false }
-					__next40pxDefaultSize={ false }
-					size="default"
 				/>
 			);
 			await user.click(
@@ -188,8 +176,6 @@ describe( 'FontSizePickerSelect', () => {
 					onChange={ onChange }
 					onSelectCustom={ jest.fn() }
 					disableCustomFontSizes={ false }
-					__next40pxDefaultSize={ false }
-					size="default"
 				/>
 			);
 			// Should show the first matching font size when there are multiple matches
@@ -208,8 +194,6 @@ describe( 'FontSizePickerSelect', () => {
 					onChange={ onChange }
 					onSelectCustom={ jest.fn() }
 					disableCustomFontSizes={ false }
-					__next40pxDefaultSize={ false }
-					size="default"
 				/>
 			);
 			// Should select the specific font size by slug

package/src/font-size-picker/test/font-size-picker-toggle-group.tsx

@@ -39,8 +39,6 @@ describe( 'FontSizePickerToggleGroup', () => {
 					value="16px"
 					valueMode="literal"
 					onChange={ onChange }
-					__next40pxDefaultSize={ false }
-					size="default"
 				/>
 			);
 			// Should select the medium option (16px)
@@ -57,8 +55,6 @@ describe( 'FontSizePickerToggleGroup', () => {
 					value="medium"
 					valueMode="slug"
 					onChange={ onChange }
-					__next40pxDefaultSize={ false }
-					size="default"
 				/>
 			);
 			// Should select the medium option
@@ -75,8 +71,6 @@ describe( 'FontSizePickerToggleGroup', () => {
 					value={ undefined }
 					valueMode="literal"
 					onChange={ onChange }
-					__next40pxDefaultSize={ false }
-					size="default"
 				/>
 			);
 			// Should have no selection
@@ -93,8 +87,6 @@ describe( 'FontSizePickerToggleGroup', () => {
 					value=""
 					valueMode="literal"
 					onChange={ onChange }
-					__next40pxDefaultSize={ false }
-					size="default"
 				/>
 			);
 			// Should have no selection
@@ -112,8 +104,6 @@ describe( 'FontSizePickerToggleGroup', () => {
 				<FontSizePickerToggleGroup
 					fontSizes={ fontSizes }
 					onChange={ onChange }
-					__next40pxDefaultSize={ false }
-					size="default"
 				/>
 			);
 			await user.click( screen.getByRole( 'radio', { name: 'Small' } ) );
@@ -128,8 +118,6 @@ describe( 'FontSizePickerToggleGroup', () => {
 					fontSizes={ fontSizes }
 					value="medium"
 					onChange={ onChange }
-					__next40pxDefaultSize={ false }
-					size="default"
 				/>
 			);
 			// Click a different option
@@ -165,8 +153,6 @@ describe( 'FontSizePickerToggleGroup', () => {
 					value="12px"
 					valueMode="literal"
 					onChange={ onChange }
-					__next40pxDefaultSize={ false }
-					size="default"
 				/>
 			);
 			// Should have no selection when there are multiple matches
@@ -183,8 +169,6 @@ describe( 'FontSizePickerToggleGroup', () => {
 					value="small-1"
 					valueMode="slug"
 					onChange={ onChange }
-					__next40pxDefaultSize={ false }
-					size="default"
 				/>
 			);
 			// Should select the specific font size by slug
@@ -226,8 +210,6 @@ describe( 'FontSizePickerToggleGroup', () => {
 					value="1em"
 					valueMode="literal"
 					onChange={ onChange }
-					__next40pxDefaultSize={ false }
-					size="default"
 				/>
 			);
 			// Should select the medium option (1em)
@@ -244,8 +226,6 @@ describe( 'FontSizePickerToggleGroup', () => {
 					value="clamp(1.75rem, 3vw, 2.25rem)"
 					valueMode="literal"
 					onChange={ onChange }
-					__next40pxDefaultSize={ false }
-					size="default"
 				/>
 			);
 			// Should select the extra large option
@@ -262,8 +242,6 @@ describe( 'FontSizePickerToggleGroup', () => {
 					value="medium"
 					valueMode="slug"
 					onChange={ onChange }
-					__next40pxDefaultSize={ false }
-					size="default"
 				/>
 			);
 			// Should select the medium option

package/src/font-size-picker/test/index.tsx

@@ -1,23 +1,9 @@
-/**
- * External dependencies
- */
 import { screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { render } from '@ariakit/test/react';
-
-/**
- * Internal dependencies
- */
-import _FontSizePicker from '../';
-import type { FontSize } from '../types';
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-const FontSizePicker = (
-	props: React.ComponentProps< typeof _FontSizePicker >
-) => <_FontSizePicker __next40pxDefaultSize { ...props } />;
+import FontSizePicker from '../';
+import type { FontSize } from '../types';
 
 const ControlledFontSizePicker = ( {
 	onChange,

package/src/font-size-picker/types.ts

@@ -77,13 +77,15 @@ export type FontSizePickerProps = {
 	/**
 	 * Start opting into the larger default height that will become the default size in a future version.
 	 *
-	 * @default false
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 * @ignore
 	 */
 	__next40pxDefaultSize?: boolean;
 	/**
 	 * Size of the control.
 	 *
-	 * @default 'default'
+	 * @deprecated This prop no longer has any effect.
+	 * @ignore
 	 */
 	size?: 'default' | '__unstable-large';
 };
@@ -114,7 +116,7 @@ export type FontSize = {
 
 export type FontSizePickerSelectProps = Pick<
 	FontSizePickerProps,
-	'value' | 'size' | 'valueMode'
+	'value' | 'valueMode'
 > & {
 	fontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;
 	disableCustomFontSizes: NonNullable<
@@ -125,7 +127,6 @@ export type FontSizePickerSelectProps = Pick<
 		selectedItem?: FontSize
 	) => void;
 	onSelectCustom: () => void;
-	__next40pxDefaultSize: boolean;
 };
 
 export type FontSizePickerSelectOption = {
@@ -137,7 +138,7 @@ export type FontSizePickerSelectOption = {
 
 export type FontSizePickerToggleGroupProps = Pick<
 	FontSizePickerProps,
-	'value' | 'size' | '__next40pxDefaultSize' | 'valueMode'
+	'value' | 'valueMode'
 > & {
 	fontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;
 	onChange: (

package/src/form-file-upload/README.md

@@ -11,7 +11,6 @@ import { FormFileUpload } from '@wordpress/components';
 
 const MyFormFileUpload = () => (
   <FormFileUpload
-    __next40pxDefaultSize
     accept="image/*"
     onChange={ ( event ) => console.log( event.currentTarget.files ) }
   >
@@ -22,14 +21,6 @@ const MyFormFileUpload = () => (
 
 ## Props
 
-### `__next40pxDefaultSize`
-
- - Type: `boolean`
- - Required: No
- - Default: `false`
-
-Start opting into the larger default height that will become the default size in a future version.
-
 ### `accept`
 
  - Type: `string`
@@ -85,7 +76,6 @@ an empty string in the `onClick` function.
 
 ```jsx
 <FormFileUpload
-  __next40pxDefaultSize
   onClick={ ( event ) => ( event.target.value = '' ) }
   onChange={ onChange }
 >

package/src/form-file-upload/index.tsx

@@ -9,7 +9,6 @@ import { useRef } from '@wordpress/element';
 import Button from '../button';
 import type { WordPressComponentProps } from '../context';
 import type { FormFileUploadProps } from './types';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 /**
  * FormFileUpload allows users to select files from their local device.
@@ -19,7 +18,6 @@ import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
  *
  * const MyFormFileUpload = () => (
  *   <FormFileUpload
- *     __next40pxDefaultSize
  *     accept="image/*"
  *     onChange={ ( event ) => console.log( event.currentTarget.files ) }
  *   >
@@ -35,6 +33,7 @@ export function FormFileUpload( {
 	onChange,
 	onClick,
 	render,
+	__next40pxDefaultSize: _next40pxDefaultSize,
 	...props
 }: WordPressComponentProps< FormFileUploadProps, 'button', false > ) {
 	const ref = useRef< HTMLInputElement >( null );
@@ -42,21 +41,10 @@ export function FormFileUpload( {
 		ref.current?.click();
 	};
 
-	if ( ! render ) {
-		maybeWarnDeprecated36pxSize( {
-			componentName: 'FormFileUpload',
-			__next40pxDefaultSize: props.__next40pxDefaultSize,
-			// @ts-expect-error - We don't "officially" support all Button props but this likely happens.
-			size: props.size,
-		} );
-	}
-
 	const ui = render ? (
 		render( { openFileDialog } )
 	) : (
-		// Disable reason: the parent component already takes care of the `__next40pxDefaultSize` prop.
-		// eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
-		<Button onClick={ openFileDialog } { ...props }>
+		<Button onClick={ openFileDialog } __next40pxDefaultSize { ...props }>
 			{ children }
 		</Button>
 	);

package/src/form-file-upload/stories/index.story.tsx

@@ -35,13 +35,12 @@ const meta: Meta< typeof FormFileUpload > = {
 export default meta;
 
 const Template: StoryFn< typeof FormFileUpload > = ( props ) => {
-	return <FormFileUpload __next40pxDefaultSize { ...props } />;
+	return <FormFileUpload { ...props } />;
 };
 
 export const Default = Template.bind( {} );
 Default.args = {
 	children: 'Select file',
-	__next40pxDefaultSize: true,
 };
 
 export const RestrictFileTypes = Template.bind( {} );

package/src/form-file-upload/test/index.tsx

@@ -1,23 +1,8 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
-import _FormFileUpload from '..';
-
-/**
- * Browser dependencies
- */
+import FormFileUpload from '..';
 const { File } = window;
 
-const FormFileUpload = (
-	props: React.ComponentProps< typeof _FormFileUpload >
-) => <_FormFileUpload __next40pxDefaultSize { ...props } />;
-
 // @testing-library/user-event considers changing <input type="file"> to a string as a change, but it do not occur on real browsers, so the comparisons will be against this result
 const fakePath = expect.objectContaining( {
 	target: expect.objectContaining( {

package/src/form-file-upload/types.ts

@@ -13,7 +13,8 @@ export type FormFileUploadProps = {
 	/**
 	 * Start opting into the larger default height that will become the default size in a future version.
 	 *
-	 * @default false
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 * @ignore
 	 */
 	__next40pxDefaultSize?: boolean;
 	/**
@@ -51,7 +52,6 @@ export type FormFileUploadProps = {
 	 *
 	 * ```jsx
 	 * <FormFileUpload
-	 *   __next40pxDefaultSize
 	 *   onClick={ ( event ) => ( event.target.value = '' ) }
 	 *   onChange={ onChange }
 	 * >

package/src/form-token-field/README.md

@@ -62,7 +62,6 @@ The `value` property is handled in a manner similar to controlled form component
 -   `__experimentalShowHowTo` - **Deprecated.** Use the `help` prop instead. The `help` prop now defaults to the previous how-to text; if you were passing `__experimentalShowHowTo={ false }` to hide it, pass an empty string to `help` instead.
 -   `__experimentalValidateInput` - If passed, all introduced values will be validated before being added as tokens.
 -   `__experimentalAutoSelectFirstMatch` - If true, the select the first matching suggestion when the user presses the Enter key (or space when tokenizeOnSpace is true).
--   `__next40pxDefaultSize` - Start opting into the larger default height that will become the default size in a future version.
 -   `tokenizeOnBlur` - If true, add any incompleteTokenValue as a new token when the field loses focus.
 
 ## Usage
@@ -85,7 +84,6 @@ const MyFormTokenField = () => {
 
 	return (
 		<FormTokenField
-			__next40pxDefaultSize
 			value={ selectedContinents }
 			suggestions={ continents }
 			onChange={ ( tokens ) => setSelectedContinents( tokens ) }

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

@@ -33,9 +33,7 @@ import {
 	StyledHelp,
 	StyledLabel,
 } from '../base-control/styles/base-control-styles';
-import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const identity = ( value: string ) => value;
 
@@ -78,17 +76,10 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		__experimentalExpandOnFocus = false,
 		__experimentalValidateInput = () => true,
 		__experimentalShowHowTo,
-		__next40pxDefaultSize = false,
 		__experimentalAutoSelectFirstMatch = false,
 		tokenizeOnBlur = false,
 		help,
-	} = useDeprecated36pxDefaultSizeProp< FormTokenFieldProps >( props );
-
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'FormTokenField',
-		size: undefined,
-		__next40pxDefaultSize,
-	} );
+	} = props;
 
 	const defaultHelp = tokenizeOnSpace
 		? __( 'Separate with commas, spaces, or the Enter key.' )
@@ -840,8 +831,6 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 					align="center"
 					gap={ 1 }
 					wrap
-					__next40pxDefaultSize={ __next40pxDefaultSize }
-					hasTokens={ !! value.length }
 				>
 					{ renderTokensAndInput() }
 				</TokensAndInputWrapperFlex>

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

@@ -57,7 +57,6 @@ const DefaultTemplate: StoryFn< typeof FormTokenField > = ( { ...args } ) => {
 
 	return (
 		<FormTokenField
-			__next40pxDefaultSize
 			{ ...args }
 			value={ selectedContinents }
 			onChange={ ( tokens ) => setSelectedContinents( tokens ) }
@@ -71,7 +70,6 @@ export const Default: StoryFn< typeof FormTokenField > = DefaultTemplate.bind(
 Default.args = {
 	label: 'Type a continent',
 	suggestions: continents,
-	__next40pxDefaultSize: true,
 };
 
 export const Async: StoryFn< typeof FormTokenField > = ( {
@@ -98,7 +96,6 @@ export const Async: StoryFn< typeof FormTokenField > = ( {
 
 	return (
 		<FormTokenField
-			__next40pxDefaultSize
 			{ ...args }
 			value={ selectedContinents }
 			suggestions={ availableContinents }
@@ -110,7 +107,6 @@ export const Async: StoryFn< typeof FormTokenField > = ( {
 Async.args = {
 	label: 'Type a continent',
 	suggestions: continents,
-	__next40pxDefaultSize: true,
 };
 
 export const DropdownSelector: StoryFn< typeof FormTokenField > =

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

@@ -2,33 +2,14 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
 
 /**
  * Internal dependencies
  */
 import { Flex } from '../flex';
-import { space } from '../utils/space';
 import { boxSizingReset } from '../utils';
 
-type TokensAndInputWrapperProps = {
-	__next40pxDefaultSize: boolean;
-	hasTokens: boolean;
-};
-
-const deprecatedPaddings = ( {
-	__next40pxDefaultSize,
-	hasTokens,
-}: TokensAndInputWrapperProps ) =>
-	! __next40pxDefaultSize &&
-	css`
-		padding-top: ${ space( hasTokens ? 1 : 0.5 ) };
-		padding-bottom: ${ space( hasTokens ? 1 : 0.5 ) };
-	`;
-
 export const TokensAndInputWrapperFlex = styled( Flex )`
 	padding: 7px;
 	${ boxSizingReset }
-
-	${ deprecatedPaddings }
 `;

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

@@ -22,11 +22,7 @@ import { logged } from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import _FormTokenField from '../';
-
-const FormTokenField = ( props: ComponentProps< typeof _FormTokenField > ) => (
-	<_FormTokenField __next40pxDefaultSize { ...props } />
-);
+import FormTokenField from '../';
 
 const FormTokenFieldWithState = ( {
 	onChange,

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

@@ -167,7 +167,8 @@ export interface FormTokenFieldProps
 	 * Start opting into the larger default height that will become the
 	 * default size in a future version.
 	 *
-	 * @default false
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 * @ignore
 	 */
 	__next40pxDefaultSize?: boolean;
 	/**

package/src/h-stack/stories/index.story.tsx

@@ -77,7 +77,7 @@ const meta: Meta< typeof HStack > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Use `Stack` from `@wordpress/ui` instead.',
+			notes: 'Use [`Stack`](?path=/docs/design-system-components-stack--docs) from `@wordpress/ui` instead.',
 		},
 	},
 };