feat: fill variant in icon button, chip and menu item components (#35)

* feat: fill variant in icon button * feat: fill variant in chip * feat: fill variant in menu item
cinnyapp · Apr 8, 2024 · b074d42 · b074d42
1 parent 7d071bb
commit b074d42
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 6 deletions.
diff --git a/src/components/chip/Chip.css.ts b/src/components/chip/Chip.css.ts
@@ -33,7 +33,6 @@ export const Chip = recipe({
       display: "inline-flex",
       alignItems: "center",
       color: OnContainer,
-      backgroundColor: Container,
       cursor: "pointer",
 
       selectors: {
@@ -86,6 +85,14 @@ export const Chip = recipe({
         gap: config.space.S200,
       },
     },
+    fill: {
+      Soft: {
+        backgroundColor: Container,
+      },
+      None: {
+        backgroundColor: "transparent",
+      },
+    },
     outlined: {
       true: {
         border: `${config.borderWidth.B400} solid ${ContainerLine}`,
@@ -95,6 +102,7 @@ export const Chip = recipe({
   },
   defaultVariants: {
     variant: "Surface",
+    fill: "Soft",
     size: "400",
     radii: "400",
   },

diff --git a/src/components/chip/Chip.stories.tsx b/src/components/chip/Chip.stories.tsx
@@ -21,6 +21,10 @@ export default {
         "Critical",
       ],
     },
+    fill: {
+      control: "select",
+      options: ["Soft", "None"],
+    },
     size: {
       control: "select",
       options: ["400", "500"],

diff --git a/src/components/chip/Chip.tsx b/src/components/chip/Chip.tsx
@@ -15,6 +15,7 @@ export const Chip = as<"button", ChipProps & css.ChipVariants>(
       as: AsChip = "button",
       className,
       variant,
+      fill,
       size,
       outlined,
       radii,
@@ -29,6 +30,7 @@ export const Chip = as<"button", ChipProps & css.ChipVariants>(
       className={classNames(
         css.Chip({
           variant,
+          fill,
           size,
           outlined,
           radii,

diff --git a/src/components/icon-button/IconButton.css.ts b/src/components/icon-button/IconButton.css.ts
@@ -36,7 +36,6 @@ export const IconButton = recipe({
       cursor: "pointer",
       textDecoration: "none",
 
-      backgroundColor: Container,
       color: OnContainer,
 
       selectors: {
@@ -79,6 +78,14 @@ export const IconButton = recipe({
       Warning: getVariant("Warning"),
       Critical: getVariant("Critical"),
     },
+    fill: {
+      Soft: {
+        backgroundColor: Container,
+      },
+      None: {
+        backgroundColor: "transparent",
+      },
+    },
     outlined: {
       true: {
         boxShadow: `inset 0 0 0 ${config.borderWidth.B400} ${ContainerLine}`,
@@ -89,6 +96,7 @@ export const IconButton = recipe({
   defaultVariants: {
     size: "400",
     variant: "Surface",
+    fill: "Soft",
     radii: "400",
   },
 });

diff --git a/src/components/icon-button/IconButton.tsx b/src/components/icon-button/IconButton.tsx
@@ -4,9 +4,12 @@ import { as } from "../as";
 import * as css from "./IconButton.css";
 
 export const IconButton = as<"button", css.IconButtonVariants>(
-  ({ as: AsIconButton = "button", className, size, variant, radii, outlined, ...props }, ref) => (
+  (
+    { as: AsIconButton = "button", className, size, variant, fill, radii, outlined, ...props },
+    ref
+  ) => (
     <AsIconButton
-      className={classNames(css.IconButton({ variant, size, radii, outlined }), className)}
+      className={classNames(css.IconButton({ variant, fill, size, radii, outlined }), className)}
       {...props}
       ref={ref}
     />

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}