From f3ef1e02dde6e7a00e3dcb1830aadb58fb0b9fd1 Mon Sep 17 00:00:00 2001
From: Rahmat Hidayat <rahmatramahidayat@gmail.com>
Date: Wed, 5 Jun 2024 14:21:25 +0700
Subject: [PATCH] feat(tag): introduce `size` prop to Tag component

---
 packages/apsara-ui/src/Tag/Tag.stories.mdx |  8 ++++++++
 packages/apsara-ui/src/Tag/Tag.styles.tsx  | 17 +++++++++++++++--
 packages/apsara-ui/src/Tag/Tag.tsx         |  6 +++++-
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/apsara-ui/src/Tag/Tag.stories.mdx b/packages/apsara-ui/src/Tag/Tag.stories.mdx
index 46a9e36f..9d5d0b97 100644
--- 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
index caf44aaa..65e19c90 100644
--- 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
index bcaba912..737d9794 100644
--- 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 && (