diff --git a/packages/components/src/button-group/README.md b/packages/components/src/button-group/README.md index 75b750872b87fe..579103dc70e062 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 6403ee878a6fd3..4bdf3a139188b5 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 1e0a0c3650ea88..a2df76004d4385 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',