feat(tag): introduce size prop to Tag component (#49)

goto · Jun 25, 2024 · ff46faa · ff46faa
1 parent 2be0106
commit ff46faa
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/packages/apsara-ui/src/Tag/Tag.stories.mdx b/packages/apsara-ui/src/Tag/Tag.stories.mdx
@@ -45,6 +45,14 @@ export const Profile = Icons["profile"];
                 type: { summary: "ReactNode" },
             },
         },
+        size: {
+            description: "Size of the tag",
+            control: { type: "select", options: ["small", "medium", "large"] },
+            table: {
+                type: { summary: ["small", "medium", "large"] },
+                defaultValue: { summary: "medium" },
+            },
+        }
     }}
 />
 

diff --git a/packages/apsara-ui/src/Tag/Tag.styles.tsx b/packages/apsara-ui/src/Tag/Tag.styles.tsx
@@ -1,11 +1,24 @@
 import styled from "styled-components";
 import { textStyles } from "../mixin";
+import { TagSize } from "./Tag";
 
-export const StyledTag = styled("div")<{ type: "round" | "rect"; color: string; closable: boolean; icon: boolean }>`
+const fontSizeMap: Record<TagSize, string> = {
+    small: "9px",
+    medium: "11px",
+    large: "14px",
+};
+
+export const StyledTag = styled("div") <{
+    type: "round" | "rect";
+    color: string;
+    closable: boolean;
+    icon: boolean;
+    size: TagSize;
+}>`
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
-    ${({ theme }) => textStyles("11px", theme?.tag?.text, "0.11px", "normal")}
+    ${({ theme, size }) => textStyles(fontSizeMap[size], theme?.tag?.text, "0.11px", "normal")}
     border-radius: ${({ type }) => (type === "round" ? "10.5px" : "2px")};
     border-color: ${({ color }) => color};
     border-width: 1px;

diff --git a/packages/apsara-ui/src/Tag/Tag.tsx b/packages/apsara-ui/src/Tag/Tag.tsx
@@ -5,6 +5,8 @@ import Colors from "../Colors";
 
 const Cross = Icons["cross"];
 
+export type TagSize = "small" | "medium" | "large";
+
 type TagProps = {
     children?: ReactNode;
     type?: "round" | "rect";
@@ -14,6 +16,7 @@ type TagProps = {
     icon?: ReactNode;
     className?: string;
     style?: React.CSSProperties;
+    size: TagSize;
 };
 
 const Tag = ({
@@ -23,13 +26,14 @@ const Tag = ({
     closable = false,
     closeIcon,
     icon,
+    size = "medium",
     ...props
 }: TagProps) => {
     const [visible, setVisible] = useState(true);
     if (!visible) return null;
     return (
         <TagWrapper>
-            <StyledTag {...props} type={type} color={color} closable={closable} icon={icon ? true : false}>
+            <StyledTag {...props} type={type} color={color} closable={closable} icon={icon ? true : false} size={size}>
                 <span className="tag_icon">{icon}</span>
                 <span className="tag_content">{children}</span>
                 {closable && (