feat(Menu): add item theme

Author: amje

src/components/lab/Menu/MenuItem.scss

@@ -55,6 +55,28 @@ $b: '.#{variables.$ns}menu2-item';
         content: '';
     }
 
+    &_theme {
+        &_info {
+            --_--text-color: var(--g-color-text-info);
+        }
+
+        &_success {
+            --_--text-color: var(--g-color-text-positive);
+        }
+
+        &_warning {
+            --_--text-color: var(--g-color-text-warning);
+        }
+
+        &_danger {
+            --_--text-color: var(--g-color-text-danger);
+        }
+
+        &_utility {
+            --_--text-color: var(--g-color-text-utility);
+        }
+    }
+
     &_active {
         --_--background-color: var(--g-color-base-generic-hover);
     }

src/components/lab/Menu/MenuItem.tsx

@@ -40,6 +40,7 @@ export const MenuItem = React.forwardRef(
             | React.Ref<T extends string ? React.ComponentRef<T> : T>,
     ) => {
         const {
+            theme,
             selected = false,
             disabled = false,
             icon,
@@ -120,6 +121,7 @@ export const MenuItem = React.forwardRef(
             tabIndex,
             className: b(
                 {
+                    theme,
                     size: menuContext.size,
                     active: isActive,
                     selected,

src/components/lab/Menu/__stories__/utils.tsx

@@ -31,7 +31,11 @@ export function getSimpleMenuItems(args: MenuProps, icon?: boolean) {
         <MenuItem key="move" icon={icon ? <Icon data={ArrowsExpand} size={iconSize} /> : undefined}>
             Move
         </MenuItem>,
-        <MenuItem key="delete" icon={icon ? <Icon data={TrashBin} size={iconSize} /> : undefined}>
+        <MenuItem
+            key="delete"
+            icon={icon ? <Icon data={TrashBin} size={iconSize} /> : undefined}
+            theme="danger"
+        >
             Delete
         </MenuItem>,
     ];
@@ -64,11 +68,7 @@ export function getFullFeaturedMenuItems(args: MenuProps, inline?: boolean) {
             Cut
         </Menu.Item>,
         <Menu.Divider key="divider1" />,
-        <Menu.Item
-            key="delete"
-            icon={<Icon data={TrashBin} size={iconSize} />}
-            style={{color: 'var(--g-color-text-danger)'}}
-        >
+        <Menu.Item key="delete" icon={<Icon data={TrashBin} size={iconSize} />} theme="danger">
             Delete
         </Menu.Item>,
     ];

src/components/lab/Menu/types.ts

@@ -7,6 +7,8 @@ import type {DOMProps, QAProps} from '../../types';
 
 export type MenuSize = 's' | 'm' | 'l' | 'xl';
 
+export type MenuItemTheme = 'normal' | 'info' | 'success' | 'warning' | 'danger' | 'utility';
+
 export interface MenuProps
     extends Pick<PopupProps, 'open' | 'onOpenChange' | 'placement'>,
         DOMProps,
@@ -24,6 +26,7 @@ export interface MenuProps
 }
 
 interface MenuItemCommonProps extends QAProps {
+    theme?: MenuItemTheme;
     selected?: boolean;
     disabled?: boolean;
     icon?: React.ReactElement;