diff --git a/src/components/Tag/Tag.stories.tsx b/src/components/Tag/Tag.stories.tsx index 615ecc1b..187830ca 100644 --- a/src/components/Tag/Tag.stories.tsx +++ b/src/components/Tag/Tag.stories.tsx @@ -29,13 +29,27 @@ export default { argTypes: {}, } as Meta; -const Template: Story = ({ label, id, onDelete, sx, color }) => { +const Template: Story = ({ + label, + id, + onDelete, + sx, + color, + square, +}) => { return ( - +   - + {" "} with on Delete @@ -47,12 +61,20 @@ const Template: Story = ({ label, id, onDelete, sx, color }) => { onDelete={onDelete} sx={sx} variant={"outlined"} + square={square} > {" "} Outlined   - }> + } + square={square} + > {" "} With an Icon @@ -64,6 +86,7 @@ const Template: Story = ({ label, id, onDelete, sx, color }) => { sx={sx} variant={"outlined"} icon={} + square={square} > {" "} Outlined With an Icon @@ -112,6 +135,16 @@ Warn.args = { }, }; +export const Grey = Template.bind({}); +Grey.args = { + label: "A Tag", + id: "tag-test", + color: "grey", + onDelete: () => { + alert("Clicked Delete Button!"); + }, +}; + export const Ok = Template.bind({}); Ok.args = { label: "A Tag", @@ -122,6 +155,17 @@ Ok.args = { }, }; +export const Square = Template.bind({}); +Square.args = { + label: "A Tag", + id: "tag-test", + color: "default", + onDelete: () => { + alert("Clicked Delete Button!"); + }, + square: true, +}; + export const CustomStyles = Template.bind({}); CustomStyles.args = { label: "A Tag", diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx index 31397c72..066d7e6b 100644 --- a/src/components/Tag/Tag.tsx +++ b/src/components/Tag/Tag.tsx @@ -22,7 +22,7 @@ import AlertCloseIcon from "../Icons/AlertCloseIcon"; import { lightColors } from "../../global/themes"; const TagBase = styled.span( - ({ theme, color, variant, sx }) => { + ({ theme, color, variant, square, sx }) => { return { position: "relative", margin: 0, @@ -30,7 +30,7 @@ const TagBase = styled.span( appearance: "none", maxWidth: "100%", fontFamily: "'Inter', sans-serif", - fontSize: 14, + fontSize: 13, display: "inline-flex", alignItems: "center", justifyContent: "center", @@ -43,7 +43,7 @@ const TagBase = styled.span( variant === "regular" ? get(theme, `tag.${color}.background`, lightColors.mainBlue) : "transparent", - borderRadius: 16, + borderRadius: square ? 3 : 16, whiteSpace: "nowrap", cursor: "default", outline: 0, @@ -104,10 +104,18 @@ const Tag: FC> = ({ label, variant = "regular", icon, + square = false, ...props }) => { return ( - + {icon} {label} diff --git a/src/components/Tag/Tag.types.ts b/src/components/Tag/Tag.types.ts index 76c097fc..99c295b6 100644 --- a/src/components/Tag/Tag.types.ts +++ b/src/components/Tag/Tag.types.ts @@ -25,9 +25,10 @@ export interface TagMainProps { } export interface TagConstructProps { - color?: "default" | "secondary" | "warn" | "alert" | "ok"; + color?: "default" | "secondary" | "warn" | "alert" | "ok" | "grey"; sx?: CSSObject; variant?: "regular" | "outlined"; + square?: boolean; } export type TagProps = TagMainProps & TagConstructProps; diff --git a/src/global/global.types.ts b/src/global/global.types.ts index 18390a29..b1ee689d 100644 --- a/src/global/global.types.ts +++ b/src/global/global.types.ts @@ -267,6 +267,7 @@ export interface TagThemeProps { warn: TagVariantProps; alert: TagVariantProps; ok: TagVariantProps; + grey: TagVariantProps; } interface SnackBarColorElements { diff --git a/src/global/themes.ts b/src/global/themes.ts index 69c3a64b..c94df318 100644 --- a/src/global/themes.ts +++ b/src/global/themes.ts @@ -560,6 +560,11 @@ export const lightTheme: ThemeDefinitionProps = { label: lightColors.defaultFontColor, deleteColor: lightColors.defaultFontColor, }, + grey: { + background: lightColors.actionDisabledGrey, + label: lightColors.defaultFontColor, + deleteColor: lightColors.defaultFontColor, + }, }, snackbar: { error: { @@ -959,6 +964,11 @@ export const darkTheme: ThemeDefinitionProps = { label: darkColors.dark, deleteColor: darkColors.dark, }, + grey: { + background: darkColors.disabledBGGrey, + label: darkColors.mainWhite, + deleteColor: darkColors.mainWhite, + }, }, snackbar: { error: {