Update border control components to allow 40px height

packages/block-editor/src/components/border-radius-control/all-input-control.js

@@ -19,6 +19,7 @@ export default function AllInputControl( {
 	selectedUnits,
 	setSelectedUnits,
 	values,
+	__next40pxDefaultSize,
 	...props
 } ) {
 	let allValue = getAllValue( values );
@@ -61,6 +62,7 @@ export default function AllInputControl( {
 			onChange={ handleOnChange }
 			onUnitChange={ handleOnUnitChange }
 			placeholder={ allPlaceholder }
+			size={ __next40pxDefaultSize ? '__unstable-large' : undefined }
 		/>
 	);
 }

packages/block-editor/src/components/border-radius-control/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -40,13 +45,18 @@ const MAX_BORDER_RADIUS_VALUES = {
 /**
  * Control to display border radius options.
  *
- * @param {Object}   props          Component props.
- * @param {Function} props.onChange Callback to handle onChange.
- * @param {Object}   props.values   Border radius values.
+ * @param {Object}   props                       Component props.
+ * @param {Function} props.onChange              Callback to handle onChange.
+ * @param {Object}   props.values                Border radius values.
+ * @param {boolean}  props.__next40pxDefaultSize Toggles default height to 40px.
  *
  * @return {WPElement}              Custom border radius control.
  */
-export default function BorderRadiusControl( { onChange, values } ) {
+export default function BorderRadiusControl( {
+	onChange,
+	values,
+	__next40pxDefaultSize = false,
+} ) {
 	const [ isLinked, setIsLinked ] = useState(
 		! hasDefinedValues( values ) || ! hasMixedValues( values )
 	);
@@ -85,12 +95,16 @@ export default function BorderRadiusControl( { onChange, values } ) {
 		onChange( next !== undefined ? `${ next }${ unit }` : undefined );
 	};
 
+	const classes = classnames( 'components-border-radius-control__wrapper', {
+		'has-40px-default-size': __next40pxDefaultSize,
+	} );
+
 	return (
 		<fieldset className="components-border-radius-control">
 			<BaseControl.VisualLabel as="legend">
 				{ __( 'Radius' ) }
 			</BaseControl.VisualLabel>
-			<div className="components-border-radius-control__wrapper">
+			<div className={ classes }>
 				{ isLinked ? (
 					<>
 						<AllInputControl
@@ -101,6 +115,7 @@ export default function BorderRadiusControl( { onChange, values } ) {
 							selectedUnits={ selectedUnits }
 							setSelectedUnits={ setSelectedUnits }
 							units={ units }
+							__next40pxDefaultSize={ __next40pxDefaultSize }
 						/>
 						<RangeControl
 							label={ __( 'Border radius' ) }
@@ -123,6 +138,7 @@ export default function BorderRadiusControl( { onChange, values } ) {
 						setSelectedUnits={ setSelectedUnits }
 						values={ values || DEFAULT_VALUES }
 						units={ units }
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 					/>
 				) }
 				<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />

packages/block-editor/src/components/border-radius-control/input-controls.js

@@ -20,6 +20,7 @@ export default function BoxInputControls( {
 	selectedUnits,
 	setSelectedUnits,
 	values: valuesProp,
+	__next40pxDefaultSize,
 	...props
 } ) {
 	const createHandleOnChange = ( corner ) => ( next ) => {
@@ -54,6 +55,8 @@ export default function BoxInputControls( {
 					bottomRight: valuesProp,
 			  };
 
+	const size = __next40pxDefaultSize ? '__unstable-large' : undefined;
+
 	// Controls are wrapped in tooltips as visible labels aren't desired here.
 	// Tooltip rendering also requires the UnitControl to be wrapped. See:
 	// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
@@ -80,6 +83,7 @@ export default function BoxInputControls( {
 								onUnitChange={ createHandleOnUnitChange(
 									corner
 								) }
+								size={ size }
 							/>
 						</div>
 					</Tooltip>

packages/block-editor/src/components/border-radius-control/style.scss

@@ -34,6 +34,20 @@
 		> span {
 			flex: 0 0 auto;
 		}
+
+		&.has-40px-default-size {
+			.components-range-control {
+				.components-base-control__field {
+					height: 40px;
+					display: flex;
+					align-items: center;
+				}
+			}
+
+			.component-border-radius-control__linked-button.has-icon {
+				margin-top: 8px;
+			}
+		}
 	}
 
 	.components-border-radius-control__input-controls-wrapper {

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

@@ -17,18 +17,18 @@ export function useBorderBoxControlLinkedButton(
 ) {
 	const {
 		className,
-		__next36pxDefaultSize = false,
+		__next40pxDefaultSize = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControlLinkedButton' );
 
 	// Generate class names.
 	const cx = useCx();
 	const classes = useMemo( () => {
 		return cx(
-			styles.BorderBoxControlLinkedButton( __next36pxDefaultSize ),
+			styles.BorderBoxControlLinkedButton( __next40pxDefaultSize ),
 			className
 		);
-	}, [ className, cx, __next36pxDefaultSize ] );
+	}, [ className, cx, __next40pxDefaultSize ] );
 
 	return { ...otherProps, className: classes };
 }

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

@@ -34,7 +34,7 @@ const BorderBoxControlSplitControls = (
 		value,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
-		__next36pxDefaultSize,
+		__next40pxDefaultSize,
 		...otherProps
 	} = useBorderBoxControlSplitControls( props );
 
@@ -67,7 +67,7 @@ const BorderBoxControlSplitControls = (
 		isCompact: true,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
-		__next36pxDefaultSize,
+		__next40pxDefaultSize,
 	};
 
 	const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );
@@ -76,7 +76,7 @@ const BorderBoxControlSplitControls = (
 		<Grid { ...otherProps } ref={ mergedRef } gap={ 4 }>
 			<BorderBoxControlVisualizer
 				value={ value }
-				__next36pxDefaultSize={ __next36pxDefaultSize }
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 			/>
 			<BorderControl
 				className={ centeredClassName }

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

@@ -18,7 +18,7 @@ export function useBorderBoxControlVisualizer(
 	const {
 		className,
 		value,
-		__next36pxDefaultSize = false,
+		__next40pxDefaultSize = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControlVisualizer' );
 
@@ -27,12 +27,12 @@ export function useBorderBoxControlVisualizer(
 	const rtlWatchResult = rtl.watch();
 	const classes = useMemo( () => {
 		return cx(
-			styles.borderBoxControlVisualizer( value, __next36pxDefaultSize ),
+			styles.borderBoxControlVisualizer( value, __next40pxDefaultSize ),
 			className
 		);
 		// rtlWatchResult is needed to refresh styles when the writing direction changes
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ cx, className, value, __next36pxDefaultSize, rtlWatchResult ] );
+	}, [ cx, className, value, __next40pxDefaultSize, rtlWatchResult ] );
 
 	return { ...otherProps, className: classes, value };
 }

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

@@ -62,7 +62,7 @@ const BorderBoxControl = (
 		toggleLinked,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
-		__next36pxDefaultSize = false,
+		__next40pxDefaultSize = false,
 		...otherProps
 	} = useBorderBoxControl( props );
 
@@ -118,7 +118,7 @@ const BorderBoxControl = (
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
-						__next36pxDefaultSize={ __next36pxDefaultSize }
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 					/>
 				) : (
 					<BorderBoxControlSplitControls
@@ -136,13 +136,13 @@ const BorderBoxControl = (
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
-						__next36pxDefaultSize={ __next36pxDefaultSize }
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 					/>
 				) }
 				<BorderBoxControlLinkedButton
 					onClick={ toggleLinked }
 					isLinked={ isLinked }
-					__next36pxDefaultSize={ __next36pxDefaultSize }
+					__next40pxDefaultSize={ __next40pxDefaultSize }
 				/>
 			</HStack>
 		</View>

packages/components/src/border-box-control/stories/index.js

@@ -84,7 +84,7 @@ Default.args = {
 		style: 'dashed',
 		width: '1px',
 	},
-	__next36pxDefaultSize: false,
+	__next40pxDefaultSize: false,
 	popoverPlacement: 'right-start',
 };
 

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

@@ -19,13 +19,13 @@ export const LinkedBorderControl = css`
 `;
 
 export const BorderBoxControlLinkedButton = (
-	__next36pxDefaultSize?: boolean
+	__next40pxDefaultSize?: boolean
 ) => {
 	return css`
 		flex: 0;
 		flex-basis: 24px;
 		line-height: 0;
-		margin-top: ${ __next36pxDefaultSize ? '6px' : '3px' };
+		margin-top: ${ __next40pxDefaultSize ? '8px' : '3px' };
 	`;
 };
 
@@ -46,13 +46,13 @@ const BorderBoxStyleWithFallback = ( border?: Border ) => {
 
 export const borderBoxControlVisualizer = (
 	borders?: Borders,
-	__next36pxDefaultSize?: boolean
+	__next40pxDefaultSize?: boolean
 ) => {
 	return css`
 		position: absolute;
-		top: ${ __next36pxDefaultSize ? '18px' : '15px' };
+		top: ${ __next40pxDefaultSize ? '20px' : '15px' };
 		right: 30px;
-		bottom: ${ __next36pxDefaultSize ? '18px' : '15px' };
+		bottom: ${ __next40pxDefaultSize ? '20px' : '15px' };
 		left: 30px;
 		border-top: ${ BorderBoxStyleWithFallback( borders?.top ) };
 		border-bottom: ${ BorderBoxStyleWithFallback( borders?.bottom ) };

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

@@ -49,7 +49,7 @@ export type BorderBoxControlProps = ColorProps &
 		 *
 		 * @default false
 		 */
-		__next36pxDefaultSize?: boolean;
+		__next40pxDefaultSize?: boolean;
 	};
 
 export type LinkedButtonProps = {
@@ -71,7 +71,7 @@ export type LinkedButtonProps = {
 	 *
 	 * @default false
 	 */
-	__next36pxDefaultSize?: boolean;
+	__next40pxDefaultSize?: boolean;
 };
 
 export type VisualizerProps = {
@@ -87,7 +87,7 @@ export type VisualizerProps = {
 	 *
 	 * @default false
 	 */
-	__next36pxDefaultSize?: boolean;
+	__next40pxDefaultSize?: boolean;
 };
 
 export type SplitControlsProps = ColorProps & {
@@ -121,5 +121,5 @@ export type SplitControlsProps = ColorProps & {
 	 *
 	 * @default false
 	 */
-	__next36pxDefaultSize?: boolean;
+	__next40pxDefaultSize?: boolean;
 };

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

@@ -22,7 +22,7 @@ export function useBorderControlDropdown(
 		colors,
 		onChange,
 		previousStyleSelection,
-		__next36pxDefaultSize,
+		__next40pxDefaultSize,
 		...otherProps
 	} = useContextSystem( props, 'BorderControlDropdown' );
 
@@ -62,9 +62,9 @@ export function useBorderControlDropdown(
 
 	const indicatorWrapperClassName = useMemo( () => {
 		return cx(
-			styles.colorIndicatorWrapper( border, __next36pxDefaultSize )
+			styles.colorIndicatorWrapper( border, __next40pxDefaultSize )
 		);
-	}, [ border, cx, __next36pxDefaultSize ] );
+	}, [ border, cx, __next40pxDefaultSize ] );
 
 	const popoverControlsClassName = useMemo( () => {
 		return cx( styles.borderControlPopoverControls );

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

@@ -59,7 +59,7 @@ const UnconnectedBorderControl = (
 		withSlider,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
-		__next36pxDefaultSize,
+		__next40pxDefaultSize,
 		...otherProps
 	} = useBorderControl( props );
 
@@ -88,7 +88,7 @@ const UnconnectedBorderControl = (
 							__experimentalIsRenderedInSidebar={
 								__experimentalIsRenderedInSidebar
 							}
-							__next36pxDefaultSize={ __next36pxDefaultSize }
+							__next40pxDefaultSize={ __next40pxDefaultSize }
 						/>
 					}
 					label={ __( 'Border width' ) }

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

@@ -35,7 +35,7 @@ export function useBorderControl(
 		shouldSanitizeBorder = true,
 		value: border,
 		width,
-		__next36pxDefaultSize = false,
+		__next40pxDefaultSize = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderControl' );
 
@@ -65,7 +65,6 @@ export function useBorderControl(
 			const [ parsedValue ] =
 				parseQuantityAndUnitFromRawValue( newWidth );
 			const hasZeroWidth = parsedValue === 0;
-
 			const updatedBorder = { ...border, width: newWidthValue };
 
 			// Setting the border width explicitly to zero will also set the
@@ -121,10 +120,10 @@ export function useBorderControl(
 	const wrapperWidth = isCompact ? '90px' : width;
 	const innerWrapperClassName = useMemo( () => {
 		const widthStyle = !! wrapperWidth && styles.wrapperWidth;
-		const heightStyle = styles.wrapperHeight( __next36pxDefaultSize );
+		const heightStyle = styles.wrapperHeight( __next40pxDefaultSize );
 
 		return cx( styles.innerWrapper(), widthStyle, heightStyle );
-	}, [ wrapperWidth, cx, __next36pxDefaultSize ] );
+	}, [ wrapperWidth, cx, __next40pxDefaultSize ] );
 
 	const sliderClassName = useMemo( () => {
 		return cx( styles.borderSlider() );
@@ -143,6 +142,6 @@ export function useBorderControl(
 		value: border,
 		widthUnit,
 		widthValue,
-		__next36pxDefaultSize,
+		__next40pxDefaultSize,
 	};
 }