fix(overflowmenu): always use button kind=ghost (#16970)

* fix(overflowmenu): always use button kind=ghost

* chore: update snaps

* chore: update snaps

---------

Co-authored-by: Riddhi Bansal <[email protected]>
Co-authored-by: Guilherme Datilio Ribeiro <[email protected]>

Author: 3 people

packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap

@@ -572,7 +572,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
                 aria-expanded="false"
                 aria-haspopup="true"
                 aria-labelledby="tooltip-:r2m:"
-                class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--primary"
+                class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--ghost"
                 title="Settings"
                 type="button"
               >
@@ -1003,7 +1003,7 @@ exports[`DataTable renders as expected - Component API should render and match s
                 aria-expanded="false"
                 aria-haspopup="true"
                 aria-labelledby="tooltip-:rk:"
-                class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--primary"
+                class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--ghost"
                 title="Settings"
                 type="button"
               >

packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap

@@ -15,7 +15,7 @@ exports[`TableToolbarMenu renders as expected - Component API should render 1`]
           aria-expanded="false"
           aria-haspopup="true"
           aria-labelledby="tooltip-:r0:"
-          class="cds--btn--icon-only custom-class cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--primary"
+          class="cds--btn--icon-only custom-class cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--ghost"
           title="Add"
           type="button"
         >

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

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}

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>

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