feat(form-control): add hidden label instead min-width

core-ds · Apr 9, 2021 · a40ffcf · a40ffcf
1 parent 147bb71
commit a40ffcf
Show file tree

Hide file tree

Showing 6 changed files with 236 additions and 222 deletions.
diff --git a/packages/bank-card/src/__snapshots__/Component.test.tsx.snap b/packages/bank-card/src/__snapshots__/Component.test.tsx.snap
@@ -39,6 +39,12 @@ exports[`BankCard Snapshots tests should match snapshots 1`] = `
             <div
               class="inputWrapper"
             >
+              <span
+                aria-hidden="true"
+                class="hiddenLabel"
+              >
+                Номер карты или счёта
+              </span>
               <div
                 class="label label"
               >
@@ -148,6 +154,12 @@ exports[`BankCard Snapshots tests should match snapshots 2`] = `
             <div
               class="inputWrapper"
             >
+              <span
+                aria-hidden="true"
+                class="hiddenLabel"
+              >
+                Номер карты или счёта
+              </span>
               <div
                 class="label label"
               >
@@ -255,6 +267,12 @@ exports[`BankCard Snapshots tests should match snapshots 3`] = `
             <div
               class="inputWrapper"
             >
+              <span
+                aria-hidden="true"
+                class="hiddenLabel"
+              >
+                Номер карты или счёта
+              </span>
               <div
                 class="label label"
               >
@@ -362,6 +380,12 @@ exports[`BankCard Snapshots tests should match snapshots 4`] = `
             <div
               class="inputWrapper"
             >
+              <span
+                aria-hidden="true"
+                class="hiddenLabel"
+              >
+                Номер карты или счёта
+              </span>
               <div
                 class="label label"
               >

diff --git a/packages/form-control/src/Component.tsx b/packages/form-control/src/Component.tsx
@@ -144,9 +144,14 @@ export const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
 
                     <div className={styles.inputWrapper}>
                         {label && (
-                            <div className={cn(styles.label, labelClassName)}>
-                                <span className={styles.labelInner}>{label}</span>
-                            </div>
+                            <React.Fragment>
+                                <span className={styles.hiddenLabel} aria-hidden={true}>
+                                    {label}
+                                </span>
+                                <div className={cn(styles.label, labelClassName)}>
+                                    <span className={styles.labelInner}>{label}</span>
+                                </div>
+                            </React.Fragment>
                         )}
 
                         <div className={styles.input}>{children}</div>

diff --git a/packages/form-control/src/__snapshots__/Component.test.tsx.snap b/packages/form-control/src/__snapshots__/Component.test.tsx.snap
@@ -521,6 +521,14 @@ Object {
           <div
             class="inputWrapper"
           >
+            <span
+              aria-hidden="true"
+              class="hiddenLabel"
+            >
+              <span>
+                This is label
+              </span>
+            </span>
             <div
               class="label"
             >
@@ -551,6 +559,14 @@ Object {
         <div
           class="inputWrapper"
         >
+          <span
+            aria-hidden="true"
+            class="hiddenLabel"
+          >
+            <span>
+              This is label
+            </span>
+          </span>
           <div
             class="label"
           >

diff --git a/packages/form-control/src/index.module.css b/packages/form-control/src/index.module.css
@@ -307,6 +307,18 @@
     transform: scaleY(2);
 }
 
+.hiddenLabel {
+    opacity: 0;
+    height: 0;
+    padding: var(--form-control-paddings);
+    display: block;
+    box-sizing: border-box;
+}
+
+.l .hiddenLabel {
+    padding: var(--form-control-l-paddings);
+}
+
 /* min-height and width: max-content; fix for IE */
 
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {