From d3d5a5a8e86099aa8abf03f2ef132afb681756bf Mon Sep 17 00:00:00 2001 From: Vipul Gupta Date: Mon, 4 Nov 2024 22:56:44 +0530 Subject: [PATCH 1/4] feat: Adds the deprecation warning for range control. --- packages/components/src/range-control/README.md | 7 ++++--- packages/components/src/range-control/index.tsx | 9 +++++++++ .../components/src/range-control/stories/index.story.tsx | 7 +++++++ packages/components/src/range-control/test/index.tsx | 8 +++++++- 4 files changed, 27 insertions(+), 4 deletions(-) diff --git a/packages/components/src/range-control/README.md b/packages/components/src/range-control/README.md index cfa8c76740e74f..f21285c5f26256 100644 --- a/packages/components/src/range-control/README.md +++ b/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 ( 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. diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx index c9fbdc0055c855..22370a7fe67924 100644 --- a/packages/components/src/range-control/index.tsx +++ b/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 ( = ( { 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', @@ -106,6 +107,7 @@ export const WithAnyStep: StoryFn< typeof RangeControl > = ( { }; WithAnyStep.args = { __nextHasNoMarginBottom: true, + __next40pxDefaultSize: true, label: 'Brightness', step: 'any', }; @@ -170,6 +172,7 @@ export const WithIntegerStepAndMarks: StoryFn< typeof RangeControl > = WithIntegerStepAndMarks.args = { __nextHasNoMarginBottom: true, + __next40pxDefaultSize: true, label: 'Integer Step', marks: marksBase, max: 10, @@ -187,6 +190,7 @@ export const WithDecimalStepAndMarks: StoryFn< typeof RangeControl > = WithDecimalStepAndMarks.args = { __nextHasNoMarginBottom: true, + __next40pxDefaultSize: true, marks: [ ...marksBase, { value: 3.5, label: '3.5' }, @@ -207,6 +211,7 @@ export const WithNegativeMinimumAndMarks: StoryFn< typeof RangeControl > = WithNegativeMinimumAndMarks.args = { __nextHasNoMarginBottom: true, + __next40pxDefaultSize: true, marks: marksWithNegatives, max: 10, min: -10, @@ -223,6 +228,7 @@ export const WithNegativeRangeAndMarks: StoryFn< typeof RangeControl > = WithNegativeRangeAndMarks.args = { __nextHasNoMarginBottom: true, + __next40pxDefaultSize: true, marks: marksWithNegatives, max: -1, min: -10, @@ -239,6 +245,7 @@ export const WithAnyStepAndMarks: StoryFn< typeof RangeControl > = WithAnyStepAndMarks.args = { __nextHasNoMarginBottom: true, + __next40pxDefaultSize: true, marks: marksBase, max: 10, min: 0, diff --git a/packages/components/src/range-control/test/index.tsx b/packages/components/src/range-control/test/index.tsx index 3ce741867d0dbc..3d2db30eea186f 100644 --- a/packages/components/src/range-control/test/index.tsx +++ b/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', () => { From c8612d970f944a4e66ab2dfac776ca29e03dbde3 Mon Sep 17 00:00:00 2001 From: Vipul Gupta Date: Mon, 4 Nov 2024 23:01:42 +0530 Subject: [PATCH 2/4] docs: Adds deprecation changelog. --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 93b191bff269d6..f8dac6e4318ec4 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -24,6 +24,7 @@ - `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)). +- `RangeControl`: Deprecate 36px default size ([#66721](https://github.com/WordPress/gutenberg/pull/66721)). ### Bug Fixes From 55f7dcf80ea7088b354714142f829bdecb093bca Mon Sep 17 00:00:00 2001 From: Vipul Gupta Date: Fri, 22 Nov 2024 12:42:55 +0530 Subject: [PATCH 3/4] feat: Suppress the redundant warnings. --- .../src/border-control/border-control/component.tsx | 1 + packages/components/src/font-size-picker/index.tsx | 1 + packages/components/src/range-control/index.tsx | 2 ++ packages/components/src/range-control/types.ts | 7 +++++++ 4 files changed, 11 insertions(+) diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx index 31eeb166a2d60f..2ba338c2bb30cb 100644 --- a/packages/components/src/border-control/border-control/component.tsx +++ b/packages/components/src/border-control/border-control/component.tsx @@ -122,6 +122,7 @@ const UnconnectedBorderControl = ( value={ widthValue || undefined } withInputField={ false } __next40pxDefaultSize={ __next40pxDefaultSize } + __shouldNotWarnDeprecated36pxSize /> ) } diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx index d4e8ea29fc6c4f..a71e60cd6719c8 100644 --- a/packages/components/src/font-size-picker/index.tsx +++ b/packages/components/src/font-size-picker/index.tsx @@ -242,6 +242,7 @@ const UnforwardedFontSizePicker = ( __next40pxDefaultSize={ __next40pxDefaultSize } + __shouldNotWarnDeprecated36pxSize className="components-font-size-picker__custom-input" label={ __( 'Custom Size' ) } hideLabelFromVision diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx index 22370a7fe67924..916571c3ee0e05 100644 --- a/packages/components/src/range-control/index.tsx +++ b/packages/components/src/range-control/index.tsx @@ -97,6 +97,7 @@ function UnforwardedRangeControl( trackColor, value: valueProp, withInputField = true, + __shouldNotWarnDeprecated36pxSize, ...otherProps } = props; @@ -235,6 +236,7 @@ function UnforwardedRangeControl( componentName: 'RangeControl', __next40pxDefaultSize, size: undefined, + __shouldNotWarnDeprecated36pxSize, } ); return ( diff --git a/packages/components/src/range-control/types.ts b/packages/components/src/range-control/types.ts index a427ab4f942af6..e4792296f83144 100644 --- a/packages/components/src/range-control/types.ts +++ b/packages/components/src/range-control/types.ts @@ -233,6 +233,13 @@ export type RangeControlProps = Pick< * @default true */ withInputField?: boolean; + /** + * Do not throw a warning for the deprecated 36px default size. + * For internal components of other components that already throw the warning. + * + * @ignore + */ + __shouldNotWarnDeprecated36pxSize?: boolean; }; export type RailProps = MarksProps & { From 1d8a4ea65048360987d8aa934525909f48c6b5a3 Mon Sep 17 00:00:00 2001 From: Vipul Gupta Date: Mon, 25 Nov 2024 14:09:12 +0530 Subject: [PATCH 4/4] refactor: Supress redundant warnings. --- packages/components/src/box-control/all-input-control.tsx | 1 + packages/components/src/box-control/axial-input-controls.tsx | 1 + packages/components/src/box-control/input-controls.tsx | 1 + 3 files changed, 3 insertions(+) diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx index e9166ff7f692e8..057cf3c15d8c38 100644 --- a/packages/components/src/box-control/all-input-control.tsx +++ b/packages/components/src/box-control/all-input-control.tsx @@ -91,6 +91,7 @@ export default function AllInputControl( {