RangeControl: Add support for large 40px number input size

packages/block-editor/src/components/block-inspector/style.scss

@@ -20,7 +20,8 @@
 
 	// Reset unwanted margin-bottom from being applied to BaseControls within certain components.
 	.components-focal-point-picker-control,
-	.components-query-controls {
+	.components-query-controls,
+	.components-range-control {
 		.components-base-control {
 			margin-bottom: 0;
 		}

packages/block-library/src/cover/edit/inspector-controls.js

@@ -303,6 +303,7 @@ export default function CoverInspectorControls( {
 							max={ 100 }
 							step={ 10 }
 							required
+							__next40pxDefaultSize
 						/>
 					</ToolsPanelItem>
 				</InspectorControls>

packages/components/CHANGELOG.md

@@ -2,14 +2,15 @@
 
 ## Unreleased
 
-### Enhancements
-
--   `Button`: Add `__next32pxSmallSize` prop to opt into the new 32px size when the `isSmall` prop is enabled ([#51012](https://github.com/WordPress/gutenberg/pull/51012)).
-
 ### Bug Fix
 
 -   `FocalPointUnitControl`: Add aria-labels ([#50993](https://github.com/WordPress/gutenberg/pull/50993)).
 
+### Enhancements
+-   `RangeControl`: Add `__next40pxDefaultSize` prop to opt into the new 40px default size ([#49105](https://github.com/WordPress/gutenberg/pull/49105)).
+
+-   `Button`: Add `__next32pxSmallSize` prop to opt into the new 32px size when the `isSmall` prop is enabled ([#51012](https://github.com/WordPress/gutenberg/pull/51012)).
+
 ### Experimental
 
 -   `DropdownMenu` v2: Tweak styles ([#50967](https://github.com/WordPress/gutenberg/pull/50967)).

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

@@ -59,7 +59,6 @@ function UnforwardedNumberControl(
 		} );
 		spinControls = 'none';
 	}
-
 	const inputRef = useRef< HTMLInputElement >();
 	const mergedRef = useMergeRefs( [ inputRef, forwardedRef ] );
 

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

@@ -69,6 +69,7 @@ function UnforwardedRangeControl(
 		railColor,
 		renderTooltipContent = ( v ) => v,
 		resetFallbackValue,
+		__next40pxDefaultSize = false,
 		shiftStep = 10,
 		showTooltip: showTooltipProp,
 		step = 1,
@@ -208,7 +209,6 @@ function UnforwardedRangeControl(
 	const offsetStyle = {
 		[ isRTL() ? 'right' : 'left' ]: fillValueOffset,
 	};
-
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
@@ -218,7 +218,10 @@ function UnforwardedRangeControl(
 			id={ `${ id }` }
 			help={ help }
 		>
-			<Root className="components-range-control__root">
+			<Root
+				className="components-range-control__root"
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+			>
 				{ beforeIcon && (
 					<BeforeIconWrapper>
 						<Icon icon={ beforeIcon } />
@@ -305,6 +308,11 @@ function UnforwardedRangeControl(
 						onBlur={ handleOnInputNumberBlur }
 						onChange={ handleOnChange }
 						shiftStep={ shiftStep }
+						size={
+							__next40pxDefaultSize
+								? '__unstable-large'
+								: 'default'
+						}
 						step={ step }
 						// @ts-expect-error TODO: Investigate if the `null` value is necessary
 						value={ inputSliderValue }

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

@@ -16,7 +16,6 @@ function InputRange(
 	ref: React.ForwardedRef< HTMLInputElement >
 ) {
 	const { describedBy, label, value, ...otherProps } = props;
-
 	return (
 		<BaseInputRange
 			{ ...otherProps }

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

@@ -12,12 +12,14 @@ import { COLORS, reduceMotion, rtl } from '../../utils';
 import { space } from '../../ui/utils/space';
 
 import type {
+	InputNumberProps,
 	RangeMarkProps,
 	RailProps,
 	ThumbProps,
 	TooltipProps,
 	TrackProps,
 	WrapperProps,
+	RangeControlProps,
 } from '../types';
 
 const rangeHeightValue = 30;
@@ -26,15 +28,25 @@ const rangeHeight = () =>
 	css( { height: rangeHeightValue, minHeight: rangeHeightValue } );
 const thumbSize = 12;
 
-export const Root = styled.div`
+const deprecatedDefaultHeight = ( {
+	__next40pxDefaultSize,
+}: Pick< RangeControlProps, '__next40pxDefaultSize' > ) => {
+	return ! __next40pxDefaultSize && css( { minHeight: rangeHeightValue } );
+};
+
+type RootProps = Pick< RangeControlProps, '__next40pxDefaultSize' >;
+export const Root = styled.div< RootProps >`
 	-webkit-tap-highlight-color: transparent;
-	align-items: flex-start;
+	align-items: center;
 	display: flex;
 	justify-content: flex-start;
 	padding: 0;
 	position: relative;
 	touch-action: none;
 	width: 100%;
+	min-height: 40px;
+
+	${ deprecatedDefaultHeight }
 `;
 
 const wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>
@@ -290,13 +302,30 @@ export const Tooltip = styled.span< TooltipProps >`
 	) }
 `;
 
+const inputNumberWidth = ( { size }: InputNumberProps ) => {
+	const sizes = {
+		default: space( 16 ),
+		'__unstable-large': space( 20 ),
+	};
+
+	if ( size === '__unstable-large' ) {
+		return css( {
+			width: `${ sizes[ '__unstable-large' ] }`,
+		} );
+	}
+
+	return css`
+		width: ${ sizes.default };
+	`;
+};
+
 // @todo: Refactor RangeControl with latest HStack configuration
 // @wordpress/components/ui/hstack.
 export const InputNumber = styled( NumberControl )`
 	display: inline-block;
 	font-size: 13px;
 	margin-top: 0;
-	width: ${ space( 16 ) } !important;
+	${ inputNumberWidth };
 
 	input[type='number']& {
 		${ rangeHeight };

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

@@ -203,6 +203,12 @@ export type RangeControlProps = Pick<
 		 * @default 10
 		 */
 		shiftStep?: number;
+		/**
+		 * Start opting into the larger default height that will become the default size in a future version.
+		 *
+		 * @default false
+		 */
+		__next40pxDefaultSize?: boolean;
 		/**
 		 * Forcing the Tooltip UI to show or hide. This is overridden to `false`
 		 * when `step` is set to the special string value `any`.
@@ -271,6 +277,12 @@ export type TrackProps = {
 	trackColor: CSSProperties[ 'color' ];
 };
 
+export type Size = 'default' | '__unstable-large';
+
+export type InputNumberProps = {
+	size?: Size;
+};
+
 export type UseControlledRangeValueArgs = {
 	/**
 	 * The initial value.