Border Controls: Update control components to allow 40px height (#41860)

* Update border control components to allow 40px height

* Make 40px height work again after rebase

* Turn on 40px tall border controls in editors

* Update radius control to handle extra padding

These tweaks update the BorderRadiusControl such that the entered values are actually visible despite the increased internal padding applied to the UnitControl when the `__unstable-large` variant is used.

* First pass at improving border controls when at 40px

Initial tweaks to improve the UX for the border controls. Aims to address the increased padding for large 40px high UnitControl variant that cuts of entered values from display.

* Make compact inputs 118px wide

* Increase padding to 16px between input and slider

* Make split controls gap a uniform 16px

* Update split layout for floating linked button

* Make color dropdown 40px square with 16px indicator

* Tweak input widths again to fit editor sidebar

* Make radius control match border and grid

* Remove hardcoded width from radius input wrapper

* Try using Mix as placeholder for mixed values

* Revert placeholder back to 'Mixed'

* Remove use of internal component classnames

* Remove unnecessary flex styles from linked button

* Use space util for color swatch dimensions

* Add explanatory comment for compact widths

* Better align the left border for 30px height variant

* Consolidate border radius controls to single 40px height

This allows us to remove most of the changes that would have been introduced in this PR as well as simplify the CSS.

* Fix RTL rendering and style naming

* Remove unneeded prop setting 40px height

* Switch __next40pxDefaultSize to size __unstable-large

* Fix up defaults in types and update READMEs

* Add components changelog

* Rename new prop `__unstableWrapperClassName`

* UnitControl: Normalize wrapper classnames by removing outer wrapper (#45139)

* BorderBoxControl: Refactor stories to TypeScript and Controls (#45002)

* Remove max-width wrappers from border control stories

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

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

@@ -61,6 +61,7 @@ export default function AllInputControl( {
 			onChange={ handleOnChange }
 			onUnitChange={ handleOnUnitChange }
 			placeholder={ allPlaceholder }
+			size={ '__unstable-large' }
 		/>
 	);
 }

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

@@ -113,6 +113,7 @@ export default function BorderRadiusControl( { onChange, values } ) {
 							withInputField={ false }
 							onChange={ handleSliderChange }
 							step={ step }
+							__nextHasNoMarginBottom
 						/>
 					</>
 				) : (

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

@@ -80,6 +80,7 @@ export default function BoxInputControls( {
 								onUnitChange={ createHandleOnUnitChange(
 									corner
 								) }
+								size={ '__unstable-large' }
 							/>
 						</div>
 					</Tooltip>

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

@@ -10,24 +10,21 @@
 		justify-content: space-between;
 		align-items: flex-start;
 
-		> .components-unit-control-wrapper {
-			width: 110px;
+		.components-border-radius-control__unit-control {
+			width: calc((100% - #{$grid-unit-20}) / 2);
 			margin-bottom: 0;
-			margin-right: #{ $grid-unit-15 };
+			margin-right: $grid-unit-20;
 			flex-shrink: 0;
 		}
 
-		.components-range-control {
+		.components-border-radius-control__range-control {
 			flex: 1;
-			margin-bottom: 0;
-
-			.components-base-control__field {
-				margin-bottom: 0;
-				height: 30px;
-			}
+			margin-right: $grid-unit-15;
 
-			.components-range-control__wrapper {
-				margin-right: 10px;
+			> div {
+				height: 40px;
+				display: flex;
+				align-items: center;
 			}
 		}
 
@@ -37,22 +34,16 @@
 	}
 
 	.components-border-radius-control__input-controls-wrapper {
-		display: flex;
-		width: 70%;
-		flex-wrap: wrap;
-
-		.components-border-radius-control__tooltip-wrapper {
-			width: calc(50% - #{ $grid-unit-10 });
-			margin-bottom: $grid-unit-10;
-			margin-right: $grid-unit-10;
-		}
+		display: grid;
+		gap: $grid-unit-20;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		margin-right: $grid-unit-15;
 	}
 
-	.component-border-radius-control__linked-button.has-icon {
+	.component-border-radius-control__linked-button {
 		display: flex;
 		justify-content: center;
-		margin-left: 2px;
-		margin-top: 3px;
+		margin-top: $grid-unit-10;
 
 		svg {
 			margin-right: 0;

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

@@ -272,6 +272,7 @@ export function BorderPanel( props ) {
 						onChange={ onBorderChange }
 						popoverOffset={ 40 }
 						popoverPlacement="left-start"
+						size="__unstable-large"
 						value={ hydratedBorder }
 						__experimentalHasMultipleOrigins={ true }
 						__experimentalIsRenderedInSidebar={ true }

packages/components/CHANGELOG.md

@@ -14,10 +14,12 @@
 
 -   `BoxControl` & `CustomSelectControl`: Add `onMouseOver` and `onMouseOut` callback props to allow handling of these events by parent components ([#44955](https://github.com/WordPress/gutenberg/pull/44955))
 
-## Enhancements
+### Enhancements
 
 -   `FontSizePicker`: Improved slider design when `withSlider` is set ([#44598](https://github.com/WordPress/gutenberg/pull/44598)).
 -   `ToggleControl`: Improved types for the `help` prop, covering the dynamic render function option, and enabled the dynamic `help` behavior only for a controlled component ([#45279](https://github.com/WordPress/gutenberg/pull/45279)).
+-   `BorderControl` & `BorderBoxControl`: Replace `__next36pxDefaultSize` with "default" and "large" size variants ([#41860](https://github.com/WordPress/gutenberg/pull/41860)).
+-   `UnitControl`: Remove outer wrapper to normalize className placement ([#41860](https://github.com/WordPress/gutenberg/pull/41860)).
 
 ### Bug Fix
 
@@ -30,6 +32,7 @@
 
 ### Internal
 
+-   `BorderBoxControl`: Convert stories to TypeScript and use Controls ([#45002](https://github.com/WordPress/gutenberg/pull/45002)).
 -   `Disabled`: add a note in the docs about the lack of polyfill for the `inert` attribute ([#45272](https://github.com/WordPress/gutenberg/pull/45272))
 -   `Snackbar`: updated to satisfy `react/exhaustive-deps` eslint rule ([#44934](https://github.com/WordPress/gutenberg/pull/44934))
 -   `AnglePickerControl`: Set Storybook Label control type to 'text' ([#45122](https://github.com/WordPress/gutenberg/pull/45122)).

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

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

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

@@ -31,10 +31,10 @@ const BorderBoxControlSplitControls = (
 		popoverPlacement,
 		popoverOffset,
 		rightAlignedClassName,
+		size = 'default',
 		value,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
-		__next36pxDefaultSize,
 		...otherProps
 	} = useBorderBoxControlSplitControls( props );
 
@@ -67,17 +67,14 @@ const BorderBoxControlSplitControls = (
 		isCompact: true,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
-		__next36pxDefaultSize,
+		size,
 	};
 
 	const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );
 
 	return (
 		<Grid { ...otherProps } ref={ mergedRef } gap={ 4 }>
-			<BorderBoxControlVisualizer
-				value={ value }
-				__next36pxDefaultSize={ __next36pxDefaultSize }
-			/>
+			<BorderBoxControlVisualizer value={ value } size={ size } />
 			<BorderControl
 				className={ centeredClassName }
 				hideLabelFromVision={ true }

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

@@ -8,41 +8,38 @@ import { useMemo } from '@wordpress/element';
  */
 import * as styles from '../styles';
 import { useContextSystem, WordPressComponentProps } from '../../ui/context';
-import { useCx, rtl } from '../../utils/';
+import { useCx } from '../../utils/';
 
 import type { SplitControlsProps } from '../types';
 
 export function useBorderBoxControlSplitControls(
 	props: WordPressComponentProps< SplitControlsProps, 'div' >
 ) {
-	const { className, ...otherProps } = useContextSystem(
-		props,
-		'BorderBoxControlSplitControls'
-	);
+	const {
+		className,
+		size = 'default',
+		...otherProps
+	} = useContextSystem( props, 'BorderBoxControlSplitControls' );
 
 	// Generate class names.
 	const cx = useCx();
-	const rtlWatchResult = rtl.watch();
 	const classes = useMemo( () => {
-		return cx( styles.borderBoxControlSplitControls(), className );
-		// rtlWatchResult is needed to refresh styles when the writing direction changes
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ cx, className, rtlWatchResult ] );
+		return cx( styles.borderBoxControlSplitControls( size ), className );
+	}, [ cx, className, size ] );
 
 	const centeredClassName = useMemo( () => {
-		return cx( styles.CenteredBorderControl, className );
+		return cx( styles.centeredBorderControl, className );
 	}, [ cx, className ] );
 
 	const rightAlignedClassName = useMemo( () => {
 		return cx( styles.rightBorderControl(), className );
-		// rtlWatchResult is needed to refresh styles when the writing direction changes
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ cx, className, rtlWatchResult ] );
+	}, [ cx, className ] );
 
 	return {
 		...otherProps,
 		centeredClassName,
 		className: classes,
 		rightAlignedClassName,
+		size,
 	};
 }

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

@@ -8,7 +8,7 @@ import { useMemo } from '@wordpress/element';
  */
 import * as styles from '../styles';
 import { useContextSystem, WordPressComponentProps } from '../../ui/context';
-import { useCx, rtl } from '../../utils';
+import { useCx } from '../../utils';
 
 import type { VisualizerProps } from '../types';
 
@@ -18,21 +18,18 @@ export function useBorderBoxControlVisualizer(
 	const {
 		className,
 		value,
-		__next36pxDefaultSize = false,
+		size = 'default',
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControlVisualizer' );
 
 	// Generate class names.
 	const cx = useCx();
-	const rtlWatchResult = rtl.watch();
 	const classes = useMemo( () => {
 		return cx(
-			styles.borderBoxControlVisualizer( value, __next36pxDefaultSize ),
+			styles.borderBoxControlVisualizer( value, size ),
 			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, size ] );
 
 	return { ...otherProps, className: classes, value };
 }

packages/components/src/border-box-control/border-box-control/README.md

@@ -138,6 +138,14 @@ Works in conjunctions with `popoverPlacement` and allows leaving a space between
 
 - Required: No
 
+### `size`: `string`
+
+Size of the control.
+
+- Required: No
+- Default: `default`
+- Allowed values: `default`, `__unstable-large`
+
 ### `value`: `Object`
 
 An object representing the current border configuration.