fix: multiselect icon color on expand

affects: @medly-components/core, @medly-components/forms
medly · Aug 4, 2024 · 92a14b6 · 92a14b6
1 parent ddf5104
commit 92a14b6
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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 {