feat: fill variant in menu item

cinnyapp · Apr 7, 2024 · 754f296 · 754f296
1 parent 3bbce78
commit 754f296
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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}