From b968386090b0934f770c66a6eab08f4af0054ee4 Mon Sep 17 00:00:00 2001
From: Afsal K <makafsal@users.noreply.github.com>
Date: Fri, 23 Aug 2024 20:21:20 +0530
Subject: [PATCH] fix(ToolbarButton): deprecate iconDescription and use label
 instead (#5893)

* fix(ToolbarButton): deprecate iconDescription and use label instead

* chore(ToolbarButton): change iconDesription to label in stories

* refactor(ToolbarButton): support backward iconDescription
---
 .../components/Toolbar/Toolbar.stories.jsx    | 54 +++++++++----------
 .../src/components/Toolbar/ToolbarButton.tsx  | 25 +++++++--
 2 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/packages/ibm-products/src/components/Toolbar/Toolbar.stories.jsx b/packages/ibm-products/src/components/Toolbar/Toolbar.stories.jsx
index 1df93df8bc..bd905049dc 100644
--- a/packages/ibm-products/src/components/Toolbar/Toolbar.stories.jsx
+++ b/packages/ibm-products/src/components/Toolbar/Toolbar.stories.jsx
@@ -65,62 +65,62 @@ function _Toolbar(args) {
     <Toolbar {...args}>
       <ToolbarGroup>
         <ToolbarButton
-          iconDescription="Save"
+          label="Save"
           renderIcon={(props) => <Save size={16} {...props} />}
         />
         <ToolbarButton
-          iconDescription="Share"
+          label="Share"
           renderIcon={(props) => <Share size={16} {...props} />}
         />
         <ToolbarButton
-          iconDescription="Upload"
+          label="Upload"
           renderIcon={(props) => <Upload size={16} {...props} />}
         />
         <ToolbarButton
-          iconDescription="Print"
+          label="Print"
           renderIcon={(props) => <Printer size={16} {...props} />}
         />
       </ToolbarGroup>
 
       <ToolbarGroup>
         <ToolbarButton
-          iconDescription="Undo"
+          label="Undo"
           renderIcon={(props) => <Undo size={16} {...props} />}
         />
         <ToolbarButton
-          iconDescription="Redo"
+          label="Redo"
           renderIcon={(props) => <Redo size={16} {...props} />}
         />
         <ToolbarButton
-          iconDescription="Zoom in"
+          label="Zoom in"
           renderIcon={(props) => <ZoomIn size={16} {...props} />}
         />
         <ToolbarButton
-          iconDescription="Zoom out"
+          label="Zoom out"
           renderIcon={(props) => <ZoomOut size={16} {...props} />}
         />
         <ToolbarButton
-          iconDescription="Minimize"
+          label="Minimize"
           renderIcon={(props) => <Minimize size={16} {...props} />}
         />
 
         <ToolbarButton
-          iconDescription="Align horizontal center"
+          label="Align horizontal center"
           renderIcon={(props) => <AlignHorizontalCenter size={16} {...props} />}
         />
       </ToolbarGroup>
 
       <ToolbarGroup>
         <ToolbarButton
-          iconDescription="Ruler"
+          label="Ruler"
           renderIcon={(props) => <RulerAlt size={16} {...props} />}
         />
         <ToolbarButton
-          iconDescription="Pin"
+          label="Pin"
           renderIcon={(props) => <Pin size={16} {...props} />}
         />
         <ToolbarButton
-          iconDescription="Copy file"
+          label="Copy file"
           renderIcon={(props) => <CopyFile size={16} {...props} />}
         />
       </ToolbarGroup>
@@ -139,7 +139,7 @@ function _Toolbar(args) {
 
       <ToolbarGroup>
         <ToolbarButton
-          iconDescription="Text align center"
+          label="Text align center"
           renderIcon={(props) => <TextAlignCenter size={16} {...props} />}
           caret
         />
@@ -156,12 +156,12 @@ function _Toolbar(args) {
 
       <ToolbarGroup>
         <ToolbarButton
-          iconDescription="Table"
+          label="Table"
           renderIcon={(props) => <Table size={16} {...props} />}
         />
 
         <ToolbarButton
-          iconDescription="Settings adjust"
+          label="Settings adjust"
           renderIcon={(props) => <SettingsAdjust size={16} {...props} />}
         />
       </ToolbarGroup>
@@ -178,62 +178,62 @@ function vertical(args) {
     <Toolbar {...args}>
       <ToolbarGroup>
         <ToolbarButton
-          iconDescription="Drag"
+          label="Drag"
           renderIcon={(props) => <Draggable size={16} {...props} />}
         />
       </ToolbarGroup>
 
       <ToolbarGroup>
         <ToolbarButton
-          iconDescription="Ruler"
+          label="Ruler"
           renderIcon={(props) => <RulerAlt size={16} {...props} />}
         />
         <ToolbarButton
-          iconDescription="Pin"
+          label="Pin"
           renderIcon={(props) => <Pin size={16} {...props} />}
         />
 
         <ToolbarButton
-          iconDescription="Color palette"
+          label="Color palette"
           renderIcon={(props) => <ColorPalette size={16} {...props} />}
         />
 
         <ToolbarButton
-          iconDescription="Text creation"
+          label="Text creation"
           renderIcon={(props) => <TextCreation size={16} {...props} />}
         />
       </ToolbarGroup>
 
       <ToolbarGroup>
         <ToolbarButton
-          iconDescription="Open panel left"
+          label="Open panel left"
           renderIcon={(props) => <OpenPanelLeft size={16} {...props} />}
         />
 
         <ToolbarButton
-          iconDescription="Open panel right"
+          label="Open panel right"
           renderIcon={(props) => <OpenPanelRight size={16} {...props} />}
         />
       </ToolbarGroup>
 
       <ToolbarGroup>
         <ToolbarButton
-          iconDescription="Move"
+          label="Move"
           renderIcon={(props) => <Move size={16} {...props} />}
         />
         <ToolbarButton
-          iconDescription="Rotate"
+          label="Rotate"
           renderIcon={(props) => <Rotate size={16} {...props} />}
         />
       </ToolbarGroup>
 
       <ToolbarGroup>
         <ToolbarButton
-          iconDescription="Zoom in"
+          label="Zoom in"
           renderIcon={(props) => <ZoomIn size={16} {...props} />}
         />
         <ToolbarButton
-          iconDescription="Zoom out"
+          label="Zoom out"
           renderIcon={(props) => <ZoomOut size={16} {...props} />}
         />
       </ToolbarGroup>
diff --git a/packages/ibm-products/src/components/Toolbar/ToolbarButton.tsx b/packages/ibm-products/src/components/Toolbar/ToolbarButton.tsx
index a6a24424f1..1c51729dbc 100644
--- a/packages/ibm-products/src/components/Toolbar/ToolbarButton.tsx
+++ b/packages/ibm-products/src/components/Toolbar/ToolbarButton.tsx
@@ -21,8 +21,14 @@ export interface ToolbarButtonProps
   caret?: boolean;
   /** Provide an optional class to be applied to the containing node */
   className?: string;
+  /**
+   * @deprecated use `label` instead
+   * Specifies the label for the icon button */
+  iconDescription?: string;
+
   /** Specifies the label for the icon button */
-  iconDescription: string;
+  label: string;
+
   /** Specifies the icon to be used by the ToolbarButton component */
   renderIcon: React.ElementType;
 }
@@ -35,7 +41,8 @@ export let ToolbarButton = forwardRef(
       children,
       className,
       renderIcon,
-      iconDescription = '',
+      iconDescription: deprecated_iconDescription = '',
+      label,
       ...rest
     }: React.PropsWithChildren<ToolbarButtonProps>,
     ref
@@ -45,7 +52,7 @@ export let ToolbarButton = forwardRef(
       <IconButton
         align={useContext(ToolbarContext)?.vertical ? 'right' : 'top'}
         {...rest}
-        label={iconDescription}
+        label={label ?? deprecated_iconDescription}
         ref={ref}
         className={cx(className, { [`${blockClass}--caret`]: caret })}
         kind="ghost"
@@ -65,6 +72,14 @@ export let ToolbarButton = forwardRef(
 const componentName = 'ToolbarButton';
 ToolbarButton.displayName = componentName;
 
+export const deprecatedProps = {
+  /**
+   * **Deprecated**
+   * Specifies the label for the icon button
+   *  */
+  iconDescription: string,
+};
+
 ToolbarButton.propTypes = {
   /** Determines whether the caret is rendered */
   caret: bool,
@@ -76,10 +91,12 @@ ToolbarButton.propTypes = {
   className: string,
 
   /** Specifies the label for the icon button */
-  iconDescription: string.isRequired,
+  label: string.isRequired,
 
   /** Specifies the icon to be used by the ToolbarButton component */
   renderIcon: func.isRequired,
+
+  ...deprecatedProps,
 };
 
 ToolbarButton = pkg.checkComponentEnabled(ToolbarButton, componentName);