Update Input

* Add fieldsetClasses prop
* Fallback to an empty string if value is undefined
* Fix focus ring to be consistent with our other custom focus rings
* Fix placeholder color

components/common/Input/index.module.scss

@@ -1,7 +1,3 @@
-.full {
-  width: 100%;
-}
-
 .fieldset {
   display: flex;
   flex-direction: column;
@@ -11,6 +7,10 @@
     margin-bottom: 0;
   }
 
+  &.full {
+    width: 100%;
+  }
+
   .error {
     color: $error;
     font-size: $font-small;
@@ -23,8 +23,8 @@
   .input {
     -webkit-font-smoothing: antialiased;
     background-color: var(--input-bg);
-    border: 2px solid transparent;
     border-radius: $input-corner;
+    border: none;
     box-sizing: border-box;
     color: var(--text-primary);
     display: block;
@@ -34,7 +34,7 @@
     width: 100%;
 
     &:not(.wrapper) {
-      padding: $unit * 1.5 $unit-2x;
+      padding: ($unit * 1.5) $unit-2x;
     }
 
     &.accessory {
@@ -43,7 +43,6 @@
       align-items: center;
       background: var(--input-bg);
       border-radius: $input-corner;
-      border: $offset solid transparent;
       box-sizing: border-box;
       position: relative;
 
@@ -60,11 +59,16 @@
       input {
         background: transparent;
         border-radius: $input-corner;
-        border: none;
+        border: 2px solid transparent;
         box-sizing: border-box;
         color: var(--text-primary);
         padding: ($unit * 1.75) $unit-2x;
         width: 100%;
+
+        &:focus {
+          border: 2px solid $blue;
+          outline: none;
+        }
       }
     }
 
@@ -72,11 +76,6 @@
       -webkit-appearance: none;
     }
 
-    &:focus {
-      border: 2px solid $blue;
-      outline: none;
-    }
-
     &.bound {
       background-color: var(--input-bound-bg);
 
@@ -124,6 +123,6 @@
 
 .input::placeholder,
 .input > input::placeholder {
-  color: var(--text-secondary);
+  color: var(--text-tertiary);
   opacity: 1;
 }

components/common/Input/index.tsx

@@ -6,6 +6,8 @@ interface Props extends React.ComponentProps<'input'> {
   bound?: boolean
   error?: string
   label?: string
+  fieldsetClassName?: String
+  wrapperClassName?: string
   hide1Password?: boolean
   showCounter?: boolean
 }
@@ -17,7 +19,16 @@ const defaultProps = {
 }
 
 const Input = React.forwardRef<HTMLInputElement, Props>(function input(
-  { value: initialValue, bound, label, error, showCounter, ...props }: Props,
+  {
+    value: initialValue,
+    bound,
+    label,
+    error,
+    showCounter,
+    fieldsetClassName,
+    wrapperClassName,
+    ...props
+  }: Props,
   forwardedRef
 ) {
   // States
@@ -26,7 +37,18 @@ const Input = React.forwardRef<HTMLInputElement, Props>(function input(
     props.maxLength ? props.maxLength - (`${value}` || '').length : 0
   )
 
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
   // Classes
+  const fieldsetClasses = classNames(
+    {
+      [styles.fieldset]: true,
+    },
+    fieldsetClassName?.split(' ').map((className) => styles[className])
+  )
+
   const inputWrapperClasses = classNames(
     {
       [styles.wrapper]: true,
@@ -34,7 +56,7 @@ const Input = React.forwardRef<HTMLInputElement, Props>(function input(
       [styles.input]: showCounter,
       [styles.bound]: showCounter && bound,
     },
-    props.className?.split(' ').map((className) => styles[className])
+    wrapperClassName?.split(' ').map((className) => styles[className])
   )
 
   const inputClasses = classNames(
@@ -70,7 +92,7 @@ const Input = React.forwardRef<HTMLInputElement, Props>(function input(
         type={props.type}
         name={props.name}
         placeholder={props.placeholder}
-        value={value}
+        value={value || ''}
         onBlur={props.onBlur}
         onChange={handleChange}
         maxLength={props.maxLength}
@@ -82,7 +104,7 @@ const Input = React.forwardRef<HTMLInputElement, Props>(function input(
   )
 
   const fieldset = (
-    <fieldset className={styles.fieldset}>
+    <fieldset className={fieldsetClasses}>
       {label && <legend className={styles.legend}>{label}</legend>}
       {input}
       {error && <span className={styles.error}>{error}</span>}