Merge pull request #313 from dcos-labs/mp/fix/bruteforce-rm-checkbox-…

…bottom-margin fix: kill bottom margin on CheckboxInput in dcos-ui
d2iq · Jan 14, 2020 · 77fe8e1 · 77fe8e1
2 parents fcece55 + 9f383d3
commit 77fe8e1
Show file tree

Hide file tree

Showing 6 changed files with 576 additions and 270 deletions.
diff --git a/packages/checkboxInput/tests/__snapshots__/CheckboxInput.test.tsx.snap b/packages/checkboxInput/tests/__snapshots__/CheckboxInput.test.tsx.snap
@@ -1,6 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CheckboxInput renders all appearances 1`] = `
+.emotion-5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
 .emotion-0 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
@@ -40,6 +54,7 @@ exports[`CheckboxInput renders all appearances 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  margin-bottom: 0 !important;
 }
 
 .emotion-4 > div {
@@ -96,6 +111,7 @@ exports[`CheckboxInput renders all appearances 1`] = `
       vertAlign="center"
     >
       <div
+        className="emotion-5"
         data-cy="checkboxInput"
       >
         <label
@@ -134,6 +150,20 @@ exports[`CheckboxInput renders all appearances 1`] = `
 `;
 
 exports[`CheckboxInput renders all appearances 2`] = `
+.emotion-5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
 .emotion-0 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
@@ -173,6 +203,7 @@ exports[`CheckboxInput renders all appearances 2`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  margin-bottom: 0 !important;
 }
 
 .emotion-4 > div {
@@ -231,6 +262,7 @@ exports[`CheckboxInput renders all appearances 2`] = `
       vertAlign="center"
     >
       <div
+        className="emotion-5"
         data-cy="checkboxInput checkboxInput.error"
       >
         <label
@@ -269,6 +301,20 @@ exports[`CheckboxInput renders all appearances 2`] = `
 `;
 
 exports[`CheckboxInput renders all appearances 3`] = `
+.emotion-5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
 .emotion-0 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
@@ -308,6 +354,7 @@ exports[`CheckboxInput renders all appearances 3`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  margin-bottom: 0 !important;
 }
 
 .emotion-4 > div {
@@ -366,6 +413,7 @@ exports[`CheckboxInput renders all appearances 3`] = `
       vertAlign="center"
     >
       <div
+        className="emotion-5"
         data-cy="checkboxInput checkboxInput.success"
       >
         <label
@@ -404,6 +452,20 @@ exports[`CheckboxInput renders all appearances 3`] = `
 `;
 
 exports[`CheckboxInput renders indeterminate 1`] = `
+.emotion-7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
 .emotion-0 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
@@ -432,6 +494,7 @@ exports[`CheckboxInput renders indeterminate 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  margin-bottom: 0 !important;
 }
 
 .emotion-6 > div {
@@ -528,6 +591,7 @@ exports[`CheckboxInput renders indeterminate 1`] = `
       vertAlign="center"
     >
       <div
+        className="emotion-7"
         data-cy="checkboxInput checkboxInput.indeterminate"
       >
         <label
@@ -590,6 +654,20 @@ exports[`CheckboxInput renders indeterminate 1`] = `
 `;
 
 exports[`CheckboxInput renders with a hidden label 1`] = `
+.emotion-5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
 .emotion-0 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
@@ -629,6 +707,7 @@ exports[`CheckboxInput renders with a hidden label 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  margin-bottom: 0 !important;
 }
 
 .emotion-4 > div {
@@ -695,6 +774,7 @@ exports[`CheckboxInput renders with a hidden label 1`] = `
       vertAlign="center"
     >
       <div
+        className="emotion-5"
         data-cy="checkboxInput"
       >
         <label