fix(component): change checkbox margin and box sizing (#646)

Co-authored-by: Stanislav Holts <[email protected]>
bigcommerce · Nov 5, 2021 · 3c9ac79 · 3c9ac79
1 parent 7662b8e
commit 3c9ac79
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 29 deletions.
diff --git a/packages/big-design/src/components/Checkbox/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Checkbox/__snapshots__/spec.tsx.snap
@@ -61,6 +61,7 @@ exports[`render Checkbox checked 1`] = `
   -ms-flex-align: center;
   align-items: center;
   background: #3C64F4;
+  box-sizing: border-box;
   border: 1px solid #D9DCE9;
   border-color: #3C64F4;
   border-radius: 0.25rem;
@@ -75,8 +76,8 @@ exports[`render Checkbox checked 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-bottom: 0.0625rem;
-  margin-top: 0.0625rem;
+  margin-bottom: 0.125rem;
+  margin-top: 0.125rem;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -207,6 +208,7 @@ exports[`render Checkbox disabled checked 1`] = `
   -ms-flex-align: center;
   align-items: center;
   background: #3C64F4;
+  box-sizing: border-box;
   border: 1px solid #D9DCE9;
   border-color: #3C64F4;
   border-radius: 0.25rem;
@@ -221,8 +223,8 @@ exports[`render Checkbox disabled checked 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-bottom: 0.0625rem;
-  margin-top: 0.0625rem;
+  margin-bottom: 0.125rem;
+  margin-top: 0.125rem;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -356,6 +358,7 @@ exports[`render Checkbox disabled indeterminate 1`] = `
   -ms-flex-align: center;
   align-items: center;
   background: #3C64F4;
+  box-sizing: border-box;
   border: 1px solid #D9DCE9;
   border-color: #3C64F4;
   border-radius: 0.25rem;
@@ -370,8 +373,8 @@ exports[`render Checkbox disabled indeterminate 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-bottom: 0.0625rem;
-  margin-top: 0.0625rem;
+  margin-bottom: 0.125rem;
+  margin-top: 0.125rem;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -503,6 +506,7 @@ exports[`render Checkbox disabled unchecked 1`] = `
   -ms-flex-align: center;
   align-items: center;
   background: #FFFFFF;
+  box-sizing: border-box;
   border: 1px solid #D9DCE9;
   border-color: #D9DCE9;
   border-radius: 0.25rem;
@@ -517,8 +521,8 @@ exports[`render Checkbox disabled unchecked 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-bottom: 0.0625rem;
-  margin-top: 0.0625rem;
+  margin-bottom: 0.125rem;
+  margin-top: 0.125rem;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -650,6 +654,7 @@ exports[`render Checkbox indeterminate 1`] = `
   -ms-flex-align: center;
   align-items: center;
   background: #3C64F4;
+  box-sizing: border-box;
   border: 1px solid #D9DCE9;
   border-color: #3C64F4;
   border-radius: 0.25rem;
@@ -664,8 +669,8 @@ exports[`render Checkbox indeterminate 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-bottom: 0.0625rem;
-  margin-top: 0.0625rem;
+  margin-bottom: 0.125rem;
+  margin-top: 0.125rem;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -793,6 +798,7 @@ exports[`render Checkbox unchecked 1`] = `
   -ms-flex-align: center;
   align-items: center;
   background: #FFFFFF;
+  box-sizing: border-box;
   border: 1px solid #D9DCE9;
   border-color: #D9DCE9;
   border-radius: 0.25rem;
@@ -807,8 +813,8 @@ exports[`render Checkbox unchecked 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-bottom: 0.0625rem;
-  margin-top: 0.0625rem;
+  margin-bottom: 0.125rem;
+  margin-top: 0.125rem;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -976,6 +982,7 @@ exports[`render Checkbox with description object 1`] = `
   -ms-flex-align: center;
   align-items: center;
   background: #FFFFFF;
+  box-sizing: border-box;
   border: 1px solid #D9DCE9;
   border-color: #D9DCE9;
   border-radius: 0.25rem;
@@ -990,8 +997,8 @@ exports[`render Checkbox with description object 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-bottom: 0.0625rem;
-  margin-top: 0.0625rem;
+  margin-bottom: 0.125rem;
+  margin-top: 0.125rem;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1148,6 +1155,7 @@ exports[`render Checkbox with description string 1`] = `
   -ms-flex-align: center;
   align-items: center;
   background: #FFFFFF;
+  box-sizing: border-box;
   border: 1px solid #D9DCE9;
   border-color: #D9DCE9;
   border-radius: 0.25rem;
@@ -1162,8 +1170,8 @@ exports[`render Checkbox with description string 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-bottom: 0.0625rem;
-  margin-top: 0.0625rem;
+  margin-bottom: 0.125rem;
+  margin-top: 0.125rem;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;

diff --git a/packages/big-design/src/components/Checkbox/styled.tsx b/packages/big-design/src/components/Checkbox/styled.tsx
@@ -34,6 +34,7 @@ export const StyledCheckbox = styled.label<StyledCheckboxProps>`
   align-items: center;
   background: ${({ checked, isIndeterminate, theme }) =>
     checked || isIndeterminate ? theme.colors.primary : theme.colors.white};
+  box-sizing: border-box;
   border: ${({ theme }) => theme.border.box};
   border-color: ${({ checked, isIndeterminate, theme }) =>
     checked || isIndeterminate ? theme.colors.primary : theme.colors.secondary30};
@@ -43,8 +44,8 @@ export const StyledCheckbox = styled.label<StyledCheckboxProps>`
   display: inline-flex;
   height: ${({ theme }) => theme.spacing.large};
   justify-content: center;
-  margin-bottom: ${({ theme }) => theme.helpers.remCalc(1)};
-  margin-top: ${({ theme }) => theme.helpers.remCalc(1)};
+  margin-bottom: ${({ theme }) => theme.helpers.remCalc(2)};
+  margin-top: ${({ theme }) => theme.helpers.remCalc(2)};
   user-select: none;
   width: ${({ theme }) => theme.spacing.large};
 

diff --git a/packages/big-design/src/components/Table/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Table/__snapshots__/spec.tsx.snap
@@ -872,6 +872,7 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
   -ms-flex-align: center;
   align-items: center;
   background: #FFFFFF;
+  box-sizing: border-box;
   border: 1px solid #D9DCE9;
   border-color: #D9DCE9;
   border-radius: 0.25rem;
@@ -886,8 +887,8 @@ exports[`selectable renders selectable actions and checkboxes 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-bottom: 0.0625rem;
-  margin-top: 0.0625rem;
+  margin-bottom: 0.125rem;
+  margin-top: 0.125rem;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;

diff --git a/packages/big-design/src/components/Worksheet/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Worksheet/__snapshots__/spec.tsx.snap
@@ -76,7 +76,7 @@ exports[`renders worksheet 1`] = `
             />
             <label
               aria-hidden="true"
-              class="styled__StyledCheckbox-sc-s1u0st-3 hMHbNJ"
+              class="styled__StyledCheckbox-sc-s1u0st-3 hDRNJM"
               for="bd-checkbox-1"
             >
               <svg
@@ -206,7 +206,7 @@ exports[`renders worksheet 1`] = `
             />
             <label
               aria-hidden="true"
-              class="styled__StyledCheckbox-sc-s1u0st-3 hMHbNJ"
+              class="styled__StyledCheckbox-sc-s1u0st-3 hDRNJM"
               for="bd-checkbox-4"
             >
               <svg
@@ -335,7 +335,7 @@ exports[`renders worksheet 1`] = `
             />
             <label
               aria-hidden="true"
-              class="styled__StyledCheckbox-sc-s1u0st-3 ijngYq"
+              class="styled__StyledCheckbox-sc-s1u0st-3 hxYgxP"
               for="bd-checkbox-7"
             >
               <svg
@@ -465,7 +465,7 @@ exports[`renders worksheet 1`] = `
             />
             <label
               aria-hidden="true"
-              class="styled__StyledCheckbox-sc-s1u0st-3 hMHbNJ"
+              class="styled__StyledCheckbox-sc-s1u0st-3 hDRNJM"
               for="bd-checkbox-10"
             >
               <svg
@@ -593,7 +593,7 @@ exports[`renders worksheet 1`] = `
             />
             <label
               aria-hidden="true"
-              class="styled__StyledCheckbox-sc-s1u0st-3 hMHbNJ"
+              class="styled__StyledCheckbox-sc-s1u0st-3 hDRNJM"
               for="bd-checkbox-13"
             >
               <svg
@@ -723,7 +723,7 @@ exports[`renders worksheet 1`] = `
             />
             <label
               aria-hidden="true"
-              class="styled__StyledCheckbox-sc-s1u0st-3 hMHbNJ"
+              class="styled__StyledCheckbox-sc-s1u0st-3 hDRNJM"
               for="bd-checkbox-16"
             >
               <svg
@@ -852,7 +852,7 @@ exports[`renders worksheet 1`] = `
             />
             <label
               aria-hidden="true"
-              class="styled__StyledCheckbox-sc-s1u0st-3 ijngYq"
+              class="styled__StyledCheckbox-sc-s1u0st-3 hxYgxP"
               for="bd-checkbox-19"
             >
               <svg
@@ -982,7 +982,7 @@ exports[`renders worksheet 1`] = `
             />
             <label
               aria-hidden="true"
-              class="styled__StyledCheckbox-sc-s1u0st-3 hMHbNJ"
+              class="styled__StyledCheckbox-sc-s1u0st-3 hDRNJM"
               for="bd-checkbox-22"
             >
               <svg
@@ -1112,7 +1112,7 @@ exports[`renders worksheet 1`] = `
             />
             <label
               aria-hidden="true"
-              class="styled__StyledCheckbox-sc-s1u0st-3 hMHbNJ"
+              class="styled__StyledCheckbox-sc-s1u0st-3 hDRNJM"
               for="bd-checkbox-25"
             >
               <svg