feat(box): Removed extra CSS classes from Box.modules.scss

telus · Nov 9, 2017 · 7b05150 · 7b05150
1 parent 304216b
commit 7b05150
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 26 deletions.
diff --git a/src/components/Box/Box.modules.scss b/src/components/Box/Box.modules.scss
@@ -25,8 +25,6 @@ $responsive-spacings: (
     )
 );
 
-$boxProps: ('margin': 'Margin', 'padding': 'Padding');
-
 .betweenRight {
   display: flex;
   flex-direction: row;
@@ -35,29 +33,26 @@ $boxProps: ('margin': 'Margin', 'padding': 'Padding');
 
 // Todo remove unneeded classes related to margin
 @mixin spacingClasses ($level, $value) {
-  @each $p, $v in $boxProps {
-    .vertical#{$v}-#{$level} {
-      #{$p}-top: $value;
-      #{$p}-bottom: $value;
-    }
+  .verticalPadding-#{$level} {
+    padding-top: $value;
+    padding-bottom: $value;
+  }
 
-    .horizontal#{$v}-#{$level} {
-      #{$p}-left: $value;
-      #{$p}-right: $value;
-    }
+  .horizontalPadding-#{$level} {
+    padding-left: $value;
+    padding-right: $value;
+  }
 
-    .bottom#{$v}-#{$level} {
-      #{$p}-bottom: $value;
-    }
+  .bottomMargin-#{$level} {
+    margin-bottom: $value;
+  }
 
-    // TODO: refactor to not generate unnecessary .betweenBottomPadding-*
-    .betweenBottom#{$v}-#{$level} > *:not(:last-child) {
-      #{$p}-bottom: $value;
-    }
+  .betweenBottomMargin-#{$level} > *:not(:last-child) {
+    margin-bottom: $value;
+  }
 
-    .betweenRight#{$v}-#{$level} > *:not(:last-child) {
-      #{$p}-right: $value;
-    }
+  .betweenRightMargin-#{$level} > *:not(:last-child) {
+    margin-right: $value;
   }
 }
 

diff --git a/src/components/Input/Input.jsx b/src/components/Input/Input.jsx
@@ -161,7 +161,7 @@ class Input extends React.Component {
     const showIcon = showFeedbackIcon(feedback, this.state.focus)
 
     return (
-      <Box between={3}>
+      <Box between={2}>
         <Flexbox direction="row" dangerouslyAddClassName={formFieldStyles.containsTooltip}>
           {this.renderLabel(label, hint, inputId)}
           {tooltip && React.cloneElement(tooltip, { connectedFieldLabel: label })}

diff --git a/src/components/Input/Input.md b/src/components/Input/Input.md
@@ -24,13 +24,13 @@ Use the `feedback` attribute to give the user feedback regarding their input. Yo
 was correct, or highlight errors that must be corrected.
 
 ```
-<div>
+<Box between={2}>
   <Input label="Username" value="guest12345" feedback="success" />
   <Input
     label="Email" value="guest@telus.com" feedback="error"
     error="That email is already associated with another account. Choose another one."
   />
-</div>
+</Box>
 ```
 
 TDS does not perform input validations, as that is an application level concern. You will need to track the value of your

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="betweenBottomMargin-3"
+  class="betweenBottomMargin-2"
 >
   <div
     class="row containsTooltip"
@@ -47,7 +47,7 @@ exports[`Input renders 1`] = `
 
 exports[`Input renders with a feedback state and icon 1`] = `
 <div
-  class="betweenBottomMargin-3"
+  class="betweenBottomMargin-2"
 >
   <div
     class="row containsTooltip"