From 77a60208bc10dff6f85211c4e739e38f02bdbe27 Mon Sep 17 00:00:00 2001
From: brookewp <brooke.kaminski@automattic.com>
Date: Wed, 15 Nov 2023 16:03:52 -0800
Subject: [PATCH 1/6] Add 40px size to BoxControl

---
 packages/components/src/box-control/all-input-control.tsx   | 3 +++
 .../components/src/box-control/axial-input-controls.tsx     | 3 +++
 packages/components/src/box-control/index.tsx               | 2 ++
 packages/components/src/box-control/input-controls.tsx      | 3 +++
 packages/components/src/box-control/types.ts                | 6 ++++++
 5 files changed, 17 insertions(+)

diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx
index 9c18694bbd0b60..fb65014dfaf0f5 100644
--- a/packages/components/src/box-control/all-input-control.tsx
+++ b/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
diff --git a/packages/components/src/box-control/axial-input-controls.tsx b/packages/components/src/box-control/axial-input-controls.tsx
index 173605f68a8721..c6c0181f6c871c 100644
--- a/packages/components/src/box-control/axial-input-controls.tsx
+++ b/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
diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx
index dcc890e8e3c510..9c3452d4ccb806 100644
--- a/packages/components/src/box-control/index.tsx
+++ b/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 (
diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx
index c8aaeae222749c..553f547abf9b0d 100644
--- a/packages/components/src/box-control/input-controls.tsx
+++ b/packages/components/src/box-control/input-controls.tsx
@@ -19,6 +19,7 @@ import type { BoxControlInputControlProps, BoxControlValue } from './types';
 const noop = () => {};
 
 export default function BoxInputControls( {
+	__next40pxDefaultSize,
 	onChange = noop,
 	onFocus = noop,
 	values,
@@ -107,6 +108,7 @@ export default function BoxInputControls( {
 						<Tooltip placement="top-end" text={ LABELS[ side ] }>
 							<StyledUnitControl
 								{ ...props }
+								__next40pxDefaultSize={ __next40pxDefaultSize }
 								className="component-box-control__unit-control"
 								id={ inputId }
 								isPressEnterToChange
@@ -131,6 +133,7 @@ export default function BoxInputControls( {
 
 						<FlexedRangeControl
 							__nextHasNoMarginBottom
+							__next40pxDefaultSize={ __next40pxDefaultSize }
 							aria-controls={ inputId }
 							label={ LABELS[ side ] }
 							hideLabelFromVision
diff --git a/packages/components/src/box-control/types.ts b/packages/components/src/box-control/types.ts
index 12524559564ab7..eeb72df14bb9c1 100644
--- a/packages/components/src/box-control/types.ts
+++ b/packages/components/src/box-control/types.ts
@@ -71,6 +71,12 @@ export type BoxControlProps = Pick<
 	 * The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.
 	 */
 	values?: BoxControlValue;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 };
 
 export type BoxControlInputControlProps = UnitControlPassthroughProps & {

From 2d7bbf6db9a8eec941e152e7ef14f23eaaf59c0d Mon Sep 17 00:00:00 2001
From: brookewp <brooke.kaminski@automattic.com>
Date: Wed, 15 Nov 2023 16:52:56 -0800
Subject: [PATCH 2/6] Add 40px size to BorderControl

---
 .../src/border-control/border-control/component.tsx        | 7 +++++--
 packages/components/src/border-control/types.ts            | 6 ++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx
index 960be4bf171ea4..4bf255b348f731 100644
--- a/packages/components/src/border-control/border-control/component.tsx
+++ b/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,
@@ -64,6 +65,8 @@ const UnconnectedBorderControl = (
 		...otherProps
 	} = useBorderControl( props );
 
+	const inputHeight = __next40pxDefaultSize ? '__unstable-large' : size;
+
 	return (
 		<View as="fieldset" { ...otherProps } ref={ forwardedRef }>
 			<BorderLabel
@@ -86,7 +89,7 @@ const UnconnectedBorderControl = (
 							__experimentalIsRenderedInSidebar={
 								__experimentalIsRenderedInSidebar
 							}
-							size={ size }
+							size={ inputHeight }
 						/>
 					}
 					label={ __( 'Border width' ) }
@@ -97,7 +100,7 @@ const UnconnectedBorderControl = (
 					placeholder={ placeholder }
 					disableUnits={ disableUnits }
 					__unstableInputWidth={ inputWidth }
-					size={ size }
+					size={ inputHeight }
 				/>
 				{ withSlider && (
 					<RangeControl
diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts
index 470b75df7c1829..7752d9760ffe56 100644
--- a/packages/components/src/border-control/types.ts
+++ b/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 &

From 28092bad28fb1b59d79e7be72c0116a95ecca8cc Mon Sep 17 00:00:00 2001
From: brookewp <brooke.kaminski@automattic.com>
Date: Wed, 15 Nov 2023 18:40:53 -0800
Subject: [PATCH 3/6] Add 40px size to BorderBoxControl

---
 .../border-box-control/border-box-control/component.tsx  | 9 ++++++---
 packages/components/src/border-box-control/types.ts      | 6 ++++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx
index 4f3517937f2046..dbef63eeb5659c 100644
--- a/packages/components/src/border-box-control/border-box-control/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control/component.tsx
@@ -43,6 +43,7 @@ const UnconnectedBorderBoxControl = (
 	forwardedRef: React.ForwardedRef< any >
 ) => {
 	const {
+		__next40pxDefaultSize = false,
 		className,
 		colors,
 		disableCustomColors,
@@ -90,6 +91,8 @@ const UnconnectedBorderBoxControl = (
 
 	const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );
 
+	const inputHeight = __next40pxDefaultSize ? '__unstable-large' : size;
+
 	return (
 		<View className={ className } { ...otherProps } ref={ mergedRef }>
 			<BorderLabel
@@ -119,7 +122,7 @@ const UnconnectedBorderBoxControl = (
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
-						size={ size }
+						size={ inputHeight }
 					/>
 				) : (
 					<BorderBoxControlSplitControls
@@ -134,13 +137,13 @@ const UnconnectedBorderBoxControl = (
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
-						size={ size }
+						size={ inputHeight }
 					/>
 				) }
 				<BorderBoxControlLinkedButton
 					onClick={ toggleLinked }
 					isLinked={ isLinked }
-					size={ size }
+					size={ inputHeight }
 				/>
 			</View>
 		</View>
diff --git a/packages/components/src/border-box-control/types.ts b/packages/components/src/border-box-control/types.ts
index 0b454d8ed09292..283faf05014a03 100644
--- a/packages/components/src/border-box-control/types.ts
+++ b/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' > & {

From dfe78d508eae29600503bc0565dbd9fa3dc97882 Mon Sep 17 00:00:00 2001
From: brookewp <brooke.kaminski@automattic.com>
Date: Mon, 20 Nov 2023 11:59:11 -0800
Subject: [PATCH 4/6] Move logic to hook for BorderControl

---
 .../src/border-control/border-control/component.tsx   |  7 +++----
 .../src/border-control/border-control/hook.ts         | 11 ++++++++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx
index 4bf255b348f731..197067c684373a 100644
--- a/packages/components/src/border-control/border-control/component.tsx
+++ b/packages/components/src/border-control/border-control/component.tsx
@@ -65,8 +65,6 @@ const UnconnectedBorderControl = (
 		...otherProps
 	} = useBorderControl( props );
 
-	const inputHeight = __next40pxDefaultSize ? '__unstable-large' : size;
-
 	return (
 		<View as="fieldset" { ...otherProps } ref={ forwardedRef }>
 			<BorderLabel
@@ -89,7 +87,7 @@ const UnconnectedBorderControl = (
 							__experimentalIsRenderedInSidebar={
 								__experimentalIsRenderedInSidebar
 							}
-							size={ inputHeight }
+							size={ size }
 						/>
 					}
 					label={ __( 'Border width' ) }
@@ -100,7 +98,7 @@ const UnconnectedBorderControl = (
 					placeholder={ placeholder }
 					disableUnits={ disableUnits }
 					__unstableInputWidth={ inputWidth }
-					size={ inputHeight }
+					size={ size }
 				/>
 				{ withSlider && (
 					<RangeControl
@@ -115,6 +113,7 @@ const UnconnectedBorderControl = (
 						step={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }
 						value={ widthValue || undefined }
 						withInputField={ false }
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 					/>
 				) }
 			</HStack>
diff --git a/packages/components/src/border-control/border-control/hook.ts b/packages/components/src/border-control/border-control/hook.ts
index 63034527cfa1a8..8a291c4112d91d 100644
--- a/packages/components/src/border-control/border-control/hook.ts
+++ b/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,
 	};
 }

From ac3cdabca539394f836fd1dd60ba077b84567b37 Mon Sep 17 00:00:00 2001
From: brookewp <brooke.kaminski@automattic.com>
Date: Mon, 20 Nov 2023 13:05:41 -0800
Subject: [PATCH 5/6] Move logic to hook for `BorderBoxControl`

---
 .../border-box-control/component.tsx                   | 10 +++-------
 .../src/border-box-control/border-box-control/hook.ts  |  6 +++++-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx
index dbef63eeb5659c..e329ac7c647cd1 100644
--- a/packages/components/src/border-box-control/border-box-control/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control/component.tsx
@@ -43,7 +43,6 @@ const UnconnectedBorderBoxControl = (
 	forwardedRef: React.ForwardedRef< any >
 ) => {
 	const {
-		__next40pxDefaultSize = false,
 		className,
 		colors,
 		disableCustomColors,
@@ -90,9 +89,6 @@ const UnconnectedBorderBoxControl = (
 		);
 
 	const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );
-
-	const inputHeight = __next40pxDefaultSize ? '__unstable-large' : size;
-
 	return (
 		<View className={ className } { ...otherProps } ref={ mergedRef }>
 			<BorderLabel
@@ -122,7 +118,7 @@ const UnconnectedBorderBoxControl = (
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
-						size={ inputHeight }
+						size={ size }
 					/>
 				) : (
 					<BorderBoxControlSplitControls
@@ -137,13 +133,13 @@ const UnconnectedBorderBoxControl = (
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
-						size={ inputHeight }
+						size={ size }
 					/>
 				) }
 				<BorderBoxControlLinkedButton
 					onClick={ toggleLinked }
 					isLinked={ isLinked }
-					size={ inputHeight }
+					size={ size }
 				/>
 			</View>
 		</View>
diff --git a/packages/components/src/border-box-control/border-box-control/hook.ts b/packages/components/src/border-box-control/border-box-control/hook.ts
index a303e7d5a39e8b..6756bd51188fb4 100644
--- a/packages/components/src/border-box-control/border-box-control/hook.ts
+++ b/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,

From c8e7f4786c55cd380bb31994f842953acbe47597 Mon Sep 17 00:00:00 2001
From: brookewp <brooke.kaminski@automattic.com>
Date: Thu, 11 Jan 2024 20:30:17 -0800
Subject: [PATCH 6/6] Update changelog

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 4152b3c654bab7..ba0629eff7f37d 100644
--- a/packages/components/CHANGELOG.md
+++ b/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