From 1340fdc5434441375d8503a92543cdaefe88c0ff Mon Sep 17 00:00:00 2001
From: qroll <quek.ruoling@gmail.com>
Date: Thu, 5 Dec 2024 16:53:48 +0800
Subject: [PATCH] [MISC][RL] Support tag icon on right

---
 src/tag/tag.tsx             |  4 +++-
 src/tag/types.ts            |  1 +
 stories/tag/props-table.tsx |  7 +++++++
 stories/tag/tag.stories.tsx | 19 +++++++++----------
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/tag/tag.tsx b/src/tag/tag.tsx
index 2bf2b8ed7..6ac258745 100644
--- a/src/tag/tag.tsx
+++ b/src/tag/tag.tsx
@@ -7,6 +7,7 @@ export const Tag = ({
     children,
     interactive = false,
     icon,
+    iconPosition = "left",
     ...otherProps
 }: TagProps): JSX.Element => {
     return (
@@ -17,8 +18,9 @@ export const Tag = ({
             $interactive={interactive}
             {...otherProps}
         >
-            {icon}
+            {iconPosition === "left" && icon}
             <Label>{children}</Label>
+            {iconPosition === "right" && icon}
         </Wrapper>
     );
 };
diff --git a/src/tag/types.ts b/src/tag/types.ts
index b06ffcc65..1c014da32 100644
--- a/src/tag/types.ts
+++ b/src/tag/types.ts
@@ -13,5 +13,6 @@ export interface TagProps extends React.HTMLAttributes<HTMLElement> {
     type: TagType;
     colorType?: TagColorType | undefined;
     icon?: JSX.Element | undefined;
+    iconPosition?: "left" | "right";
     interactive?: boolean | undefined;
 }
diff --git a/stories/tag/props-table.tsx b/stories/tag/props-table.tsx
index 71e7e942a..9a0755389 100644
--- a/stories/tag/props-table.tsx
+++ b/stories/tag/props-table.tsx
@@ -52,6 +52,13 @@ const DATA: ApiTableSectionProps[] = [
                 description: "A component to be displayed as the icon",
                 propTypes: ["JSX.Element"],
             },
+            {
+                name: "iconPosition",
+                description:
+                    "The position of the icon relative to the label text",
+                propTypes: [`"left"`, `"right"`],
+                defaultValue: `"left"`,
+            },
             {
                 name: "interactive",
                 description: <>Specifies if the tag is interactive</>,
diff --git a/stories/tag/tag.stories.tsx b/stories/tag/tag.stories.tsx
index 286fb4ced..d37de3482 100644
--- a/stories/tag/tag.stories.tsx
+++ b/stories/tag/tag.stories.tsx
@@ -52,22 +52,21 @@ export const WithIcon: StoryObj<Component> = {
         return (
             <Wrapper>
                 <Tag
-                    type="solid"
-                    colorType="blue"
+                    type="outline"
                     icon={<PlusCircleFillIcon />}
-                    data-testid="first-example"
-                    interactive={true}
+                    interactive
                     onClick={() => window.alert("Interactive tag clicked!")}
                 >
-                    Some Label
+                    Icon on left
                 </Tag>
                 <Tag
-                    type="outline"
-                    colorType="blue"
-                    icon={<PlaceholderIcon />}
-                    data-testid="second-example"
+                    type="solid"
+                    icon={<PlusCircleFillIcon />}
+                    iconPosition="right"
+                    interactive
+                    onClick={() => window.alert("Interactive tag clicked!")}
                 >
-                    Some Label
+                    Icon on right
                 </Tag>
             </Wrapper>
         );