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

packages/block-editor/src/hooks/position.js

@@ -296,7 +296,7 @@ export function PositionPanel( props ) {
 					>
 						<CustomSelectControl
 							__nextUnconstrainedWidth
-							__next36pxDefaultSize
+							__next40pxDefaultSize
 							className="block-editor-hooks__position-selection__select-control"
 							label={ __( 'Position' ) }
 							hideLabelFromVision

packages/block-library/src/rss/edit.js

@@ -69,15 +69,19 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 					>
 						<HStack wrap>
 							<InputControl
-								__next36pxDefaultSize
+								__next40pxDefaultSize
 								placeholder={ __( 'Enter URL here…' ) }
 								value={ feedURL }
 								onChange={ ( value ) =>
 									setAttributes( { feedURL: value } )
 								}
 								className="wp-block-rss__placeholder-input"
 							/>
-							<Button variant="primary" type="submit">
+							<Button
+								__next40pxDefaultSize
+								variant="primary"
+								type="submit"
+							>
 								{ __( 'Use URL' ) }
 							</Button>
 						</HStack>

packages/block-library/src/template-part/edit/import-controls.js

@@ -147,7 +147,7 @@ export function TemplatePartImportControls( { area, setAttributes } ) {
 						options={ options }
 						onChange={ ( value ) => setSelectedSidebar( value ) }
 						disabled={ ! options.length }
-						__next36pxDefaultSize
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 					/>
 				</FlexBlock>
@@ -158,6 +158,7 @@ export function TemplatePartImportControls( { area, setAttributes } ) {
 					} }
 				>
 					<Button
+						__next40pxDefaultSize
 						variant="primary"
 						type="submit"
 						isBusy={ isBusy }

packages/components/CHANGELOG.md

@@ -8,6 +8,7 @@
 -   `Button`: deprecating `isPressed` prop in favour of `aria-pressed` ([#54740](https://github.com/WordPress/gutenberg/pull/54740)).
 -   `DuotonePicker/ColorListPicker`: Adds appropriate label and description to 'Duotone Filter' picker ([#54473](https://github.com/WordPress/gutenberg/pull/54473)).
 -   `Modal`: Accessibly hide/show outer modal when nested ([#54743](https://github.com/WordPress/gutenberg/pull/54743)).
+-   `InputControl`, `NumberControl`, `UnitControl`, `SelectControl`, `CustomSelectControl`, `TreeSelect`: Add opt-in prop for next 40px default size, superseding the `__next36pxDefaultSize` prop ([#53819](https://github.com/WordPress/gutenberg/pull/53819)).
 
 ### Bug Fix
 

packages/components/src/custom-select-control/index.js

@@ -21,6 +21,7 @@ import { Select as SelectControlSelect } from '../select-control/styles/select-c
 import SelectControlChevronDown from '../select-control/chevron-down';
 import { InputBaseWithBackCompatMinWidth } from './styles';
 import { StyledLabel } from '../base-control/styles/base-control-styles';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 const itemToString = ( item ) => item?.name;
 // This is needed so that in Windows, where
@@ -65,7 +66,7 @@ const stateReducer = (
 export default function CustomSelectControl( props ) {
 	const {
 		/** Start opting into the larger default height that will become the default size in a future version. */
-		__next36pxDefaultSize = false,
+		__next40pxDefaultSize = false,
 		/** Start opting into the unconstrained width that will become the default in a future version. */
 		__nextUnconstrainedWidth = false,
 		className,
@@ -82,7 +83,11 @@ export default function CustomSelectControl( props ) {
 		onFocus,
 		onBlur,
 		__experimentalShowSelectedHint = false,
-	} = props;
+	} = useDeprecated36pxDefaultSizeProp(
+		props,
+		'wp.components.CustomSelectControl',
+		'6.4'
+	);
 
 	const {
 		getLabelProps,
@@ -180,7 +185,7 @@ export default function CustomSelectControl( props ) {
 				</StyledLabel>
 			) }
 			<InputBaseWithBackCompatMinWidth
-				__next36pxDefaultSize={ __next36pxDefaultSize }
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				__nextUnconstrainedWidth={ __nextUnconstrainedWidth }
 				isFocused={ isOpen || isFocused }
 				__unstableInputWidth={
@@ -197,7 +202,7 @@ export default function CustomSelectControl( props ) {
 					onFocus={ handleOnFocus }
 					onBlur={ handleOnBlur }
 					selectSize={ size }
-					__next36pxDefaultSize={ __next36pxDefaultSize }
+					__next40pxDefaultSize={ __next40pxDefaultSize }
 					{ ...getToggleButtonProps( {
 						// This is needed because some speech recognition software don't support `aria-labelledby`.
 						'aria-label': label,
@@ -232,8 +237,8 @@ export default function CustomSelectControl( props ) {
 										'is-highlighted':
 											index === highlightedIndex,
 										'has-hint': !! item.__experimentalHint,
-										'is-next-36px-default-size':
-											__next36pxDefaultSize,
+										'is-next-40px-default-size':
+											__next40pxDefaultSize,
 									}
 								),
 								style: item.style,

packages/components/src/custom-select-control/stories/index.story.js

@@ -7,7 +7,7 @@ export default {
 	title: 'Components/CustomSelectControl',
 	component: CustomSelectControl,
 	argTypes: {
-		__next36pxDefaultSize: { control: { type: 'boolean' } },
+		__next40pxDefaultSize: { control: { type: 'boolean' } },
 		__experimentalShowSelectedHint: { control: { type: 'boolean' } },
 		size: {
 			options: [ 'small', 'default', '__unstable-large' ],

packages/components/src/custom-select-control/style.scss

@@ -44,7 +44,7 @@
 	cursor: default;
 	line-height: $icon-size + $grid-unit-05;
 
-	&:not(.is-next-36px-default-size) {
+	&:not(.is-next-40px-default-size) {
 		padding: $grid-unit-10;
 	}
 

packages/components/src/date-time/time/index.tsx

@@ -15,6 +15,7 @@ import { __ } from '@wordpress/i18n';
 import BaseControl from '../../base-control';
 import Button from '../../button';
 import ButtonGroup from '../../button-group';
+import SelectControl from '../../select-control';
 import TimeZone from './timezone';
 import type { TimePickerProps } from '../types';
 import {
@@ -24,7 +25,6 @@ import {
 	TimeSeparator,
 	MinutesInput,
 	MonthSelectWrapper,
-	MonthSelect,
 	DayInput,
 	YearInput,
 	TimeWrapper,
@@ -181,7 +181,7 @@ export function TimePicker( {
 			className="components-datetime__time-field components-datetime__time-field-day" // Unused, for backwards compatibility.
 			label={ __( 'Day' ) }
 			hideLabelFromVision
-			__next36pxDefaultSize
+			__next40pxDefaultSize
 			value={ day }
 			step={ 1 }
 			min={ 1 }
@@ -197,10 +197,11 @@ export function TimePicker( {
 
 	const monthField = (
 		<MonthSelectWrapper>
-			<MonthSelect
+			<SelectControl
 				className="components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility.
 				label={ __( 'Month' ) }
 				hideLabelFromVision
+				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				value={ month }
 				options={ [
@@ -247,7 +248,7 @@ export function TimePicker( {
 							className="components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
 							label={ __( 'Hours' ) }
 							hideLabelFromVision
-							__next36pxDefaultSize
+							__next40pxDefaultSize
 							value={ hours }
 							step={ 1 }
 							min={ is12Hour ? 1 : 0 }
@@ -274,7 +275,7 @@ export function TimePicker( {
 							className="components-datetime__time-field-minutes-input" // Unused, for backwards compatibility.
 							label={ __( 'Minutes' ) }
 							hideLabelFromVision
-							__next36pxDefaultSize
+							__next40pxDefaultSize
 							value={ minutes }
 							step={ 1 }
 							min={ 0 }
@@ -301,6 +302,7 @@ export function TimePicker( {
 								variant={
 									am === 'AM' ? 'primary' : 'secondary'
 								}
+								__next40pxDefaultSize
 								onClick={ buildAmPmChangeCallback( 'AM' ) }
 							>
 								{ __( 'AM' ) }
@@ -310,6 +312,7 @@ export function TimePicker( {
 								variant={
 									am === 'PM' ? 'primary' : 'secondary'
 								}
+								__next40pxDefaultSize
 								onClick={ buildAmPmChangeCallback( 'PM' ) }
 							>
 								{ __( 'PM' ) }
@@ -345,7 +348,7 @@ export function TimePicker( {
 						className="components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
 						label={ __( 'Year' ) }
 						hideLabelFromVision
-						__next36pxDefaultSize
+						__next40pxDefaultSize
 						value={ year }
 						step={ 1 }
 						min={ 1 }

packages/components/src/date-time/time/styles.ts

@@ -14,8 +14,6 @@ import {
 	BackdropUI,
 } from '../../input-control/styles/input-control-styles';
 import NumberControl from '../../number-control';
-import SelectControl from '../../select-control';
-import { Select } from '../../select-control/styles/select-control-styles';
 
 export const Wrapper = styled.div`
 	box-sizing: border-box;
@@ -92,14 +90,6 @@ export const MonthSelectWrapper = styled.div`
 	flex-grow: 1;
 `;
 
-export const MonthSelect = styled( SelectControl )`
-	height: 36px;
-
-	${ Select } {
-		line-height: 30px;
-	}
-`;
-
 export const DayInput = styled( NumberControl )`
 	${ baseInput }
 

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,21 @@ export function UnforwardedInputControl(
 		style,
 		suffix,
 		value,
-		...props
-	}: InputControlProps,
-	ref: ForwardedRef< HTMLInputElement >
-) {
+		...restProps
+	} = useDeprecated36pxDefaultSizeProp< InputControlProps >(
+		props,
+		'wp.components.InputControl',
+		'6.4'
+	);
+
 	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 +85,7 @@ export function UnforwardedInputControl(
 			__nextHasNoMarginBottom
 		>
 			<InputBase
-				__next36pxDefaultSize={ __next36pxDefaultSize }
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				__unstableInputWidth={ __unstableInputWidth }
 				disabled={ disabled }
 				gap={ 3 }
@@ -94,9 +101,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,19 @@ export function InputBase(
 		prefix,
 		size = 'default',
 		suffix,
-		...props
-	}: WordPressComponentProps< InputBaseProps, 'div' >,
-	ref: ForwardedRef< HTMLDivElement >
-) {
+		...restProps
+	} = useDeprecated36pxDefaultSizeProp(
+		props,
+		'wp.components.InputBase',
+		'6.4'
+	);
+
 	const id = useUniqueId( idProp );
 	const hideLabel = hideLabelFromVision || ! label;
 
 	const { paddingLeft, paddingRight } = getSizeConfig( {
 		inputSize: size,
-		__next36pxDefaultSize,
+		__next40pxDefaultSize,
 	} );
 	const prefixSuffixContextValue = useMemo( () => {
 		return {
@@ -95,7 +102,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/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,