diff --git a/src/lib/Notification.js b/src/lib/Notification.js index 0ad740b52..999359bce 100644 --- a/src/lib/Notification.js +++ b/src/lib/Notification.js @@ -43,9 +43,10 @@ class Notification { * @public * @param {string} message - Notification message * @param {string} [buttonText] - Optional text to show in button + * @param {boolean} persist - Should the notification show until dismissal or respect the timeout * @return {void} */ - show(message, buttonText) { + show(message, buttonText, persist = false) { this.messageEl.textContent = message; if (buttonText) { @@ -58,7 +59,7 @@ class Notification { this.notificationEl.focus(); // Hide notification automatically after a delay - this.timeout = setTimeout(this.hide.bind(this), HIDE_TIMEOUT_MS); + this.timeout = persist ? null : setTimeout(this.hide.bind(this), HIDE_TIMEOUT_MS); } /** diff --git a/src/lib/__tests__/Notification-test.js b/src/lib/__tests__/Notification-test.js index 40981ce95..6ce8d05f4 100644 --- a/src/lib/__tests__/Notification-test.js +++ b/src/lib/__tests__/Notification-test.js @@ -1,7 +1,10 @@ /* eslint-disable no-unused-expressions */ import Notification from '../Notification'; +const HIDE_TIMEOUT_MS = 5000; // 5s + let notif; +let clock; const sandbox = sinon.sandbox.create(); @@ -41,6 +44,12 @@ describe('lib/Notification', () => { describe('show()', () => { beforeEach(() => { sandbox.stub(window, 'setTimeout'); + sandbox.stub(notif, 'hide'); + clock = sinon.useFakeTimers(); + }); + + afterEach(() => { + clock.restore(); }); it('should properly show the notification', () => { @@ -61,6 +70,18 @@ describe('lib/Notification', () => { assert.equal(notif.messageEl.textContent, 'test'); assert.equal(notif.buttonEl.textContent, __('notification_button_default_text')); }); + + it('should hide after the timeout', () => { + notif.show('test', 'test'); + clock.tick(HIDE_TIMEOUT_MS + 1); + expect(notif.hide).to.be.called; + }); + + it('should not hide after the timeout if the notification is set to persist', () => { + notif.show('test', 'test', true); + clock.tick(HIDE_TIMEOUT_MS + 1); + expect(notif.hide).to.not.be.called; + }); }); describe('hide()', () => { diff --git a/src/lib/_common.scss b/src/lib/_common.scss index 8f08a2b61..6f2b9b81c 100644 --- a/src/lib/_common.scss +++ b/src/lib/_common.scss @@ -161,6 +161,10 @@ $header-height: 48px; visibility: hidden; } +.bp-notifications-wrapper { + position: absolute; // Override _boxui.scss because Preview cannot assume taking up the full viewport +} + .bp-has-header .bp-notifications-wrapper { top: 48px; }