From 5325a78ca8d41f327dc939d8671c982a73775206 Mon Sep 17 00:00:00 2001
From: Hit Bhalodia <58802366+hbhalodia@users.noreply.github.com>
Date: Wed, 18 Dec 2024 02:25:30 +0530
Subject: [PATCH] Fix: Add soft deperecation notice for the ButtonGroup
 component (#65429)

* Add deperecation notice for the ButtonGroup component

* Address the feedbacks for deprecation for ButtonGroupControl

* Add the changelog deprecation message.

* Update the changelog comment

Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
---
 packages/components/CHANGELOG.md                         | 1 +
 packages/components/src/button-group/README.md           | 4 ++++
 packages/components/src/button-group/index.tsx           | 8 ++++++++
 .../components/src/button-group/stories/index.story.tsx  | 9 ++++++++-
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 7b5ec64bd44ca5..dbd1d09fbe690f 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)).
+-   Soft deprecate `ButtonGroup` component. Use `ToggleGroupControl` instead ([#65429](https://github.com/WordPress/gutenberg/pull/65429)).
 
 ### Bug Fixes
 
diff --git a/packages/components/src/button-group/README.md b/packages/components/src/button-group/README.md
index 5c0179d6877af9..579103dc70e062 100644
--- a/packages/components/src/button-group/README.md
+++ b/packages/components/src/button-group/README.md
@@ -1,5 +1,9 @@
 # ButtonGroup
 
+<div class="callout callout-alert">
+	This component is deprecated. Use `ToggleGroupControl` instead.
+</div>
+
 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 fb2659c2a0d7de..4bdf3a139188b5 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,11 @@ function UnforwardedButtonGroup(
 	const { className, ...restProps } = props;
 	const classes = clsx( 'components-button-group', className );
 
+	deprecated( 'wp.components.ButtonGroup', {
+		since: '6.8',
+		alternative: 'wp.components.ToggleGroupControl',
+	} );
+
 	return (
 		<div ref={ ref } role="group" className={ classes } { ...restProps } />
 	);
@@ -31,6 +37,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 4b5ab3d5dfdb6b..a2df76004d4385 100644
--- a/packages/components/src/button-group/stories/index.story.tsx
+++ b/packages/components/src/button-group/stories/index.story.tsx
@@ -9,8 +9,15 @@ 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/ButtonGroup',
+	title: 'Components (Deprecated)/ButtonGroup',
+	id: 'components-buttongroup',
 	component: ButtonGroup,
 	argTypes: {
 		children: { control: false },