feat(inputs): icons & addons improvements

core-ds · Mar 4, 2020 · e0abeba · e0abeba
1 parent 98ff5dd
commit e0abeba
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 40 deletions.
diff --git a/packages/base-input/src/Component.module.css b/packages/base-input/src/Component.module.css
@@ -58,7 +58,6 @@
     margin: 0;
     outline: none;
     transition: background 0.2s ease;
-    flex-grow: 1;
     font-size: 16px;
     line-height: 20px;
 
@@ -76,6 +75,11 @@
     color: var(--base-input-placeholder-color);
 }
 
+.input-wrapper {
+    flex-grow: 1;
+    position: relative;
+}
+
 .label {
     overflow: hidden;
     position: absolute;
@@ -101,6 +105,10 @@
     align-items: center;
 }
 
+.left-addons {}
+
+.right-addos {}
+
 .s {
     padding: 14px var(--base-input-side-paddings) 13px var(--base-input-side-paddings);
 }

diff --git a/packages/base-input/src/Component.stories.tsx b/packages/base-input/src/Component.stories.tsx
@@ -2,7 +2,9 @@
  * Vendor
  */
 
-import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
+import {
+    withKnobs, select, text, boolean
+} from '@storybook/addon-knobs';
 import React, { useState } from 'react';
 import { withDesign } from 'storybook-addon-designs';
 /**

diff --git a/packages/base-input/src/Component.tsx b/packages/base-input/src/Component.tsx
@@ -120,31 +120,34 @@ export const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>(({
             ) }
         >
             <div className={ cn(styles.inner, innerClassName) }>
-                { label && (
-                    <div className={ cn(styles.label) }>
-                        { label }
-                    </div>
-                ) }
-
                 { leftAddons && (
                     <div className={ cn(styles.addons, styles.leftAddons) }>
                         { leftAddons }
                     </div>
                 ) }
 
-                <input
-                    className={ cn(styles.input, styles[size], inputClassName) }
-                    ref={ ref }
-                    type={ type }
-                    value={ value }
-                    placeholder={ placeholder }
-                    disabled={ disabled }
-                    required={ required }
-                    onChange={ handleInputChange }
-                    onFocus={ handleInputFocus }
-                    onBlur={ handleInputBlur }
-                    data-test-id={ dataTestId }
-                />
+
+                <div className={ cn(styles.inputWrapper) }>
+                    { label && (
+                        <div className={ cn(styles.label) }>
+                            { label }
+                        </div>
+                    ) }
+
+                    <input
+                        className={ cn(styles.input, styles[size], inputClassName) }
+                        ref={ ref }
+                        type={ type }
+                        value={ value }
+                        placeholder={ placeholder }
+                        disabled={ disabled }
+                        required={ required }
+                        onChange={ handleInputChange }
+                        onFocus={ handleInputFocus }
+                        onBlur={ handleInputBlur }
+                        data-test-id={ dataTestId }
+                    />
+                </div>
 
                 { rightAddons && (
                     <div className={ cn(styles.addons, styles.rightAddons) }>

diff --git a/packages/input/src/Component.module.css b/packages/input/src/Component.module.css
@@ -17,8 +17,13 @@
 
 .input {}
 
-.error-icon {
+.icon {}
+
+.left-icon {
     margin-left: var(--gap-s);
+}
+
+.right-icon {
     margin-right: var(--gap-s);
 }
 

diff --git a/packages/input/src/Component.stories.tsx b/packages/input/src/Component.stories.tsx
@@ -2,15 +2,23 @@
  * Vendor
  */
 
-import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
+import {
+    withKnobs, select, text, boolean
+} from '@storybook/addon-knobs';
 import React, { useState } from 'react';
 import { withDesign } from 'storybook-addon-designs';
 /**
  * Components
  */
 import { Input } from './Component';
 
-
+// TODO:
+const icon = (
+    <svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'>
+        <path fillRule='evenodd' clipRule='evenodd' d='M9 1C4.588 1 1 4.588 1 9C1 13.412 4.588 17 9 17C13.412 17 17 13.412 17 9C17 4.588 13.412 1 9 1ZM9 15.933C7.1619 15.9309 5.3997 15.1998 4.09997 13.9C2.80024 12.6003 2.06912 10.8381 2.067 9C2.06912 7.1619 2.80024 5.3997 4.09997 4.09997C5.3997 2.80024 7.1619 2.06912 9 2.067C10.8381 2.06912 12.6003 2.80024 13.9 4.09997C15.1998 5.3997 15.9309 7.1619 15.933 9C15.9309 10.8381 15.1998 12.6003 13.9 13.9C12.6003 15.1998 10.8381 15.9309 9 15.933Z' fill='#0B1F35' />
+        <path fillRule='evenodd' clipRule='evenodd' d='M8.06692 5.47501C8.06692 5.95801 8.48792 6.35101 8.99592 6.35101C9.51292 6.35101 9.93292 5.95801 9.93292 5.47501C9.93292 5.00201 9.51192 4.60901 8.99592 4.60901C8.48792 4.60901 8.06592 5.00201 8.06592 5.47501H8.06692ZM8.46692 7.96901H9.53392V12.947H8.46692V7.96901Z' fill='#0B1F35' />
+    </svg>
+);
 
 export default {
     title: 'Common',
@@ -22,17 +30,44 @@ export const InputStory = () => {
     const [value, setValue] = useState('value');
 
     return (
-        <Input
-            size={ select('size', ['s', 'm', 'l'], 's') }
-            type={ select('type', ['text', 'number', 'card', 'email', 'file', 'hidden', 'money', 'password', 'tel', 'text'], 'text') }
-            disabled={ boolean('Disabled', false) }
-            placeholder={ text('placeholder', '') }
-            label={ text('label', '') }
-            hint={ text('hint', '') }
-            error={ text('error', '') }
-            value={ value }
-            onChange={ (e: any) => setValue(e.target.value) }
-        />
+        <div>
+            <div style={ { marginBottom: '20px' } }>
+                <Input
+                    size={ select('size', ['s', 'm', 'l'], 's') }
+                    type={ select('type', ['text', 'number', 'card', 'email', 'file', 'hidden', 'money', 'password', 'tel', 'text'], 'text') }
+                    disabled={ boolean('Disabled', false) }
+                    placeholder={ text('placeholder', '') }
+                    label={ text('label', '') }
+                    hint={ text('hint', '') }
+                    error={ text('error', '') }
+                    value={ value }
+                    onChange={ (e: any) => setValue(e.target.value) }
+                />
+            </div>
+
+            <div style={ { marginBottom: '20px' } }>
+                <Input
+                    size='s'
+                    placeholder='Enter text'
+                    label='Search'
+                    value={ value }
+                    onChange={ (e: any) => setValue(e.target.value) }
+                    leftIcon={ icon }
+                />
+            </div>
+
+            <div style={ { marginBottom: '20px' } }>
+                <Input
+                    size='s'
+                    placeholder='Enter text'
+                    label='Search'
+                    value={ value }
+                    error='error'
+                    onChange={ (e: any) => setValue(e.target.value) }
+                    leftIcon={ icon }
+                />
+            </div>
+        </div>
     );
 };
 

diff --git a/packages/input/src/Component.tsx b/packages/input/src/Component.tsx
@@ -21,6 +21,10 @@ type InputProps = BaseInputProps & {
     hint?: 'string';
     /** Текст ошибки */
     error?: 'string';
+    /** Иконка слева */
+    leftIcon?: React.ReactNode;
+    /** Иконка справа */
+    rightIcon?: React.ReactNode;
 };
 
 /**
@@ -30,7 +34,7 @@ type InputProps = BaseInputProps & {
 // TODO:
 const errorIcon = (
     <svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'>
-        <path d='M16.8709 14.432L9.80088 2.61199C9.71724 2.47327 9.59918 2.35852 9.45813 2.27886C9.31709 2.19921 9.15786 2.15735 8.99588 2.15735C8.8339 2.15735 8.67467 2.19921 8.53362 2.27886C8.39258 2.35852 8.27452 2.47327 8.19088 2.61199L1.13088 14.432C1.04895 14.5739 1.00552 14.7347 1.00489 14.8985C1.00426 15.0623 1.04647 15.2235 1.12731 15.366C1.20816 15.5085 1.32484 15.6273 1.46579 15.7108C1.60674 15.7943 1.76707 15.8395 1.93088 15.842H16.0609C16.2259 15.8426 16.3881 15.7993 16.5309 15.7165C16.6736 15.6337 16.7918 15.5145 16.8732 15.3709C16.9546 15.2274 16.9964 15.0648 16.9942 14.8998C16.9921 14.7348 16.9461 14.5733 16.8609 14.432H16.8709ZM9.87088 13.242C9.87088 13.4489 9.7887 13.6473 9.64242 13.7935C9.49614 13.9398 9.29775 14.022 9.09088 14.022H8.86088C8.75845 14.022 8.65702 14.0018 8.56239 13.9626C8.46775 13.9234 8.38177 13.866 8.30934 13.7935C8.23691 13.7211 8.17945 13.6351 8.14025 13.5405C8.10105 13.4458 8.08088 13.3444 8.08088 13.242V13.002C8.08088 12.572 8.43088 12.222 8.86088 12.222H9.13088C9.56188 12.222 9.91088 12.572 9.91088 13.002L9.87088 13.242ZM9.64088 11.242H8.31088L8.09088 5.80199H9.91088L9.64088 11.242Z' fill='#EF3124'/>
+        <path d='M16.8709 14.432L9.80088 2.61199C9.71724 2.47327 9.59918 2.35852 9.45813 2.27886C9.31709 2.19921 9.15786 2.15735 8.99588 2.15735C8.8339 2.15735 8.67467 2.19921 8.53362 2.27886C8.39258 2.35852 8.27452 2.47327 8.19088 2.61199L1.13088 14.432C1.04895 14.5739 1.00552 14.7347 1.00489 14.8985C1.00426 15.0623 1.04647 15.2235 1.12731 15.366C1.20816 15.5085 1.32484 15.6273 1.46579 15.7108C1.60674 15.7943 1.76707 15.8395 1.93088 15.842H16.0609C16.2259 15.8426 16.3881 15.7993 16.5309 15.7165C16.6736 15.6337 16.7918 15.5145 16.8732 15.3709C16.9546 15.2274 16.9964 15.0648 16.9942 14.8998C16.9921 14.7348 16.9461 14.5733 16.8609 14.432H16.8709ZM9.87088 13.242C9.87088 13.4489 9.7887 13.6473 9.64242 13.7935C9.49614 13.9398 9.29775 14.022 9.09088 14.022H8.86088C8.75845 14.022 8.65702 14.0018 8.56239 13.9626C8.46775 13.9234 8.38177 13.866 8.30934 13.7935C8.23691 13.7211 8.17945 13.6351 8.14025 13.5405C8.10105 13.4458 8.08088 13.3444 8.08088 13.242V13.002C8.08088 12.572 8.43088 12.222 8.86088 12.222H9.13088C9.56188 12.222 9.91088 12.572 9.91088 13.002L9.87088 13.242ZM9.64088 11.242H8.31088L8.09088 5.80199H9.91088L9.64088 11.242Z' fill='#EF3124' />
     </svg>
 );
 
@@ -45,6 +49,8 @@ export const Input: React.FC<InputProps> = ({
     label,
     leftAddons,
     rightAddons,
+    leftIcon,
+    rightIcon,
     children,
     onFocus,
     onBlur,
@@ -70,10 +76,6 @@ export const Input: React.FC<InputProps> = ({
             inputClassName={ cn(styles.input) }
             type={ type }
             required={ required }
-            rightAddons={
-                hasError ? <div className={ cn(styles.errorIcon) }>{ errorIcon }</div> : rightAddons
-            }
-            leftAddons={ leftAddons }
             size={ size }
             value={ value }
             label={ label }
@@ -83,6 +85,20 @@ export const Input: React.FC<InputProps> = ({
             onFocus={ onFocus }
             onBlur={ onBlur }
             dataTestId={ dataTestId }
+            rightAddons={ (
+                <>
+                    { hasError
+                        ? <div className={ cn(styles.icon, styles.rightIcon, styles.errorIcon) }>{ errorIcon }</div>
+                        : (rightIcon && <div className={ cn(styles.icon, styles.rightIcon) }>{ rightIcon }</div>) }
+                    { rightAddons }
+                </>
+            ) }
+            leftAddons={ (
+                <>
+                    { (leftIcon && <div className={ cn(styles.icon, styles.leftIcon) }>{ leftIcon }</div>) }
+                    { leftAddons }
+                </>
+            ) }
         >
             { hasSub && (
                 <span className={ cn(styles.sub) }>