feat(box): Remove right and left prop from Box component

They are not needed and we can achieve the same spacing using between
telus · Nov 9, 2017 · 304216b · 304216b
1 parent b628ada
commit 304216b
Show file tree

Hide file tree

Showing 3 changed files with 0 additions and 28 deletions.
diff --git a/src/components/Box/Box.jsx b/src/components/Box/Box.jsx
@@ -39,8 +39,6 @@ const Box = ({
   horizontal,
   inset,
   below,
-  right,
-  left,
   between,
   dangerouslyAddClassName,
   children,
@@ -53,8 +51,6 @@ const Box = ({
     getClassName('padding', 'horizontal', xSize),
     getClassName('padding', 'vertical', ySize),
     getClassName('margin', 'bottom', below),
-    getClassName('margin', 'right', right),
-    getClassName('margin', 'left', left),
     getBetweenClasses(between, inline),
     dangerouslyAddClassName
   )
@@ -87,14 +83,6 @@ Box.propTypes = {
    * Sets a `margin-bottom`.
    */
   below: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8]),
-  /**
-   * Sets a `margin-right`.
-   */
-  right: PropTypes.oneOf([1, 2, 3, 4, 6]),
-  /**
-   * Sets a `margin-left`.
-   */
-  left: PropTypes.oneOf([1, 2, 3, 4, 6]),
   /**
    * Sets a `margin-bottom` to all direct children except the last. If the `inline` prop is set to `true`, this sets a `margin-right` to all direct children except the last.
    */
@@ -116,8 +104,6 @@ Box.defaultProps = {
   horizontal: undefined,
   inset: undefined,
   below: undefined,
-  right: undefined,
-  left: undefined,
   between: undefined,
   dangerouslyAddClassName: undefined,
 }

diff --git a/src/components/Box/Box.modules.scss b/src/components/Box/Box.modules.scss
@@ -46,10 +46,6 @@ $boxProps: ('margin': 'Margin', 'padding': 'Padding');
       #{$p}-right: $value;
     }
 
-    .right#{$v}-#{$level} {
-      #{$p}-right: $value;
-    }
-
     .bottom#{$v}-#{$level} {
       #{$p}-bottom: $value;
     }
@@ -62,10 +58,6 @@ $boxProps: ('margin': 'Margin', 'padding': 'Padding');
     .betweenRight#{$v}-#{$level} > *:not(:last-child) {
       #{$p}-right: $value;
     }
-
-    .left#{$v}-#{$level} {
-      #{$p}-left: $value;
-    }
   }
 }
 

diff --git a/src/components/Box/__tests__/Box.spec.jsx b/src/components/Box/__tests__/Box.spec.jsx
@@ -57,12 +57,6 @@ describe('Box', () => {
     expect(box).toHaveClassName('bottomMargin-2')
   })
 
-  it('can have right margin', () => {
-    const box = doShallow({ right: 4 })
-
-    expect(box).toHaveClassName('rightMargin-4')
-  })
-
   it('can have between margin as a stack', () => {
     const box = doShallow({ between: 2 })