feat: calculate input left pading based on prefix width

Author: ganiirsyadi

src/@next/CurrencyInput/CurrencyInput.stories.tsx

@@ -24,4 +24,5 @@ Interactive.args = {
   onChange: (value: number) => {
     console.log('Currency on changed value: ', value);
   },
+  prefix: '$',
 };

src/@next/CurrencyInput/CurrencyInput.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
-import { InputProps } from '../Input/Input';
-import { StyledCurrency } from './CurrencyStyles';
+import { Input, InputProps } from '../Input/Input';
 
 export type CurrencyInputProps = Omit<
   InputProps,
@@ -9,13 +8,14 @@ export type CurrencyInputProps = Omit<
   locale?: string;
   value?: number;
   onChange?: (value: number) => void;
+  prefix?: string;
 };
 
 export const CurrencyInput = React.forwardRef<
   HTMLInputElement,
   CurrencyInputProps
 >(function CurrencyInput(
-  { locale = 'en', value = 0, onChange, ...props }: CurrencyInputProps,
+  { locale = 'en', value = 0, onChange, prefix, ...props }: CurrencyInputProps,
   ref
 ) {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -58,10 +58,10 @@ export const CurrencyInput = React.forwardRef<
   };
 
   return (
-    <StyledCurrency
+    <Input
       ref={ref}
       type="text"
-      prefix={<div>$</div>}
+      prefix={<div>{prefix ?? '$'}</div>}
       {...props}
       value={formattedValue === '0' ? '' : formattedValue}
       onChange={handleChange}

src/@next/CurrencyInput/CurrencyStyles.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
   StyledContainer,
   StyledInput,
@@ -21,22 +21,34 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const hasPrefix = !!prefix;
     const hasSuffix = !!suffix;
 
+    const prefixRef = useRef(null);
+
     const Prefix = () =>
       hasPrefix ? (
-        <StyledPrefixContainer>{prefix}</StyledPrefixContainer>
+        <StyledPrefixContainer ref={prefixRef}>{prefix}</StyledPrefixContainer>
       ) : null;
 
     const Suffix = () =>
       hasSuffix ? (
         <StyledSuffixContainer>{suffix}</StyledSuffixContainer>
       ) : null;
 
+    const [prefixWidth, setPrefixWidth] = React.useState(0);
+
+    useEffect(() => {
+      if (hasPrefix) {
+        const prefixWidth = prefixRef.current.getBoundingClientRect().width;
+        setPrefixWidth(prefixWidth);
+      }
+    }, [hasPrefix, prefix]);
+
     return (
       <StyledContainer
         ref={ref}
         data-prefix={hasPrefix}
         data-error={error}
         data-disabled={disabled}
+        prefixWidth={prefixWidth}
       >
         <Prefix />
         <StyledInput disabled={disabled} {...props} />

src/@next/Input/Input.tsx

@@ -2,8 +2,9 @@ import styled from 'styled-components';
 import * as Breakpoints from '../utilities/breakpoints';
 import { Neutral, Red } from '../utilities/colors';
 import { InputProps } from './Input';
+import { space4, space8 } from '../utilities/spacing';
 
-export const StyledContainer = styled.div<InputProps>`
+export const StyledContainer = styled.div<InputProps & { prefixWidth: number }>`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -17,7 +18,7 @@ export const StyledContainer = styled.div<InputProps>`
   line-height: 150%;
 
   &[data-prefix='true'] input {
-    padding-left: 40px;
+    padding-left: ${props => props.prefixWidth}px;
   }
 
   &[data-error='true'] input {
@@ -58,18 +59,28 @@ export const StyledPrefixContainer = styled.div`
     height: 17px;
     width: 17px;
     margin: 10px 14px;
+    margin-right: ${space8};
     fill: ${Neutral.B40};
   }
 
   div {
     color: ${Neutral.B40};
     margin: 18px 12px;
+    margin-right: ${space4};
   }
 `;
 
 export const StyledSuffixContainer = styled(StyledPrefixContainer)`
   left: auto;
   right: 0;
+
+  svg {
+    margin: 10px 14px;
+  }
+
+  div {
+    margin: 18px 12px;
+  }
 `;
 
 export const StyledInput = styled.input<InputProps>`

src/@next/Input/InputStyle.ts

@@ -23,3 +23,11 @@ test('Currency - locale', async ({ page }) => {
   await currencyPage.goto('args=locale:id');
   await expect(currencyPage.container).toHaveScreenshot('currency-id.png');
 });
+
+test('Currency - long currency prefix', async ({ page }) => {
+  const currencyPage = getPage(page);
+  await currencyPage.goto('args=prefix:CAD');
+  await expect(currencyPage.container).toHaveScreenshot(
+    'currency-long-prefix.png'
+  );
+});