Add design tokens for Menu border radius and padding to createComponents

packages/grafana-data/src/themes/createComponents.ts

@@ -1,5 +1,12 @@
 import { ThemeColors } from './createColors';
 import { ThemeShadows } from './createShadows';
+import type { Radii } from './createShape';
+import type { ThemeSpacingTokens } from './createSpacing';
+
+interface MenuComponentTokens {
+  outerBorderRadius: keyof Radii;
+  padding: ThemeSpacingTokens;
+}
 
 /** @beta */
 export interface ThemeComponents {
@@ -53,6 +60,7 @@ export interface ThemeComponents {
     rowHoverBackground: string;
     rowSelected: string;
   };
+  menu: MenuComponentTokens;
 }
 
 export function createComponents(colors: ThemeColors, shadows: ThemeShadows): ThemeComponents {
@@ -71,6 +79,11 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
     background: colors.mode === 'dark' ? colors.background.canvas : colors.background.primary,
   };
 
+  const menu: MenuComponentTokens = {
+    outerBorderRadius: 'default',
+    padding: 0.5,
+  };
+
   return {
     height: {
       sm: 3,
@@ -114,5 +127,6 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
       rowHoverBackground: colors.action.hover,
       rowSelected: colors.action.selected,
     },
+    menu,
   };
 }

packages/grafana-ui/src/components/Menu/Menu.tsx

@@ -36,12 +36,12 @@ const MenuComp = React.forwardRef<HTMLDivElement, MenuProps>(
         {...otherProps}
         aria-label={ariaLabel}
         backgroundColor="elevated"
-        borderRadius="default"
+        borderRadius={styles.container.borderRadius}
         boxShadow="z3"
         display="inline-block"
         onKeyDown={handleKeys}
-        paddingX={0.5}
+        paddingX={styles.container.padding}
-        paddingY={0.5}
+        paddingY={styles.container.padding}
         ref={localRef}
         role="menu"
         tabIndex={-1}
@@ -71,7 +71,15 @@ export const Menu = Object.assign(MenuComp, {
 });
 
 const getStyles = (theme: GrafanaTheme2) => {
+  const {
+    components: { menu },
+  } = theme;
+
   return {
+    container: {
+      padding: menu.padding,
+      borderRadius: menu.outerBorderRadius,
+    },
     header: css({
       padding: theme.spacing(0.5, 0.5, 1, 0.5),
     }),

packages/grafana-ui/src/components/Menu/MenuItem.tsx

@@ -13,8 +13,6 @@ import { Stack } from '../Layout/Stack/Stack';
 
 import { SubMenu } from './SubMenu';
 
-export const MENU_ITEM_PADDING = 4;
-
 /** @internal */
 export type MenuItemElement = HTMLAnchorElement & HTMLButtonElement & HTMLDivElement;
 
@@ -215,6 +213,8 @@ export const MenuItem = React.memo(
 MenuItem.displayName = 'MenuItem';
 
 const getStyles = (theme: GrafanaTheme2) => {
+  const menuPadding = theme.spacing.numericValue(theme.components.menu.padding);
+
   return {
     item: css({
       background: 'none',
@@ -227,7 +227,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       justifyContent: 'center',
       padding: theme.spacing(0.5, 1.5),
       minHeight: theme.spacing(4),
-      borderRadius: getInternalRadius(theme, MENU_ITEM_PADDING, { parentBorderWidth: 0 }),
+      borderRadius: getInternalRadius(theme, menuPadding, { parentBorderWidth: 0 }),
       margin: 0,
       border: 'none',
       width: '100%',