feat(SidePanel): adding tooltip (#5390)

* feat(SidePanel): adding tooltip * fix(SidePanel): resolve test-c4p failure * fix(SidePanel): change button to Iconbutton
carbon-design-system · Jun 11, 2024 · 254149c · 254149c
1 parent 18dba09
commit 254149c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 deletions.
diff --git a/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss b/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss
@@ -342,9 +342,16 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     align-items: center;
     justify-content: center;
     padding: 0;
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+    background-color: unset;
     color: $text-primary;
+    min-block-size: 0;
 
-    .#{c4p-settings.$carbon-prefix}--btn__icon {
+    /* stylelint-disable-next-line max-nesting-depth */
+    &:hover {
+      background-color: $background-hover;
+    }
+    .#{$block-class}--btn__icon {
       margin: 0;
     }
   }

diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.test.js b/packages/ibm-products/src/components/SidePanel/SidePanel.test.js
@@ -6,7 +6,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { fireEvent, render, screen, act } from '@testing-library/react';
+import {
+  fireEvent,
+  render,
+  screen,
+  act,
+  waitFor,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { expectMultipleError } from '../../global/js/utils/test-helper';
 
@@ -460,9 +466,9 @@ describe('SidePanel', () => {
     const closeIconButton = container.querySelector(
       `.${blockClass}__close-button`
     );
-    await new Promise((resolve) => setTimeout(resolve, 0));
-
-    expect(closeIconButton).toHaveFocus();
+    await waitFor(() => {
+      expect(closeIconButton).toHaveFocus();
+    });
   });
 
   it('should render slide in panel from left', async () => {
@@ -512,7 +518,8 @@ describe('SidePanel', () => {
 
     rerender(<DummyComponent open={false} />);
 
-    await new Promise((resolve) => setTimeout(resolve, 0));
-    expect(launchButtonEl).toHaveFocus();
+    await waitFor(() => {
+      expect(launchButtonEl).toHaveFocus();
+    });
   });
 });
diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.tsx b/packages/ibm-products/src/components/SidePanel/SidePanel.tsx
@@ -31,7 +31,7 @@ import { SIDE_PANEL_SIZES } from './constants';
 import { useFocus, usePreviousValue } from '../../global/js/hooks';
 
 // Carbon and package components we use.
-import { Button } from '@carbon/react';
+import { Button, IconButton } from '@carbon/react';
 import { Close, ArrowLeft } from '@carbon/react/icons';
 import { ActionSet } from '../ActionSet';
 import {
@@ -724,16 +724,22 @@ export let SidePanel = React.forwardRef(
           {/* slug and close */}
           <div className={`${blockClass}__slug-and-close`}>
             {normalizedSlug}
-            <Button
-              aria-label={closeIconDescription}
-              kind="ghost"
-              size={slugCloseSize}
-              renderIcon={(props) => <Close size={20} {...props} />}
-              iconDescription={closeIconDescription}
+            <IconButton
               className={`${blockClass}__close-button`}
+              label={closeIconDescription}
               onClick={onRequestClose}
+              title={closeIconDescription}
+              aria-label={closeIconDescription}
               ref={closeRef}
-            />
+              align="left"
+            >
+              <Close
+                size={20}
+                aria-hidden="true"
+                tabIndex="-1"
+                className={`${blockClass}--btn__icon`}
+              />
+            </IconButton>
           </div>
           {/* subtitle */}
           {subtitle && (