style(MenuItem): apply disabled style to icon children

mittwald · Nov 4, 2024 · 4202f26 · 4202f26
1 parent b5e6a5c
commit 4202f26
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 0 deletions.
diff --git a/packages/components/src/components/ContextMenu/stories/Default.stories.tsx b/packages/components/src/components/ContextMenu/stories/Default.stories.tsx
@@ -8,6 +8,8 @@ import { Button } from "@/components/Button";
 import { Separator } from "@/components/Separator";
 import { Heading } from "@/components/Heading";
 import { Section } from "@/components/Section";
+import { IconServer } from "@/components/Icon/components/icons";
+import { Text } from "@/components/Text";
 
 const meta: Meta<typeof ContextMenu> = {
   title: "Actions/ContextMenu",
@@ -116,4 +118,32 @@ export const WithContextMenuSection: Story = {
   },
 };
 
+export const WithIcon: Story = {
+  render: (props) => (
+    <ContextMenuTrigger>
+      <Button>Trigger</Button>
+      <ContextMenu selectionMode="navigation" {...props}>
+        <Section>
+          <Heading>Websites</Heading>
+          <MenuItem href="https://www.mittwald.de" id="https://www.mittwald.de">
+            <IconServer />
+            <Text>www.mittwald.de</Text>
+          </MenuItem>
+          <MenuItem href="https://www.google.de">
+            <IconServer />
+            <Text>www.google.de</Text>
+          </MenuItem>
+          <MenuItem isDisabled={true} href="https://www.adobe.com">
+            <IconServer />
+            <Text>www.adobe.com</Text>
+          </MenuItem>
+        </Section>
+      </ContextMenu>
+    </ContextMenuTrigger>
+  ),
+  args: {
+    defaultOpen: true,
+  },
+};
+
 export const CustomWidth: Story = { args: { width: 400 } };
diff --git a/packages/components/src/styles/mixins/menuItem.scss b/packages/components/src/styles/mixins/menuItem.scss
@@ -64,5 +64,8 @@
   &[aria-disabled] {
     background-color: var(--menu-item--disabled-background-color);
     color: var(--menu-item--disabled-color);
+    .icon {
+      color: var(--menu-item--icon-color--disabled);
+    }
   }
 }
diff --git a/packages/design-tokens/src/actions/menu-item.yml b/packages/design-tokens/src/actions/menu-item.yml
@@ -27,6 +27,8 @@ menu-item:
   icon-color:
     default:
       value: "{neutral.color.800}"
+    disabled:
+      value: "{disabled-plain-content-color}"
     current:
       value: "{primary.color.800}"