BorderBoxControl: Hard deprecate 40px default size

packages/block-editor/src/components/global-styles/border-panel.js

@@ -279,7 +279,6 @@ export default function BorderPanel( {
 						popoverPlacement="left-start"
 						value={ border }
 						__experimentalIsRenderedInSidebar
-						size="__unstable-large"
 						hideLabelFromVision={ ! hasShadowControl }
 						label={ __( 'Border' ) }
 					/>

packages/components/CHANGELOG.md

@@ -4,7 +4,8 @@
 
 ### Breaking Changes
 
--   The `__next40pxDefaultSize` prop is now true by default. The prop can be safely removed ([#79386](https://github.com/WordPress/gutenberg/pull/79386), [#79419](https://github.com/WordPress/gutenberg/pull/79419)):
+-   The `__next40pxDefaultSize` prop is now true by default. The prop can be safely removed ([#79386](https://github.com/WordPress/gutenberg/pull/79386), [#79419](https://github.com/WordPress/gutenberg/pull/79419), [#79420](https://github.com/WordPress/gutenberg/pull/79420)):
+    -   `BorderBoxControl`
     -   `BoxControl`
     -   `TextControl`
 

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

@@ -16,17 +16,16 @@ import type { LinkedButtonProps } from '../types';
 export function useBorderBoxControlLinkedButton(
 	props: WordPressComponentProps< LinkedButtonProps, 'button' >
 ) {
-	const {
-		className,
-		size = 'default',
-		...otherProps
-	} = useContextSystem( props, 'BorderBoxControlLinkedButton' );
+	const { className, ...otherProps } = useContextSystem(
+		props,
+		'BorderBoxControlLinkedButton'
+	);
 
 	// Generate class names.
 	const cx = useCx();
 	const classes = useMemo( () => {
-		return cx( styles.borderBoxControlLinkedButton( size ), className );
-	}, [ className, cx, size ] );
+		return cx( styles.borderBoxControlLinkedButton, className );
+	}, [ className, cx ] );
 
 	return { ...otherProps, className: classes };
 }

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

@@ -32,7 +32,6 @@ const BorderBoxControlSplitControls = (
 		popoverPlacement,
 		popoverOffset,
 		rightAlignedClassName,
-		size = 'default',
 		value,
 		__experimentalIsRenderedInSidebar,
 		...otherProps
@@ -66,19 +65,16 @@ const BorderBoxControlSplitControls = (
 		enableStyle,
 		isCompact: true,
 		__experimentalIsRenderedInSidebar,
-		size,
-		__shouldNotWarnDeprecated36pxSize: true,
 	};
 
 	const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );
 
 	return (
 		<Grid { ...otherProps } ref={ mergedRef } gap={ 3 }>
-			<BorderBoxControlVisualizer value={ value } size={ size } />
+			<BorderBoxControlVisualizer value={ value } />
 
-			{ /* Disable reason: BorderControl's size is being controlled via the `size` prop by the parent component  */ }
-			{ /* eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop */ }
 			<BorderControl
+				size="__unstable-large"
 				className={ centeredClassName }
 				hideLabelFromVision
 				label={ __( 'Top border' ) }
@@ -87,19 +83,17 @@ const BorderBoxControlSplitControls = (
 				value={ value?.top }
 				{ ...sharedBorderControlProps }
 			/>
-			{ /* Disable reason: BorderControl's size is being controlled via the `size` prop by the parent component  */ }
-			{ /* eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop */ }
 			<BorderControl
+				size="__unstable-large"
 				hideLabelFromVision
 				label={ __( 'Left border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'left' ) }
 				__unstablePopoverProps={ popoverProps }
 				value={ value?.left }
 				{ ...sharedBorderControlProps }
 			/>
-			{ /* Disable reason: BorderControl's size is being controlled via the `size` prop by the parent component  */ }
-			{ /* eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop */ }
 			<BorderControl
+				size="__unstable-large"
 				className={ rightAlignedClassName }
 				hideLabelFromVision
 				label={ __( 'Right border' ) }
@@ -108,9 +102,8 @@ const BorderBoxControlSplitControls = (
 				value={ value?.right }
 				{ ...sharedBorderControlProps }
 			/>
-			{ /* Disable reason: BorderControl's size is being controlled via the `size` prop by the parent component  */ }
-			{ /* eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop */ }
 			<BorderControl
+				size="__unstable-large"
 				className={ centeredClassName }
 				hideLabelFromVision
 				label={ __( 'Bottom border' ) }

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

@@ -21,16 +21,15 @@ export function useBorderBoxControlSplitControls(
 		colors = [],
 		enableAlpha = false,
 		enableStyle = true,
-		size = 'default',
 		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControlSplitControls' );
 
 	// Generate class names.
 	const cx = useCx();
 	const classes = useMemo( () => {
-		return cx( styles.borderBoxControlSplitControls( size ), className );
-	}, [ cx, className, size ] );
+		return cx( styles.borderBoxControlSplitControls, className );
+	}, [ cx, className ] );
 
 	const centeredClassName = useMemo( () => {
 		return cx( styles.centeredBorderControl, className );
@@ -48,7 +47,6 @@ export function useBorderBoxControlSplitControls(
 		enableAlpha,
 		enableStyle,
 		rightAlignedClassName,
-		size,
 		__experimentalIsRenderedInSidebar,
 	};
 }

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

@@ -16,21 +16,16 @@ import type { VisualizerProps } from '../types';
 export function useBorderBoxControlVisualizer(
 	props: WordPressComponentProps< VisualizerProps, 'div' >
 ) {
-	const {
-		className,
-		value,
-		size = 'default',
-		...otherProps
-	} = useContextSystem( props, 'BorderBoxControlVisualizer' );
+	const { className, value, ...otherProps } = useContextSystem(
+		props,
+		'BorderBoxControlVisualizer'
+	);
 
 	// Generate class names.
 	const cx = useCx();
 	const classes = useMemo( () => {
-		return cx(
-			styles.borderBoxControlVisualizer( value, size ),
-			className
-		);
-	}, [ cx, className, value, size ] );
+		return cx( styles.borderBoxControlVisualizer( value ), className );
+	}, [ cx, className, value ] );
 
 	return { ...otherProps, className: classes, value };
 }

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

@@ -47,7 +47,6 @@ const MyBorderBoxControl = () => {
 
 	return (
 		<BorderBoxControl
-			__next40pxDefaultSize
 			colors={ colors }
 			label={ __( 'Borders' ) }
 			onChange={ onChange }
@@ -137,14 +136,6 @@ The space between the popover and the control wrapper.
 
 -   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.
@@ -166,10 +157,3 @@ const splitBorders = {
 ```
 
 -   Required: No
-
-### `__next40pxDefaultSize`: `boolean`
-
-Start opting into the larger default height that will become the default size in a future version.
-
--   Required: No
--   Default: `false`

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

@@ -59,7 +59,6 @@ const UnconnectedBorderBoxControl = (
 		onSplitChange,
 		popoverPlacement,
 		popoverOffset,
-		size,
 		splitValue,
 		toggleLinked,
 		wrapperClassName,
@@ -112,14 +111,11 @@ const UnconnectedBorderBoxControl = (
 						shouldSanitizeBorder={ false } // This component will handle that.
 						value={ linkedValue }
 						withSlider
-						width={
-							size === '__unstable-large' ? '116px' : '110px'
-						}
+						width="116px"
+						size="__unstable-large"
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
-						__shouldNotWarnDeprecated36pxSize
-						size={ size }
 					/>
 				) : (
 					<BorderBoxControlSplitControls
@@ -134,13 +130,11 @@ const UnconnectedBorderBoxControl = (
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
-						size={ size }
 					/>
 				) }
 				<BorderBoxControlLinkedButton
 					onClick={ toggleLinked }
 					isLinked={ isLinked }
-					size={ size }
 				/>
 			</View>
 		</View>
@@ -176,7 +170,6 @@ const UnconnectedBorderBoxControl = (
  *
  * 	return (
  * 		<BorderBoxControl
- * 			__next40pxDefaultSize
  * 			colors={ colors }
  * 			label={ __( 'Borders' ) }
  * 			onChange={ onChange }

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

@@ -19,7 +19,6 @@ import {
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
-import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
 
 import type { Border } from '../../border-control/types';
 import type { Borders, BorderSide, BorderBoxControlProps } from '../types';
@@ -33,22 +32,14 @@ export function useBorderBoxControl(
 		onChange,
 		enableAlpha = false,
 		enableStyle = true,
-		size = 'default',
 		value,
 		__experimentalIsRenderedInSidebar = false,
-		__next40pxDefaultSize,
+		// Deprecated props, no longer used.
+		size: _size,
+		__next40pxDefaultSize: _next40pxDefaultSize,
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControl' );
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'BorderBoxControl',
-		__next40pxDefaultSize,
-		size,
-	} );
-
-	const computedSize =
-		size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
-
 	const mixedBorders = hasMixedBorders( value );
 	const splitBorders = hasSplitBorders( value );
 
@@ -144,7 +135,6 @@ export function useBorderBoxControl(
 		onSplitChange,
 		toggleLinked,
 		linkedValue,
-		size: computedSize,
 		splitValue,
 		wrapperClassName,
 		__experimentalIsRenderedInSidebar,

packages/components/src/border-box-control/stories/index.story.tsx

@@ -57,7 +57,6 @@ const Template: StoryFn< typeof BorderBoxControl > = ( props ) => {
 	return (
 		<>
 			<BorderBoxControl
-				__next40pxDefaultSize
 				{ ...otherProps }
 				onChange={ onChangeMerged }
 				value={ borders }
@@ -90,5 +89,4 @@ Default.args = {
 	colors,
 	label: 'Borders',
 	enableStyle: true,
-	__next40pxDefaultSize: true,
 };

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

@@ -22,16 +22,12 @@ export const wrapper = css`
 	position: relative;
 `;
 
-export const borderBoxControlLinkedButton = (
-	size?: 'default' | '__unstable-large'
-) => {
-	return css`
-		position: absolute;
-		top: ${ size === '__unstable-large' ? '8px' : '3px' };
-		${ rtl( { right: 0 } )() }
-		line-height: 0;
-	`;
-};
+export const borderBoxControlLinkedButton = css`
+	position: absolute;
+	top: 8px;
+	${ rtl( { right: 0 } )() }
+	line-height: 0;
+`;
 
 const borderBoxStyleWithFallback = ( border?: Border ) => {
 	const {
@@ -48,33 +44,25 @@ const borderBoxStyleWithFallback = ( border?: Border ) => {
 	return `${ color } ${ borderStyle } ${ clampedWidth }`;
 };
 
-export const borderBoxControlVisualizer = (
-	borders?: Borders,
-	size?: 'default' | '__unstable-large'
-) => {
-	return css`
-		position: absolute;
-		top: ${ size === '__unstable-large' ? '20px' : '15px' };
-		right: ${ size === '__unstable-large' ? '39px' : '29px' };
-		bottom: ${ size === '__unstable-large' ? '20px' : '15px' };
-		left: ${ size === '__unstable-large' ? '39px' : '29px' };
-		border-top: ${ borderBoxStyleWithFallback( borders?.top ) };
-		border-bottom: ${ borderBoxStyleWithFallback( borders?.bottom ) };
-		${ rtl( {
-			borderLeft: borderBoxStyleWithFallback( borders?.left ),
-		} )() }
-		${ rtl( {
-			borderRight: borderBoxStyleWithFallback( borders?.right ),
-		} )() }
-	`;
-};
+export const borderBoxControlVisualizer = ( borders?: Borders ) => css`
+	position: absolute;
+	top: 20px;
+	right: 39px;
+	bottom: 20px;
+	left: 39px;
+	border-top: ${ borderBoxStyleWithFallback( borders?.top ) };
+	border-bottom: ${ borderBoxStyleWithFallback( borders?.bottom ) };
+	${ rtl( {
+		borderLeft: borderBoxStyleWithFallback( borders?.left ),
+	} )() }
+	${ rtl( {
+		borderRight: borderBoxStyleWithFallback( borders?.right ),
+	} )() }
+`;
 
-export const borderBoxControlSplitControls = (
-	size?: 'default' | '__unstable-large'
-) => css`
+export const borderBoxControlSplitControls = css`
 	position: relative;
 	flex: 1;
-	width: ${ size === '__unstable-large' ? undefined : '80%' };
 `;
 
 export const centeredBorderControl = css`

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

@@ -53,9 +53,7 @@ const colorPickerRegex = /Border color picker/;
 function TestBorderBoxControl(
 	restProps: ComponentProps< typeof BorderBoxControl >
 ) {
-	return (
-		<BorderBoxControl __next40pxDefaultSize { ...props } { ...restProps } />
-	);
+	return <BorderBoxControl { ...props } { ...restProps } />;
 }
 
 describe( 'BorderBoxControl', () => {