feat(core-components-form-control): allow to hide error icon in theme

core-ds · Jun 17, 2020 · c19a73c · c19a73c
1 parent 3b134dc
commit c19a73c
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 34 deletions.
diff --git a/packages/form-control/src/Component.tsx b/packages/form-control/src/Component.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, HTMLAttributes } from 'react';
+import React, { ReactNode, HTMLAttributes } from 'react';
 import cn from 'classnames';
 import ErrorIcon from '@alfalab/icons-classic/ErrorMColorIcon';
 
@@ -99,22 +99,6 @@ export const FormControl = ({
     dataTestId,
     ...restProps
 }: FormControlProps) => {
-    const rightAddonsRenderer = useCallback(
-        () =>
-            (error || rightAddons) && (
-                <div className={cn(styles.addons)}>
-                    {error && <ErrorIcon />}
-                    {rightAddons}
-                </div>
-            ),
-        [error, rightAddons],
-    );
-
-    const leftAddonsRenderer = useCallback(
-        () => leftAddons && <div className={styles.addons}>{leftAddons}</div>,
-        [leftAddons],
-    );
-
     const errorMessage = typeof error === 'string' ? error : '';
 
     return (
@@ -138,7 +122,9 @@ export const FormControl = ({
             {...restProps}
         >
             <div className={styles.inner}>
-                {leftAddonsRenderer()}
+                {leftAddons && (
+                    <div className={cn(styles.addons, styles.leftAddons)}>{leftAddons}</div>
+                )}
 
                 <div className={styles.inputWrapper}>
                     {label && (
@@ -150,7 +136,15 @@ export const FormControl = ({
                     <div className={styles.input}>{children}</div>
                 </div>
 
-                {rightAddonsRenderer()}
+                {rightAddons && (
+                    <div className={cn(styles.addons, styles.rightAddons)}>{rightAddons}</div>
+                )}
+
+                {error && (
+                    <div className={styles.errorIcon}>
+                        <ErrorIcon />
+                    </div>
+                )}
             </div>
 
             {errorMessage && <span className={cn(styles.sub, styles.error)}>{errorMessage}</span>}

diff --git a/packages/form-control/src/__snapshots__/Component.test.tsx.snap b/packages/form-control/src/__snapshots__/Component.test.tsx.snap
@@ -114,7 +114,7 @@ Object {
             />
           </div>
           <div
-            class="addons"
+            class="errorIcon"
           >
             <svg
               focusable="false"
@@ -156,7 +156,7 @@ Object {
           />
         </div>
         <div
-          class="addons"
+          class="errorIcon"
         >
           <svg
             focusable="false"
@@ -356,7 +356,7 @@ Object {
             />
           </div>
           <div
-            class="addons"
+            class="errorIcon"
           >
             <svg
               focusable="false"
@@ -398,7 +398,7 @@ Object {
           />
         </div>
         <div
-          class="addons"
+          class="errorIcon"
         >
           <svg
             focusable="false"
@@ -712,7 +712,7 @@ Object {
           class="inner"
         >
           <div
-            class="addons"
+            class="addons leftAddons"
           >
             <div>
               Left addons
@@ -738,7 +738,7 @@ Object {
         class="inner"
       >
         <div
-          class="addons"
+          class="addons leftAddons"
         >
           <div>
             Left addons
@@ -828,7 +828,7 @@ Object {
             />
           </div>
           <div
-            class="addons"
+            class="addons rightAddons"
           >
             <div>
               Right addons
@@ -854,7 +854,7 @@ Object {
           />
         </div>
         <div
-          class="addons"
+          class="addons rightAddons"
         >
           <div>
             Right addons

diff --git a/packages/form-control/src/index.module.css b/packages/form-control/src/index.module.css
@@ -27,6 +27,7 @@
     --form-control-error-color: var(--color-red-brand-85-flat);
     --form-control-error-shadow: inset 0 -1px var(--form-control-error-color);
     --form-control-error-border-bottom: 1px solid var(--form-control-error-color);
+    --form-control-error-icon-display: flex;
 }
 
 .component {
@@ -89,17 +90,19 @@
     white-space: nowrap;
 }
 
-.addons {
+.addons,
+.errorIcon {
     display: flex;
     flex-shrink: 0;
     align-items: center;
 }
 
-.addons:first-child {
+.leftAddons {
     padding-left: var(--gap-s);
 }
 
-.addons:last-child {
+.rightAddons,
+.errorIcon {
     padding-right: var(--gap-s);
 }
 
@@ -149,11 +152,12 @@
     padding: var(--form-control-labeled-l-paddings);
 }
 
-.l .addons:first-child {
+.l .leftAddons {
     padding-left: var(--gap-m);
 }
 
-.l .addons:last-child {
+.l .rightAddons,
+.l .errorIcon {
     padding-right: var(--gap-m);
 }
 
@@ -213,3 +217,7 @@
     box-shadow: var(--form-control-error-shadow);
     border-bottom: var(--form-control-error-border-bottom);
 }
+
+.errorIcon {
+    display: var(--form-control-error-icon-display);
+}
diff --git a/packages/select/src/__snapshots__/Component.test.tsx.snap b/packages/select/src/__snapshots__/Component.test.tsx.snap
@@ -35,7 +35,7 @@ Object {
                 </div>
               </div>
               <div
-                class="addons"
+                class="addons rightAddons"
               >
                 <svg
                   class="arrow"
@@ -104,7 +104,7 @@ Object {
               </div>
             </div>
             <div
-              class="addons"
+              class="addons rightAddons"
             >
               <svg
                 class="arrow"

diff --git a/packages/themes/src/mixins/form-control/click.css b/packages/themes/src/mixins/form-control/click.css
@@ -28,4 +28,5 @@
     /* error */
     --form-control-error-shadow: inset 0 0 0 1px var(--form-control-error-color);
     --form-control-error-border-bottom: 0;
+    --form-control-error-icon-display: none;
 }