Themes: Fix internal border radius of MenuItem to match new outer border radius (#112053)

* Fix internal border radius of MenuItem to match new outer border radius
* 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 {
+  borderRadius: 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 = {
+    borderRadius: '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

@@ -25,6 +25,7 @@ export interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
 const MenuComp = React.forwardRef<HTMLDivElement, MenuProps>(
   ({ header, children, ariaLabel, onOpen, onClose, onKeyDown, ...otherProps }, forwardedRef) => {
     const styles = useStyles2(getStyles);
+    const componentTokens = useComponentTokens();
 
     const localRef = useRef<HTMLDivElement>(null);
     useImperativeHandle(forwardedRef, () => localRef.current!);
@@ -36,12 +37,11 @@ const MenuComp = React.forwardRef<HTMLDivElement, MenuProps>(
         {...otherProps}
         aria-label={ariaLabel}
         backgroundColor="elevated"
-        borderRadius="default"
+        borderRadius={componentTokens.borderRadius}
         boxShadow="z3"
         display="inline-block"
         onKeyDown={handleKeys}
-        paddingX={0.5}
+        padding={componentTokens.padding}
-        paddingY={0.5}
         ref={localRef}
         role="menu"
         tabIndex={-1}
@@ -70,6 +70,18 @@ export const Menu = Object.assign(MenuComp, {
   Group: MenuGroup,
 });
 
+const useComponentTokens = () =>
+  useStyles2((theme: GrafanaTheme2) => {
+    const {
+      components: { menu },
+    } = theme;
+
+    return {
+      padding: menu.padding,
+      borderRadius: menu.borderRadius,
+    };
+  });
+
 const getStyles = (theme: GrafanaTheme2) => {
   return {
     header: css({

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

@@ -6,7 +6,7 @@ import { GrafanaTheme2, LinkTarget } from '@grafana/data';
 import { t } from '@grafana/i18n';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { getFocusStyles } from '../../themes/mixins';
+import { getFocusStyles, getInternalRadius } from '../../themes/mixins';
 import { IconName } from '../../types/icon';
 import { Icon } from '../Icon/Icon';
 import { Stack } from '../Layout/Stack/Stack';
@@ -213,6 +213,8 @@ export const MenuItem = React.memo(
 MenuItem.displayName = 'MenuItem';
 
 const getStyles = (theme: GrafanaTheme2) => {
+  const menuPadding = theme.components.menu.padding * theme.spacing.gridSize;
+
   return {
     item: css({
       background: 'none',
@@ -225,7 +227,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       justifyContent: 'center',
       padding: theme.spacing(0.5, 1.5),
       minHeight: theme.spacing(4),
-      borderRadius: theme.shape.radius.default,
+      borderRadius: getInternalRadius(theme, menuPadding, { parentBorderWidth: 0 }),
       margin: 0,
       border: 'none',
       width: '100%',