From 3ec2ce801c589bd4d68e8057e3c63924c5d507e5 Mon Sep 17 00:00:00 2001 From: jasper Date: Wed, 18 Jan 2017 17:06:25 -0500 Subject: [PATCH] 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: 54144129c94bacc1f5ff38e4a7ad593af0a19cfa * Authored by CJ Cenizal on 2017-01-18T17:19:43Z --- tasks/ui_framework.js | 4 +- ui_framework/README.md | 2 +- ui_framework/components/index.scss | 14 ++-- ui_framework/components/table/_table.scss | 1 - ui_framework/dist/ui_framework.css | 85 ++++++++++++++++++----- ui_framework/doc_site/src/index.js | 1 + 6 files changed, 81 insertions(+), 26 deletions(-) diff --git a/tasks/ui_framework.js b/tasks/ui_framework.js index fe7786351f74c..00c49ddd2967d 100644 --- 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 index fe58ef8c7a779..def18ecea3759 100644 --- 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 index 5ce7a9b43b9c4..f9a37d4328de5 100644 --- 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 index 26b3c79b2ceba..9a5341a30e0c7 100644 --- 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 index c82f3773392cc..d8d69eb8f9150 100644 --- 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 index a68210b67c3d0..24e1919048395 100644 --- 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';