FormTokenField, ComboboxControl: Add opt-in prop for next 40px default size

packages/components/CHANGELOG.md

@@ -17,6 +17,7 @@
 
 ### Enhancements
 
+-   `FormTokenField`, `ComboboxControl`: Add `__next40pxDefaultSize` prop to opt into the new 40px default size, superseding the `__next36pxDefaultSize` prop ([#50261](https://github.com/WordPress/gutenberg/pull/50261)).
 -   `Modal`: Add css class to children container ([#50099](https://github.com/WordPress/gutenberg/pull/50099)).
 
 ## 23.9.0 (2023-04-26)

packages/components/src/combobox-control/index.tsx

@@ -32,6 +32,7 @@ import { useControlledValue } from '../utils/hooks';
 import { normalizeTextString } from '../utils/strings';
 import type { ComboboxControlOption, ComboboxControlProps } from './types';
 import type { TokenInputProps } from '../form-token-field/types';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 const noop = () => {};
 
@@ -104,23 +105,28 @@ const getIndexOfMatchingSuggestion = (
  * }
  * ```
  */
-function ComboboxControl( {
-	__nextHasNoMarginBottom = false,
-	__next36pxDefaultSize = false,
-	value: valueProp,
-	label,
-	options,
-	onChange: onChangeProp,
-	onFilterValueChange = noop,
-	hideLabelFromVision,
-	help,
-	allowReset = true,
-	className,
-	messages = {
-		selected: __( 'Item selected.' ),
-	},
-	__experimentalRenderItem,
-}: ComboboxControlProps ) {
+function ComboboxControl( props: ComboboxControlProps ) {
+	const {
+		__nextHasNoMarginBottom = false,
+		__next40pxDefaultSize = false,
+		value: valueProp,
+		label,
+		options,
+		onChange: onChangeProp,
+		onFilterValueChange = noop,
+		hideLabelFromVision,
+		help,
+		allowReset = true,
+		className,
+		messages = {
+			selected: __( 'Item selected.' ),
+		},
+		__experimentalRenderItem,
+	} = useDeprecated36pxDefaultSizeProp< ComboboxControlProps >(
+		props,
+		'wp.components.ComboboxControl'
+	);
+
 	const [ value, setValue ] = useControlledValue( {
 		value: valueProp,
 		onChange: onChangeProp,
@@ -314,7 +320,7 @@ function ComboboxControl( {
 					onKeyDown={ onKeyDown }
 				>
 					<InputWrapperFlex
-						__next36pxDefaultSize={ __next36pxDefaultSize }
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 					>
 						<FlexBlock>
 							<TokenInput

packages/components/src/combobox-control/stories/index.tsx

@@ -65,7 +65,6 @@ const Template: ComponentStory< typeof ComboboxControl > = ( {
 };
 export const Default = Template.bind( {} );
 Default.args = {
-	__next36pxDefaultSize: false,
 	allowReset: false,
 	label: 'Select a country',
 	options: countryOptions,

packages/components/src/combobox-control/styles.ts

@@ -12,17 +12,17 @@ import { space } from '../ui/utils/space';
 import type { ComboboxControlProps } from './types';
 
 const deprecatedDefaultSize = ( {
-	__next36pxDefaultSize,
-}: Pick< ComboboxControlProps, '__next36pxDefaultSize' > ) =>
-	! __next36pxDefaultSize &&
+	__next40pxDefaultSize,
+}: Pick< ComboboxControlProps, '__next40pxDefaultSize' > ) =>
+	! __next40pxDefaultSize &&
 	css`
 		height: 28px; // 30px - 2px vertical borders on parent container
 		padding-left: ${ space( 1 ) };
 		padding-right: ${ space( 1 ) };
 	`;
 
 export const InputWrapperFlex = styled( Flex )`
-	height: 34px; // 36px - 2px vertical borders on parent container
+	height: 38px; // 40px - 2px vertical borders on parent container
 	padding-left: ${ space( 2 ) };
 	padding-right: ${ space( 2 ) };
 

packages/components/src/combobox-control/types.ts

@@ -26,11 +26,18 @@ export type ComboboxControlProps = Pick<
 		item: ComboboxControlOption;
 	} ) => React.ReactNode;
 	/**
-	 * Start opting into the larger default height that will become the default size in a future version.
+	 * Deprecated. Use `__next40pxDefaultSize` instead.
 	 *
 	 * @default false
+	 * @deprecated
 	 */
 	__next36pxDefaultSize?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * Show a reset button to clear the input.
 	 *

packages/components/src/form-token-field/index.tsx

@@ -27,6 +27,7 @@ import {
 	StyledLabel,
 } from '../base-control/styles/base-control-styles';
 import { Spacer } from '../spacer';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 const identity = ( value: string ) => value;
 
@@ -69,10 +70,13 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		__experimentalExpandOnFocus = false,
 		__experimentalValidateInput = () => true,
 		__experimentalShowHowTo = true,
-		__next36pxDefaultSize = false,
+		__next40pxDefaultSize = false,
 		__experimentalAutoSelectFirstMatch = false,
 		__nextHasNoMarginBottom = false,
-	} = props;
+	} = useDeprecated36pxDefaultSizeProp< FormTokenFieldProps >(
+		props,
+		'wp.components.FormTokenField'
+	);
 
 	const instanceId = useInstanceId( FormTokenField );
 
@@ -702,7 +706,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 					align="center"
 					gap={ 1 }
 					wrap={ true }
-					__next36pxDefaultSize={ __next36pxDefaultSize }
+					__next40pxDefaultSize={ __next40pxDefaultSize }
 					hasTokens={ !! value.length }
 				>
 					{ renderTokensAndInput() }

packages/components/src/form-token-field/styles.ts

@@ -11,22 +11,22 @@ import { Flex } from '../flex';
 import { space } from '../ui/utils/space';
 
 type TokensAndInputWrapperProps = {
-	__next36pxDefaultSize: boolean;
+	__next40pxDefaultSize: boolean;
 	hasTokens: boolean;
 };
 
 const deprecatedPaddings = ( {
-	__next36pxDefaultSize,
+	__next40pxDefaultSize,
 	hasTokens,
 }: TokensAndInputWrapperProps ) =>
-	! __next36pxDefaultSize &&
+	! __next40pxDefaultSize &&
 	css`
 		padding-top: ${ space( hasTokens ? 1 : 0.5 ) };
 		padding-bottom: ${ space( hasTokens ? 1 : 0.5 ) };
 	`;
 
 export const TokensAndInputWrapperFlex = styled( Flex )`
-	padding: 5px ${ space( 1 ) };
+	padding: 7px;
 
 	${ deprecatedPaddings }
 `;

packages/components/src/form-token-field/types.ts

@@ -151,13 +151,20 @@ export interface FormTokenFieldProps
 	 * @default true
 	 */
 	__experimentalShowHowTo?: boolean;
+	/**
+	 * Deprecated. Use `__next40pxDefaultSize` instead.
+	 *
+	 * @default false
+	 * @deprecated
+	 */
+	__next36pxDefaultSize?: boolean;
 	/**
 	 * Start opting into the larger default height that will become the
 	 * default size in a future version.
 	 *
 	 * @default false
 	 */
-	__next36pxDefaultSize?: boolean;
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * If true, the select the first matching suggestion when the user presses
 	 * the Enter key (or space when tokenizeOnSpace is true).

packages/components/src/utils/use-deprecated-props.ts

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
+export function useDeprecated36pxDefaultSizeProp<
+	P extends Record< string, any > & {
+		__next36pxDefaultSize?: boolean;
+		__next40pxDefaultSize?: boolean;
+	}
+>(
+	props: P,
+	/** The component identifier in dot notation, e.g. `wp.components.ComponentName`. */
+	componentIdentifier: string
+) {
+	const { __next36pxDefaultSize, __next40pxDefaultSize, ...otherProps } =
+		props;
+	if ( typeof __next36pxDefaultSize !== 'undefined' ) {
+		deprecated( '`__next36pxDefaultSize` prop in ' + componentIdentifier, {
+			alternative: '`__next40pxDefaultSize`',
+			since: '6.3',
+		} );
+	}
+
+	return {
+		...otherProps,
+		__next40pxDefaultSize: __next40pxDefaultSize ?? __next36pxDefaultSize,
+	};
+}