feat(core-components-form-control): change errors logic (#150)

* feat(core-components-form-control): change errors logic * fix(core-components-form-control): hideErrorIcon -> hasErrorIcon * revert(core-components-input): revert add hasErrorIcon * revert(core-components-form-control): revert add hasErrorIcon
core-ds · Jun 15, 2020 · 1c0e494 · 1c0e494
1 parent 2d82709
commit 1c0e494
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 12 deletions.
diff --git a/packages/form-control/src/Component.stories.mdx b/packages/form-control/src/Component.stories.mdx
@@ -30,7 +30,7 @@ import { FormControl } from '@alfalab/core-components-form-control';
         label={text('label', '')}
         hint={text('hint', '')}
         error={text('error', '')}
-        rightAddons={boolean('rightAddons', false) && !text('error', '') && <Icon />}
+        rightAddons={boolean('rightAddons', false) && !text('error') && <Icon />}
         leftAddons={boolean('leftAddons', false) && <Icon />}
         bottomAddons={boolean('bottomAddons', false) && <span>bottom text</span>}
     />

diff --git a/packages/form-control/src/Component.tsx b/packages/form-control/src/Component.tsx
@@ -31,9 +31,9 @@ export type FormControlProps = HTMLAttributes<HTMLDivElement> & {
     focused?: boolean;
 
     /**
-     * Текст ошибки
+     * Отображение ошибки
      */
-    error?: string;
+    error?: string | boolean;
 
     /**
      * Текст подсказки
@@ -115,6 +115,8 @@ export const FormControl = ({
         [leftAddons],
     );
 
+    const errorMessage = typeof error === 'string' ? error : '';
+
     return (
         <div
             data-test-id={dataTestId}
@@ -151,7 +153,9 @@ export const FormControl = ({
                 {rightAddonsRenderer()}
             </div>
 
-            {(error || hint) && <span className={styles.sub}>{error || hint}</span>}
+            {errorMessage && <span className={cn(styles.sub, styles.error)}>{errorMessage}</span>}
+
+            {hint && !errorMessage && <span className={styles.sub}>{hint}</span>}
 
             {bottomAddons}
         </div>

diff --git a/packages/form-control/src/__snapshots__/Component.test.tsx.snap b/packages/form-control/src/__snapshots__/Component.test.tsx.snap
@@ -19,6 +19,7 @@ Object {
             />
           </div>
         </div>
+        
       </div>
     </div>
   </body>,
@@ -37,6 +38,7 @@ Object {
           />
         </div>
       </div>
+      
     </div>
   </div>,
   "debug": [Function],
@@ -132,7 +134,7 @@ Object {
           </div>
         </div>
         <span
-          class="sub"
+          class="sub error"
         >
           error
         </span>
@@ -174,7 +176,7 @@ Object {
         </div>
       </div>
       <span
-        class="sub"
+        class="sub error"
       >
         error
       </span>
@@ -253,6 +255,7 @@ Object {
             />
           </div>
         </div>
+        
         <div>
           Bottom addons
         </div>
@@ -274,6 +277,7 @@ Object {
           />
         </div>
       </div>
+      
       <div>
         Bottom addons
       </div>
@@ -372,7 +376,7 @@ Object {
           </div>
         </div>
         <span
-          class="sub"
+          class="sub error"
         >
           This is error
         </span>
@@ -414,7 +418,7 @@ Object {
         </div>
       </div>
       <span
-        class="sub"
+        class="sub error"
       >
         This is error
       </span>
@@ -493,6 +497,7 @@ Object {
             />
           </div>
         </div>
+        
         <span
           class="sub"
         >
@@ -516,6 +521,7 @@ Object {
           />
         </div>
       </div>
+      
       <span
         class="sub"
       >
@@ -607,6 +613,7 @@ Object {
             />
           </div>
         </div>
+        
       </div>
     </div>
   </body>,
@@ -636,6 +643,7 @@ Object {
           />
         </div>
       </div>
+      
     </div>
   </div>,
   "debug": [Function],
@@ -718,6 +726,7 @@ Object {
             />
           </div>
         </div>
+        
       </div>
     </div>
   </body>,
@@ -743,6 +752,7 @@ Object {
           />
         </div>
       </div>
+      
     </div>
   </div>,
   "debug": [Function],
@@ -825,6 +835,7 @@ Object {
             </div>
           </div>
         </div>
+        
       </div>
     </div>
   </body>,
@@ -850,6 +861,7 @@ Object {
           </div>
         </div>
       </div>
+      
     </div>
   </div>,
   "debug": [Function],

diff --git a/packages/form-control/src/index.module.css b/packages/form-control/src/index.module.css
@@ -205,7 +205,7 @@
 
 /* ERROR STATE */
 
-.hasError .sub {
+.error {
     color: var(--form-control-error-color);
 }
 

diff --git a/packages/input/src/Component.stories.mdx b/packages/input/src/Component.stories.mdx
@@ -34,7 +34,7 @@ import { Input } from '@alfalab/core-components-input';
         label={text('label', '')}
         hint={text('hint', '')}
         error={text('error', '')}
-        rightAddons={boolean('rightAddons', false) && !text('error', '') && <Icon />}
+        rightAddons={boolean('rightAddons', false) && !text('error') && <Icon />}
         leftAddons={boolean('leftAddons', false) && <Icon />}
         bottomAddons={boolean('bottomAddons', false) && <span>bottom text</span>}
     />

diff --git a/packages/input/src/Component.tsx b/packages/input/src/Component.tsx
@@ -16,9 +16,9 @@ export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 't
     size?: 's' | 'm' | 'l';
 
     /**
-     * Текст ошибки
+     * Отображение ошибки
      */
-    error?: string;
+    error?: string | boolean;
 
     /**
      * Текст подсказки

diff --git a/packages/input/src/__snapshots__/Component.test.tsx.snap b/packages/input/src/__snapshots__/Component.test.tsx.snap
@@ -25,6 +25,7 @@ Object {
             </div>
           </div>
         </div>
+        
       </div>
     </div>
   </body>,
@@ -49,6 +50,7 @@ Object {
           </div>
         </div>
       </div>
+      
     </div>
   </div>,
   "debug": [Function],

diff --git a/packages/masked-input/src/__snapshots__/Component.test.tsx.snap b/packages/masked-input/src/__snapshots__/Component.test.tsx.snap
@@ -25,6 +25,7 @@ Object {
             </div>
           </div>
         </div>
+        
       </div>
     </div>
   </body>,
@@ -49,6 +50,7 @@ Object {
           </div>
         </div>
       </div>
+      
     </div>
   </div>,
   "debug": [Function],

diff --git a/packages/select/src/__snapshots__/Component.test.tsx.snap b/packages/select/src/__snapshots__/Component.test.tsx.snap
@@ -60,6 +60,7 @@ Object {
                 </svg>
               </div>
             </div>
+            
           </div>
         </div>
         <div
@@ -128,6 +129,7 @@ Object {
               </svg>
             </div>
           </div>
+          
         </div>
       </div>
       <div