diff --git a/packages/react/src/components/ComboButton/index.js b/packages/react/src/components/ComboButton/index.js
index 09c8f330c1ca..403cb1f159e8 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 f493e8ee6a2f..b94ca46b8a4a 100644
--- a/packages/react/src/components/Menu/MenuItem.js
+++ b/packages/react/src/components/Menu/MenuItem.js
@@ -175,7 +175,7 @@ const MenuItem = React.forwardRef(function MenuItem(
{iconsAllowed && 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 7879c0f7d8bf..17e53b5835f3 100644
--- a/packages/react/src/components/MenuButton/MenuButton.stories.js
+++ b/packages/react/src/components/MenuButton/MenuButton.stories.js
@@ -32,7 +32,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 c4e38e5cca7c..d782280e978d 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..ecb3d8adc469 100644
--- a/packages/styles/scss/components/menu/_menu.scss
+++ b/packages/styles/scss/components/menu/_menu.scss
@@ -35,6 +35,7 @@
max-inline-size: 18rem;
min-inline-size: 10rem;
opacity: 0;
+ overflow-y: auto;
visibility: hidden;
}
@@ -66,7 +67,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,10 +77,19 @@
&:focus {
@include focus-outline('outline');
}
+
+ svg {
+ color: $icon-secondary;
+ }
}
.#{$prefix}--menu-item:hover {
background-color: $layer-hover;
+ color: $text-primary;
+
+ svg {
+ color: $icon-primary;
+ }
}
$supported-sizes: (