feat(component): add border-box to Box components and update tests (#110

)
bigcommerce · Jul 30, 2019 · 597f71d · 597f71d
1 parent a832c76
commit 597f71d
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 20 deletions.
diff --git a/packages/big-design/src/components/Box/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Box/__snapshots__/spec.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`has border props 1`] = `
 .c0 {
+  box-sizing: border-box;
   border: 1px solid #D9DCE9;
 }
 
@@ -12,6 +13,7 @@ exports[`has border props 1`] = `
 
 exports[`has elevation props 1`] = `
 .c0 {
+  box-sizing: border-box;
   border-radius: 0.25rem;
   box-shadow: 0px 2px 12px rgba(49,52,64,0.2);
 }
@@ -24,6 +26,7 @@ exports[`has elevation props 1`] = `
 
 exports[`has individual border props 1`] = `
 .c0 {
+  box-sizing: border-box;
   border-right: 1px solid #D9DCE9;
   border-bottom: 1px solid #D9DCE9;
 }

diff --git a/packages/big-design/src/components/Box/styled.tsx b/packages/big-design/src/components/Box/styled.tsx
@@ -8,6 +8,7 @@ import { BoxProps } from './Box';
 export const StyledBox = styled.div<BoxProps>`
   ${withMargins()};
   ${withPaddings()};
+  box-sizing: border-box;
 
   ${({ backgroundColor, theme }) =>
     backgroundColor &&

diff --git a/packages/big-design/src/components/Button/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Button/__snapshots__/spec.tsx.snap
@@ -993,18 +993,18 @@ exports[`render icon right button 1`] = `
 `;
 
 exports[`render loading button 1`] = `
-.c3 {
+.c4 {
   height: 1rem;
   width: 1rem;
 }
 
-.c4 {
+.c5 {
   fill: transparent;
   stroke-width: 0.125rem;
   stroke: #ECEEF5;
 }
 
-.c5 {
+.c6 {
   fill: transparent;
   stroke-width: 0.125rem;
   stroke: #ECEEF5;
@@ -1023,6 +1023,10 @@ exports[`render loading button 1`] = `
   transition: stroke-dashoffset 0.35s;
 }
 
+.c3 {
+  box-sizing: border-box;
+}
+
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1122,7 +1126,7 @@ exports[`render loading button 1`] = `
   background-color: #D9DCE9;
 }
 
-.c6 {
+.c7 {
   -webkit-align-content: center;
   -ms-flex-line-pack: center;
   align-content: center;
@@ -1160,30 +1164,30 @@ exports[`render loading button 1`] = `
   tabindex="0"
 >
   <div
-    class="c1 c2 "
+    class="c1 c2 c3"
     direction="row"
     wrap="nowrap"
   >
     <svg
-      class="c3"
+      class="c4"
       role="progressbar"
     >
       <circle
-        class="c4"
+        class="c5"
         cx="0.5rem"
         cy="0.5rem"
         r="0.4375rem"
       />
       <circle
-        class="c5"
+        class="c6"
         cx="0.5rem"
         cy="0.5rem"
         r="0.4375rem"
       />
     </svg>
   </div>
   <span
-    class="c6"
+    class="c7"
   >
     Button
   </span>

diff --git a/packages/big-design/src/components/Flex/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Flex/__snapshots__/spec.tsx.snap
@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`render flex 1`] = `
+.c1 {
+  box-sizing: border-box;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -34,7 +38,7 @@ exports[`render flex 1`] = `
 }
 
 <div
-  class="c0 "
+  class="c0 c1"
   direction="row"
   wrap="nowrap"
 >

diff --git a/packages/big-design/src/components/Grid/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Grid/__snapshots__/spec.tsx.snap
@@ -1,48 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`render Grid 1`] = `
+.c1 {
+  box-sizing: border-box;
+}
+
 .c0 {
   display: grid;
   grid-gap: 1rem;
   grid-template: "head head" 80px "nav  main" 1fr "nav  foot" 10% / 120px 1fr;
 }
 
-.c1 {
+.c2 {
   grid-area: head;
 }
 
-.c2 {
+.c3 {
   grid-area: nav;
 }
 
-.c3 {
+.c4 {
   grid-area: main;
 }
 
-.c4 {
+.c5 {
   grid-area: foot;
 }
 
 <div
-  class="c0 "
+  class="c0 c1"
 >
   <div
-    class="c1 "
+    class="c2 c1"
   >
     Header
   </div>
   <div
-    class="c2 "
+    class="c3 c1"
   >
     Sidebar
   </div>
   <div
-    class="c3 "
+    class="c4 c1"
   >
     Content
   </div>
   <div
-    class="c4 "
+    class="c5 c1"
   >
     Footer
   </div>

diff --git a/packages/big-design/src/components/Modal/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Modal/__snapshots__/spec.tsx.snap
@@ -14,6 +14,10 @@ exports[`render open modal 1`] = `
   width: 1.5rem;
 }
 
+.c3 {
+  box-sizing: border-box;
+}
+
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -264,6 +268,10 @@ exports[`render open modal without backdrop 1`] = `
   width: 1.5rem;
 }
 
+.c3 {
+  box-sizing: border-box;
+}
+
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;

diff --git a/packages/big-design/src/components/Panel/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Panel/__snapshots__/spec.tsx.snap
@@ -3,6 +3,7 @@
 exports[`render panel 1`] = `
 .c1 {
   margin-bottom: 2rem;
+  box-sizing: border-box;
   background-color: #FFFFFF;
   border-radius: 0.25rem;
   box-shadow: 0px 1px 6px rgba(49,52,64,0.2);

diff --git a/packages/storybook/stories/Grid/Grid.story.tsx b/packages/storybook/stories/Grid/Grid.story.tsx
@@ -7,7 +7,7 @@ import { Code, CodePreview } from '../../components';
 import { GridItemPropTable, GridPropTable } from './';
 
 const ExampleBox: React.FC = ({ children }) => (
-  <Box backgroundColor="secondary10" border="box" padding="small" style={{ boxSizing: 'border-box', height: '100%' }}>
+  <Box backgroundColor="secondary10" border="box" padding="small" style={{ height: '100%' }}>
     {children}
   </Box>
 );