From 33cd9074558047070c2d2f6ea27906c9cc258ef3 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Thu, 22 Feb 2024 17:34:09 +0700
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20put=20the=20ic?=
 =?UTF-8?q?on=20size=20to=20icon=20theme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/SegmentedControls/SegmentedControlItem.tsx     | 8 +++-----
 .../shared/SegmentedControls/SegmentedControls.theme.ts   | 3 +++
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/components/shared/SegmentedControls/SegmentedControlItem.tsx b/packages/frontend/src/components/shared/SegmentedControls/SegmentedControlItem.tsx
index aee2c883..3fe5bda6 100644
--- a/packages/frontend/src/components/shared/SegmentedControls/SegmentedControlItem.tsx
+++ b/packages/frontend/src/components/shared/SegmentedControls/SegmentedControlItem.tsx
@@ -55,8 +55,7 @@ const SegmentedControlItem = forwardRef<
     },
     ref,
   ) => {
-    const iconSize = size === 'sm' ? 16 : 20;
-    const { item } = segmentedControlsTheme({ size, type });
+    const { item, icon } = segmentedControlsTheme({ size, type });
 
     return (
       <button
@@ -65,10 +64,9 @@ const SegmentedControlItem = forwardRef<
         className={item({ className })}
         data-active={active}
       >
-        {leftIcon && cloneIcon(leftIcon, { width: iconSize, height: iconSize })}
+        {leftIcon && cloneIcon(leftIcon, { className: icon({ size }) })}
         {children}
-        {rightIcon &&
-          cloneIcon(rightIcon, { width: iconSize, height: iconSize })}
+        {rightIcon && cloneIcon(rightIcon, { className: icon({ size }) })}
       </button>
     );
   },
diff --git a/packages/frontend/src/components/shared/SegmentedControls/SegmentedControls.theme.ts b/packages/frontend/src/components/shared/SegmentedControls/SegmentedControls.theme.ts
index 521cab9b..ed54a072 100644
--- a/packages/frontend/src/components/shared/SegmentedControls/SegmentedControls.theme.ts
+++ b/packages/frontend/src/components/shared/SegmentedControls/SegmentedControls.theme.ts
@@ -38,14 +38,17 @@ export const segmentedControlsTheme = tv({
       'data-[active=true]:shadow-field',
       'data-[active=true]:hover:bg-controls-tertiary-hovered',
     ],
+    icon: [],
   },
   variants: {
     size: {
       sm: {
         item: ['px-3', 'py-2', 'text-xs'],
+        icon: ['h-4', 'w-4'],
       },
       md: {
         item: ['px-4', 'py-3', 'text-sm', 'tracking-[-0.006em]'],
+        icon: ['h-5', 'w-5'],
       },
     },
     type: {