[Bugfix] Remove bootstrap classes from Notifier (#31956)

src/legacy/core_plugins/table_vis/public/table_vis.html

@@ -1,7 +1,7 @@
 <div ng-controller="KbnTableVisController" class="table-vis">
   <div ng-if="!hasSomeRows && hasSomeRows !== null" class="visError">
     <div class="euiText euiText--extraSmall euiTextColor euiTextColor--subdued">
-      <icon type="'visualizeApp'" size="'m'" color="'subdued'" aria-hidden="true"></icon>
+      <icon type="'visualizeApp'" size="'m'" color="'subdued'"></icon>
 
       <br>
       <br>

src/legacy/ui/public/doc_table/doc_table.html

@@ -108,7 +108,7 @@
 
 <div ng-if="hits != null && !hits.length" class="kbnDocTable__error">
   <div class="euiText euiText--extraSmall euiTextColor euiTextColor--subdued">
-    <icon type="'visualizeApp'" size="'m'" color="'subdued'" aria-hidden="true"></icon>
+    <icon type="'visualizeApp'" size="'m'" color="'subdued'"></icon>
 
     <div class="euiSpacer euiSpacer--m"></div>
 

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');
     });

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;

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;
+      }
+    }
+  }
+}

src/legacy/ui/public/notify/partials/toaster.html

@@ -29,7 +29,7 @@
           <button
             type="button"
             ng-if="notif.stack && !notif.showStack"
-            class="kuiButton"
+            class="kuiButton kuiButton--small"
             ng-class="notif.getButtonClass()"
             ng-click="notif.cancelTimer(); notif.showStack = true"
             i18n-id="common.ui.notify.toaster.moreInfoButtonLabel"
@@ -39,7 +39,7 @@
           <button
             type="button"
             ng-if="notif.stack && notif.showStack"
-            class="kuiButton"
+            class="kuiButton kuiButton--small"
             ng-class="notif.getButtonClass()"
             ng-click="notif.showStack = false"
             i18n-id="common.ui.notify.toaster.lessInfoButtonLabel"
@@ -50,7 +50,7 @@
             data-test-subj="notifierDismissButton"
             type="button"
             ng-if="notif.accept"
-            class="kuiButton"
+            class="kuiButton kuiButton--small"
             ng-class="notif.getButtonClass()"
             ng-click="notif.accept()"
             i18n-id="common.ui.notify.toaster.okButtonLabel"
@@ -60,7 +60,7 @@
           <button
             type="button"
             ng-if="notif.address"
-            class="kuiButton"
+            class="kuiButton kuiButton--small"
             ng-class="notif.getButtonClass()"
             ng-click="notif.address()"
             i18n-id="common.ui.notify.toaster.fixItButtonLabel"
@@ -69,7 +69,7 @@
           </button>
           <button
             type="button"
-            class="kuiButton"
+            class="kuiButton kuiButton--small"
             ng-repeat="action in notif.customActions"
             ng-class="action.getButtonClass()"
             ng-click="action.callback()"

src/legacy/ui/public/styles/bootstrap/_overrides.less

@@ -235,29 +235,6 @@ input {
   .box-shadow(0 0 0 rgba(0,0,0,0));
 }
 
-// Indicators =================================================================
-
-.alert {
-
-  a,
-  .alert-link {
-    color: @white;
-    text-decoration: underline;
-  }
-
-  .close {
-    color: @white;
-    text-decoration: none;
-    opacity: 0.4;
-
-    &:hover,
-    &:focus {
-      color: @white;
-      opacity: 1;
-    }
-  }
-}
-
 // Progress bars ==============================================================
 
 .progress {