diff --git a/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss b/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss index 90275b4822..a293b7862c 100644 --- 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 index 1113c95d51..7964f217d7 100644 --- 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(); - 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 index 4aefc5ab5b..034175c80a 100644 --- 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 */}
{normalizedSlug} -
{/* subtitle */} {subtitle && (