Allow toasts in EuiGlobalToastList to override toastLifeTimeMs

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Allow toasts in `EuiGlobalToastList` to override `toastLifeTimeMs` ([#1720](https://github.com/elastic/eui/pull/1720))
+
 **Bug fixes**
 
 - Fixed `EuiSuperDatePicker` time selection jumping on focus ([#1704](https://github.com/elastic/eui/pull/1704))

src-docs/src/views/toast/toast_list.js

@@ -4,6 +4,7 @@ import React, {
 } from 'react';
 
 import {
+  EuiCode,
   EuiGlobalToastList,
   EuiLink,
 } from '../../../../src/components';
@@ -97,6 +98,16 @@ export default class extends Component {
           Sorry. We’ll try not to let it happen it again.
         </p>
       ),
+    }, {
+      title: 'Long toast',
+      color: 'warning',
+      iconType: 'clock',
+      toastLifeTimeMs: 15000,
+      text: (
+        <p>
+          This toast overrides the default <EuiCode>toastLifeTimeMs</EuiCode> value and will be around for 15 seconds.
+        </p>
+      ),
     }];
 
     return {

src/components/toast/global_toast_list.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { Timer } from '../../services/time';
+import { ICON_TYPES } from '../icon';
 import { EuiGlobalToastListItem } from './global_toast_list_item';
 import { EuiToast } from './toast';
 
@@ -32,7 +33,14 @@ export class EuiGlobalToastList extends Component {
 
   static propTypes = {
     className: PropTypes.string,
-    toasts: PropTypes.array,
+    toasts: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+      title: PropTypes.string,
+      text: PropTypes.node,
+      color: PropTypes.string,
+      iconType: PropTypes.oneOf(ICON_TYPES),
+      toastLifeTimeMs: PropTypes.number,
+    }).isRequired),
     dismissToast: PropTypes.func.isRequired,
     toastLifeTimeMs: PropTypes.number.isRequired,
   };
@@ -111,7 +119,7 @@ export class EuiGlobalToastList extends Component {
   scheduleToastForDismissal = (toast) => {
     // Start fading the toast out once its lifetime elapses.
     this.toastIdToTimerMap[toast.id] =
-      new Timer(this.dismissToast.bind(this, toast), this.props.toastLifeTimeMs);
+      new Timer(this.dismissToast.bind(this, toast), toast.toastLifeTimeMs != null ? toast.toastLifeTimeMs : this.props.toastLifeTimeMs);
   };
 
   dismissToast = (toast) => {
@@ -201,6 +209,7 @@ export class EuiGlobalToastList extends Component {
     const renderedToasts = toasts.map(toast => {
       const {
         text,
+        toastLifeTimeMs, // eslint-disable-line no-unused-vars
         ...rest
       } = toast;
 

src/components/toast/global_toast_list.test.js

@@ -99,6 +99,32 @@ describe('EuiGlobalToastList', () => {
           done();
         }, TOAST_LIFE_TIME_MS + TOAST_FADE_OUT_MS + 10);
       });
+
+      test('toastLifeTimeMs is overrideable by individidual toasts', done => {
+        const TOAST_LIFE_TIME_MS = 10;
+        const TOAST_LIFE_TIME_MS_OVERRIDE = 100;
+        const dismissToastSpy = sinon.spy();
+        mount(
+          <EuiGlobalToastList
+            toasts={[{
+              'data-test-subj': 'b',
+              id: 'b',
+              toastLifeTimeMs: TOAST_LIFE_TIME_MS_OVERRIDE
+            }]}
+            dismissToast={dismissToastSpy}
+            toastLifeTimeMs={TOAST_LIFE_TIME_MS}
+          />
+        );
+
+        // The callback is invoked once the toast fades from view.
+        setTimeout(() => {
+          expect(dismissToastSpy.called).toBe(false);
+        }, TOAST_LIFE_TIME_MS + TOAST_FADE_OUT_MS + 10);
+        setTimeout(() => {
+          expect(dismissToastSpy.called).toBe(true);
+          done();
+        }, TOAST_LIFE_TIME_MS_OVERRIDE + TOAST_FADE_OUT_MS + 10);
+      });
     });
   });
 });