Components: Add opt-in prop for 40px default size for BoxControl, BorderControl, and BorderBoxControl (#56185)

* Add 40px size to BoxControl

* Add 40px size to BorderControl

* Add 40px size to BorderBoxControl

* Move logic to hook for BorderControl

* Move logic to hook for `BorderBoxControl`

* Update changelog

Author: brookewp

packages/components/CHANGELOG.md

@@ -37,6 +37,7 @@
 -   `Tooltip`: no-op when nested inside other `Tooltip` components ([#57202](https://github.com/WordPress/gutenberg/pull/57202)).
 -   `PaletteEdit`: improve unit tests ([#57645](https://github.com/WordPress/gutenberg/pull/57645)).
 -   `ColorPalette` and `CircularOptionPicker`: improve unit tests ([#57809](https://github.com/WordPress/gutenberg/pull/57809)).
+-   `BoxControl`, `BorderControl`, `BorderBoxControl`: Add opt-in prop for 40px default size ([#56185](https://github.com/WordPress/gutenberg/pull/56185)).
 
 ### Experimental
 

packages/components/src/border-box-control/border-box-control/component.tsx

@@ -89,7 +89,6 @@ const UnconnectedBorderBoxControl = (
 		);
 
 	const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );
-
 	return (
 		<View className={ className } { ...otherProps } ref={ mergedRef }>
 			<BorderLabel

packages/components/src/border-box-control/border-box-control/hook.ts

@@ -35,9 +35,13 @@ export function useBorderBoxControl(
 		size = 'default',
 		value,
 		__experimentalIsRenderedInSidebar = false,
+		__next40pxDefaultSize,
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControl' );
 
+	const computedSize =
+		size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
+
 	const mixedBorders = hasMixedBorders( value );
 	const splitBorders = hasSplitBorders( value );
 
@@ -133,7 +137,7 @@ export function useBorderBoxControl(
 		onSplitChange,
 		toggleLinked,
 		linkedValue,
-		size,
+		size: computedSize,
 		splitValue,
 		wrapperClassName,
 		__experimentalIsRenderedInSidebar,

packages/components/src/border-box-control/types.ts

@@ -45,6 +45,12 @@ export type BorderBoxControlProps = ColorProps &
 		 * properties but for each side; `top`, `right`, `bottom`, and `left`.
 		 */
 		value: AnyBorder;
+		/**
+		 * Start opting into the larger default height that will become the default size in a future version.
+		 *
+		 * @default false
+		 */
+		__next40pxDefaultSize?: boolean;
 	};
 
 export type LinkedButtonProps = Pick< BorderBoxControlProps, 'size' > & {

packages/components/src/border-control/border-control/component.tsx

@@ -38,6 +38,7 @@ const UnconnectedBorderControl = (
 	forwardedRef: React.ForwardedRef< any >
 ) => {
 	const {
+		__next40pxDefaultSize = false,
 		colors,
 		disableCustomColors,
 		disableUnits,
@@ -112,6 +113,7 @@ const UnconnectedBorderControl = (
 						step={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }
 						value={ widthValue || undefined }
 						withInputField={ false }
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 					/>
 				) }
 			</HStack>

packages/components/src/border-control/border-control/hook.ts

@@ -41,9 +41,13 @@ export function useBorderControl(
 		value: border,
 		width,
 		__experimentalIsRenderedInSidebar = false,
+		__next40pxDefaultSize,
 		...otherProps
 	} = useContextSystem( props, 'BorderControl' );
 
+	const computedSize =
+		size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
+
 	const [ widthValue, originalWidthUnit ] = parseQuantityAndUnitFromRawValue(
 		border?.width
 	);
@@ -130,10 +134,10 @@ export function useBorderControl(
 	}
 	const innerWrapperClassName = useMemo( () => {
 		const widthStyle = !! wrapperWidth && styles.wrapperWidth;
-		const heightStyle = styles.wrapperHeight( size );
+		const heightStyle = styles.wrapperHeight( computedSize );
 
 		return cx( styles.innerWrapper(), widthStyle, heightStyle );
-	}, [ wrapperWidth, cx, size ] );
+	}, [ wrapperWidth, cx, computedSize ] );
 
 	const sliderClassName = useMemo( () => {
 		return cx( styles.borderSlider() );
@@ -155,7 +159,8 @@ export function useBorderControl(
 		value: border,
 		widthUnit,
 		widthValue,
-		size,
+		size: computedSize,
 		__experimentalIsRenderedInSidebar,
+		__next40pxDefaultSize,
 	};
 }

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

@@ -99,6 +99,12 @@ export type BorderControlProps = ColorProps &
 		 * `RangeControl` for additional control over a border's width.
 		 */
 		withSlider?: boolean;
+		/**
+		 * Start opting into the larger default height that will become the default size in a future version.
+		 *
+		 * @default false
+		 */
+		__next40pxDefaultSize?: boolean;
 	};
 
 export type DropdownProps = ColorProps &

packages/components/src/box-control/all-input-control.tsx

@@ -25,6 +25,7 @@ import {
 const noop = () => {};
 
 export default function AllInputControl( {
+	__next40pxDefaultSize,
 	onChange = noop,
 	onFocus = noop,
 	values,
@@ -74,6 +75,7 @@ export default function AllInputControl( {
 		<HStack>
 			<StyledUnitControl
 				{ ...props }
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				className="component-box-control__unit-control"
 				disableUnits={ isMixed }
 				id={ inputId }
@@ -89,6 +91,7 @@ export default function AllInputControl( {
 
 			<FlexedRangeControl
 				__nextHasNoMarginBottom
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				aria-controls={ inputId }
 				label={ LABELS.all }
 				hideLabelFromVision

packages/components/src/box-control/axial-input-controls.tsx

@@ -20,6 +20,7 @@ const groupedSides = [ 'vertical', 'horizontal' ] as const;
 type GroupedSide = ( typeof groupedSides )[ number ];
 
 export default function AxialInputControls( {
+	__next40pxDefaultSize,
 	onChange,
 	onFocus,
 	values,
@@ -105,6 +106,7 @@ export default function AxialInputControls( {
 						<Tooltip placement="top-end" text={ LABELS[ side ] }>
 							<StyledUnitControl
 								{ ...props }
+								__next40pxDefaultSize={ __next40pxDefaultSize }
 								className="component-box-control__unit-control"
 								id={ inputId }
 								isPressEnterToChange
@@ -126,6 +128,7 @@ export default function AxialInputControls( {
 						</Tooltip>
 						<FlexedRangeControl
 							__nextHasNoMarginBottom
+							__next40pxDefaultSize={ __next40pxDefaultSize }
 							aria-controls={ inputId }
 							label={ LABELS[ side ] }
 							hideLabelFromVision

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

@@ -72,6 +72,7 @@ function useUniqueId( idProp?: string ) {
  * ```
  */
 function BoxControl( {
+	__next40pxDefaultSize = false,
 	id: idProp,
 	inputProps = defaultInputProps,
 	onChange = noop,
@@ -151,6 +152,7 @@ function BoxControl( {
 		values: inputValues,
 		onMouseOver,
 		onMouseOut,
+		__next40pxDefaultSize,
 	};
 
 	return (