@wordpress/components 36.0.1 → 37.0.1-next.v.202607070741.0

package/build-types/view/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/view/component.tsx"],"names":[],"mappings":"AAwBA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEd,CAAC;eAEW,IAAI"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/view/component.tsx"],"names":[],"mappings":"AAiCA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,IAAI;;;IAlChB;;;;;;OAMG;UACG,OAAO;;;;IAPb;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;;IANH;;;;;;OAMG;;;;CA8BD,CAAC;eAEW,IAAI"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "36.0.1",
+	"version": "37.0.1-next.v.202607070741.0+a51d59513",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -50,7 +50,7 @@
 		"src/**/*.scss"
 	],
 	"dependencies": {
-		"@ariakit/react": "^0.4.29",
+		"@ariakit/react": "^0.4.32",
 		"@date-fns/utc": "^2.1.1",
 		"@emotion/cache": "^11.14.0",
 		"@emotion/css": "^11.13.5",
@@ -62,26 +62,26 @@
 		"@types/gradient-parser": "^1.1.0",
 		"@types/highlight-words-core": "^1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.49.0",
-		"@wordpress/base-styles": "^10.1.0",
-		"@wordpress/compose": "^8.2.0",
-		"@wordpress/date": "^5.49.0",
-		"@wordpress/deprecated": "^4.49.0",
-		"@wordpress/dom": "^4.49.0",
-		"@wordpress/element": "^8.1.0",
-		"@wordpress/escape-html": "^3.49.0",
-		"@wordpress/hooks": "^4.49.0",
-		"@wordpress/html-entities": "^4.49.0",
-		"@wordpress/i18n": "^6.22.0",
-		"@wordpress/icons": "^15.0.0",
-		"@wordpress/is-shallow-equal": "^5.49.0",
-		"@wordpress/keycodes": "^4.49.0",
-		"@wordpress/primitives": "^4.49.0",
-		"@wordpress/private-apis": "^1.49.0",
-		"@wordpress/rich-text": "^7.49.0",
-		"@wordpress/style-runtime": "^0.5.0",
-		"@wordpress/ui": "^0.16.1",
-		"@wordpress/warning": "^3.49.0",
+		"@wordpress/a11y": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/base-styles": "^10.3.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/compose": "^8.3.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/date": "^5.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/deprecated": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/dom": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/element": "^8.2.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/escape-html": "^3.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/hooks": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/html-entities": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/i18n": "^6.23.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/icons": "^15.1.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/is-shallow-equal": "^5.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/keycodes": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/primitives": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/private-apis": "^1.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/rich-text": "^7.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/style-runtime": "^0.6.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/ui": "^0.18.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/warning": "^3.50.1-next.v.202607070741.0+a51d59513",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
@@ -111,7 +111,7 @@
 		"@testing-library/user-event": "^14.6.1",
 		"@types/jest": "^29.5.14",
 		"@types/react-dom": "^18.3.1",
-		"@wordpress/jest-console": "^8.49.0",
+		"@wordpress/jest-console": "^8.50.1-next.v.202607070741.0+a51d59513",
 		"@wordpress/stylelint-tools": "file:../../tools/stylelint",
 		"snapshot-diff": "^0.10.0",
 		"storybook": "^10.4.3",
@@ -130,5 +130,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9a75283890dda96ae1d37197b5070fae8c9cf66f"
+	"gitHead": "f637726e370c8b23695ed9af82adbe171ad235d8"
 }

package/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`

package/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,10 @@ const UnconnectedBorderBoxControl = (
 						shouldSanitizeBorder={ false } // This component will handle that.
 						value={ linkedValue }
 						withSlider
-						width={
-							size === '__unstable-large' ? '116px' : '110px'
-						}
+						width="116px"
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
-						__shouldNotWarnDeprecated36pxSize
-						size={ size }
 					/>
 				) : (
 					<BorderBoxControlSplitControls
@@ -134,13 +129,11 @@ const UnconnectedBorderBoxControl = (
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
-						size={ size }
 					/>
 				) }
 				<BorderBoxControlLinkedButton
 					onClick={ toggleLinked }
 					isLinked={ isLinked }
-					size={ size }
 				/>
 			</View>
 		</View>
@@ -176,7 +169,6 @@ const UnconnectedBorderBoxControl = (
  *
  * 	return (
  * 		<BorderBoxControl
- * 			__next40pxDefaultSize
  * 			colors={ colors }
  * 			label={ __( 'Borders' ) }
  * 			onChange={ onChange }

package/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,

package/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 };
 }

package/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,18 +65,14 @@ 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
 				className={ centeredClassName }
 				hideLabelFromVision
@@ -87,8 +82,6 @@ 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
 				hideLabelFromVision
 				label={ __( 'Left border' ) }
@@ -97,8 +90,6 @@ const BorderBoxControlSplitControls = (
 				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
 				className={ rightAlignedClassName }
 				hideLabelFromVision
@@ -108,8 +99,6 @@ 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
 				className={ centeredClassName }
 				hideLabelFromVision

package/src/border-box-control/border-box-control-split-controls/hook.ts

@@ -21,7 +21,6 @@ export function useBorderBoxControlSplitControls(
 		colors = [],
 		enableAlpha = false,
 		enableStyle = true,
-		size = 'default',
 		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControlSplitControls' );
@@ -29,8 +28,8 @@ export function useBorderBoxControlSplitControls(
 	// 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,
 	};
 }

package/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 };
 }

package/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,
 };

package/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`

package/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', () => {

package/src/border-box-control/types.ts

@@ -22,7 +22,7 @@ export type BorderSide = keyof Borders;
 
 export type BorderBoxControlProps = ColorProps &
 	LabelProps &
-	Pick< BorderControlProps, 'enableStyle' | 'size' > & {
+	Pick< BorderControlProps, 'enableStyle' > & {
 		/**
 		 * A callback function invoked when any border value is changed. The value
 		 * received may be a "flat" border object, one that has properties defining
@@ -45,15 +45,23 @@ export type BorderBoxControlProps = ColorProps &
 		 * properties but for each side; `top`, `right`, `bottom`, and `left`.
 		 */
 		value: AnyBorder;
+		/**
+		 * Size of the control.
+		 *
+		 * @deprecated This prop no longer has any effect.
+		 * @ignore
+		 */
+		size?: 'default' | '__unstable-large';
 		/**
 		 * Start opting into the larger default height that will become the default size in a future version.
 		 *
-		 * @default false
+		 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+		 * @ignore
 		 */
 		__next40pxDefaultSize?: boolean;
 	};
 
-export type LinkedButtonProps = Pick< BorderBoxControlProps, 'size' > & {
+export type LinkedButtonProps = {
 	/**
 	 * This prop allows the `LinkedButton` to reflect whether the parent
 	 * `BorderBoxControl` is currently displaying "linked" or "unlinked"
@@ -68,7 +76,7 @@ export type LinkedButtonProps = Pick< BorderBoxControlProps, 'size' > & {
 	onClick: () => void;
 };
 
-export type VisualizerProps = Pick< BorderBoxControlProps, 'size' > & {
+export type VisualizerProps = {
 	/**
 	 * An object representing the current border configuration. It contains
 	 * properties for each side, with each side an object reflecting the border
@@ -78,7 +86,7 @@ export type VisualizerProps = Pick< BorderBoxControlProps, 'size' > & {
 };
 
 export type SplitControlsProps = ColorProps &
-	Pick< BorderBoxControlProps, 'enableStyle' | 'size' > & {
+	Pick< BorderBoxControlProps, 'enableStyle' > & {
 		/**
 		 * A callback that is invoked whenever an individual side's border has
 		 * changed.

package/src/border-control/border-control/README.md

@@ -30,7 +30,6 @@ const MyBorderControl = () => {
 
 	return (
 		<BorderControl
-			__next40pxDefaultSize
 			colors={ colors }
 			label={ __( 'Border' ) }
 			onChange={ setBorder }
@@ -126,13 +125,6 @@ new border value.
 -   Required: No
 -   Default: `true`
 
-### `size`: `string`
-
-Size of the control.
-
--   Required: No
--   Default: `default`
--   Allowed values: `default`, `__unstable-large`
 
 ### `value`: `Object`
 
@@ -164,10 +156,3 @@ Flags whether this `BorderControl` should also render a `RangeControl` for
 additional control over a border's width.
 
 -   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`

package/src/border-control/border-control/component.tsx

@@ -39,7 +39,6 @@ const UnconnectedBorderControl = (
 	forwardedRef: React.ForwardedRef< any >
 ) => {
 	const {
-		__next40pxDefaultSize = false,
 		colors,
 		disableCustomColors,
 		disableUnits,
@@ -57,7 +56,6 @@ const UnconnectedBorderControl = (
 		__unstablePopoverProps,
 		previousStyleSelection,
 		showDropdownHeader,
-		size,
 		sliderClassName,
 		value: border,
 		widthUnit,
@@ -75,8 +73,6 @@ const UnconnectedBorderControl = (
 			/>
 			<HStack spacing={ 4 } className={ innerWrapperClassName }>
 				<UnitControl
-					__next40pxDefaultSize={ __next40pxDefaultSize }
-					__shouldNotWarnDeprecated36pxSize
 					prefix={
 						<Spacer marginRight={ 1 } marginBottom={ 0 }>
 							<BorderControlDropdown
@@ -96,7 +92,6 @@ const UnconnectedBorderControl = (
 								__experimentalIsRenderedInSidebar={
 									__experimentalIsRenderedInSidebar
 								}
-								size={ size }
 							/>
 						</Spacer>
 					}
@@ -108,7 +103,6 @@ const UnconnectedBorderControl = (
 					placeholder={ placeholder }
 					disableUnits={ disableUnits }
 					__unstableInputWidth={ inputWidth }
-					size={ size }
 				/>
 				{ withSlider && (
 					<RangeControl
@@ -122,8 +116,6 @@ const UnconnectedBorderControl = (
 						step={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }
 						value={ widthValue || undefined }
 						withInputField={ false }
-						__next40pxDefaultSize={ __next40pxDefaultSize }
-						__shouldNotWarnDeprecated36pxSize
 					/>
 				) }
 			</HStack>
@@ -156,7 +148,6 @@ const UnconnectedBorderControl = (
  *
  * 	return (
  * 		<BorderControl
- * 			__next40pxDefaultSize
  * 			colors={ colors }
  * 			label={ __( 'Border' ) }
  * 			onChange={ onChange }

package/src/border-control/border-control/hook.ts

@@ -12,7 +12,6 @@ import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { Border, BorderControlProps } from '../types';
-import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
 
 // If either width or color are defined, the border is considered valid
 // and a border style can be set as well.
@@ -33,25 +32,15 @@ export function useBorderControl(
 		enableAlpha = true,
 		enableStyle = true,
 		shouldSanitizeBorder = true,
-		size = 'default',
 		value: border,
 		width,
 		__experimentalIsRenderedInSidebar = false,
-		__next40pxDefaultSize,
-		__shouldNotWarnDeprecated36pxSize,
+		// Deprecated props, no longer used.
+		size: _size,
+		__next40pxDefaultSize: _next40pxDefaultSize,
 		...otherProps
 	} = useContextSystem( props, 'BorderControl' );
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'BorderControl',
-		__next40pxDefaultSize,
-		size,
-		__shouldNotWarnDeprecated36pxSize,
-	} );
-
-	const computedSize =
-		size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
-
 	const [ widthValue, originalWidthUnit ] = parseQuantityAndUnitFromRawValue(
 		border?.width
 	);
@@ -138,14 +127,15 @@ export function useBorderControl(
 	if ( isCompact ) {
 		// Widths below represent the minimum usable width for compact controls.
 		// Taller controls contain greater internal padding, thus greater width.
-		wrapperWidth = size === '__unstable-large' ? '116px' : '90px';
+		wrapperWidth = '116px';
 	}
 	const innerWrapperClassName = useMemo( () => {
-		const widthStyle = !! wrapperWidth && styles.wrapperWidth;
-		const heightStyle = styles.wrapperHeight( computedSize );
-
-		return cx( styles.innerWrapper(), widthStyle, heightStyle );
-	}, [ wrapperWidth, cx, computedSize ] );
+		return cx(
+			styles.getInnerWrapperStyles( {
+				hasWidth: !! wrapperWidth,
+			} )
+		);
+	}, [ wrapperWidth, cx ] );
 
 	const sliderClassName = useMemo( () => {
 		return cx( styles.borderSlider() );
@@ -168,8 +158,6 @@ export function useBorderControl(
 		value: border,
 		widthUnit,
 		widthValue,
-		size: computedSize,
 		__experimentalIsRenderedInSidebar,
-		__next40pxDefaultSize,
 	};
 }