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

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

@@ -19,6 +19,7 @@ import type { InputControlProps } from './types';
 import { space } from '../ui/utils/space';
 import { useDraft } from './utils';
 import BaseControl from '../base-control';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 const noop = () => {};
 
@@ -30,8 +31,11 @@ function useUniqueId( idProp?: string ) {
 }
 
 export function UnforwardedInputControl(
-	{
-		__next36pxDefaultSize,
+	props: InputControlProps,
+	ref: ForwardedRef< HTMLInputElement >
+) {
+	const {
+		__next40pxDefaultSize,
 		__unstableStateReducer: stateReducer = ( state ) => state,
 		__unstableInputWidth,
 		className,
@@ -50,18 +54,20 @@ export function UnforwardedInputControl(
 		style,
 		suffix,
 		value,
-		...props
-	}: InputControlProps,
-	ref: ForwardedRef< HTMLInputElement >
-) {
+		...restProps
+	} = useDeprecated36pxDefaultSizeProp< InputControlProps >(
+		props,
+		'wp.components.InputControl'
+	);
+
 	const [ isFocused, setIsFocused ] = useState( false );
 
 	const id = useUniqueId( idProp );
 	const classes = classNames( 'components-input-control', className );
 
 	const draftHookProps = useDraft( {
 		value,
-		onBlur: props.onBlur,
+		onBlur: restProps.onBlur,
 		onChange,
 	} );
 
@@ -78,7 +84,7 @@ export function UnforwardedInputControl(
 			__nextHasNoMarginBottom
 		>
 			<InputBase
-				__next36pxDefaultSize={ __next36pxDefaultSize }
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				__unstableInputWidth={ __unstableInputWidth }
 				disabled={ disabled }
 				gap={ 3 }
@@ -94,9 +100,9 @@ export function UnforwardedInputControl(
 				suffix={ suffix }
 			>
 				<InputField
-					{ ...props }
+					{ ...restProps }
 					{ ...helpProp }
-					__next36pxDefaultSize={ __next36pxDefaultSize }
+					__next40pxDefaultSize={ __next40pxDefaultSize }
 					className="components-input-control__input"
 					disabled={ disabled }
 					id={ id }

packages/components/src/input-control/input-base.tsx

@@ -24,6 +24,7 @@ import {
 import type { InputBaseProps, LabelPosition } from './types';
 import type { WordPressComponentProps } from '../context';
 import { ContextSystemProvider } from '../context';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( InputBase );
@@ -60,8 +61,11 @@ function getUIFlexProps( labelPosition?: LabelPosition ) {
 }
 
 export function InputBase(
-	{
-		__next36pxDefaultSize,
+	props: WordPressComponentProps< InputBaseProps, 'div' >,
+	ref: ForwardedRef< HTMLDivElement >
+) {
+	const {
+		__next40pxDefaultSize,
 		__unstableInputWidth,
 		children,
 		className,
@@ -74,16 +78,15 @@ export function InputBase(
 		prefix,
 		size = 'default',
 		suffix,
-		...props
-	}: WordPressComponentProps< InputBaseProps, 'div' >,
-	ref: ForwardedRef< HTMLDivElement >
-) {
+		...restProps
+	} = useDeprecated36pxDefaultSizeProp( props, 'wp.components.InputBase' );
+
 	const id = useUniqueId( idProp );
 	const hideLabel = hideLabelFromVision || ! label;
 
 	const { paddingLeft, paddingRight } = getSizeConfig( {
 		inputSize: size,
-		__next36pxDefaultSize,
+		__next40pxDefaultSize,
 	} );
 	const prefixSuffixContextValue = useMemo( () => {
 		return {
@@ -95,7 +98,7 @@ export function InputBase(
 	return (
 		// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
 		<Root
-			{ ...props }
+			{ ...restProps }
 			{ ...getUIFlexProps( labelPosition ) }
 			className={ className }
 			gap={ 2 }

packages/components/src/input-control/input-field.tsx

@@ -24,11 +24,15 @@ import { useDragCursor } from './utils';
 import { Input } from './styles/input-control-styles';
 import { useInputControlStateReducer } from './reducer/reducer';
 import type { InputFieldProps } from './types';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 const noop = () => {};
 
 function InputField(
-	{
+	props: WordPressComponentProps< InputFieldProps, 'input', false >,
+	ref: ForwardedRef< HTMLInputElement >
+) {
+	const {
 		disabled = false,
 		dragDirection = 'n',
 		dragThreshold = 10,
@@ -49,10 +53,9 @@ function InputField(
 		stateReducer = ( state: any ) => state,
 		value: valueProp,
 		type,
-		...props
-	}: WordPressComponentProps< InputFieldProps, 'input', false >,
-	ref: ForwardedRef< HTMLInputElement >
-) {
+		...restProps
+	} = useDeprecated36pxDefaultSizeProp( props, 'wp.components.InputField' );
+
 	const {
 		// State.
 		state,
@@ -200,7 +203,7 @@ function InputField(
 	let handleOnMouseDown;
 	if ( type === 'number' ) {
 		handleOnMouseDown = ( event: MouseEvent< HTMLInputElement > ) => {
-			props.onMouseDown?.( event );
+			restProps.onMouseDown?.( event );
 			if (
 				event.currentTarget !==
 				event.currentTarget.ownerDocument.activeElement
@@ -212,7 +215,7 @@ function InputField(
 
 	return (
 		<Input
-			{ ...props }
+			{ ...restProps }
 			{ ...dragProps }
 			className="components-input-control__input"
 			disabled={ disabled }

packages/components/src/input-control/styles/input-control-styles.tsx

@@ -80,7 +80,7 @@ export const Container = styled.div< ContainerProps >`
 `;
 
 type InputProps = {
-	__next36pxDefaultSize?: boolean;
+	__next40pxDefaultSize?: boolean;
 	disabled?: boolean;
 	inputSize?: Size;
 	isDragging?: boolean;
@@ -120,14 +120,14 @@ const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 
 export const getSizeConfig = ( {
 	inputSize: size,
-	__next36pxDefaultSize,
+	__next40pxDefaultSize,
 }: InputProps ) => {
 	// Paddings may be overridden by the custom paddings props.
 	const sizes = {
 		default: {
-			height: 36,
+			height: 40,
 			lineHeight: 1,
-			minHeight: 36,
+			minHeight: 40,
 			paddingLeft: space( 4 ),
 			paddingRight: space( 4 ),
 		},
@@ -147,7 +147,7 @@ export const getSizeConfig = ( {
 		},
 	};
 
-	if ( ! __next36pxDefaultSize ) {
+	if ( ! __next40pxDefaultSize ) {
 		sizes.default = {
 			height: 30,
 			lineHeight: 1,

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

@@ -27,11 +27,18 @@ export type Size = 'default' | 'small' | '__unstable-large';
 
 interface BaseProps {
 	/**
-	 * 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;
 	__unstableInputWidth?: CSSProperties[ 'width' ];
 	/**
 	 * If true, the label will only be visible to screen readers.