From 75384404e8f2607247ff1ee4c9f2e57412ae04e1 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Wed, 27 Feb 2019 15:43:07 -0500 Subject: [PATCH] [Bugfix] Remove bootstrap classes from Notifier (#31956) --- .../table_vis/public/table_vis.html | 2 +- src/legacy/ui/public/doc_table/doc_table.html | 2 +- .../ui/public/notify/__tests__/notifier.js | 4 +- src/legacy/ui/public/notify/notifier.js | 24 +++------ .../ui/public/notify/partials/_toaster.scss | 51 +++++++++++++++---- .../ui/public/notify/partials/toaster.html | 10 ++-- .../public/styles/bootstrap/_overrides.less | 23 --------- 7 files changed, 59 insertions(+), 57 deletions(-) diff --git a/src/legacy/core_plugins/table_vis/public/table_vis.html b/src/legacy/core_plugins/table_vis/public/table_vis.html index d751db69f2ef..bfe623b95f86 100644 --- a/src/legacy/core_plugins/table_vis/public/table_vis.html +++ b/src/legacy/core_plugins/table_vis/public/table_vis.html @@ -1,7 +1,7 @@
- +

diff --git a/src/legacy/ui/public/doc_table/doc_table.html b/src/legacy/ui/public/doc_table/doc_table.html index 65f33f6ae542..497dfbb79780 100644 --- a/src/legacy/ui/public/doc_table/doc_table.html +++ b/src/legacy/ui/public/doc_table/doc_table.html @@ -108,7 +108,7 @@
- +
diff --git a/src/legacy/ui/public/notify/__tests__/notifier.js b/src/legacy/ui/public/notify/__tests__/notifier.js index a9ef04b90b48..6e4b101e59f6 100644 --- a/src/legacy/ui/public/notify/__tests__/notifier.js +++ b/src/legacy/ui/public/notify/__tests__/notifier.js @@ -132,8 +132,8 @@ describe('Notifier', function () { it('has css class helper functions', function () { expect(notify('error').getIconClass()).to.equal('fa fa-warning'); expect(notify('error').getButtonClass()).to.equal('kuiButton--danger'); - expect(notify('error').getAlertClassStack()).to.equal('kbnToast__stack alert alert-danger'); - expect(notify('error').getAlertClass()).to.equal('kbnToast alert alert-danger'); + expect(notify('error').getAlertClassStack()).to.equal('kbnToast kbnToast-isStack kbnToast--danger'); + expect(notify('error').getAlertClass()).to.equal('kbnToast kbnToast--danger'); expect(notify('error').getButtonGroupClass()).to.equal('kbnToast__controls'); expect(notify('error').getToastMessageClass()).to.equal('kbnToast__message'); }); diff --git a/src/legacy/ui/public/notify/notifier.js b/src/legacy/ui/public/notify/notifier.js index 560966e97b72..735681c8a48d 100644 --- a/src/legacy/ui/public/notify/notifier.js +++ b/src/legacy/ui/public/notify/notifier.js @@ -87,19 +87,11 @@ function restartNotifTimer(notif, cb) { const typeToButtonClassMap = { danger: 'kuiButton--danger', // NOTE: `error` type is internally named as `danger` - info: 'kuiButton--primary', -}; -const buttonHierarchyClass = index => { - if (index === 0) { - // first action: primary className - return 'kuiButton--primary'; - } - // subsequent actions: secondary/default className - return 'kuiButton--basic'; + info: 'kuiButton--secondary', }; const typeToAlertClassMap = { - danger: `alert-danger`, - info: `alert-info`, + danger: `kbnToast--danger`, + info: `kbnToast--info`, }; function add(notif, cb) { @@ -114,14 +106,14 @@ function add(notif, cb) { }); } else if (notif.customActions) { // wrap all of the custom functions in a close - notif.customActions = notif.customActions.map((action, index) => { + notif.customActions = notif.customActions.map((action) => { return { key: action.text, dataTestSubj: action.dataTestSubj, callback: closeNotif(notif, action.callback, action.text), getButtonClass() { const buttonTypeClass = typeToButtonClassMap[notif.type]; - return `${buttonHierarchyClass(index)} ${buttonTypeClass}`; + return `${buttonTypeClass}`; }, }; }); @@ -134,11 +126,11 @@ function add(notif, cb) { }; // decorate the notification with helper functions for the template - notif.getButtonClass = () => typeToButtonClassMap[notif.type]; - notif.getAlertClassStack = () => `kbnToast__stack alert ${typeToAlertClassMap[notif.type]}`; + notif.getButtonClass = () => `${typeToButtonClassMap[notif.type]}`; + notif.getAlertClassStack = () => `kbnToast kbnToast-isStack ${typeToAlertClassMap[notif.type]}`; notif.getIconClass = () => `fa fa-${notif.icon}`; notif.getToastMessageClass = () => 'kbnToast__message'; - notif.getAlertClass = () => `kbnToast alert ${typeToAlertClassMap[notif.type]}`; + notif.getAlertClass = () => `kbnToast ${typeToAlertClassMap[notif.type]}`; notif.getButtonGroupClass = () => 'kbnToast__controls'; let dup = null; diff --git a/src/legacy/ui/public/notify/partials/_toaster.scss b/src/legacy/ui/public/notify/partials/_toaster.scss index b3584daf9825..92dab77a3ae9 100644 --- a/src/legacy/ui/public/notify/partials/_toaster.scss +++ b/src/legacy/ui/public/notify/partials/_toaster.scss @@ -1,3 +1,7 @@ +// REDO Bootstrap alternatives to match EUI +@import '@elastic/eui/src/components/call_out/variables'; +@import '@elastic/eui/src/components/call_out/mixins'; + .kbnToaster__container { visibility: visible; width: 100%; @@ -17,16 +21,10 @@ border: none; } - .alert { - padding: $euiSizeXS $euiSize; - margin: 0; - border-radius: 0; - border: none; - } - .kbnToast { display: flex; align-items: center; + padding: $euiSizeXS $euiSize; > * { flex: 0 0 auto; @@ -38,13 +36,14 @@ } .kbnToast__message { + @include euiFontSizeS; text-overflow: ellipsis; flex: 1 1 auto; - line-height: normal; white-space: normal; } - .kbnToast__stack { + .kbnToast-isStack { + @include euiFontSizeS; padding-bottom: $euiSizeS; pre { @@ -61,3 +60,37 @@ display: flex; } } + +$kbnToastTypes: ( + info: 'primary', + warning: 'warning', + danger: 'danger', + success: 'success', +); + +@each $name, $color in $kbnToastTypes { + $foreground: euiCallOutColor($color, 'foreground'); + + .kbnToast--#{$name} { + background-color: euiCallOutColor($color, 'background'); + color: $foreground; + + // Fix dark mode contrast by forcing button colors to use the same foreground color + // Override hover/focus text color changes by using !important + @if ($name = 'danger') { + .kuiButton--danger, + .kuiButton--danger:hover { + color: $foreground !important; + border-color: $foreground; + } + } + + @if ($name = 'info') { + .kuiButton--secondary, + .kuiButton--secondary:hover { + color: $foreground !important; + border-color: $foreground; + } + } + } +} diff --git a/src/legacy/ui/public/notify/partials/toaster.html b/src/legacy/ui/public/notify/partials/toaster.html index 5d5b0ab72af8..24ceb8ec22a2 100644 --- a/src/legacy/ui/public/notify/partials/toaster.html +++ b/src/legacy/ui/public/notify/partials/toaster.html @@ -29,7 +29,7 @@