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
carbon-design-system · Aug 23, 2024 · b968386 · b968386
1 parent aabc48f
commit b968386
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 31 deletions.
diff --git 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
@@ -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);