From 05462360bd7f0832efb642c30f8f3bb2969d7dd7 Mon Sep 17 00:00:00 2001
From: VINEETH ASOK KUMAR <vineeth.asokkumar@clickhouse.com>
Date: Fri, 29 Sep 2023 19:53:26 +0200
Subject: [PATCH] Fix Button icon alignment

---
 .../SplitButton/SplitButton.stories.tsx       |  4 +-
 src/components/SplitButton/SplitButton.tsx    | 47 ++++++-------------
 2 files changed, 17 insertions(+), 34 deletions(-)

diff --git a/src/components/SplitButton/SplitButton.stories.tsx b/src/components/SplitButton/SplitButton.stories.tsx
index 394c529d1..89e922aef 100644
--- a/src/components/SplitButton/SplitButton.stories.tsx
+++ b/src/components/SplitButton/SplitButton.stories.tsx
@@ -11,7 +11,7 @@ const menuItems: Array<Menu> = [
   },
   {
     icon: "code",
-    iconDir: "left",
+    iconDir: "start",
     label: "Content1",
   },
   {
@@ -34,7 +34,7 @@ const menuItems: Array<Menu> = [
   },
   {
     icon: "code",
-    iconDir: "right",
+    iconDir: "end",
     label: "Content2",
   },
   {
diff --git a/src/components/SplitButton/SplitButton.tsx b/src/components/SplitButton/SplitButton.tsx
index 83f4f4021..eea9937cd 100644
--- a/src/components/SplitButton/SplitButton.tsx
+++ b/src/components/SplitButton/SplitButton.tsx
@@ -1,15 +1,15 @@
 import { HTMLAttributes, ReactNode, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import { DropdownMenuProps } from "@radix-ui/react-dropdown-menu";
-import { Icon, IconName, Dropdown } from "@/components";
+import { Icon, IconName, Dropdown, HorizontalDirection } from "@/components";
 import { BaseButton } from "../commonElement";
+import IconWrapper from "../IconWrapper/IconWrapper";
 
 type ButtonType = "primary" | "secondary";
-type IconDirection = "left" | "right";
 type Alignment = "center" | "left";
 type MenuItem = {
   icon?: IconName;
-  iconDir?: IconDirection;
+  iconDir?: HorizontalDirection;
   label: ReactNode;
   type?: "item";
   items?: never;
@@ -39,7 +39,7 @@ export interface SplitButtonProps
   menu: Array<Menu>;
   side?: "top" | "bottom";
   icon?: IconName;
-  iconDir?: IconDirection;
+  iconDir?: HorizontalDirection;
 }
 
 export const SplitButton = ({
@@ -56,7 +56,7 @@ export const SplitButton = ({
   align,
   children,
   icon,
-  iconDir = "left",
+  iconDir = "start",
   ...props
 }: SplitButtonProps) => {
   const ref = useRef<HTMLDivElement>(null);
@@ -103,8 +103,9 @@ export const SplitButton = ({
           <IconWrapper
             icon={icon}
             iconDir={iconDir}
-            label={children}
-          />
+          >
+            {children}
+          </IconWrapper>
         </PrimaryButton>
         <SecondaryButton
           as={Dropdown.Trigger}
@@ -142,32 +143,12 @@ const DropdownContent = styled.div<{ $width: number }>`
   min-width: ${({ $width }) => $width}px;
 `;
 
-const IconWrapper = ({ label, icon, iconDir }: Omit<MenuItem, "type" | "items">) => {
-  return (
-    <>
-      {icon && iconDir === "left" && (
-        <Icon
-          name={icon}
-          size="sm"
-        />
-      )}
-      {label}
-      {icon && iconDir === "right" && (
-        <Icon
-          name={icon}
-          size="sm"
-        />
-      )}
-    </>
-  );
-};
-
 const MenuContentItem = ({
   items = [],
   type = "item",
   label,
   icon,
-  iconDir = "left",
+  iconDir = "start",
   parentKey,
   ...props
 }: Menu & { parentKey: string }) => {
@@ -177,8 +158,9 @@ const MenuContentItem = ({
         <IconWrapper
           icon={icon}
           iconDir={iconDir}
-          label={label}
-        />
+        >
+          {label}
+        </IconWrapper>
       </Dropdown.Item>
     );
   }
@@ -205,8 +187,9 @@ const MenuContentItem = ({
           <IconWrapper
             icon={icon}
             iconDir={iconDir}
-            label={label}
-          />
+          >
+            {label}
+          </IconWrapper>
         </Dropdown.Trigger>
         <Dropdown.Content sub>
           {items.map((item, index) => (