From 4202f26cfe0042c8808b4c67e3c841c566342c4e Mon Sep 17 00:00:00 2001
From: Elissa Martinez <e.martinez-casadesus@mittwald.de>
Date: Mon, 4 Nov 2024 14:30:28 +0100
Subject: [PATCH] style(MenuItem): apply disabled style to icon children

---
 .../ContextMenu/stories/Default.stories.tsx   | 30 +++++++++++++++++++
 .../src/styles/mixins/menuItem.scss           |  3 ++
 .../design-tokens/src/actions/menu-item.yml   |  2 ++
 3 files changed, 35 insertions(+)

diff --git a/packages/components/src/components/ContextMenu/stories/Default.stories.tsx b/packages/components/src/components/ContextMenu/stories/Default.stories.tsx
index b5e2a4fc4..85e64f512 100644
--- 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
index dcc8d7e20..2f1989418 100644
--- 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
index 14d47db35..16ec40868 100644
--- 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}"