feat: add PRefix and Suffix icon component in TextField

affects: @medly-components/core
medly · Jan 10, 2024 · 164eafa · 164eafa
1 parent f94d844
commit 164eafa
Show file tree

Hide file tree

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

diff --git a/packages/core/src/components/SingleSelect/SingleSelect.styled.tsx b/packages/core/src/components/SingleSelect/SingleSelect.styled.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import TextField from '../TextField';
-import { IconWrapper } from '../TextField/Styled';
+import { Suffix } from '../TextField/Styled';
 import { SelectWrapperProps } from './types';
 
 export const Wrapper = styled('div')<SelectWrapperProps>`
@@ -30,12 +30,12 @@ export const Wrapper = styled('div')<SelectWrapperProps>`
                 cursor: ${({ disabled, isSearchable }) => !disabled && isSearchable && 'text'};
             }
         }
-        ${IconWrapper} {
+        ${Suffix} {
             transition: transform 200ms ease-out;
             transform: ${({ areOptionsVisible }) => (areOptionsVisible ? 'rotate(180deg)' : 'rotate(0deg)')};
         }
         &:not(:focus-within):hover {
-            ${IconWrapper} {
+            ${Suffix} {
                 * {
                     fill: ${({ theme, variant, disabled, isErrorPresent }) =>
                         !disabled && !isErrorPresent && variant !== 'flat' && theme.textField[variant].default.textColor};

diff --git a/packages/core/src/components/TextField/Styled/Icon.styled.tsx b/packages/core/src/components/TextField/Styled/Icon.styled.tsx
@@ -24,9 +24,16 @@ const getStyleForIcon = ({ theme, variant, disabled }: IconProps & WithThemeProp
 
 export const IconWrapper = styled(InjectClassName)<IconProps>`
     pointer-events: none;
-    margin-left: ${({ size }) => (size === 'S' ? '1.2rem' : '1.6rem')};
     ${props => getStyleForIcon(props, 'default')};
     ${props => props.isActive && getStyleForIcon(props, 'active')};
     ${props => props.isErrorPresent && getStyleForIcon(props, 'error')};
     ${props => props.disabled && getStyleForIcon(props, 'disabled')};
 `;
+
+export const Prefix = styled(IconWrapper)<IconProps>`
+    margin-right: ${({ size }) => (size === 'S' ? '1.2rem' : '1.6rem')};
+`;
+
+export const Suffix = styled(IconWrapper)<IconProps>`
+    margin-left: ${({ size }) => (size === 'S' ? '1.2rem' : '1.6rem')};
+`;
diff --git a/packages/core/src/components/TextField/TextField.tsx b/packages/core/src/components/TextField/TextField.tsx
@@ -132,15 +132,15 @@ const Component: FC<TextFieldProps> = memo(
                     multiline={multiline}
                 >
                     {!!Prefix && showDecorators && (
-                        <Styled.IconWrapper
+                        <Styled.Prefix
                             size={size}
                             disabled={disabled}
                             variant={props.variant!}
                             isActive={isActive}
                             isErrorPresent={isErrorPresent}
                         >
                             <Prefix size={size} />
-                        </Styled.IconWrapper>
+                        </Styled.Prefix>
                     )}
                     <Styled.InputWrapper multiline={multiline} size={size!} variant={props.variant!}>
                         <Styled.Input
@@ -197,15 +197,15 @@ const Component: FC<TextFieldProps> = memo(
                         </Styled.HelperAndErrorTextTooltipWrapper>
                     )}
                     {!!Suffix && showDecorators && (
-                        <Styled.IconWrapper
+                        <Styled.Suffix
                             size={size}
                             disabled={disabled}
                             variant={props.variant!}
                             isActive={isActive}
                             isErrorPresent={isErrorPresent}
                         >
                             <Suffix size={size} />
-                        </Styled.IconWrapper>
+                        </Styled.Suffix>
                     )}
                 </Styled.InnerWrapper>
                 {(isErrorPresent || helperText) && !props.showTooltipForHelperAndErrorText && (