From 754f2968559c3232aea9dc01dc91c76cf4e7dd88 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 7 Apr 2024 14:28:13 +0530
Subject: [PATCH] feat: fill variant in menu item

---
 src/components/menu/MenuItem.css.ts      | 10 +++++++++-
 src/components/menu/MenuItem.stories.tsx |  4 ++++
 src/components/menu/MenuItem.tsx         |  3 ++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/menu/MenuItem.css.ts b/src/components/menu/MenuItem.css.ts
index 141d0f3..0744d81 100644
--- a/src/components/menu/MenuItem.css.ts
+++ b/src/components/menu/MenuItem.css.ts
@@ -34,7 +34,6 @@ export const MenuItem = recipe({
       alignItems: "center",
       justifyContent: "start",
       cursor: "pointer",
-      backgroundColor: Container,
       color: OnContainer,
 
       selectors: {
@@ -69,6 +68,14 @@ export const MenuItem = recipe({
       Warning: getVariant("Warning"),
       Critical: getVariant("Critical"),
     },
+    fill: {
+      Soft: {
+        backgroundColor: Container,
+      },
+      None: {
+        backgroundColor: "transparent",
+      },
+    },
     size: {
       "300": {
         vars: {
@@ -91,6 +98,7 @@ export const MenuItem = recipe({
   },
   defaultVariants: {
     variant: "Surface",
+    fill: "Soft",
     size: "400",
     radii: "0",
   },
diff --git a/src/components/menu/MenuItem.stories.tsx b/src/components/menu/MenuItem.stories.tsx
index 3766347..7a3aea9 100644
--- a/src/components/menu/MenuItem.stories.tsx
+++ b/src/components/menu/MenuItem.stories.tsx
@@ -21,6 +21,10 @@ export default {
         "Critical",
       ],
     },
+    fill: {
+      control: "select",
+      options: ["Soft", "None"],
+    },
     radii: {
       control: "select",
       options: ["inherit", 0, 300, 400, 500, "Pill"],
diff --git a/src/components/menu/MenuItem.tsx b/src/components/menu/MenuItem.tsx
index ea9fee8..bac8f79 100644
--- a/src/components/menu/MenuItem.tsx
+++ b/src/components/menu/MenuItem.tsx
@@ -14,6 +14,7 @@ export const MenuItem = as<"button", MenuItemProps & css.MenuItemVariants>(
       as: AsMenuItem = "button",
       className,
       variant,
+      fill,
       size,
       radii,
       before,
@@ -24,7 +25,7 @@ export const MenuItem = as<"button", MenuItemProps & css.MenuItemVariants>(
     ref
   ) => (
     <AsMenuItem
-      className={classNames(css.MenuItem({ variant, size, radii }), className)}
+      className={classNames(css.MenuItem({ variant, fill, size, radii }), className)}
       data-ui-before={before ? true : undefined}
       data-ui-after={after ? true : undefined}
       {...props}