From 838fb079a684de751f0547699fa492f9033d3946 Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Sun, 7 Apr 2024 14:27:12 +0530 Subject: [PATCH 1/3] feat: fill variant in icon button --- src/components/icon-button/IconButton.css.ts | 10 +++++++++- src/components/icon-button/IconButton.tsx | 7 +++++-- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/icon-button/IconButton.css.ts b/src/components/icon-button/IconButton.css.ts index c819bf1..d00e26f 100644 --- 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 index f4ecc0d..3a40735 100644 --- 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 + ) => ( From 3bbce780505113c47988ff18ef6037d6e4f7c7a8 Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Sun, 7 Apr 2024 14:27:52 +0530 Subject: [PATCH 2/3] feat: fill variant in chip --- src/components/chip/Chip.css.ts | 10 +++++++++- src/components/chip/Chip.stories.tsx | 4 ++++ src/components/chip/Chip.tsx | 2 ++ 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/chip/Chip.css.ts b/src/components/chip/Chip.css.ts index 23e75ba..d1b08b3 100644 --- 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 index a3462a6..c25c5fc 100644 --- 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 index 6406bdc..1a1335f 100644 --- 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, 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 3/3] 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 ) => (