From e6be85aaf1089c55e969cb0e328c32a755710ef8 Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Tue, 16 Jul 2024 13:05:11 -0500 Subject: [PATCH 1/3] fix(overflowmenu): always use button kind=ghost --- .../components/OverflowMenu/OverflowMenu-test.js | 15 +++++++++++++++ .../src/components/OverflowMenu/OverflowMenu.tsx | 3 ++- .../OverflowMenu/next/OverflowMenu-test.js | 16 ++++++++++++++++ .../src/components/OverflowMenu/next/index.tsx | 3 ++- 4 files changed, 35 insertions(+), 2 deletions(-) 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"> Date: Wed, 17 Jul 2024 15:20:10 -0500 Subject: [PATCH 2/3] chore: update snaps --- .../DataTable/__tests__/__snapshots__/DataTable-test.js.snap | 4 ++-- .../__tests__/__snapshots__/TableToolbarMenu-test.js.snap | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) 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 68b8c440b08e..67732c683fbc 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-:r2f:" - 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-:ri:" - 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" > From 38040363ab5416ede5e63e7de9d370a46bd702ec Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Fri, 2 Aug 2024 11:00:08 -0500 Subject: [PATCH 3/3] chore: update snaps --- .../DataTable/__tests__/__snapshots__/DataTable-test.js.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 73f7cf5925f7..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 @@ -571,7 +571,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho