feat: fill variant in chip

cinnyapp · Apr 7, 2024 · 3bbce78 · 3bbce78
1 parent 838fb07
commit 3bbce78
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
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,