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

WordPress · May 2, 2023 · 53b7af2 · 53b7af2
1 parent aaf98b8
commit 53b7af2
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 24 deletions.
diff --git a/packages/components/src/combobox-control/index.tsx b/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

diff --git a/packages/components/src/combobox-control/stories/index.tsx b/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,

diff --git a/packages/components/src/combobox-control/styles.ts b/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 ) };
 

diff --git a/packages/components/src/combobox-control/types.ts b/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.
 	 *