feat(box): Adjust spacing on Input component

Tooltip is now moved to the far right using Flexbox and fixed vertical spacing between label and input on Input component
telus · Nov 8, 2017 · 54f8438 · 54f8438
1 parent 8e9598b
commit 54f8438
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 22 deletions.
diff --git a/src/components/Input/Input.jsx b/src/components/Input/Input.jsx
@@ -91,13 +91,15 @@ class Input extends React.Component {
     const labelClassNames = joinClassNames(styles.resetLabel, styles.label)
 
     return (
-      <Box tag="label" inline between={2} htmlFor={inputId.identity()} className={labelClassNames}>
-        <Text size="medium" bold>
-          {label}
-        </Text>
+      <label htmlFor={inputId.identity()} className={labelClassNames}>
+        <Box inline between={2}>
+          <Text size="medium" bold>
+            {label}
+          </Text>
 
-        {hint && <Text size="small">{hint}</Text>}
-      </Box>
+          {hint && <Text size="small">{hint}</Text>}
+        </Box>
+      </label>
     )
   }
 
@@ -159,11 +161,11 @@ class Input extends React.Component {
     const showIcon = showFeedbackIcon(feedback, this.state.focus)
 
     return (
-      <Flexbox direction="column">
-        <Box between={2} dangerouslyAddClassName={formFieldStyles.containsTooltip}>
+      <Box between={2}>
+        <Flexbox direction="row" dangerouslyAddClassName={formFieldStyles.containsTooltip}>
           {this.renderLabel(label, hint, inputId)}
           {tooltip && React.cloneElement(tooltip, { connectedFieldLabel: label })}
-        </Box>
+        </Flexbox>
 
         {helper && (
           <Box below={3}>{this.renderHelper(helper, helperId, feedback, this.state.value)}</Box>
@@ -193,7 +195,7 @@ class Input extends React.Component {
             </Fade>
           </Flexbox>
         </Box>
-      </Flexbox>
+      </Box>
     )
   }
 }

diff --git a/src/components/Input/Input.md b/src/components/Input/Input.md
@@ -10,12 +10,12 @@ will be available as additional components.
 Supply additional HTML input attributes as normal.
 
 ```
-<div>
+<Box between={2}>
   <Input label="First name" value="Lucy" />
 
   <Input type="tel" label="Mobile phone" pattern="[0-9]{10}" maxLength="10" />
   <Input type="password" label="Tax ID" value="123456789" autoComplete="on" />
-</div>
+</Box>
 ```
 
 ### Getting feedback for entered values

diff --git a/src/components/Input/__tests__/__snapshots__/Input.spec.jsx.snap b/src/components/Input/__tests__/__snapshots__/Input.spec.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Input renders 1`] = `
 <div
-  class="column"
+  class="betweenBottomMargin-2"
 >
   <div
     class="betweenBottomMargin-2 containsTooltip"
@@ -11,11 +11,15 @@ exports[`Input renders 1`] = `
       class="resetLabel label"
       for="the-input"
     >
-      <span
-        class="medium boldFont color"
+      <div
+        class="betweenRightMargin-2 betweenRight"
       >
-        The input
-      </span>
+        <span
+          class="medium boldFont color"
+        >
+          The input
+        </span>
+      </div>
     </label>
   </div>
   <div
@@ -43,7 +47,7 @@ exports[`Input renders 1`] = `
 
 exports[`Input renders with a feedback state and icon 1`] = `
 <div
-  class="column"
+  class="betweenBottomMargin-2"
 >
   <div
     class="betweenBottomMargin-2 containsTooltip"
@@ -52,11 +56,15 @@ exports[`Input renders with a feedback state and icon 1`] = `
       class="resetLabel label"
       for="the-input"
     >
-      <span
-        class="medium boldFont color"
+      <div
+        class="betweenRightMargin-2 betweenRight"
       >
-        The input
-      </span>
+        <span
+          class="medium boldFont color"
+        >
+          The input
+        </span>
+      </div>
     </label>
   </div>
   <div