fix(overflowmenu): always use button kind=ghost

carbon-design-system · Jul 16, 2024 · e6be85a · e6be85a
1 parent b12ac2e
commit e6be85a
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 2 deletions.
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-test.js b/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
@@ -37,6 +37,21 @@ describe('OverflowMenu', () => {
       expect(screen.getByRole('button')).toHaveAttribute('data-testid', 'test');
     });
 
+    it('should always use button kind=ghost', () => {
+      render(
+        <OverflowMenu
+          data-testid="test"
+          aria-label="Overflow menu"
+          className="extra-class">
+          <OverflowMenuItem className="test-child" itemText="one" />
+          <OverflowMenuItem className="test-child" itemText="two" />
+        </OverflowMenu>
+      );
+
+      expect(screen.getByRole('button')).not.toHaveClass('cds--btn--primary');
+      expect(screen.getByRole('button')).toHaveClass('cds--btn--ghost');
+    });
+
     it('should flip menu alignment', async () => {
       render(
         <OverflowMenu

diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.tsx b/packages/react/src/components/OverflowMenu/OverflowMenu.tsx
@@ -732,7 +732,8 @@ class OverflowMenu extends React.Component<
             id={id}
             ref={mergeRefs(this._triggerRef, ref)}
             size={size}
-            label={iconDescription}>
+            label={iconDescription}
+            kind="ghost">
             <IconElement {...iconProps} />
           </IconButton>
           {open && this.state.hasMountedTrigger && wrappedMenuBody}

diff --git a/packages/react/src/components/OverflowMenu/next/OverflowMenu-test.js b/packages/react/src/components/OverflowMenu/next/OverflowMenu-test.js
@@ -86,6 +86,22 @@ describe('OverflowMenu (enable-v12-overflowmenu)', () => {
     expect(container.firstChild).toHaveAttribute('id', 'custom-id');
   });
 
+  it('should always use button kind=ghost', () => {
+    render(
+      <OverflowMenu>
+        <MenuItem label="item" className="test-child">
+          one
+        </MenuItem>
+        <MenuItem label="item" className="test-child">
+          two
+        </MenuItem>
+      </OverflowMenu>
+    );
+
+    expect(screen.getByRole('button')).not.toHaveClass('cds--btn--primary');
+    expect(screen.getByRole('button')).toHaveClass('cds--btn--ghost');
+  });
+
   it('should close menu on outside click', async () => {
     render(
       <OverflowMenu>

diff --git a/packages/react/src/components/OverflowMenu/next/index.tsx b/packages/react/src/components/OverflowMenu/next/index.tsx
@@ -189,7 +189,8 @@ const OverflowMenu = React.forwardRef<HTMLDivElement, OverflowMenuProps>(
           onMouseDown={handleMousedown}
           ref={floatingRef}
           label={label}
-          align={tooltipAlignment}>
+          align={tooltipAlignment}
+          kind="ghost">
           <IconElement className={`${prefix}--overflow-menu__icon`} />
         </IconButton>
         <Menu