From d0a84bc71d13e27749548904e8334867d426c148 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Tue, 21 Nov 2023 11:27:20 -0600 Subject: [PATCH 1/5] fix(menu): update spacing and add title to menuitem --- packages/react/src/components/ComboButton/index.js | 2 +- packages/react/src/components/Menu/MenuItem.js | 2 +- .../react/src/components/MenuButton/MenuButton.stories.js | 2 +- packages/react/src/components/MenuButton/index.js | 2 +- packages/styles/scss/components/menu/_menu.scss | 6 +++++- 5 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/react/src/components/ComboButton/index.js b/packages/react/src/components/ComboButton/index.js index 7c940c82bf7e..5c7e906b9e9d 100644 --- a/packages/react/src/components/ComboButton/index.js +++ b/packages/react/src/components/ComboButton/index.js @@ -19,7 +19,7 @@ import { useId } from '../../internal/useId'; import { useMergedRefs } from '../../internal/useMergedRefs'; import { usePrefix } from '../../internal/usePrefix'; -const spacing = 4; // top and bottom spacing between the button and the menu. in px +const spacing = 0; // top and bottom spacing between the button and the menu. in px const defaultTranslations = { 'carbon.combo-button.additional-actions': 'Additional actions', }; diff --git a/packages/react/src/components/Menu/MenuItem.js b/packages/react/src/components/Menu/MenuItem.js index 8e68928053d0..7efb3c374c92 100644 --- a/packages/react/src/components/Menu/MenuItem.js +++ b/packages/react/src/components/Menu/MenuItem.js @@ -163,7 +163,7 @@ const MenuItem = React.forwardRef(function MenuItem(
{IconElement && }
- + {label} {shortcut && !hasChildren && ( diff --git a/packages/react/src/components/MenuButton/MenuButton.stories.js b/packages/react/src/components/MenuButton/MenuButton.stories.js index e9cc579fc6ac..f2e678ae6f6b 100644 --- a/packages/react/src/components/MenuButton/MenuButton.stories.js +++ b/packages/react/src/components/MenuButton/MenuButton.stories.js @@ -30,7 +30,7 @@ export default { export const Default = () => ( - + ); diff --git a/packages/react/src/components/MenuButton/index.js b/packages/react/src/components/MenuButton/index.js index 36238888373b..0e298c4a65c8 100644 --- a/packages/react/src/components/MenuButton/index.js +++ b/packages/react/src/components/MenuButton/index.js @@ -18,7 +18,7 @@ import { useId } from '../../internal/useId'; import { useMergedRefs } from '../../internal/useMergedRefs'; import { usePrefix } from '../../internal/usePrefix'; -const spacing = 4; // top and bottom spacing between the button and the menu. in px +const spacing = 0; // top and bottom spacing between the button and the menu. in px const validButtonKinds = ['primary', 'tertiary', 'ghost']; const defaultButtonKind = 'primary'; diff --git a/packages/styles/scss/components/menu/_menu.scss b/packages/styles/scss/components/menu/_menu.scss index 2b0a0a63a679..3bb2444e9171 100644 --- a/packages/styles/scss/components/menu/_menu.scss +++ b/packages/styles/scss/components/menu/_menu.scss @@ -66,7 +66,7 @@ display: grid; align-items: center; block-size: 2rem; - color: $text-primary; + color: $text-secondary; column-gap: $spacing-03; cursor: pointer; grid-template-columns: 1fr max-content; @@ -76,6 +76,10 @@ &:focus { @include focus-outline('outline'); } + + svg { + color: $icon-secondary; + } } .#{$prefix}--menu-item:hover { From eaf5d35b206f17a799d174243b2362c7e4e2e736 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Tue, 21 Nov 2023 11:40:29 -0600 Subject: [PATCH 2/5] fix(menu): add max-height and scroll to menu --- .../MenuButton/MenuButton.stories.js | 24 +++++++++++++++++++ .../styles/scss/components/menu/_menu.scss | 3 +++ 2 files changed, 27 insertions(+) diff --git a/packages/react/src/components/MenuButton/MenuButton.stories.js b/packages/react/src/components/MenuButton/MenuButton.stories.js index f2e678ae6f6b..be90309589ba 100644 --- a/packages/react/src/components/MenuButton/MenuButton.stories.js +++ b/packages/react/src/components/MenuButton/MenuButton.stories.js @@ -32,6 +32,30 @@ export const Default = () => ( + + + + + + + + + + + + + + + + + + + + + + + + ); diff --git a/packages/styles/scss/components/menu/_menu.scss b/packages/styles/scss/components/menu/_menu.scss index 3bb2444e9171..04396b8ad47d 100644 --- a/packages/styles/scss/components/menu/_menu.scss +++ b/packages/styles/scss/components/menu/_menu.scss @@ -32,9 +32,12 @@ z-index: z('modal'); padding: $spacing-02 0; background-color: $layer; + // need value from design + max-block-size: 500px; max-inline-size: 18rem; min-inline-size: 10rem; opacity: 0; + overflow-y: auto; visibility: hidden; } From 0ba59c2ff219d76bbc06ca425778ac158c03ac51 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Mon, 27 Nov 2023 12:08:34 -0600 Subject: [PATCH 3/5] fix: set hover color menu to primary --- packages/styles/scss/components/menu/_menu.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/styles/scss/components/menu/_menu.scss b/packages/styles/scss/components/menu/_menu.scss index 04396b8ad47d..ac93a355876b 100644 --- a/packages/styles/scss/components/menu/_menu.scss +++ b/packages/styles/scss/components/menu/_menu.scss @@ -87,6 +87,11 @@ .#{$prefix}--menu-item:hover { background-color: $layer-hover; + color: $text-primary; + + svg { + color: $icon-primary; + } } $supported-sizes: ( From 7dad05ce9f7b604d5208f96451e57686b01ad085 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Thu, 30 Nov 2023 10:13:01 -0600 Subject: [PATCH 4/5] chore: remove max-height value and revert storybook changes --- .../MenuButton/MenuButton.stories.js | 25 ------------------- .../styles/scss/components/menu/_menu.scss | 2 -- 2 files changed, 27 deletions(-) diff --git a/packages/react/src/components/MenuButton/MenuButton.stories.js b/packages/react/src/components/MenuButton/MenuButton.stories.js index be90309589ba..60d0a372bd97 100644 --- a/packages/react/src/components/MenuButton/MenuButton.stories.js +++ b/packages/react/src/components/MenuButton/MenuButton.stories.js @@ -31,31 +31,6 @@ export const Default = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - ); diff --git a/packages/styles/scss/components/menu/_menu.scss b/packages/styles/scss/components/menu/_menu.scss index ac93a355876b..ecb3d8adc469 100644 --- a/packages/styles/scss/components/menu/_menu.scss +++ b/packages/styles/scss/components/menu/_menu.scss @@ -32,8 +32,6 @@ z-index: z('modal'); padding: $spacing-02 0; background-color: $layer; - // need value from design - max-block-size: 500px; max-inline-size: 18rem; min-inline-size: 10rem; opacity: 0; From fcd88e6f58f525a372a3ba91859c6c72728e0cb7 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Thu, 30 Nov 2023 10:13:42 -0600 Subject: [PATCH 5/5] chore: storybook example --- packages/react/src/components/MenuButton/MenuButton.stories.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/components/MenuButton/MenuButton.stories.js b/packages/react/src/components/MenuButton/MenuButton.stories.js index 60d0a372bd97..f2e678ae6f6b 100644 --- a/packages/react/src/components/MenuButton/MenuButton.stories.js +++ b/packages/react/src/components/MenuButton/MenuButton.stories.js @@ -31,6 +31,7 @@ export const Default = () => ( + );