Merge pull request #381 from dcos-labs/mp/fix/DCOS-56720-flex-column-…

…gutters [spike] DCOS-56720: correct which side gutterSize appears for column direction
d2iq · Sep 3, 2019 · 7f33c51 · 7f33c51
2 parents 5c20ec1 + 4807896
commit 7f33c51
Show file tree

Hide file tree

Showing 21 changed files with 547 additions and 65 deletions.
diff --git a/packages/appChrome/tests/__snapshots__/AppChrome.test.tsx.snap b/packages/appChrome/tests/__snapshots__/AppChrome.test.tsx.snap
@@ -26,6 +26,7 @@ exports[`AppChrome renders with the app chrome regions 1`] = `
   -webkit-box-align: flex;
   -ms-flex-align: flex;
   align-items: flex;
+  height: auto;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -45,6 +46,10 @@ exports[`AppChrome renders with the app chrome regions 1`] = `
   height: 100%;
 }
 
+.emotion-2 > div {
+  width: auto;
+}
+
 .emotion-0 {
   box-sizing: border-box;
   -webkit-flex-basis: auto;

diff --git a/packages/appChrome/tests/__snapshots__/Sidebar.test.tsx.snap b/packages/appChrome/tests/__snapshots__/Sidebar.test.tsx.snap
@@ -20,6 +20,7 @@ exports[`Sidebar SidebarItemLabel renders 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  height: auto;
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -30,6 +31,10 @@ exports[`Sidebar SidebarItemLabel renders 1`] = `
   padding-bottom: 12px;
 }
 
+.emotion-2 > div {
+  width: auto;
+}
+
 .emotion-0 {
   box-sizing: border-box;
   -webkit-flex-basis: auto;
@@ -87,6 +92,7 @@ exports[`Sidebar SidebarSection renders 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  height: auto;
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -100,6 +106,10 @@ exports[`Sidebar SidebarSection renders 1`] = `
   margin-top: 0;
 }
 
+.emotion-0 > div {
+  width: auto;
+}
+
 .emotion-1 {
   margin: 0;
   list-style: none;
@@ -192,6 +202,7 @@ exports[`Sidebar SidebarSubMenuItem renders 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  height: auto;
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -202,6 +213,10 @@ exports[`Sidebar SidebarSubMenuItem renders 1`] = `
   padding-bottom: 12px;
 }
 
+.emotion-2 > div {
+  width: auto;
+}
+
 .emotion-0 {
   box-sizing: border-box;
   -webkit-flex-basis: auto;

diff --git a/packages/breadcrumb/tests/__snapshots__/Breadcrumb.test.tsx.snap b/packages/breadcrumb/tests/__snapshots__/Breadcrumb.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Breadcrumb default 1`] = `
 <nav
-  class="css-2wdnda"
+  class="css-td03f2"
 >
   <div
     class="css-1ixtlzk"

diff --git a/packages/button/tests/__snapshots__/ButtonBase.test.tsx.snap b/packages/button/tests/__snapshots__/ButtonBase.test.tsx.snap
@@ -61,6 +61,7 @@ exports[`ButtonBase renders all appearances with props 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  height: auto;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
@@ -73,6 +74,10 @@ exports[`ButtonBase renders all appearances with props 1`] = `
   min-height: 0;
 }
 
+.emotion-3 > div {
+  width: auto;
+}
+
 .emotion-0 {
   box-sizing: border-box;
   -webkit-flex-basis: auto;
@@ -174,6 +179,7 @@ exports[`ButtonBase renders all appearances with props 2`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  height: auto;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
@@ -186,6 +192,10 @@ exports[`ButtonBase renders all appearances with props 2`] = `
   min-height: 0;
 }
 
+.emotion-3 > div {
+  width: auto;
+}
+
 .emotion-0 {
   box-sizing: border-box;
   -webkit-flex-basis: auto;
@@ -334,6 +344,7 @@ exports[`ButtonBase renders all appearances with props 3`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  height: auto;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
@@ -346,6 +357,10 @@ exports[`ButtonBase renders all appearances with props 3`] = `
   min-height: 0;
 }
 
+.emotion-3 > div {
+  width: auto;
+}
+
 .emotion-0 {
   box-sizing: border-box;
   -webkit-flex-basis: auto;
@@ -502,6 +517,7 @@ exports[`ButtonBase renders all appearances with props 4`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  height: auto;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
@@ -514,6 +530,10 @@ exports[`ButtonBase renders all appearances with props 4`] = `
   min-height: 0;
 }
 
+.emotion-3 > div {
+  width: auto;
+}
+
 .emotion-0 {
   box-sizing: border-box;
   -webkit-flex-basis: auto;
@@ -670,6 +690,7 @@ exports[`ButtonBase renders all appearances with props 5`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  height: auto;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
@@ -682,6 +703,10 @@ exports[`ButtonBase renders all appearances with props 5`] = `
   min-height: 0;
 }
 
+.emotion-3 > div {
+  width: auto;
+}
+
 .emotion-0 {
   box-sizing: border-box;
   -webkit-flex-basis: auto;

diff --git a/packages/checkboxInput/tests/__snapshots__/CheckboxInput.test.tsx.snap b/packages/checkboxInput/tests/__snapshots__/CheckboxInput.test.tsx.snap
@@ -29,6 +29,7 @@ exports[`CheckboxInput renders all appearances 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  height: auto;
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -41,6 +42,10 @@ exports[`CheckboxInput renders all appearances 1`] = `
   display: inline-flex;
 }
 
+.emotion-4 > div {
+  width: auto;
+}
+
 .emotion-2 {
   box-sizing: border-box;
   -webkit-flex-basis: auto;
@@ -149,6 +154,7 @@ exports[`CheckboxInput renders all appearances 2`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  height: auto;
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -161,6 +167,10 @@ exports[`CheckboxInput renders all appearances 2`] = `
   display: inline-flex;
 }
 
+.emotion-4 > div {
+  width: auto;
+}
+
 .emotion-2 {
   box-sizing: border-box;
   -webkit-flex-basis: auto;
@@ -271,6 +281,7 @@ exports[`CheckboxInput renders all appearances 3`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  height: auto;
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -283,6 +294,10 @@ exports[`CheckboxInput renders all appearances 3`] = `
   display: inline-flex;
 }
 
+.emotion-4 > div {
+  width: auto;
+}
+
 .emotion-2 {
   box-sizing: border-box;
   -webkit-flex-basis: auto;
@@ -382,6 +397,7 @@ exports[`CheckboxInput renders indeterminate 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  height: auto;
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -394,6 +410,10 @@ exports[`CheckboxInput renders indeterminate 1`] = `
   display: inline-flex;
 }
 
+.emotion-6 > div {
+  width: auto;
+}
+
 .emotion-4 {
   box-sizing: border-box;
   -webkit-flex-basis: auto;
@@ -567,6 +587,7 @@ exports[`CheckboxInput renders with a hidden label 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  height: auto;
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -579,6 +600,10 @@ exports[`CheckboxInput renders with a hidden label 1`] = `
   display: inline-flex;
 }
 
+.emotion-4 > div {
+  width: auto;
+}
+
 .emotion-2 {
   box-sizing: border-box;
   -webkit-flex-basis: auto;

diff --git a/packages/configurationmap/tests/__snapshots__/ConfigurationMap.test.tsx.snap b/packages/configurationmap/tests/__snapshots__/ConfigurationMap.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`ConfigurationMap renders default 1`] = `
     data-cy="configurationMapSection"
   >
     <div
-      class="css-td53qz"
+      class="css-2iygaf"
       data-cy="configurationMapRow"
     >
       <dt
@@ -27,7 +27,7 @@ exports[`ConfigurationMap renders default 1`] = `
       </dd>
     </div>
     <div
-      class="css-td53qz"
+      class="css-2iygaf"
       data-cy="configurationMapRow"
     >
       <dt
@@ -44,7 +44,7 @@ exports[`ConfigurationMap renders default 1`] = `
       </dd>
     </div>
     <div
-      class="css-td53qz"
+      class="css-2iygaf"
       data-cy="configurationMapRow"
     >
       <dt
@@ -74,7 +74,7 @@ exports[`ConfigurationMap renders with actions 1`] = `
     data-cy="configurationMapSection"
   >
     <div
-      class="css-yae4lb"
+      class="css-1jqckuv"
       data-cy="configurationMapRow"
     >
       <dt
@@ -107,7 +107,7 @@ exports[`ConfigurationMap renders with actions 1`] = `
       </span>
     </div>
     <div
-      class="css-yae4lb"
+      class="css-1jqckuv"
       data-cy="configurationMapRow"
     >
       <dt
@@ -140,7 +140,7 @@ exports[`ConfigurationMap renders with actions 1`] = `
       </span>
     </div>
     <div
-      class="css-yae4lb"
+      class="css-1jqckuv"
       data-cy="configurationMapRow"
     >
       <dt
@@ -186,7 +186,7 @@ exports[`ConfigurationMap renders with default value 1`] = `
     data-cy="configurationMapSection"
   >
     <div
-      class="css-td53qz"
+      class="css-2iygaf"
       data-cy="configurationMapRow"
     >
       <dt
@@ -203,7 +203,7 @@ exports[`ConfigurationMap renders with default value 1`] = `
       </dd>
     </div>
     <div
-      class="css-td53qz"
+      class="css-2iygaf"
       data-cy="configurationMapRow"
     >
       <dt
@@ -220,7 +220,7 @@ exports[`ConfigurationMap renders with default value 1`] = `
       </dd>
     </div>
     <div
-      class="css-td53qz"
+      class="css-2iygaf"
       data-cy="configurationMapRow"
     >
       <dt
@@ -256,7 +256,7 @@ exports[`ConfigurationMap renders with headline 1`] = `
       Jane Doe Info
     </h1>
     <div
-      class="css-td53qz"
+      class="css-2iygaf"
       data-cy="configurationMapRow"
     >
       <dt
@@ -273,7 +273,7 @@ exports[`ConfigurationMap renders with headline 1`] = `
       </dd>
     </div>
     <div
-      class="css-td53qz"
+      class="css-2iygaf"
       data-cy="configurationMapRow"
     >
       <dt
@@ -290,7 +290,7 @@ exports[`ConfigurationMap renders with headline 1`] = `
       </dd>
     </div>
     <div
-      class="css-td53qz"
+      class="css-2iygaf"
       data-cy="configurationMapRow"
     >
       <dt