From 8e57f51852a7e8365f8c0efc966c83ee3a57234f Mon Sep 17 00:00:00 2001 From: Vipul Gupta Date: Tue, 5 Nov 2024 17:56:35 +0530 Subject: [PATCH 1/8] feat: Adds deprecation warning in toggleGroupControl Block. --- .../toggle-group-control-option-icon/README.md | 2 +- .../toggle-group-control-option-icon/component.tsx | 2 +- .../toggle-group-control-option/README.md | 2 +- .../toggle-group-control-option/component.tsx | 1 + .../toggle-group-control/toggle-group-control/README.md | 3 ++- .../toggle-group-control/component.tsx | 9 +++++++++ 6 files changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md index a0e3a44cf74607..1ee82b26a91998 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md +++ b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md @@ -17,7 +17,7 @@ import { formatLowercase, formatUppercase } from '@wordpress/icons'; function Example() { return ( - + + * * * * diff --git a/packages/components/src/toggle-group-control/toggle-group-control/README.md b/packages/components/src/toggle-group-control/toggle-group-control/README.md index ca5c5d14eb6b5a..841d474c148d45 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control/README.md +++ b/packages/components/src/toggle-group-control/toggle-group-control/README.md @@ -25,6 +25,7 @@ function Example() { value="vertical" isBlock __nextHasNoMarginBottom + __next40pxDefaultSize > @@ -100,4 +101,4 @@ Start opting into the larger default height that will become the default size in Start opting into the new margin-free styles that will become the default in a future version. - Required: No -- Default: `false` \ No newline at end of file +- Default: `false` diff --git a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx index 7f384f70ae1dc5..d74be79b921bff 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx +++ b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx @@ -23,6 +23,7 @@ import { ToggleGroupControlAsButtonGroup } from './as-button-group'; import { useTrackElementOffsetRect } from '../../utils/element-rect'; import { useMergeRefs } from '@wordpress/compose'; import { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect'; +import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size'; function UnconnectedToggleGroupControl( props: WordPressComponentProps< ToggleGroupControlProps, 'div', false >, @@ -81,6 +82,13 @@ function UnconnectedToggleGroupControl( ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup; + // Add Warning for deprecated 36px size. + maybeWarnDeprecated36pxSize( { + componentName: 'ToggleGroupControl', + size, + __next40pxDefaultSize, + } ); + return ( * * From 64b9992d69c3e3577aecae633123e35e56cad404 Mon Sep 17 00:00:00 2001 From: Vipul Gupta Date: Tue, 5 Nov 2024 18:03:31 +0530 Subject: [PATCH 2/8] feat: Adds the test case and story book modification. --- .../src/toggle-group-control/stories/index.story.tsx | 1 + .../components/src/toggle-group-control/test/index.tsx | 8 +++++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/components/src/toggle-group-control/stories/index.story.tsx b/packages/components/src/toggle-group-control/stories/index.story.tsx index 92f1e6076248bd..b01f6a51171a8d 100644 --- a/packages/components/src/toggle-group-control/stories/index.story.tsx +++ b/packages/components/src/toggle-group-control/stories/index.story.tsx @@ -50,6 +50,7 @@ const Template: StoryFn< typeof ToggleGroupControl > = ( { return ( { setValue( ...changeArgs ); diff --git a/packages/components/src/toggle-group-control/test/index.tsx b/packages/components/src/toggle-group-control/test/index.tsx index 168e8f498958b5..44cfda69c423cf 100644 --- a/packages/components/src/toggle-group-control/test/index.tsx +++ b/packages/components/src/toggle-group-control/test/index.tsx @@ -28,7 +28,13 @@ const hoverOutside = async () => { }; const ToggleGroupControl = ( props: ToggleGroupControlProps ) => { - return <_ToggleGroupControl { ...props } __nextHasNoMarginBottom />; + return ( + <_ToggleGroupControl + { ...props } + __nextHasNoMarginBottom + __next40pxDefaultSize + /> + ); }; const ControlledToggleGroupControl = ( { From 64c8fb01930ff066c3e55bfcad2c7c9b0ecc0b82 Mon Sep 17 00:00:00 2001 From: Vipul Gupta Date: Tue, 5 Nov 2024 18:08:01 +0530 Subject: [PATCH 3/8] docs: Adds 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..50efc443741b69 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)). +- `ToggleGroupControl`: Deprecate 36px default size ([#66747](https://github.com/WordPress/gutenberg/pull/66747)). ### Bug Fixes From 1b7eeecb693a6b8a28db7592435628b43aeff7c8 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 19 Nov 2024 06:33:59 +0900 Subject: [PATCH 4/8] Add prop to suppress redundant warning --- .../src/font-size-picker/font-size-picker-toggle-group.tsx | 1 + .../toggle-group-control/component.tsx | 3 ++- packages/components/src/toggle-group-control/types.ts | 7 +++++++ packages/components/src/utils/deprecated-36px-size.ts | 3 +++ 4 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx b/packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx index 1e4cbcd1b72660..1b3619c800e453 100644 --- a/packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx +++ b/packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx @@ -19,6 +19,7 @@ const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => { Date: Tue, 19 Nov 2024 13:27:25 +0530 Subject: [PATCH 5/8] Updates the changelog and ToolsPanel Story. --- packages/components/CHANGELOG.md | 2 +- packages/components/src/tools-panel/stories/index.story.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 50efc443741b69..17b76e0e53b246 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ ### Deprecations - `Radio`: Deprecate 36px default size ([#66572](https://github.com/WordPress/gutenberg/pull/66572)). +- `ToggleGroupControl`: Deprecate 36px default size ([#66747](https://github.com/WordPress/gutenberg/pull/66747)). ### Enhancements @@ -24,7 +25,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)). -- `ToggleGroupControl`: Deprecate 36px default size ([#66747](https://github.com/WordPress/gutenberg/pull/66747)). ### Bug Fixes diff --git a/packages/components/src/tools-panel/stories/index.story.tsx b/packages/components/src/tools-panel/stories/index.story.tsx index 459932c9d22d7a..499f97eea193a4 100644 --- a/packages/components/src/tools-panel/stories/index.story.tsx +++ b/packages/components/src/tools-panel/stories/index.story.tsx @@ -110,6 +110,7 @@ export const Default: StoryFn< typeof ToolsPanel > = ( { > setScale( next ) } From 0dca97d227d3958f0e431a08626ce5875e0f470b Mon Sep 17 00:00:00 2001 From: Vipul Gupta Date: Wed, 20 Nov 2024 13:48:04 +0530 Subject: [PATCH 6/8] Updates the snapshots. --- .../test/__snapshots__/index.tsx.snap | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap index 832c6d7cb7a8c8..f344cd6ba16528 100644 --- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap @@ -44,8 +44,8 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] = display: inline-flex; min-width: 0; position: relative; - min-height: 36px; - padding: 2px; + min-height: 40px; + padding: 3px; } .emotion-8:hover { @@ -159,7 +159,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] = width: 100%; z-index: 2; color: #1e1e1e; - height: 30px; + height: 32px; aspect-ratio: 1; padding-left: 0; padding-right: 0; @@ -236,7 +236,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] = width: 100%; z-index: 2; color: #1e1e1e; - height: 30px; + height: 32px; aspect-ratio: 1; padding-left: 0; padding-right: 0; @@ -409,8 +409,8 @@ exports[`ToggleGroupControl controlled should render correctly with text options display: inline-flex; min-width: 0; position: relative; - min-height: 36px; - padding: 2px; + min-height: 40px; + padding: 3px; } .emotion-8:hover { @@ -678,8 +678,8 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] display: inline-flex; min-width: 0; position: relative; - min-height: 36px; - padding: 2px; + min-height: 40px; + padding: 3px; } .emotion-8:hover { @@ -793,7 +793,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] width: 100%; z-index: 2; color: #1e1e1e; - height: 30px; + height: 32px; aspect-ratio: 1; padding-left: 0; padding-right: 0; @@ -870,7 +870,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] width: 100%; z-index: 2; color: #1e1e1e; - height: 30px; + height: 32px; aspect-ratio: 1; padding-left: 0; padding-right: 0; @@ -1037,8 +1037,8 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio display: inline-flex; min-width: 0; position: relative; - min-height: 36px; - padding: 2px; + min-height: 40px; + padding: 3px; } .emotion-8:hover { From fdad7a68c8541392af0a12cf931f38668bc4095c Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 21 Nov 2024 01:58:26 +0900 Subject: [PATCH 7/8] Add prop to all instances in the ToolsPanel stories --- packages/components/src/tools-panel/stories/index.story.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/tools-panel/stories/index.story.tsx b/packages/components/src/tools-panel/stories/index.story.tsx index 499f97eea193a4..787585ac716b51 100644 --- a/packages/components/src/tools-panel/stories/index.story.tsx +++ b/packages/components/src/tools-panel/stories/index.story.tsx @@ -458,6 +458,7 @@ export const WithConditionalDefaultControl: StoryFn< typeof ToolsPanel > = ( { > @@ -560,6 +561,7 @@ export const WithConditionallyRenderedControl: StoryFn< > From e3d0c99d82b42465f75183bfb94466c5d6f8d0a0 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 21 Nov 2024 02:00:10 +0900 Subject: [PATCH 8/8] Rebase changelog again --- 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 cda7b62030ccf4..51dcbd61f3c701 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -8,6 +8,7 @@ - `TextControl`: Deprecate 36px default size ([#66745](https://github.com/WordPress/gutenberg/pull/66745). - `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)). ### Bug Fixes @@ -32,7 +33,6 @@ ### Deprecations - `Radio`: Deprecate 36px default size ([#66572](https://github.com/WordPress/gutenberg/pull/66572)). -- `ToggleGroupControl`: Deprecate 36px default size ([#66747](https://github.com/WordPress/gutenberg/pull/66747)). ### Bug Fixes