diff --git a/components/common/Input/index.module.scss b/components/common/Input/index.module.scss index 7b29e81c..3e806cbb 100644 --- a/components/common/Input/index.module.scss +++ b/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; } diff --git a/components/common/Input/index.tsx b/components/common/Input/index.tsx index 2eb7a429..96ba3664 100644 --- a/components/common/Input/index.tsx +++ b/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(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(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(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(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(function input( ) const fieldset = ( -
+
{label && {label}} {input} {error && {error}}