From e193d9acf10ff33804be0b5351f32a1a2f78505c Mon Sep 17 00:00:00 2001 From: PARTHVATALIYA Date: Mon, 11 Nov 2024 10:48:40 +0530 Subject: [PATCH 1/7] Add the console warning for 36px size variation --- packages/components/src/input-control/README.md | 1 + packages/components/src/input-control/index.tsx | 8 ++++++++ .../src/input-control/stories/index.story.tsx | 1 + packages/components/src/input-control/test/index.js | 12 +++++++++--- 4 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/components/src/input-control/README.md b/packages/components/src/input-control/README.md index 58a3b4a3b1a09..ff5c70decebeb 100644 --- a/packages/components/src/input-control/README.md +++ b/packages/components/src/input-control/README.md @@ -17,6 +17,7 @@ const Example = () => { return ( setValue( nextValue ?? '' ) } /> diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx index fd0fc0a5c4553..14bca4d9188b4 100644 --- a/packages/components/src/input-control/index.tsx +++ b/packages/components/src/input-control/index.tsx @@ -20,6 +20,7 @@ import { space } from '../utils/space'; import { useDraft } from './utils'; import BaseControl from '../base-control'; import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props'; +import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size'; const noop = () => {}; @@ -68,6 +69,12 @@ export function UnforwardedInputControl( const helpProp = !! help ? { 'aria-describedby': `${ id }__help` } : {}; + maybeWarnDeprecated36pxSize( { + componentName: 'InputControl', + __next40pxDefaultSize, + size: undefined, + } ); + return ( setValue( nextValue ?? '' ) } * /> diff --git a/packages/components/src/input-control/stories/index.story.tsx b/packages/components/src/input-control/stories/index.story.tsx index 1a9290e8e856e..df802245af3b4 100644 --- a/packages/components/src/input-control/stories/index.story.tsx +++ b/packages/components/src/input-control/stories/index.story.tsx @@ -45,6 +45,7 @@ export const Default = Template.bind( {} ); Default.args = { label: 'Value', placeholder: 'Placeholder', + __next40pxDefaultSize: true, }; export const WithHelpText = Template.bind( {} ); diff --git a/packages/components/src/input-control/test/index.js b/packages/components/src/input-control/test/index.js index ace3086c388c8..46332eb6eea70 100644 --- a/packages/components/src/input-control/test/index.js +++ b/packages/components/src/input-control/test/index.js @@ -17,9 +17,15 @@ import BaseInputControl from '../'; const getInput = () => screen.getByTestId( 'input' ); describe( 'InputControl', () => { - const InputControl = ( props ) => ( - - ); + const InputControl = ( props ) => { + return ( + + ); + }; describe( 'Basic rendering', () => { it( 'should render', () => { From f43832bee5551964fc43dcce64fbfb3c738bf647 Mon Sep 17 00:00:00 2001 From: PARTHVATALIYA Date: Mon, 11 Nov 2024 11:05:18 +0530 Subject: [PATCH 2/7] Add the changelog for the deprecation --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 93b191bff269d..58cc59b93e110 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)). +- `InputControl`: Deprecate 36px default size ([#66897](https://github.com/WordPress/gutenberg/pull/66897)). ### Bug Fixes From 596ee00d550a1d242acdb816fedeea6e2ab906a0 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 12 Dec 2024 08:14:32 +0900 Subject: [PATCH 3/7] Fix changelog --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 186f0fb899215..5c8643dc08cf6 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ ### Deprecations - `SelectControl`: Deprecate 36px default size ([#66898](https://github.com/WordPress/gutenberg/pull/66898)). +- `InputControl`: Deprecate 36px default size ([#66897](https://github.com/WordPress/gutenberg/pull/66897)). ## 29.0.0 (2024-12-11) @@ -130,7 +131,6 @@ - `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)). -- `InputControl`: Deprecate 36px default size ([#66897](https://github.com/WordPress/gutenberg/pull/66897)). ### Bug Fixes From d3e2665e4582dc9f006934cd424dd1086729b8d8 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 12 Dec 2024 08:19:32 +0900 Subject: [PATCH 4/7] Suppress warnings when redundant --- packages/components/src/input-control/index.tsx | 4 +++- packages/components/src/number-control/index.tsx | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx index 14bca4d9188b4..d346d1b31b111 100644 --- a/packages/components/src/input-control/index.tsx +++ b/packages/components/src/input-control/index.tsx @@ -37,6 +37,7 @@ export function UnforwardedInputControl( ) { const { __next40pxDefaultSize, + __shouldNotWarnDeprecated36pxSize, __unstableStateReducer: stateReducer = ( state ) => state, __unstableInputWidth, className, @@ -72,7 +73,8 @@ export function UnforwardedInputControl( maybeWarnDeprecated36pxSize( { componentName: 'InputControl', __next40pxDefaultSize, - size: undefined, + size, + __shouldNotWarnDeprecated36pxSize, } ); return ( diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx index efa84879b8ff3..6dd1af4024af7 100644 --- a/packages/components/src/number-control/index.tsx +++ b/packages/components/src/number-control/index.tsx @@ -242,6 +242,7 @@ function UnforwardedNumberControl( return stateReducerProp?.( baseState, action ) ?? baseState; } } size={ size } + __shouldNotWarnDeprecated36pxSize suffix={ spinControls === 'custom' ? ( <> From 1b109a2186de540f8afe65087ba95ef19eefac15 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 12 Dec 2024 08:20:09 +0900 Subject: [PATCH 5/7] Fix Password story --- .../components/src/input-control/stories/index.story.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/components/src/input-control/stories/index.story.tsx b/packages/components/src/input-control/stories/index.story.tsx index 12f357687346b..40630938dbb37 100644 --- a/packages/components/src/input-control/stories/index.story.tsx +++ b/packages/components/src/input-control/stories/index.story.tsx @@ -118,7 +118,6 @@ export const ShowPassword: StoryFn< typeof InputControl > = ( args ) => { return (