fix: variant danger and icon color in menu item (#1923)

Author: Adzouz

.changeset/heavy-ducks-complain.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': patch
+---
+
+fix: variant danger and icon color in menu item

docs/stories/SimpleMenu.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { IconButton, SimpleMenu, MenuItem, Menu } from '@strapi/design-system';
-import { Bell } from '@strapi/icons';
+import { Bell, Check, WarningCircle } from '@strapi/icons';
 
 const meta: Meta<typeof SimpleMenu> = {
   title: 'Design System/Components/SimpleMenu',
@@ -21,10 +21,10 @@ export const Basic = {
         Open
       </MenuItem>
       <MenuItem endIcon={<Bell />} disabled onSelect={() => console.log('cloning')}>
-        Clone
+        Disabled
       </MenuItem>
       <MenuItem onSelect={() => console.log('editing')}>Edit</MenuItem>
-      <MenuItem color="danger600" onSelect={() => console.log('delete')}>
+      <MenuItem startIcon={<Bell />} variant="danger" onSelect={() => console.log('delete')}>
         Delete
       </MenuItem>
     </SimpleMenu>

packages/design-system/src/components/SimpleMenu/Menu.tsx

@@ -14,6 +14,8 @@ import { Button, ButtonProps } from '../Button';
 import { IconButton } from '../IconButton';
 import { Link, LinkProps } from '../Link';
 
+import { getIconColor, getTextColor, getBackgroundColorHover } from './utils';
+
 /* -------------------------------------------------------------------------------------------------
  * MenuRoot
  * -----------------------------------------------------------------------------------------------*/
@@ -142,13 +144,15 @@ const DropdownMenuContent = styled(DropdownMenu.Content)`
 /* -------------------------------------------------------------------------------------------------
  * MenuItem
  * -----------------------------------------------------------------------------------------------*/
+export type ItemVariant = 'danger' | 'default';
 
 interface ItemSharedProps extends Pick<DropdownMenu.MenuItemProps, 'disabled' | 'onSelect'> {
   children?: React.ReactNode;
   isExternal?: boolean;
   isFocused?: boolean;
   startIcon?: React.ReactNode;
   endIcon?: React.ReactNode;
+  variant?: ItemVariant;
 }
 
 interface ItemExternalLinkProps extends ItemSharedProps, Omit<LinkProps, 'onSelect'> {
@@ -175,38 +179,49 @@ type ItemProps<TComponent extends React.ComponentType = typeof BaseLink> =
   | ItemInternalLinkProps<TComponent>
   | ItemExternalLinkProps;
 
-const MenuItem = ({ onSelect, disabled = false, isLink, startIcon, endIcon, isExternal, ...props }: ItemProps) => {
+const MenuItem = ({
+  onSelect,
+  disabled = false,
+  isLink,
+  startIcon,
+  endIcon,
+  isExternal,
+  variant = 'default',
+  ...props
+}: ItemProps) => {
   return (
     <DropdownMenu.Item asChild onSelect={onSelect} disabled={disabled}>
       {isLink || isExternal ? (
         <OptionLink
-          color="neutral800"
+          color={getTextColor(variant, disabled)}
           startIcon={startIcon}
           endIcon={endIcon}
           {...props}
           isExternal={isExternal ?? false}
+          $variant={variant}
         >
-          <Typography>{props.children}</Typography>
+          {props.children}
         </OptionLink>
       ) : (
         <OptionButton
           cursor="pointer"
-          color="neutral800"
+          color={getTextColor(variant, disabled)}
           background="transparent"
           borderStyle="none"
           gap={2}
+          $variant={variant}
           {...props}
         >
           {startIcon && (
-            <Flex tag="span" aria-hidden>
+            <Flex tag="span" color={getIconColor(variant, disabled)} aria-hidden>
               {startIcon}
             </Flex>
           )}
 
           <Typography grow={1}>{props.children}</Typography>
 
           {endIcon && (
-            <Flex tag="span" aria-hidden>
+            <Flex tag="span" color={getIconColor(variant, disabled)} aria-hidden>
               {endIcon}
             </Flex>
           )}
@@ -216,19 +231,18 @@ const MenuItem = ({ onSelect, disabled = false, isLink, startIcon, endIcon, isEx
   );
 };
 
-const getOptionStyle = ({ theme }: { theme: DefaultTheme }) => css`
+const getOptionStyle = ({ theme, $variant }: { theme: DefaultTheme; $variant: ItemVariant }) => css`
   text-align: left;
   width: 100%;
   border-radius: ${theme.borderRadius};
   padding: ${theme.spaces[2]} ${theme.spaces[4]};
 
   &[aria-disabled='true'] {
     cursor: not-allowed;
-    color: ${theme.colors.neutral500};
   }
 
   &[data-highlighted] {
-    background-color: ${theme.colors.primary100};
+    background-color: ${theme.colors[getBackgroundColorHover($variant)]};
   }
 
   &:focus-visible {
@@ -240,11 +254,11 @@ const getOptionStyle = ({ theme }: { theme: DefaultTheme }) => css`
   }
 `;
 
-const OptionButton = styled<FlexComponent<'button' | 'a'>>(Flex)`
-  ${getOptionStyle}
+const OptionButton = styled<FlexComponent<'button' | 'a'>>(Flex)<{ $variant: ItemVariant }>`
+  ${({ theme, $variant }) => getOptionStyle({ theme, $variant })}
 `;
 
-const OptionLink = styled(Link)`
+const OptionLink = styled(Link)<{ $variant: ItemVariant }>`
   /* We include this here again because typically when people use OptionLink they provide an as prop which cancels the Box props */
   color: ${({ theme, color }) => extractStyleFromTheme(theme.colors, color, undefined)};
   text-decoration: none;
@@ -259,7 +273,7 @@ const OptionLink = styled(Link)`
     fill: currentColor;
   }
 
-  ${getOptionStyle}
+  ${({ theme, $variant }) => getOptionStyle({ theme, $variant })}
 `;
 
 /* -------------------------------------------------------------------------------------------------
@@ -334,7 +348,7 @@ const MenuSubTrigger = React.forwardRef<HTMLButtonElement, SubTriggerProps>(({ d
   );
 });
 
-const SubmenuTrigger = styled(OptionButton)`
+const SubmenuTrigger = styled<FlexComponent<'button' | 'a'>>(OptionButton)`
   &[data-state='open'] {
     background-color: ${({ theme }) => theme.colors.primary100};
   }

packages/design-system/src/components/SimpleMenu/SimpleMenu.tsx

@@ -4,6 +4,7 @@ import { stripReactIdOfColon } from '../../helpers/strings';
 import { useComposedRefs } from '../../hooks/useComposeRefs';
 import { useId } from '../../hooks/useId';
 import { useIntersection } from '../../hooks/useIntersection';
+import { BaseLink } from '../BaseLink';
 
 import * as Menu from './Menu';
 
@@ -75,7 +76,7 @@ const SimpleMenu = React.forwardRef<HTMLButtonElement, SimpleMenuProps>(
 );
 
 const MenuItem = Menu.Item;
-type MenuItemProps = Menu.ItemProps;
+type MenuItemProps<T extends React.ComponentType = typeof BaseLink> = Menu.ItemProps<T>;
 
 export { SimpleMenu, MenuItem, Menu };
 export type { SimpleMenuProps, MenuItemProps };

packages/design-system/src/components/SimpleMenu/utils.ts

@@ -0,0 +1,30 @@
+import { DefaultTheme } from 'styled-components';
+
+import type { ItemVariant } from './Menu';
+
+export const getBackgroundColorHover = (variant: ItemVariant): keyof DefaultTheme['colors'] => {
+  switch (variant) {
+    case 'danger':
+      return 'danger100';
+    default:
+      return 'primary100';
+  }
+};
+
+export const getTextColor = (variant: ItemVariant, disabled?: boolean): keyof DefaultTheme['colors'] => {
+  switch (variant) {
+    case 'danger':
+      return disabled ? 'danger500' : 'danger700';
+    default:
+      return disabled ? 'neutral500' : 'neutral800';
+  }
+};
+
+export const getIconColor = (variant: ItemVariant, disabled?: boolean): keyof DefaultTheme['colors'] => {
+  switch (variant) {
+    case 'danger':
+      return disabled ? 'danger500' : 'danger700';
+    default:
+      return disabled ? 'neutral300' : 'neutral500';
+  }
+};