Tag Improvements (#519)

- Added Square tag variant - Added grey colored tag Signed-off-by: Benjamin Perez <[email protected]>
minio · Oct 4, 2023 · 94284e7 · 94284e7
1 parent a9c166e
commit 94284e7
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 9 deletions.
diff --git a/src/components/Tag/Tag.stories.tsx b/src/components/Tag/Tag.stories.tsx
@@ -29,13 +29,27 @@ export default {
   argTypes: {},
 } as Meta<typeof Tag>;
 
-const Template: Story<TagProps> = ({ label, id, onDelete, sx, color }) => {
+const Template: Story<TagProps> = ({
+  label,
+  id,
+  onDelete,
+  sx,
+  color,
+  square,
+}) => {
   return (
     <StoryThemeProvider>
       <GlobalStyles />
-      <Tag label={label} color={color} id={id} sx={sx} />
+      <Tag label={label} color={color} id={id} sx={sx} square={square} />
       &nbsp;
-      <Tag label={label} color={color} id={id} onDelete={onDelete} sx={sx}>
+      <Tag
+        label={label}
+        color={color}
+        id={id}
+        onDelete={onDelete}
+        sx={sx}
+        square={square}
+      >
         {" "}
         with on Delete
       </Tag>
@@ -47,12 +61,20 @@ const Template: Story<TagProps> = ({ label, id, onDelete, sx, color }) => {
         onDelete={onDelete}
         sx={sx}
         variant={"outlined"}
+        square={square}
       >
         {" "}
         Outlined
       </Tag>
       &nbsp;
-      <Tag label={label} color={color} id={id} sx={sx} icon={<AddIcon />}>
+      <Tag
+        label={label}
+        color={color}
+        id={id}
+        sx={sx}
+        icon={<AddIcon />}
+        square={square}
+      >
         {" "}
         With an Icon
       </Tag>
@@ -64,6 +86,7 @@ const Template: Story<TagProps> = ({ label, id, onDelete, sx, color }) => {
         sx={sx}
         variant={"outlined"}
         icon={<AddIcon />}
+        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
@@ -22,15 +22,15 @@ import AlertCloseIcon from "../Icons/AlertCloseIcon";
 import { lightColors } from "../../global/themes";
 
 const TagBase = styled.span<TagConstructProps>(
-  ({ theme, color, variant, sx }) => {
+  ({ theme, color, variant, square, sx }) => {
     return {
       position: "relative",
       margin: 0,
       userSelect: "none",
       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<TagConstructProps>(
         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<TagProps & React.HTMLAttributes<HTMLSpanElement>> = ({
   label,
   variant = "regular",
   icon,
+  square = false,
   ...props
 }) => {
   return (
-    <TagBase id={id} color={color} sx={sx} variant={variant} {...props}>
+    <TagBase
+      id={id}
+      color={color}
+      sx={sx}
+      variant={variant}
+      square={square}
+      {...props}
+    >
       {icon}
       <span>
         {label}

diff --git 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
@@ -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
@@ -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: {