fix(SidePanel): apply tooltip props conditionally

@matthewgallo’s changes from #4654
carbon-design-system · Apr 26, 2024 · e64c272 · e64c272
1 parent ec9ac16
commit e64c272
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.stories.js b/packages/ibm-products/src/components/SidePanel/SidePanel.stories.js
@@ -522,11 +522,13 @@ WithActionToolbar.args = {
       label: 'Settings',
       icon: (props) => <Settings size={16} {...props} />,
       onClick: action('Toolbar button clicked: Settings'),
+      hasIconOnly: true,
     },
     {
       label: 'Delete',
       icon: (props) => <TrashCan size={16} {...props} />,
       onClick: action('Toolbar button clicked: Delete'),
+      hasIconOnly: true,
     },
   ],
   ...defaultStoryProps,

diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.tsx b/packages/ibm-products/src/components/SidePanel/SidePanel.tsx
@@ -739,7 +739,9 @@ export let SidePanel = React.forwardRef(
                 ({
                   label,
                   kind,
+                  hasIconOnly = false,
                   icon,
+                  renderIcon,
                   tooltipPosition,
                   tooltipAlignment,
                   leading,
@@ -753,11 +755,13 @@ export let SidePanel = React.forwardRef(
                     key={label}
                     kind={kind || 'ghost'}
                     size="sm"
-                    renderIcon={icon}
+                    renderIcon={renderIcon || icon}
                     iconDescription={label}
-                    tooltipPosition={tooltipPosition || 'bottom'}
-                    tooltipAlignment={tooltipAlignment || 'start'}
-                    hasIconOnly={!leading}
+                    {...(hasIconOnly && {
+                      tooltipPosition: tooltipPosition || 'bottom',
+                      tooltipAlignment: tooltipAlignment || 'start',
+                    })}
+                    hasIconOnly={hasIconOnly}
                     disabled={disabled}
                     className={cx([
                       `${blockClass}__action-toolbar-button`,