feat(ContextMenu): support Avatar in ContextMenu (#1003)

mittwald · Nov 26, 2024 · 5f03c84 · 5f03c84
1 parent ad53b40
commit 5f03c84
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 1 deletion.
diff --git a/packages/components/src/components/ContextMenu/ContextMenu.module.scss b/packages/components/src/components/ContextMenu/ContextMenu.module.scss
@@ -16,6 +16,11 @@
   display: flex;
   flex-direction: column;
   row-gap: var(--menu--item-to-item-spacing);
+
+  &:has(:global(.flow--avatar)) {
+    align-items: center;
+    padding-top: var(--context-menu--padding);
+  }
 }
 
 .popoverContent.popoverContent {

diff --git a/packages/components/src/components/ContextMenu/ContextMenu.tsx b/packages/components/src/components/ContextMenu/ContextMenu.tsx
@@ -57,11 +57,17 @@ export const ContextMenu = flowComponent("ContextMenu", (props) => {
   const propsContext: PropsContext = {
     MenuItem: {
       selectionVariant,
+      Avatar: {
+        size: "l",
+      },
     },
 
     Section: {
       MenuItem: {
         selectionVariant,
+        Avatar: {
+          size: "l",
+        },
       },
       renderContextMenuSection: true,
     },

diff --git a/packages/components/src/components/ContextMenu/stories/Default.stories.tsx b/packages/components/src/components/ContextMenu/stories/Default.stories.tsx
@@ -8,8 +8,10 @@ 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 { IconCamera, IconServer } from "@/components/Icon/components/icons";
 import { Text } from "@/components/Text";
+import { Avatar } from "@/components/Avatar";
+import { Initials } from "@/components/Initials";
 
 const meta: Meta<typeof ContextMenu> = {
   title: "Actions/ContextMenu",
@@ -147,3 +149,34 @@ export const WithIcon: Story = {
 };
 
 export const CustomWidth: Story = { args: { width: 400 } };
+
+export const WithAvatar: Story = {
+  render: (props) => (
+    <ContextMenuTrigger>
+      <Button>Trigger</Button>
+      <ContextMenu selectionMode="navigation" {...props}>
+        <Section>
+          <MenuItem>
+            <Avatar>
+              <Initials>Max Mustermann</Initials>
+            </Avatar>
+            <IconCamera />
+          </MenuItem>
+          <Heading>Max Mustermann</Heading>
+        </Section>
+        <Separator />
+        <Section>
+          <MenuItem>
+            <Text>Settings</Text>
+          </MenuItem>
+          <MenuItem>
+            <Text>Logout</Text>
+          </MenuItem>
+        </Section>
+      </ContextMenu>
+    </ContextMenuTrigger>
+  ),
+  args: {
+    defaultOpen: true,
+  },
+};