feat: add className option to Notification.show (#10727)

Author: sissbruecker

packages/notification/src/vaadin-notification-mixin.js

@@ -229,6 +229,9 @@ export const NotificationMixin = (superClass) =>
       if (options && options.theme) {
         notification.setAttribute('theme', options.theme);
       }
+      if (options && options.className) {
+        notification.overlayClass = options.className;
+      }
       notification.renderer = renderer;
       document.body.appendChild(notification);
       notification.opened = true;

packages/notification/src/vaadin-notification.d.ts

@@ -16,6 +16,7 @@ export * from './vaadin-notification-mixin.js';
 
 export interface ShowOptions {
   assertive?: boolean;
+  className?: string;
   duration?: number;
   position?: NotificationPosition;
   theme?: string;
@@ -105,8 +106,9 @@ declare class Notification extends NotificationMixin(ElementMixin(HTMLElement))
    * ```ts
    * {
    *   assertive?: boolean
-   *   position?: string
+   *   className?: string
    *   duration?: number
+   *   position?: string
    *   theme?: string
    * }
    * ```

packages/notification/test/statichelper.test.js

@@ -52,6 +52,13 @@ describe('static helpers', () => {
     expect(notification.getAttribute('theme')).to.equal('error');
   });
 
+  it('show should set the overlayClass from className option', async () => {
+    const notification = Notification.show('Hello world', { className: 'my-custom-class' });
+    await nextFrame();
+    expect(notification.overlayClass).to.equal('my-custom-class');
+    expect(notification._card.classList.contains('my-custom-class')).to.be.true;
+  });
+
   it('show should work with a duration of zero', async () => {
     const notification = Notification.show('Hello world', { duration: 0 });
     await nextFrame();