feat(box): Remove below prop in Box from Input component

Separate error and helper containers using between instead
telus · Nov 9, 2017 · b628ada · b628ada
1 parent 0eda8ee
commit b628ada
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 21 deletions.
diff --git a/src/components/Input/Input.jsx b/src/components/Input/Input.jsx
@@ -161,17 +161,15 @@ class Input extends React.Component {
     const showIcon = showFeedbackIcon(feedback, this.state.focus)
 
     return (
-      <Box between={2}>
+      <Box between={3}>
         <Flexbox direction="row" dangerouslyAddClassName={formFieldStyles.containsTooltip}>
           {this.renderLabel(label, hint, inputId)}
           {tooltip && React.cloneElement(tooltip, { connectedFieldLabel: label })}
         </Flexbox>
 
-        {helper && (
-          <Box below={3}>{this.renderHelper(helper, helperId, feedback, this.state.value)}</Box>
-        )}
+        {helper && this.renderHelper(helper, helperId, feedback, this.state.value)}
 
-        {error && <Box below={3}>{this.renderError(error, errorId)}</Box>}
+        {error && this.renderError(error, errorId)}
 
         <Box horizontal={3} dangerouslyAddClassName={wrapperClassName} data-testid="inputWrapper">
           <Box inline between={3} dangerouslyAddClassName={styles.sizing}>

diff --git a/src/components/Input/__tests__/__snapshots__/Input.spec.jsx.snap b/src/components/Input/__tests__/__snapshots__/Input.spec.jsx.snap
@@ -2,10 +2,10 @@
 
 exports[`Input renders 1`] = `
 <div
-  class="betweenBottomMargin-2"
+  class="betweenBottomMargin-3"
 >
   <div
-    class="betweenBottomMargin-2 containsTooltip"
+    class="row containsTooltip"
   >
     <label
       class="resetLabel label"
@@ -27,10 +27,10 @@ exports[`Input renders 1`] = `
     data-testid="inputWrapper"
   >
     <div
-      class="row sizing"
+      class="betweenRightMargin-3 betweenRight sizing"
     >
       <div
-        class="rightMargin-3 fullWidth"
+        class="fullWidth"
       >
         <input
           aria-invalid="false"
@@ -47,10 +47,10 @@ exports[`Input renders 1`] = `
 
 exports[`Input renders with a feedback state and icon 1`] = `
 <div
-  class="betweenBottomMargin-2"
+  class="betweenBottomMargin-3"
 >
   <div
-    class="betweenBottomMargin-2 containsTooltip"
+    class="row containsTooltip"
   >
     <label
       class="resetLabel label"
@@ -72,10 +72,10 @@ exports[`Input renders with a feedback state and icon 1`] = `
     data-testid="inputWrapper"
   >
     <div
-      class="row sizing"
+      class="betweenRightMargin-3 betweenRight sizing"
     >
       <div
-        class="rightMargin-3 fullWidth"
+        class="fullWidth"
       >
         <input
           aria-invalid="true"
@@ -88,14 +88,10 @@ exports[`Input renders with a feedback state and icon 1`] = `
       <div
         style="transition:opacity 100ms ease-in-out;opacity:1"
       >
-        <div
-          class=""
-        >
-          <i
-            aria-label="The value of this input field is invalid."
-            class="iconExclamationPointCircle error size16"
-          />
-        </div>
+        <i
+          aria-label="The value of this input field is invalid."
+          class="iconExclamationPointCircle error size16"
+        />
       </div>
     </div>
   </div>