From 92a14b657c837f2dd40c609cede38607f4de2e28 Mon Sep 17 00:00:00 2001
From: Mukul Bansal <mukulbansal01@gmail.com>
Date: Sun, 4 Aug 2024 23:50:19 +0530
Subject: [PATCH] fix: multiselect icon color on expand

affects: @medly-components/core, @medly-components/forms
---
 .../src/components/MultiSelect/MultiSelect.styled.tsx | 11 ++++++-----
 .../__snapshots__/MultiSelect.test.tsx.snap           | 10 +++++-----
 .../components/Form/__snapshots__/Form.test.tsx.snap  |  4 ++--
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/core/src/components/MultiSelect/MultiSelect.styled.tsx b/packages/core/src/components/MultiSelect/MultiSelect.styled.tsx
index 1096da0f8..9b99d44d1 100644
--- a/packages/core/src/components/MultiSelect/MultiSelect.styled.tsx
+++ b/packages/core/src/components/MultiSelect/MultiSelect.styled.tsx
@@ -39,10 +39,10 @@ const getDefaultStyle = ({ theme, variant, areOptionsVisible, disabled, isSearch
         transform: ${areOptionsVisible ? 'rotate(180deg)' : 'rotate(0deg)'};
     }
 
-    ${!disabled && iconStyle(theme.textField[variant].default.labelColor)}
+    ${!disabled && iconStyle(theme.textField[variant].default.iconColor)}
 
     &:not(:focus-within):hover {
-        ${!disabled && iconStyle(theme.textField[variant].default.textColor)}
+        ${!disabled && iconStyle(theme.textField[variant].hover.iconColor)}
     }
 `;
 
@@ -55,7 +55,8 @@ export const Wrapper = styled.div<SelectWrapperProps>`
         fullWidth ? `${theme.spacing.S2} 0` : `${theme.spacing.S2} ${theme.spacing.S2} ${theme.spacing.S2} 0`};
 
     ${getDefaultStyle};
-    ${({ areOptionsVisible, isErrorPresent, theme }) => areOptionsVisible && !isErrorPresent && iconStyle(theme.colors.blue[500])};
-    ${({ isErrorPresent, theme }) => isErrorPresent && iconStyle(theme.colors.red[500])};
-    ${({ disabled, theme }) => disabled && iconStyle(theme.colors.grey[400])};
+    ${({ areOptionsVisible, isErrorPresent, theme, variant }) =>
+        areOptionsVisible && !isErrorPresent && iconStyle(theme.textField[variant].active.iconColor)};
+    ${({ isErrorPresent, theme, variant }) => isErrorPresent && iconStyle(theme.textField[variant].error.iconColor)};
+    ${({ disabled, theme, variant }) => disabled && iconStyle(theme.textField[variant].disabled.iconColor)};
 `;
diff --git a/packages/core/src/components/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap b/packages/core/src/components/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap
index 67f963612..d9718faa0 100644
--- a/packages/core/src/components/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap
+++ b/packages/core/src/components/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap
@@ -839,7 +839,7 @@ exports[`MultiSelect component should render correctly with default props 1`] =
 }
 
 .c0:not(:focus-within):hover .c8 > .c10 * {
-  fill: #13181D;
+  fill: #546A7F;
 }
 
 <div>
@@ -1369,7 +1369,7 @@ exports[`MultiSelect component should render properly with M size 1`] = `
 }
 
 .c35:not(:focus-within):hover .c8 > .c12 * {
-  fill: #13181D;
+  fill: #546A7F;
 }
 
 .c0 {
@@ -1415,7 +1415,7 @@ exports[`MultiSelect component should render properly with M size 1`] = `
 }
 
 .c0:not(:focus-within):hover .c8 > .c12 * {
-  fill: #13181D;
+  fill: #546A7F;
 }
 
 .c0 .c8 > .c12 * {
@@ -2727,7 +2727,7 @@ exports[`MultiSelect component should render properly with S size 1`] = `
 }
 
 .c36:not(:focus-within):hover .c8 > .c12 * {
-  fill: #13181D;
+  fill: #546A7F;
 }
 
 .c0 {
@@ -2773,7 +2773,7 @@ exports[`MultiSelect component should render properly with S size 1`] = `
 }
 
 .c0:not(:focus-within):hover .c8 > .c12 * {
-  fill: #13181D;
+  fill: #546A7F;
 }
 
 .c0 .c8 > .c12 * {
diff --git a/packages/forms/src/components/Form/__snapshots__/Form.test.tsx.snap b/packages/forms/src/components/Form/__snapshots__/Form.test.tsx.snap
index 93d0b99ca..20aa05e6b 100644
--- a/packages/forms/src/components/Form/__snapshots__/Form.test.tsx.snap
+++ b/packages/forms/src/components/Form/__snapshots__/Form.test.tsx.snap
@@ -1351,7 +1351,7 @@ exports[`Form should render properly with initial state 1`] = `
 }
 
 .c58:not(:focus-within):hover .c59 > .c30 * {
-  fill: #13181D;
+  fill: #546A7F;
 }
 
 .c38 {
@@ -3690,7 +3690,7 @@ exports[`Form should render properly without initial state 1`] = `
 }
 
 .c58:not(:focus-within):hover .c59 > .c32 * {
-  fill: #13181D;
+  fill: #546A7F;
 }
 
 .c39 {