Fix IE11 bugs with Table and ToolBar. (#9943)

Backports PR #9928 **Commit 1:** Fix IE11 bugs with Table and ToolBar. - Make table-layout use the default, instead of fixed. - Fix flexbox bug with ToolBar. - Update ui_framework task to serve on port 8020. - Add babel-core/polyfill to UI Framework docs site. * Original sha: 5414412 * Authored by CJ Cenizal <[email protected]> on 2017-01-18T17:19:43Z
elastic · Jan 18, 2017 · 3ec2ce8 · 3ec2ce8
1 parent e99670c
commit 3ec2ce8
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 26 deletions.
diff --git a/tasks/ui_framework.js b/tasks/ui_framework.js
@@ -18,7 +18,9 @@ module.exports = function (grunt) {
         '--config=ui_framework/doc_site/webpack.config.js',
         '--hot ',
         '--inline',
-        '--content-base=ui_framework/doc_site/build'
+        '--content-base=ui_framework/doc_site/build',
+        '--host=0.0.0.0',
+        '--port=8020',
       ],
       opts: { stdio: 'inherit' }
     };

diff --git a/ui_framework/README.md b/ui_framework/README.md
@@ -3,7 +3,7 @@
 ## Development
 
 * Start development server `npm run uiFramework:start`.
-* View docs on `http://localhost:8080/`.
+* View docs on `http://localhost:8020/`.
 
 ## What is this?
 

diff --git a/ui_framework/components/index.scss b/ui_framework/components/index.scss
@@ -113,29 +113,35 @@ $toolBarItsemSpacing: 10px;
  * 1. Put 10px of space between each child.
  * 2. If there is only one child, align it to the right. If you wanted it aligned right, you
  *    wouldn't use the Bar in the first place.
+ * 3. Children in the middle should center their content.
+ * 4. Fix an IE bug which causes the last child to overflow the container.
+ * 5. Fixing this bug means we now need to align the children to the right.
  */
 @mixin barSection {
   display: flex;
   align-items: center;
+  flex: 1 1 auto;
   margin-left: $toolBarSectionSpacing * 0.5;
   margin-right: $toolBarSectionSpacing * 0.5;
 
+  &:not(:first-child):not(:last-child):not(:only-child) {
+    justify-content: center; /* 3 */
+  }
+
   &:first-child {
     margin-left: 0;
   }
 
   &:last-child {
     margin-right: 0;
+    flex: 0 1 auto; /* 4 */
+    justify-content: flex-end; /* 5 */
   }
 
   &:only-child {
     margin-left: auto; /* 1 */
   }
 
-  & > * {
-    flex: 1 0 auto;
-  }
-
   & > * + * {
     margin-left: $toolBarItsemSpacing; /* 1 */
   }

diff --git a/ui_framework/components/table/_table.scss b/ui_framework/components/table/_table.scss
@@ -11,7 +11,6 @@
 }
 
 .kuiTable {
-  table-layout: fixed;
   width: 100%;
   border: $tableBorder;
   border-collapse: collapse;

diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
@@ -6,6 +6,9 @@
  * 1. Put 10px of space between each child.
  * 2. If there is only one child, align it to the right. If you wanted it aligned right, you
  *    wouldn't use the Bar in the first place.
+ * 3. Children in the middle should center their content.
+ * 4. Fix an IE bug which causes the last child to overflow the container.
+ * 5. Fixing this bug means we now need to align the children to the right.
  */
 * {
   box-sizing: border-box; }
@@ -36,20 +39,35 @@ body {
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 1 auto;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
+  .kuiBarSection:not(:first-child):not(:last-child):not(:only-child) {
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    /* 3 */ }
   .kuiBarSection:first-child {
     margin-left: 0; }
   .kuiBarSection:last-child {
-    margin-right: 0; }
+    margin-right: 0;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 1 auto;
+        -ms-flex: 0 1 auto;
+            flex: 0 1 auto;
+    /* 4 */
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+        -ms-flex-pack: end;
+            justify-content: flex-end;
+    /* 5 */ }
   .kuiBarSection:only-child {
     margin-left: auto;
     /* 1 */ }
-  .kuiBarSection > * {
-    -webkit-box-flex: 1;
-    -webkit-flex: 1 0 auto;
-        -ms-flex: 1 0 auto;
-            flex: 1 0 auto; }
   .kuiBarSection > * + * {
     margin-left: 10px;
     /* 1 */ }
@@ -835,7 +853,6 @@ body {
   /* 2 */ }
 
 .kuiTable {
-  table-layout: fixed;
   width: 100%;
   border: 2px solid #E4E4E4;
   border-collapse: collapse;
@@ -996,20 +1013,35 @@ body {
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 1 auto;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
+  .kuiToolBarSection:not(:first-child):not(:last-child):not(:only-child) {
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    /* 3 */ }
   .kuiToolBarSection:first-child {
     margin-left: 0; }
   .kuiToolBarSection:last-child {
-    margin-right: 0; }
+    margin-right: 0;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 1 auto;
+        -ms-flex: 0 1 auto;
+            flex: 0 1 auto;
+    /* 4 */
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+        -ms-flex-pack: end;
+            justify-content: flex-end;
+    /* 5 */ }
   .kuiToolBarSection:only-child {
     margin-left: auto;
     /* 1 */ }
-  .kuiToolBarSection > * {
-    -webkit-box-flex: 1;
-    -webkit-flex: 1 0 auto;
-        -ms-flex: 1 0 auto;
-            flex: 1 0 auto; }
   .kuiToolBarSection > * + * {
     margin-left: 10px;
     /* 1 */ }
@@ -1048,20 +1080,35 @@ body {
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 1 auto;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
+  .kuiToolBarFooterSection:not(:first-child):not(:last-child):not(:only-child) {
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    /* 3 */ }
   .kuiToolBarFooterSection:first-child {
     margin-left: 0; }
   .kuiToolBarFooterSection:last-child {
-    margin-right: 0; }
+    margin-right: 0;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 1 auto;
+        -ms-flex: 0 1 auto;
+            flex: 0 1 auto;
+    /* 4 */
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+        -ms-flex-pack: end;
+            justify-content: flex-end;
+    /* 5 */ }
   .kuiToolBarFooterSection:only-child {
     margin-left: auto;
     /* 1 */ }
-  .kuiToolBarFooterSection > * {
-    -webkit-box-flex: 1;
-    -webkit-flex: 1 0 auto;
-        -ms-flex: 1 0 auto;
-            flex: 1 0 auto; }
   .kuiToolBarFooterSection > * + * {
     margin-left: 10px;
     /* 1 */ }

diff --git a/ui_framework/doc_site/src/index.js b/ui_framework/doc_site/src/index.js
@@ -1,5 +1,6 @@
 require('./main.scss');
 
+import 'babel-core/polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';