Feat: Adds the deprecation warning for 36px default size in range control.

packages/components/CHANGELOG.md

@@ -13,6 +13,7 @@
 -   `FontSizePicker`: Deprecate 36px default size ([#66920](https://github.com/WordPress/gutenberg/pull/66920)).
 -   `ComboboxControl`: Deprecate 36px default size ([#66900](https://github.com/WordPress/gutenberg/pull/66900)).
 -   `ToggleGroupControl`: Deprecate 36px default size ([#66747](https://github.com/WordPress/gutenberg/pull/66747)).
+-   `RangeControl`: Deprecate 36px default size ([#66721](https://github.com/WordPress/gutenberg/pull/66721)). 
 
 ### Bug Fixes
 

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

@@ -88,9 +88,10 @@ import { RangeControl } from '@wordpress/components';
 const MyRangeControl = () => {
 	const [ columns, setColumns ] = useState( 2 );
 
-	return(
+	return (
 		<RangeControl
 			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label="Columns"
 			value={ columns }
 			onChange={ ( value ) => setColumns( value ) }
@@ -153,7 +154,6 @@ Disables the `input`, preventing new values from being applied.
 -   Required: No
 -   Platform: Web
 
-
 ### `help`: `string|Element`
 
 If this property is added, a help text will be generated using help property as the content.
@@ -165,7 +165,7 @@ If this property is added, a help text will be generated using help property as
 
 Provides control over whether the label will only be visible to screen readers.
 
-- Required: No
+-   Required: No
 
 ### `icon`: `string`
 
@@ -334,6 +334,7 @@ The minimum amount by which `value` changes. It is also a factor in validation a
 
 -   Required: No
 -   Platform: Web
+
 ### `trackColor`: `CSSProperties[ 'color' ]`
 
 CSS color string to customize the track element's background.

packages/components/src/range-control/index.tsx

@@ -38,6 +38,7 @@ import {
 import type { RangeControlProps } from './types';
 import type { WordPressComponentProps } from '../context';
 import { space } from '../utils/space';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const noop = () => {};
 
@@ -229,6 +230,13 @@ function UnforwardedRangeControl(
 		[ isRTL() ? 'right' : 'left' ]: fillValueOffset,
 	};
 
+	// Add default size deprecation warning.
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'RangeControl',
+		__next40pxDefaultSize,
+		size: undefined,
+	} );
+
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
@@ -384,6 +392,7 @@ function UnforwardedRangeControl(
  *   return (
  *     <RangeControl
  *       __nextHasNoMarginBottom
+ *       __next40pxDefaultSize
  *       help="Please select how transparent you would like this."
  *       initialPosition={50}
  *       label="Opacity"

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

@@ -72,6 +72,7 @@ const Template: StoryFn< typeof RangeControl > = ( { onChange, ...args } ) => {
 export const Default: StoryFn< typeof RangeControl > = Template.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
 	help: 'Please select how transparent you would like this.',
 	initialPosition: 50,
 	label: 'Opacity',
@@ -107,6 +108,7 @@ export const WithAnyStep: StoryFn< typeof RangeControl > = ( {
 };
 WithAnyStep.args = {
 	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
 	label: 'Brightness',
 	step: 'any',
 };
@@ -171,6 +173,7 @@ export const WithIntegerStepAndMarks: StoryFn< typeof RangeControl > =
 
 WithIntegerStepAndMarks.args = {
 	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
 	label: 'Integer Step',
 	marks: marksBase,
 	max: 10,
@@ -188,6 +191,7 @@ export const WithDecimalStepAndMarks: StoryFn< typeof RangeControl > =
 
 WithDecimalStepAndMarks.args = {
 	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
 	marks: [
 		...marksBase,
 		{ value: 3.5, label: '3.5' },
@@ -208,6 +212,7 @@ export const WithNegativeMinimumAndMarks: StoryFn< typeof RangeControl > =
 
 WithNegativeMinimumAndMarks.args = {
 	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
 	marks: marksWithNegatives,
 	max: 10,
 	min: -10,
@@ -224,6 +229,7 @@ export const WithNegativeRangeAndMarks: StoryFn< typeof RangeControl > =
 
 WithNegativeRangeAndMarks.args = {
 	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
 	marks: marksWithNegatives,
 	max: -1,
 	min: -10,
@@ -240,6 +246,7 @@ export const WithAnyStepAndMarks: StoryFn< typeof RangeControl > =
 
 WithAnyStepAndMarks.args = {
 	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
 	marks: marksBase,
 	max: 10,
 	min: 0,

packages/components/src/range-control/test/index.tsx

@@ -18,7 +18,13 @@ const fireChangeEvent = ( input: HTMLInputElement, value?: number | string ) =>
 const RangeControl = (
 	props: React.ComponentProps< typeof _RangeControl >
 ) => {
-	return <_RangeControl { ...props } __nextHasNoMarginBottom />;
+	return (
+		<_RangeControl
+			{ ...props }
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+		/>
+	);
 };
 
 describe( 'RangeControl', () => {