fix: correct type issue in Input size prop

freenowtech · May 23, 2023 · f48369a · f48369a
1 parent 9981650
commit f48369a
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 10 deletions.
diff --git a/src/components/Input/BottomLinedInput.ts b/src/components/Input/BottomLinedInput.ts
@@ -43,7 +43,7 @@ const getLabelColor = ({ hasValue, inverted }: InternalInputComponentProps) => {
 const BottomLinedInput: FC<InternalInputComponentProps> = styled(BaseInput)<InternalInputComponentProps>`
     ${sizeVariant}
     & ~ ${BottomLinedInputLabel} {
-        ${p => (p.hasValue || p.placeholder ? activeBottomLinedPosition(p.size as Pick<InternalInputComponentProps, 'size'>) : '')};
+        ${p => (p.hasValue || p.placeholder ? activeBottomLinedPosition(p.size) : '')};
         color: ${getLabelColor};
         background: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)};
     }
@@ -60,13 +60,13 @@ const BottomLinedInput: FC<InternalInputComponentProps> = styled(BaseInput)<Inte
     &:-webkit-autofill:focus,
     &:-webkit-autofill:active {
         & + ${BottomLinedInputLabel} {
-            ${p => activeBottomLinedPosition(p.size as Pick<InternalInputComponentProps, 'size'>)};
+            ${p => activeBottomLinedPosition(p.size)};
         }
     }
 
     &:focus:not(:disabled) {
         & ~ ${BottomLinedInputLabel} {
-            ${p => activeBottomLinedPosition(p.size as Pick<InternalInputComponentProps, 'size'>)};
+            ${p => activeBottomLinedPosition(p.size)};
             color: ${p => (p.inverted ? Colors.WHITE : Colors.ACTION_BLUE_900)};
             background: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)};
         }

diff --git a/src/components/Input/BottomLinedInputLabel.ts b/src/components/Input/BottomLinedInputLabel.ts
@@ -5,7 +5,9 @@ import { get } from '../../utils/themeGet';
 import { InternalInputComponentProps } from './BaseInput';
 import { activePositionBaseStyles, BaseInputLabel } from './BaseInputLabel';
 
-const activeBottomLinedPosition = (size?: Pick<InternalInputComponentProps, 'size'>): ReadonlyArray<Interpolation<ThemeProps<unknown>>> => css`
+const activeBottomLinedPosition = (
+    size?: Pick<InternalInputComponentProps, 'size'>['size']
+): ReadonlyArray<Interpolation<ThemeProps<unknown>>> => css`
     ${activePositionBaseStyles};
     top: ${size === 'small' ? '0' : '0.25rem'};
     font-size: ${size === 'small' ? '0.625rem' : get('fontSizes.0')};

diff --git a/src/components/Input/BoxedInput.ts b/src/components/Input/BoxedInput.ts
@@ -43,12 +43,12 @@ const getLabelColor = ({ hasValue, inverted }: InternalInputComponentProps) => {
 const BoxedInput: FC<InternalInputComponentProps> = styled(BaseInput)<InternalInputComponentProps>`
     ${sizeVariant}
     & + ${BoxedInputLabel} {
-        ${p => (p.hasValue || p.placeholder ? activeBoxedPosition(p.size as Pick<InternalInputComponentProps, 'size'>) : undefined)};
+        ${p => (p.hasValue || p.placeholder ? activeBoxedPosition(p.size) : undefined)};
         color: ${getLabelColor};
         background: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)};
         background: ${p =>
             `linear-gradient(0deg, ${p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE} calc(50% + ${
-                (p.size as Pick<InternalInputComponentProps, 'size'>) === 'small' ? '0.0825rem' : '0.0625rem'
+                p.size === 'small' ? '0.0825rem' : '0.0625rem'
             }), transparent 50%)`};
     }
 
@@ -64,18 +64,18 @@ const BoxedInput: FC<InternalInputComponentProps> = styled(BaseInput)<InternalIn
     &:-webkit-autofill:focus,
     &:-webkit-autofill:active {
         & + ${BoxedInputLabel} {
-            ${p => activeBoxedPosition(p.size as Pick<InternalInputComponentProps, 'size'>)};
+            ${p => activeBoxedPosition(p.size)};
         }
     }
 
     &:focus:not(:disabled) {
         & + ${BoxedInputLabel} {
-            ${p => activeBoxedPosition(p.size as Pick<InternalInputComponentProps, 'size'>)};
+            ${p => activeBoxedPosition(p.size)};
             color: ${p => (p.inverted ? Colors.WHITE : Colors.ACTION_BLUE_900)};
             background: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)};
             background: ${p =>
                 `linear-gradient(0deg, ${p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE} calc(50% + ${
-                    (p.size as Pick<InternalInputComponentProps, 'size'>) === 'small' ? '0.0825rem' : '0.0625rem'
+                    p.size === 'small' ? '0.0825rem' : '0.0625rem'
                 }), transparent 50%)`};
         }
     }

diff --git a/src/components/Input/BoxedInputLabel.ts b/src/components/Input/BoxedInputLabel.ts
@@ -5,7 +5,9 @@ import { get } from '../../utils/themeGet';
 import { InternalInputComponentProps } from './BaseInput';
 import { activePositionBaseStyles, BaseInputLabel } from './BaseInputLabel';
 
-const activeBoxedPosition = (size: Pick<InternalInputComponentProps, 'size'>): ReadonlyArray<Interpolation<ThemeProps<unknown>>> => css`
+const activeBoxedPosition = (
+    size: Pick<InternalInputComponentProps, 'size'>['size']
+): ReadonlyArray<Interpolation<ThemeProps<unknown>>> => css`
     ${activePositionBaseStyles};
 
     top: ${size === 'small' ? '-0.375rem' : '-0.5rem'};