Fix layout of FieldWrapper labels & update Medipass theme

jxom · Feb 18, 2019 · 3feb54a · 3feb54a
1 parent e5402be
commit 3feb54a
Show file tree

Hide file tree

Showing 11 changed files with 3,367 additions and 3,473 deletions.
diff --git a/src/Checkbox/__tests__/__snapshots__/CheckboxField.test.tsx.snap b/src/Checkbox/__tests__/__snapshots__/CheckboxField.test.tsx.snap
diff --git a/src/FieldSet/__tests__/__snapshots__/FieldSet.test.tsx.snap b/src/FieldSet/__tests__/__snapshots__/FieldSet.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`renders correctly for a basic field 1`] = `
   outline: none;
 }
 
-.c10 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -29,10 +29,10 @@ exports[`renders correctly for a basic field 1`] = `
   box-sizing: border-box;
   background-color: unset;
   color: inherit;
-  margin-top: 0.75rem !important;
+  margin-bottom: 0.5rem !important;
 }
 
-.c10:focus:not(:focus-visible) {
+.c5:focus:not(:focus-visible) {
   outline: none;
 }
 
@@ -53,7 +53,7 @@ exports[`renders correctly for a basic field 1`] = `
   outline: none;
 }
 
-.c5 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -103,7 +103,7 @@ exports[`renders correctly for a basic field 1`] = `
   margin-top: 1.5rem;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
 }
 
@@ -124,18 +124,18 @@ exports[`renders correctly for a basic field 1`] = `
   flex: 1;
 }
 
-.c7 {
+.c8 {
   display: block;
   font-weight: 600;
   margin-bottom: 0.25rem;
   line-height: 1;
 }
 
-.c6 {
+.c7 {
   margin-bottom: 0 !important;
 }
 
-.c9 {
+.c10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -201,18 +201,22 @@ exports[`renders correctly for a basic field 1`] = `
       class="c2"
     >
       <div
-        class="c5 c2"
-        style="align-items: center;"
+        class="c5"
       >
-        <label
-          class="c6 c7 c8 c2"
+        <div
+          class="c6 c2"
+          style="align-items: center;"
         >
-          First name
-        </label>
+          <label
+            class="c7 c8 c9 c2"
+          >
+            First name
+          </label>
+        </div>
+        <div />
       </div>
-      <div />
       <div
-        class="c9 c10"
+        class="c10 c2"
       >
         <input
           aria-invalid="false"
@@ -229,18 +233,22 @@ exports[`renders correctly for a basic field 1`] = `
       class="c2"
     >
       <div
-        class="c5 c2"
-        style="align-items: center;"
+        class="c5"
       >
-        <label
-          class="c6 c7 c8 c2"
+        <div
+          class="c6 c2"
+          style="align-items: center;"
         >
-          Last name
-        </label>
+          <label
+            class="c7 c8 c9 c2"
+          >
+            Last name
+          </label>
+        </div>
+        <div />
       </div>
-      <div />
       <div
-        class="c9 c10"
+        class="c10 c2"
       >
         <input
           aria-invalid="false"
@@ -258,18 +266,22 @@ exports[`renders correctly for a basic field 1`] = `
     class="c2"
   >
     <div
-      class="c5 c2"
-      style="align-items: center;"
+      class="c5"
     >
-      <label
-        class="c6 c7 c8 c2"
+      <div
+        class="c6 c2"
+        style="align-items: center;"
       >
-        Username
-      </label>
+        <label
+          class="c7 c8 c9 c2"
+        >
+          Username
+        </label>
+      </div>
+      <div />
     </div>
-    <div />
     <div
-      class="c9 c10"
+      class="c10 c2"
     >
       <input
         aria-invalid="false"
@@ -286,18 +298,22 @@ exports[`renders correctly for a basic field 1`] = `
     class="c2"
   >
     <div
-      class="c5 c2"
-      style="align-items: center;"
+      class="c5"
     >
-      <label
-        class="c6 c7 c8 c2"
+      <div
+        class="c6 c2"
+        style="align-items: center;"
       >
-        Password
-      </label>
+        <label
+          class="c7 c8 c9 c2"
+        >
+          Password
+        </label>
+      </div>
+      <div />
     </div>
-    <div />
     <div
-      class="c9 c10"
+      class="c10 c2"
     >
       <input
         aria-invalid="false"

diff --git a/src/FieldWrapper/FieldWrapper.tsx b/src/FieldWrapper/FieldWrapper.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { FieldProps as ReakitFieldProps } from 'reakit/ts/Field/Field';
 
-import { Flex } from '../primitives';
+import { Box, Flex } from '../primitives';
 import { Omit } from '../types';
 import _FieldWrapper, { Label, DescriptionText, HintText, OptionalText, ValidationText } from './styled';
 
@@ -38,18 +38,23 @@ export const FieldWrapper: React.FunctionComponent<LocalFieldWrapperProps> = ({
   validationText,
   ...props
 }) => {
-  const elementProps: FieldElementProps = { isRequired, a11yId, state, marginTop: 'minor-3' };
+  const elementProps: FieldElementProps = { isRequired, a11yId, state };
   return (
     <_FieldWrapper {...props}>
       {label && (
-        <Flex alignItems="center">
-          {typeof label === 'string' ? <Label htmlFor={a11yId}>{label}</Label> : label}
-          {isOptional && <OptionalText>OPTIONAL</OptionalText>}
-        </Flex>
+        <Box marginBottom="minor-2">
+          <Flex alignItems="center">
+            {typeof label === 'string' ? <Label htmlFor={a11yId}>{label}</Label> : label}
+            {isOptional && <OptionalText>OPTIONAL</OptionalText>}
+          </Flex>
+          {typeof description === 'string' ? (
+            <DescriptionText>{description}</DescriptionText>
+          ) : (
+            <div>{description}</div>
+          )}
+        </Box>
       )}
 
-      {typeof description === 'string' ? <DescriptionText>{description}</DescriptionText> : <div>{description}</div>}
-
       {typeof children === 'function'
         ? children({ elementProps })
         : React.cloneElement(children as React.ReactElement<any>, elementProps)}