fix(Spacing): update spacing naming and media queries

ticketmaster · Aug 14, 2018 · 4b48cf0 · 4b48cf0
1 parent 23dbe6d
commit 4b48cf0
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 39 deletions.
diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js
@@ -56,7 +56,7 @@ const ModalContainer = styled(Column)`
 `;
 
 const ModalContent = styled.div`
-  padding: 0 ${spacing.shakira} ${spacing.shakira};
+  padding: 0 ${spacing.comfy} ${spacing.comfy};
 `;
 
 const CancelButtonContainer = styled(Row)`

diff --git a/src/components/Spacing.js b/src/components/Spacing.js
@@ -7,47 +7,47 @@ const getSpacing = val => spacing[val] || val || 0;
 
 const Spacing = styled.div`
   width: 100%;
-  padding-top: ${props => getSpacing(props.top.small)};
-  padding-bottom: ${props => getSpacing(props.bottom.small)};
+  padding-top: ${props => getSpacing(props.top.xSmall)};
+  padding-bottom: ${props => getSpacing(props.bottom.xSmall)};
 
   ${smallAndUp`
-    padding-top: ${props => getSpacing(props.top.medium || props.top.small)};
+    padding-top: ${props => getSpacing(props.top.small || props.top.xSmall)};
     padding-bottom: ${props =>
-      getSpacing(props.bottom.medium || props.bottom.small)};
+      getSpacing(props.bottom.small || props.bottom.xSmall)};
   `};
 
   ${mediumAndUp`
     padding-top: ${props =>
-      getSpacing(props.top.large || props.top.medium || props.top.small)};
+      getSpacing(props.top.medium || props.top.small || props.top.xSmall)};
     padding-bottom: ${props =>
       getSpacing(
-        props.bottom.large || props.bottom.medium || props.bottom.small
+        props.bottom.medium || props.bottom.small || props.bottom.xSmall
       )};
   `};
 
   ${largeAndUp`
     padding-top: ${props =>
       getSpacing(
-        props.top.xLarge ||
-          props.top.large ||
+        props.top.large ||
           props.top.medium ||
-          props.top.small
+          props.top.small ||
+          props.top.xSmall
       )};
     padding-bottom: ${props =>
       getSpacing(
-        props.bottom.xLarge ||
-          props.bottom.large ||
+        props.bottom.large ||
           props.bottom.medium ||
-          props.bottom.small
+          props.bottom.small ||
+          props.top.xSmall
       )}
   `};
 `;
 
 const spacingShape = PropTypes.shape({
+  xSmall: PropTypes.string,
   small: PropTypes.string,
   medium: PropTypes.string,
-  large: PropTypes.string,
-  xLarge: PropTypes.string
+  large: PropTypes.string
 });
 
 Spacing.propTypes = {
@@ -60,4 +60,6 @@ Spacing.defaultProps = {
   bottom: {}
 };
 
+Spacing.displayName = "Spacing";
+
 export default Spacing;
diff --git a/src/components/__tests__/Spacing.spec.js b/src/components/__tests__/Spacing.spec.js
@@ -3,35 +3,35 @@ import renderer from "react-test-renderer";
 import Spacing from "../Spacing";
 
 describe("Spacing", () => {
-  it("renders top and bottom spacing for small device", () =>
+  it("renders top and bottom spacing for xSmall device (320-479)", () =>
+    expect(
+      renderComponent({
+        top: { xSmall: "normal" },
+        bottom: { xSmall: "normal" }
+      })
+    ).toMatchSnapshot());
+
+  it("renders top and bottom spacing for small device (480-767)", () =>
     expect(
       renderComponent({ top: { small: "normal" }, bottom: { small: "normal" } })
     ).toMatchSnapshot());
 
-  it("renders top and bottom spacing for medium device", () =>
+  it("renders top and bottom spacing for medium device (767-1023)", () =>
     expect(
       renderComponent({
         top: { medium: "normal" },
         bottom: { medium: "normal" }
       })
     ).toMatchSnapshot());
 
-  it("renders top and bottom spacing for medium device", () =>
+  it("renders top and bottom spacing for large device (>1024)", () =>
     expect(
       renderComponent({
         top: { large: "normal" },
         bottom: { large: "normal" }
       })
     ).toMatchSnapshot());
 
-  it("renders top and bottom spacing for medium device", () =>
-    expect(
-      renderComponent({
-        top: { xLarge: "normal" },
-        bottom: { xLarge: "normal" }
-      })
-    ).toMatchSnapshot());
-
   function renderComponent(props = {}) {
     return renderer.create(<Spacing {...props} />).toJSON();
   }

diff --git a/src/components/__tests__/__snapshots__/Spacing.spec.js.snap b/src/components/__tests__/__snapshots__/Spacing.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Spacing renders top and bottom spacing for medium device 1`] = `
+exports[`Spacing renders top and bottom spacing for large device (>1024) 1`] = `
 .c0 {
   width: 100%;
   padding-top: 0;
@@ -9,15 +9,15 @@ exports[`Spacing renders top and bottom spacing for medium device 1`] = `
 
 @media screen and (min-width:480px) {
   .c0 {
-    padding-top: 24px;
-    padding-bottom: 24px;
+    padding-top: 0;
+    padding-bottom: 0;
   }
 }
 
 @media screen and (min-width:768px) {
   .c0 {
-    padding-top: 24px;
-    padding-bottom: 24px;
+    padding-top: 0;
+    padding-bottom: 0;
   }
 }
 
@@ -33,7 +33,7 @@ exports[`Spacing renders top and bottom spacing for medium device 1`] = `
 />
 `;
 
-exports[`Spacing renders top and bottom spacing for medium device 2`] = `
+exports[`Spacing renders top and bottom spacing for medium device (767-1023) 1`] = `
 .c0 {
   width: 100%;
   padding-top: 0;
@@ -66,7 +66,7 @@ exports[`Spacing renders top and bottom spacing for medium device 2`] = `
 />
 `;
 
-exports[`Spacing renders top and bottom spacing for medium device 3`] = `
+exports[`Spacing renders top and bottom spacing for small device (480-767) 1`] = `
 .c0 {
   width: 100%;
   padding-top: 0;
@@ -75,15 +75,15 @@ exports[`Spacing renders top and bottom spacing for medium device 3`] = `
 
 @media screen and (min-width:480px) {
   .c0 {
-    padding-top: 0;
-    padding-bottom: 0;
+    padding-top: 24px;
+    padding-bottom: 24px;
   }
 }
 
 @media screen and (min-width:768px) {
   .c0 {
-    padding-top: 0;
-    padding-bottom: 0;
+    padding-top: 24px;
+    padding-bottom: 24px;
   }
 }
 
@@ -99,7 +99,7 @@ exports[`Spacing renders top and bottom spacing for medium device 3`] = `
 />
 `;
 
-exports[`Spacing renders top and bottom spacing for small device 1`] = `
+exports[`Spacing renders top and bottom spacing for xSmall device (320-479) 1`] = `
 .c0 {
   width: 100%;
   padding-top: 24px;

diff --git a/src/theme/spacing.js b/src/theme/spacing.js
@@ -3,7 +3,8 @@ const spacing = {
   cozy: "8px",
   moderate: "16px",
   normal: "24px",
-  shakira: "32px",
+  comfy: "32px",
+  shakira: "32px", // NOTE: this constant is deprecated. It will be removed in the future.
   spacious: "48px",
   giant: "64px",
   colossal: "88px",