add focus outlines to menu items

Author: alexcarpenter

packages/ui/src/mosaic/components/menu/menu.styles.ts

@@ -13,11 +13,10 @@ export const positioner = stylex.create({
 
 export const popup = stylex.create({
   base: {
+    padding: space['0.5'],
     borderRadius: radiusVars['--cl-radius-lg'],
     gap: space['0.5'],
     outline: 'none',
-    paddingBlock: space['0.5'],
-    paddingInline: space['0.5'],
     backgroundColor: colorVars['--cl-color-card'],
     boxShadow: `0 12px 12px -7px light-dark(oklch(0.2046 0 0 / 12%), transparent),
                 0 24px 24px -10px light-dark(oklch(0.2046 0 0 / 4%), transparent),
@@ -49,6 +48,7 @@ export const popup = stylex.create({
     // reaches the width it has to truncate at.
     maxWidth: 'min(18rem, calc(100vw - 2rem))',
     minWidth: '12.5rem',
+    overflowX: 'visible',
     overflowY: 'auto',
   },
 });
@@ -75,6 +75,7 @@ export const item = stylex.create({
     fontWeight: fontWeightVars['--cl-font-medium'],
     lineHeight: typeScaleVars['--cl-text-sm-leading'],
     opacity: { default: 1, ':is([data-disabled])': 0.5 },
+    outlineOffset: 0,
     position: 'relative',
     textAlign: 'start',
     transitionDuration: {

packages/ui/src/mosaic/components/menu/menu.tsx

@@ -1,9 +1,9 @@
 import type {
-  MenuItemProps as PrimitiveMenuItemProps,
-  MenuPopupProps as PrimitiveMenuPopupProps,
   MenuPortalProps,
   MenuProps,
   MenuSeparatorProps,
+  MenuItemProps as PrimitiveMenuItemProps,
+  MenuPopupProps as PrimitiveMenuPopupProps,
 } from '@clerk/headless/menu';
 import { Menu as Primitive } from '@clerk/headless/menu';
 import { useRender } from '@clerk/headless/utils';
@@ -12,6 +12,7 @@ import React from 'react';
 
 import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
+import { focusOutline } from '../../utils/focus-outline.styles';
 import { reset } from '../../utils/reset.styles';
 import { truncationStyles } from '../../utils/typography.styles';
 import { Button } from '../button';
@@ -175,7 +176,7 @@ export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(funct
       label={label}
       {...mergeStyleProps(
         themeProps('menu-item', { color }),
-        stylex.props(reset.base, slots.item.base, color === 'negative' && slots.item.negative),
+        stylex.props(reset.base, focusOutline.visible, slots.item.base, color === 'negative' && slots.item.negative),
         className,
         style,
       )}