From c09c90beeb170b2e87848be3831218729ecb1865 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Wed, 18 Sep 2024 10:31:27 +0530 Subject: [PATCH 1/4] Add deperecation notice for the ButtonGroup component --- packages/components/src/button-group/README.md | 1 + packages/components/src/button-group/index.tsx | 11 +++++++++++ .../src/button-group/stories/index.story.tsx | 3 ++- 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/components/src/button-group/README.md b/packages/components/src/button-group/README.md index 5c0179d6877af..75b750872b87f 100644 --- a/packages/components/src/button-group/README.md +++ b/packages/components/src/button-group/README.md @@ -1,5 +1,6 @@ # ButtonGroup +This component is deprecated, instead use `ToggleGroupControl` component. ButtonGroup can be used to group any related buttons together. To emphasize related buttons, a group should share a common container. ![ButtonGroup component](https://wordpress.org/gutenberg/files/2018/12/s_96EC471FE9C9D91A996770229947AAB54A03351BDE98F444FD3C1BF0CED365EA_1541792995815_ButtonGroup.png) diff --git a/packages/components/src/button-group/index.tsx b/packages/components/src/button-group/index.tsx index fb2659c2a0d7d..6403ee878a6fd 100644 --- a/packages/components/src/button-group/index.tsx +++ b/packages/components/src/button-group/index.tsx @@ -8,6 +8,7 @@ import type { ForwardedRef } from 'react'; * WordPress dependencies */ import { forwardRef } from '@wordpress/element'; +import deprecated from '@wordpress/deprecated'; /** * Internal dependencies @@ -22,6 +23,14 @@ function UnforwardedButtonGroup( const { className, ...restProps } = props; const classes = clsx( 'components-button-group', className ); + /** + * Add deprecation notice for `ButtonGroup` component. + */ + deprecated( 'wp.components.ButtonGroup', { + since: '6.7', + alternative: 'wp.components.ToggleGroupControl', + } ); + return (
); @@ -31,6 +40,8 @@ function UnforwardedButtonGroup( * ButtonGroup can be used to group any related buttons together. To emphasize * related buttons, a group should share a common container. * + * @deprecated use `ToggleGroupControl` instead. + * * ```jsx * import { Button, ButtonGroup } from '@wordpress/components'; * diff --git a/packages/components/src/button-group/stories/index.story.tsx b/packages/components/src/button-group/stories/index.story.tsx index f6af2416977f4..574f95fa74af3 100644 --- a/packages/components/src/button-group/stories/index.story.tsx +++ b/packages/components/src/button-group/stories/index.story.tsx @@ -10,7 +10,8 @@ import ButtonGroup from '..'; import Button from '../../button'; const meta: Meta< typeof ButtonGroup > = { - title: 'Components/ButtonGroup', + title: 'Components (Deprecated)/ButtonGroup', + id: 'components-buttongroup', component: ButtonGroup, argTypes: { children: { control: { type: null } }, From d533acaf163a84cae5db6faac4d73846e2680d5e Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Mon, 16 Dec 2024 10:36:58 +0530 Subject: [PATCH 2/4] Address the feedbacks for deprecation for ButtonGroupControl --- packages/components/src/button-group/README.md | 5 ++++- packages/components/src/button-group/index.tsx | 7 ++----- .../components/src/button-group/stories/index.story.tsx | 6 ++++++ 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/components/src/button-group/README.md b/packages/components/src/button-group/README.md index 75b750872b87f..579103dc70e06 100644 --- a/packages/components/src/button-group/README.md +++ b/packages/components/src/button-group/README.md @@ -1,6 +1,9 @@ # ButtonGroup -This component is deprecated, instead use `ToggleGroupControl` component. +
+ This component is deprecated. Use `ToggleGroupControl` instead. +
+ ButtonGroup can be used to group any related buttons together. To emphasize related buttons, a group should share a common container. ![ButtonGroup component](https://wordpress.org/gutenberg/files/2018/12/s_96EC471FE9C9D91A996770229947AAB54A03351BDE98F444FD3C1BF0CED365EA_1541792995815_ButtonGroup.png) diff --git a/packages/components/src/button-group/index.tsx b/packages/components/src/button-group/index.tsx index 6403ee878a6fd..4bdf3a139188b 100644 --- a/packages/components/src/button-group/index.tsx +++ b/packages/components/src/button-group/index.tsx @@ -23,11 +23,8 @@ function UnforwardedButtonGroup( const { className, ...restProps } = props; const classes = clsx( 'components-button-group', className ); - /** - * Add deprecation notice for `ButtonGroup` component. - */ deprecated( 'wp.components.ButtonGroup', { - since: '6.7', + since: '6.8', alternative: 'wp.components.ToggleGroupControl', } ); @@ -40,7 +37,7 @@ function UnforwardedButtonGroup( * ButtonGroup can be used to group any related buttons together. To emphasize * related buttons, a group should share a common container. * - * @deprecated use `ToggleGroupControl` instead. + * @deprecated Use `ToggleGroupControl` instead. * * ```jsx * import { Button, ButtonGroup } from '@wordpress/components'; diff --git a/packages/components/src/button-group/stories/index.story.tsx b/packages/components/src/button-group/stories/index.story.tsx index 1e0a0c3650ea8..a2df76004d438 100644 --- a/packages/components/src/button-group/stories/index.story.tsx +++ b/packages/components/src/button-group/stories/index.story.tsx @@ -9,6 +9,12 @@ import type { Meta, StoryObj } from '@storybook/react'; import ButtonGroup from '..'; import Button from '../../button'; +/** + * ButtonGroup can be used to group any related buttons together. + * To emphasize related buttons, a group should share a common container. + * + * This component is deprecated. Use `ToggleGroupControl` instead. + */ const meta: Meta< typeof ButtonGroup > = { title: 'Components (Deprecated)/ButtonGroup', id: 'components-buttongroup', From 35d665dfeed1adce1e0ae559db83d4fd65ecf0e0 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Mon, 16 Dec 2024 10:44:33 +0530 Subject: [PATCH 3/4] Add the changelog deprecation message. --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index fef1769c19b0f..3b21709f957b3 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -11,6 +11,7 @@ - `TreeSelect`: Deprecate 36px default size ([#67855](https://github.com/WordPress/gutenberg/pull/67855)). - `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)). +- Deprecate `ButtonGroup` component. Use `ToggleGroupControl` instead ([#65429](https://github.com/WordPress/gutenberg/pull/65429)). ### Bug Fixes From 3174b46c29a1a654e7b8667c698c4c514fdf68db Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Mon, 16 Dec 2024 10:45:49 +0530 Subject: [PATCH 4/4] Update the changelog comment --- 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 3b21709f957b3..3b6dae5193ac1 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -11,7 +11,7 @@ - `TreeSelect`: Deprecate 36px default size ([#67855](https://github.com/WordPress/gutenberg/pull/67855)). - `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)). -- Deprecate `ButtonGroup` component. Use `ToggleGroupControl` instead ([#65429](https://github.com/WordPress/gutenberg/pull/65429)). +- Soft deprecate `ButtonGroup` component. Use `ToggleGroupControl` instead ([#65429](https://github.com/WordPress/gutenberg/pull/65429)). ### Bug Fixes