feat: add theme support to notification static helper (#2849)

vaadin · Oct 13, 2021 · f9d5ea2 · f9d5ea2
1 parent 489fa59
commit f9d5ea2
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 1 deletion.
diff --git a/packages/notification/src/vaadin-notification.d.ts b/packages/notification/src/vaadin-notification.d.ts
@@ -35,6 +35,7 @@ export interface NotificationEventMap extends HTMLElementEventMap, NotificationC
 export interface ShowOptions {
   duration?: number;
   position?: NotificationPosition;
+  theme?: string;
 }
 
 /**
@@ -166,6 +167,7 @@ declare class Notification extends ThemePropertyMixin(ElementMixin(HTMLElement))
    * {
    *   position?: string
    *   duration?: number
+   *   theme?: string
    * }
    * ```
    *

diff --git a/packages/notification/src/vaadin-notification.js b/packages/notification/src/vaadin-notification.js
@@ -473,6 +473,7 @@ class Notification extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
    * {
    *   position?: string
    *   duration?: number
+   *   theme?: string
    * }
    * ```
    *
@@ -504,6 +505,9 @@ class Notification extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
     if (options && options.position) {
       notification.position = options.position;
     }
+    if (options && options.theme) {
+      notification.setAttribute('theme', options.theme);
+    }
     notification.renderer = renderer;
     document.body.appendChild(notification);
     notification.opened = true;

diff --git a/packages/notification/test/statichelper.test.js b/packages/notification/test/statichelper.test.js
@@ -35,6 +35,11 @@ describe('static helpers', () => {
     expect(notification.position).to.equal('top-center');
   });
 
+  it('show should set the given theme attribute', () => {
+    const notification = Notification.show('Hello world', { theme: 'error' });
+    expect(notification.getAttribute('theme')).to.equal('error');
+  });
+
   it('show should work with a duration of zero', () => {
     const notification = Notification.show('Hello world', { duration: 0 });
     expect(notification.duration).to.equal(0);

diff --git a/packages/notification/test/typings/notification.types.ts b/packages/notification/test/typings/notification.types.ts
@@ -1,6 +1,6 @@
 import '../../vaadin-notification.js';
 
-import { NotificationOpenedChangedEvent } from '../../vaadin-notification.js';
+import { Notification, NotificationOpenedChangedEvent } from '../../vaadin-notification.js';
 
 const assertType = <TExpected>(value: TExpected) => value;
 
@@ -10,3 +10,5 @@ notification.addEventListener('opened-changed', (event) => {
   assertType<NotificationOpenedChangedEvent>(event);
   assertType<boolean>(event.detail.value);
 });
+
+Notification.show('Hello world', { position: 'middle', duration: 7000, theme: 'error' });