feat: add action slot to menu item

abelflopes · Jul 9, 2024 · f4d8109 · f4d8109
1 parent 6bae06c
commit f4d8109
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/packages/components/_provisional/src/menu/MenuItem.tsx b/packages/components/_provisional/src/menu/MenuItem.tsx
@@ -13,7 +13,8 @@ export interface MenuItemProps<T extends HTMLTag = "li">
     ConsumerPolymorphicProps<T> {
   skin?: "default" | "primary" | "secondary";
   disabled?: boolean;
-  icon?: NonNullable<React.ReactNode>;
+  icon?: React.ReactNode;
+  action?: React.ReactNode;
 }
 
 export const MenuItem = <T extends HTMLTag>({
@@ -23,6 +24,7 @@ export const MenuItem = <T extends HTMLTag>({
   disabled,
   className,
   children,
+  action,
   ...otherProps
 }: Readonly<MenuItemProps<T>>): React.ReactElement => {
   const menuContext = useContext(MenuContext);
@@ -42,6 +44,8 @@ export const MenuItem = <T extends HTMLTag>({
       }}>
       {icon}
       {children}
+
+      {action ? <span className={styles.action}>{action}</span> : null}
     </PolymorphicComponent>
   );
 };
diff --git a/packages/components/_provisional/src/menu/styles/menu-item.module.scss b/packages/components/_provisional/src/menu/styles/menu-item.module.scss
@@ -42,3 +42,7 @@
     justify-content: center;
   }
 }
+
+.action {
+  margin-left: auto;
+}
diff --git a/packages/docs/stories/src/menu.stories.tsx b/packages/docs/stories/src/menu.stories.tsx
@@ -6,6 +6,8 @@ import { Menu } from "@react-ck/provisional/src";
 import { Icon } from "@react-ck/icon/src";
 import { faker } from "@faker-js/faker";
 import { IconUserCircle } from "@react-ck/icon/icons/IconUserCircle";
+import { IconVerticalDots } from "@react-ck/icon/icons/IconVerticalDots";
+import { Button } from "@react-ck/button/src";
 
 type Story = StoryObj<typeof Menu>;
 
@@ -65,7 +67,20 @@ const children = (
       {faker.person.firstName()}
     </Menu.Item>
     <Menu.Divider />
-    <Menu.Item>{faker.animal.type()}</Menu.Item>
+    <Menu.Item
+      action={
+        <Button
+          skin="ghost"
+          size="s"
+          icon={
+            <Icon>
+              <IconVerticalDots />
+            </Icon>
+          }
+        />
+      }>
+      {faker.animal.type()}
+    </Menu.Item>
     <Menu.Item disabled>{faker.animal.type()}</Menu.Item>
     <Menu.Item>{faker.animal.type()}</Menu.Item>
     <Menu.Divider>Companies</Menu.Divider>