refactor: add icon colors in textfield theme

affects: @medly-components/core, @medly-components/forms, @medly-components/theme BREAKING CHANGE: textfield theme needs to be updated to include the icon theme
medly · Jan 1, 2024 · c218425 · c218425
1 parent 7e3a16c
commit c218425
Show file tree

Hide file tree

Showing 22 changed files with 1,116 additions and 2,745 deletions.
diff --git a/packages/core/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap b/packages/core/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
@@ -431,7 +431,7 @@ exports[`Calendar Component should render given date 1`] = `
   cursor: pointer;
 }
 
-.c3 .sc-17d4s39-0 .sc-dynlvq-0 {
+.c3 .sc-17d4s39-0 .sc-1668uuz-0 {
   -webkit-transition: -webkit-transform 200ms ease-out;
   -webkit-transition: transform 200ms ease-out;
   transition: transform 200ms ease-out;
@@ -1463,7 +1463,7 @@ exports[`Calendar Component should render properly with with error state 1`] = `
   cursor: pointer;
 }
 
-.c3 .sc-17d4s39-0 .sc-dynlvq-0 {
+.c3 .sc-17d4s39-0 .sc-1668uuz-0 {
   -webkit-transition: -webkit-transform 200ms ease-out;
   -webkit-transition: transform 200ms ease-out;
   transition: transform 200ms ease-out;

diff --git a/packages/core/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap b/packages/core/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
@@ -81,16 +81,6 @@ exports[`DatePicker component calendar icon should show calendar icon displayed
   color: #546A7F;
 }
 
-.c4 .c13,
-.c4 .sc-dynlvq-0 {
-  color: #546A7F;
-}
-
-.c4 .c13 *,
-.c4 .sc-dynlvq-0 * {
-  fill: #546A7F;
-}
-
 .c4 ~ .sc-avlt8d-0 {
   color: #546A7F;
 }
@@ -133,20 +123,6 @@ exports[`DatePicker component calendar icon should show calendar icon displayed
   color: #3872D2;
 }
 
-.c4:focus-within .c13,
-.c4:focus-within:hover .c13,
-.c4:focus-within .sc-dynlvq-0,
-.c4:focus-within:hover .sc-dynlvq-0 {
-  color: #3872D2;
-}
-
-.c4:focus-within .c13 *,
-.c4:focus-within:hover .c13 *,
-.c4:focus-within .sc-dynlvq-0 *,
-.c4:focus-within:hover .sc-dynlvq-0 * {
-  fill: #3872D2;
-}
-
 .c4:focus-within input,
 .c4:focus-within:hover input {
   box-shadow: 0 0 0 100000px #EBF1FA inset;
@@ -502,16 +478,6 @@ exports[`DatePicker component calendar icon should show calendar icon displayed
   color: #546A7F;
 }
 
-.c4 .sc-1ubn8hn-0,
-.c4 .sc-dynlvq-0 {
-  color: #546A7F;
-}
-
-.c4 .sc-1ubn8hn-0 *,
-.c4 .sc-dynlvq-0 * {
-  fill: #546A7F;
-}
-
 .c4 ~ .sc-avlt8d-0 {
   color: #546A7F;
 }
@@ -554,20 +520,6 @@ exports[`DatePicker component calendar icon should show calendar icon displayed
   color: #3872D2;
 }
 
-.c4:focus-within .sc-1ubn8hn-0,
-.c4:focus-within:hover .sc-1ubn8hn-0,
-.c4:focus-within .sc-dynlvq-0,
-.c4:focus-within:hover .sc-dynlvq-0 {
-  color: #3872D2;
-}
-
-.c4:focus-within .sc-1ubn8hn-0 *,
-.c4:focus-within:hover .sc-1ubn8hn-0 *,
-.c4:focus-within .sc-dynlvq-0 *,
-.c4:focus-within:hover .sc-dynlvq-0 * {
-  fill: #3872D2;
-}
-
 .c4:focus-within input,
 .c4:focus-within:hover input {
   box-shadow: 0 0 0 100000px #EBF1FA inset;
@@ -13382,16 +13334,6 @@ exports[`DatePicker component should render properly when hideInput prop is pass
   color: #546A7F;
 }
 
-.c4 .sc-1ubn8hn-0,
-.c4 .sc-dynlvq-0 {
-  color: #546A7F;
-}
-
-.c4 .sc-1ubn8hn-0 *,
-.c4 .sc-dynlvq-0 * {
-  fill: #546A7F;
-}
-
 .c4 ~ .sc-avlt8d-0 {
   color: #546A7F;
 }
@@ -13434,20 +13376,6 @@ exports[`DatePicker component should render properly when hideInput prop is pass
   color: #3872D2;
 }
 
-.c4:focus-within .sc-1ubn8hn-0,
-.c4:focus-within:hover .sc-1ubn8hn-0,
-.c4:focus-within .sc-dynlvq-0,
-.c4:focus-within:hover .sc-dynlvq-0 {
-  color: #3872D2;
-}
-
-.c4:focus-within .sc-1ubn8hn-0 *,
-.c4:focus-within:hover .sc-1ubn8hn-0 *,
-.c4:focus-within .sc-dynlvq-0 *,
-.c4:focus-within:hover .sc-dynlvq-0 * {
-  fill: #3872D2;
-}
-
 .c4:focus-within input,
 .c4:focus-within:hover input {
   box-shadow: 0 0 0 100000px #EBF1FA inset;
@@ -13825,16 +13753,6 @@ exports[`DatePicker component should render properly when value is of date type
   color: #546A7F;
 }
 
-.c4 .sc-1ubn8hn-0,
-.c4 .sc-dynlvq-0 {
-  color: #546A7F;
-}
-
-.c4 .sc-1ubn8hn-0 *,
-.c4 .sc-dynlvq-0 * {
-  fill: #546A7F;
-}
-
 .c4 ~ .sc-avlt8d-0 {
   color: #546A7F;
 }
@@ -13874,16 +13792,6 @@ exports[`DatePicker component should render properly when value is of date type
   color: #b0bcc8;
 }
 
-.c4 .sc-1ubn8hn-0,
-.c4 .sc-dynlvq-0 {
-  color: #b0bcc8;
-}
-
-.c4 .sc-1ubn8hn-0 *,
-.c4 .sc-dynlvq-0 * {
-  fill: #b0bcc8;
-}
-
 .c4 ~ .sc-avlt8d-0 {
   color: #b0bcc8;
 }
@@ -14225,16 +14133,6 @@ exports[`DatePicker component should render properly when value is of string typ
   color: #546A7F;
 }
 
-.c4 .sc-1ubn8hn-0,
-.c4 .sc-dynlvq-0 {
-  color: #546A7F;
-}
-
-.c4 .sc-1ubn8hn-0 *,
-.c4 .sc-dynlvq-0 * {
-  fill: #546A7F;
-}
-
 .c4 ~ .sc-avlt8d-0 {
   color: #546A7F;
 }
@@ -14274,16 +14172,6 @@ exports[`DatePicker component should render properly when value is of string typ
   color: #b0bcc8;
 }
 
-.c4 .sc-1ubn8hn-0,
-.c4 .sc-dynlvq-0 {
-  color: #b0bcc8;
-}
-
-.c4 .sc-1ubn8hn-0 *,
-.c4 .sc-dynlvq-0 * {
-  fill: #b0bcc8;
-}
-
 .c4 ~ .sc-avlt8d-0 {
   color: #b0bcc8;
 }

diff --git a/packages/core/src/components/DateRangePicker/DateRangeTextFields/DateRangeTextFields.tsx b/packages/core/src/components/DateRangePicker/DateRangeTextFields/DateRangeTextFields.tsx
@@ -109,9 +109,15 @@ export const DateRangeTextFields: FC<Props> = memo(props => {
                 areCustomOptionsVisible={!!isActive && activePopover === PopoverTypes.CUSTOM_RANGE_OPTIONS}
             >
                 {showDecorators && (
-                    <TextFieldStyled.Prefix size={size}>
+                    <TextFieldStyled.IconWrapper
+                        size={size}
+                        variant={variant}
+                        isActive={isActive}
+                        isErrorPresent={isErrorPresent}
+                        disabled={disabled}
+                    >
                         <Prefix />
-                    </TextFieldStyled.Prefix>
+                    </TextFieldStyled.IconWrapper>
                 )}
                 <DateRangeTextField
                     ref={startDateRef}
@@ -137,9 +143,15 @@ export const DateRangeTextFields: FC<Props> = memo(props => {
                     <HelperAndErrorTextTooltip id={id} errorText={errorText || builtInErrorMessage} helperText={helperText} />
                 )}
                 {showChevronIcon && (
-                    <TextFieldStyled.Suffix size={size}>
+                    <TextFieldStyled.IconWrapper
+                        size={size}
+                        variant={variant}
+                        isActive={isActive}
+                        isErrorPresent={isErrorPresent}
+                        disabled={disabled}
+                    >
                         <Suffix />
-                    </TextFieldStyled.Suffix>
+                    </TextFieldStyled.IconWrapper>
                 )}
             </Wrapper>
             {showDecorators && !showTooltipForHelperAndErrorText && (

diff --git a/packages/core/src/components/DateRangePicker/__snapshots__/DateRangePicker.test.tsx.snap b/packages/core/src/components/DateRangePicker/__snapshots__/DateRangePicker.test.tsx.snap
@@ -2219,16 +2219,6 @@ exports[`DateRangePicker Custom date range options should render properly with c
   color: #546A7F;
 }
 
-.c1 .c21,
-.c1 .sc-dynlvq-0 {
-  color: #546A7F;
-}
-
-.c1 .c21 *,
-.c1 .sc-dynlvq-0 * {
-  fill: #546A7F;
-}
-
 .c1 ~ .c13 {
   color: #546A7F;
 }
@@ -2271,20 +2261,6 @@ exports[`DateRangePicker Custom date range options should render properly with c
   color: #3872D2;
 }
 
-.c1:focus-within .c21,
-.c1:focus-within:hover .c21,
-.c1:focus-within .sc-dynlvq-0,
-.c1:focus-within:hover .sc-dynlvq-0 {
-  color: #3872D2;
-}
-
-.c1:focus-within .c21 *,
-.c1:focus-within:hover .c21 *,
-.c1:focus-within .sc-dynlvq-0 *,
-.c1:focus-within:hover .sc-dynlvq-0 * {
-  fill: #3872D2;
-}
-
 .c1:focus-within input,
 .c1:focus-within:hover input {
   box-shadow: 0 0 0 100000px #EBF1FA inset;
@@ -24971,16 +24947,6 @@ exports[`DateRangePicker should render properly 1`] = `
   color: #546A7F;
 }
 
-.c1 .c40,
-.c1 .sc-dynlvq-0 {
-  color: #546A7F;
-}
-
-.c1 .c40 *,
-.c1 .sc-dynlvq-0 * {
-  fill: #546A7F;
-}
-
 .c1 ~ .c13 {
   color: #546A7F;
 }
@@ -25023,20 +24989,6 @@ exports[`DateRangePicker should render properly 1`] = `
   color: #3872D2;
 }
 
-.c1:focus-within .c40,
-.c1:focus-within:hover .c40,
-.c1:focus-within .sc-dynlvq-0,
-.c1:focus-within:hover .sc-dynlvq-0 {
-  color: #3872D2;
-}
-
-.c1:focus-within .c40 *,
-.c1:focus-within:hover .c40 *,
-.c1:focus-within .sc-dynlvq-0 *,
-.c1:focus-within:hover .sc-dynlvq-0 * {
-  fill: #3872D2;
-}
-
 .c1:focus-within input,
 .c1:focus-within:hover input {
   box-shadow: 0 0 0 100000px #EBF1FA inset;
@@ -26867,7 +26819,7 @@ exports[`DateRangePicker should render properly with single month 1`] = `
   cursor: pointer;
 }
 
-.c19 .c0 .sc-dynlvq-0 {
+.c19 .c0 .c45 {
   -webkit-transition: -webkit-transform 200ms ease-out;
   -webkit-transition: transform 200ms ease-out;
   transition: transform 200ms ease-out;
@@ -27416,16 +27368,6 @@ exports[`DateRangePicker should render properly with single month 1`] = `
   color: #546A7F;
 }
 
-.c2 .c45,
-.c2 .sc-dynlvq-0 {
-  color: #546A7F;
-}
-
-.c2 .c45 *,
-.c2 .sc-dynlvq-0 * {
-  fill: #546A7F;
-}
-
 .c2 ~ .c14 {
   color: #546A7F;
 }
@@ -27468,20 +27410,6 @@ exports[`DateRangePicker should render properly with single month 1`] = `
   color: #3872D2;
 }
 
-.c2:focus-within .c45,
-.c2:focus-within:hover .c45,
-.c2:focus-within .sc-dynlvq-0,
-.c2:focus-within:hover .sc-dynlvq-0 {
-  color: #3872D2;
-}
-
-.c2:focus-within .c45 *,
-.c2:focus-within:hover .c45 *,
-.c2:focus-within .sc-dynlvq-0 *,
-.c2:focus-within:hover .sc-dynlvq-0 * {
-  fill: #3872D2;
-}
-
 .c2:focus-within input,
 .c2:focus-within:hover input {
   box-shadow: 0 0 0 100000px #EBF1FA inset;