BorderControl: Deprecate 36px default size (#65755)

* Add utility function

* BorderBoxControl: Deprecate 36px default size

* Fix naming

* Add changelog

* BorderControl: Deprecate 36px default size

* Add changelog

Co-authored-by: mirka <[email protected]>
Co-authored-by: ciampo <[email protected]>

Author: mirka

packages/components/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Deprecations
 
 -   `BorderBoxControl`: Deprecate 36px default size ([#65752](https://github.com/WordPress/gutenberg/pull/65752)).
+-   `BorderControl`: Deprecate 36px default size ([#65755](https://github.com/WordPress/gutenberg/pull/65755)).
 
 ### Bug Fixes
 

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

@@ -30,6 +30,7 @@ const MyBorderControl = () => {
 
 	return (
 		<BorderControl
+			__next40pxDefaultSize
 			colors={ colors }
 			label={ __( 'Border' ) }
 			onChange={ setBorder }

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

@@ -154,6 +154,7 @@ const UnconnectedBorderControl = (
  *
  * 	return (
  * 		<BorderControl
+ * 			__next40pxDefaultSize
  * 			colors={ colors }
  * 			label={ __( 'Border' ) }
  * 			onChange={ onChange }

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

@@ -11,8 +11,8 @@ import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
 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.
@@ -41,6 +41,12 @@ export function useBorderControl(
 		...otherProps
 	} = useContextSystem( props, 'BorderControl' );
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'BorderControl',
+		__next40pxDefaultSize,
+		size,
+	} );
+
 	const computedSize =
 		size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
 

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

@@ -93,6 +93,7 @@ export const Default = Template.bind( {} );
 Default.args = {
 	colors,
 	label: 'Border',
+	__next40pxDefaultSize: true,
 	enableAlpha: true,
 	enableStyle: true,
 	shouldSanitizeBorder: true,

packages/components/src/border-control/test/index.js

@@ -31,6 +31,7 @@ function createProps( customProps ) {
 			props.value = newValue;
 		} ),
 		value: defaultBorder,
+		__next40pxDefaultSize: true,
 		...customProps,
 	};
 	return props;

packages/components/src/utils/deprecated-36px-size.ts

@@ -17,8 +17,8 @@ export function maybeWarnDeprecated36pxSize( {
 	}
 
 	deprecated( `36px default size for wp.components.${ componentName }`, {
-		since: '6.7',
-		version: '7.0',
+		since: '6.8',
+		version: '7.1',
 		hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
 	} );
 }