diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap index a1d522091f58..d2f63e2a275c 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap +++ b/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" > diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap index bc024fb82328..fc8b82a98834 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap +++ b/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" > diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-test.js b/packages/react/src/components/OverflowMenu/OverflowMenu-test.js index daa44bb499d1..68dd74424456 100644 --- 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( + + + + + ); + + expect(screen.getByRole('button')).not.toHaveClass('cds--btn--primary'); + expect(screen.getByRole('button')).toHaveClass('cds--btn--ghost'); + }); + it('should flip menu alignment', async () => { render( + label={iconDescription} + kind="ghost"> {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 index 519c0783a64a..0503b6450c77 100644 --- 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( + + + one + + + two + + + ); + + 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( diff --git a/packages/react/src/components/OverflowMenu/next/index.tsx b/packages/react/src/components/OverflowMenu/next/index.tsx index 4262b53df804..3b9d3c92a504 100644 --- 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( onMouseDown={handleMousedown} ref={floatingRef} label={label} - align={tooltipAlignment}> + align={tooltipAlignment} + kind="ghost">