fix(menu): focused menu items missing styles (#3107)

twilio-labs · Mar 21, 2023 · b47e131 · b47e131
1 parent 05461df
commit b47e131
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 16 deletions.
diff --git a/.changeset/quiet-hats-attend.md b/.changeset/quiet-hats-attend.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/menu': patch
+'@twilio-paste/core': patch
+---
+
+[Menu] fix focus styles on menu items since design updates
diff --git a/packages/paste-core/components/menu/src/MenuItem.tsx b/packages/paste-core/components/menu/src/MenuItem.tsx
@@ -1,47 +1,52 @@
 import * as React from 'react';
 import {secureExternalLink} from '@twilio-paste/anchor';
 import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
-import type {BoxStyleProps} from '@twilio-paste/box';
 import {MenuPrimitiveItem} from '@twilio-paste/menu-primitive';
 
-import type {MenuItemProps, MenuItemVariant} from './types';
+import type {MenuItemProps, MenuItemVariantStyles} from './types';
 import {MenuGroupContext} from './MenuGroup';
 import {MenuItemVariants} from './constants';
 
-const variantStyles: Record<MenuItemVariant, BoxStyleProps> = {
+const baseVariantStyles: MenuItemVariantStyles = {
   [MenuItemVariants.DEFAULT]: {
     color: 'colorText',
     _hover: {
       color: 'colorTextPrimary',
       backgroundColor: 'colorBackgroundPrimaryWeakest',
       borderColor: 'colorBorderPrimary',
     },
+    _focus: {
+      color: 'colorTextPrimary',
+      backgroundColor: 'colorBackgroundPrimaryWeakest',
+      borderColor: 'colorBorderPrimary',
+    },
   },
   [MenuItemVariants.DESTRUCTIVE]: {
     color: 'colorTextLinkDestructive',
     _hover: {
       backgroundColor: 'colorBackgroundDestructiveWeakest',
       borderColor: 'colorBorderDestructive',
     },
+    _focus: {
+      backgroundColor: 'colorBackgroundDestructiveWeakest',
+      borderColor: 'colorBorderDestructive',
+    },
   },
+};
+const groupVariantStyles: MenuItemVariantStyles = {
   [MenuItemVariants.GROUP_ITEM]: {
+    ...baseVariantStyles[MenuItemVariants.DEFAULT],
     paddingLeft: 'space90',
-    color: 'colorText',
-    _hover: {
-      color: 'colorTextPrimary',
-      backgroundColor: 'colorBackgroundPrimaryWeakest',
-      borderColor: 'colorBorderPrimary',
-    },
   },
   [MenuItemVariants.DESTRUCTIVE_GROUP_ITEM]: {
-    color: 'colorTextLinkDestructive',
+    ...baseVariantStyles[MenuItemVariants.DESTRUCTIVE],
     paddingLeft: 'space90',
-    _hover: {
-      backgroundColor: 'colorBackgroundDestructiveWeakest',
-      borderColor: 'colorBorderDestructive',
-    },
   },
 };
+const variantStyles: MenuItemVariantStyles = {
+  ...baseVariantStyles,
+  ...groupVariantStyles,
+};
 
 export const StyledMenuItem = React.forwardRef<HTMLDivElement | HTMLAnchorElement, MenuItemProps>(
   ({element = 'STYLED_MENU_ITEM', href, variant = 'default', tabIndex, children, ...props}, ref) => {

diff --git a/packages/paste-core/components/menu/src/types.ts b/packages/paste-core/components/menu/src/types.ts
@@ -1,5 +1,5 @@
 import type {ValueOf} from '@twilio-paste/types';
-import type {BoxElementProps} from '@twilio-paste/box';
+import type {BoxElementProps, BoxStyleProps} from '@twilio-paste/box';
 import type {
   MenuPrimitiveItemProps,
   MenuPrimitiveProps,
@@ -12,6 +12,10 @@ export type MenuProps = MenuPrimitiveProps & {'aria-label': string; element?: Bo
 
 export type MenuItemVariant = ValueOf<typeof MenuItemVariants>;
 
+export type MenuItemVariantStyles = {
+  [key in MenuItemVariant]?: BoxStyleProps;
+};
+
 export interface MenuItemProps extends MenuPrimitiveItemProps {
   href?: string;
   element?: BoxElementProps['element'];

diff --git a/packages/paste-core/components/menu/stories/index.stories.tsx b/packages/paste-core/components/menu/stories/index.stories.tsx
@@ -195,7 +195,9 @@ const MenuGroups = (): JSX.Element => {
         </MenuGroup>
         <MenuSeparator {...menu} />
         <MenuGroup icon={<AttachIcon decorative />} label="Search Options">
-          <MenuItem {...menu}>Search with Google</MenuItem>
+          <MenuItem {...menu} variant="destructive">
+            Search with Google
+          </MenuItem>
           <MenuItem {...menu} disabled>
             Search with Bing
           </MenuItem>