refactor: include notification container into the overlay stack (#8198)

Author: web-padawan

packages/notification/package.json

@@ -41,6 +41,7 @@
     "@polymer/polymer": "^3.0.0",
     "@vaadin/component-base": "24.6.0-beta1",
     "@vaadin/lit-renderer": "24.6.0-beta1",
+    "@vaadin/overlay": "24.6.0-beta1",
     "@vaadin/vaadin-lumo-styles": "24.6.0-beta1",
     "@vaadin/vaadin-material-styles": "24.6.0-beta1",
     "@vaadin/vaadin-themable-mixin": "24.6.0-beta1",

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

@@ -1,5 +1,6 @@
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
+import type { OverlayStackMixinClass } from '@vaadin/overlay/src/vaadin-overlay-stack-mixin.js';
 import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import type { Notification } from './vaadin-notification.js';
 
@@ -21,7 +22,7 @@ export type NotificationRenderer = (root: HTMLElement, notification: Notificatio
  */
 export declare function NotificationContainerMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<NotificationContainerMixinClass> & T;
+): Constructor<NotificationContainerMixinClass> & Constructor<OverlayStackMixinClass> & T;
 
 export declare class NotificationContainerMixinClass {
   /**

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

@@ -8,15 +8,17 @@ import { isTemplateResult } from 'lit/directive-helpers.js';
 import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
+import { OverlayStackMixin } from '@vaadin/overlay/src/vaadin-overlay-stack-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 
 /**
  * A mixin providing common notification container functionality.
  *
  * @polymerMixin
+ * @mixes OverlayStackMixin
  */
 export const NotificationContainerMixin = (superClass) =>
-  class extends superClass {
+  class extends OverlayStackMixin(superClass) {
     static get properties() {
       return {
         /**
@@ -362,6 +364,8 @@ export const NotificationMixin = (superClass) =>
         return;
       }
 
+      this._container.bringToFront();
+
       this._card.slot = this.position;
       if (this._container.firstElementChild && /top/u.test(this.position)) {
         this._container.insertBefore(this._card, this._container.firstElementChild);

packages/notification/test/notification.common.js

@@ -162,6 +162,13 @@ describe('vaadin-notification', () => {
         expect(container._detectIosNavbar.called).to.be.true;
         container._detectIosNavbar.restore();
       });
+
+      it('should bring to front on notification open ', () => {
+        notification.opened = false;
+        const spy = sinon.spy(container, 'bringToFront');
+        notification.opened = true;
+        expect(spy).to.be.calledOnce;
+      });
     });
   });
 

packages/overlay/src/vaadin-overlay-stack-mixin.js

@@ -69,7 +69,7 @@ export const OverlayStackMixin = (superClass) =>
 
       // Disable pointer events in other attached overlays
       getAttachedInstances().forEach((el) => {
-        if (el !== this) {
+        if (el !== this && el.$.overlay) {
           el.$.overlay.style.pointerEvents = 'none';
         }
       });
@@ -93,7 +93,9 @@ export const OverlayStackMixin = (superClass) =>
           // Skip the current instance
           continue;
         }
-        el.$.overlay.style.removeProperty('pointer-events');
+        if (el.$.overlay) {
+          el.$.overlay.style.removeProperty('pointer-events');
+        }
         if (!el.modeless) {
           // Stop after the last modal
           break;

test/integration/notification-overlay.test.js

@@ -0,0 +1,64 @@
+import { expect } from '@vaadin/chai-plugins';
+import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import '@vaadin/notification';
+import '@vaadin/popover';
+import '@vaadin/tooltip';
+
+describe('notification and overlays', () => {
+  describe('notification and tooltip', () => {
+    beforeEach(async () => {
+      const wrapper = fixtureSync(`
+        <div>
+          <vaadin-notification></vaadin-notification>
+          <div id="target"></div>
+          <vaadin-tooltip for="target" text="Tooltip" manual></vaadin-tooltip>
+        </div>
+      `);
+      const notification = wrapper.querySelector('vaadin-notification');
+      const tooltip = wrapper.querySelector('vaadin-tooltip');
+      notification.opened = true;
+      tooltip.opened = true;
+      await nextRender();
+    });
+
+    it('should show tooltips above notifications', () => {
+      const notificationContainer = document.querySelector('vaadin-notification-container');
+      const tooltipOverlay = document.querySelector('vaadin-tooltip-overlay');
+
+      const notificationZIndex = parseInt(getComputedStyle(notificationContainer).zIndex);
+      const tooltipZIndex = parseInt(getComputedStyle(tooltipOverlay).zIndex);
+
+      expect(tooltipZIndex).to.be.above(notificationZIndex);
+    });
+  });
+
+  describe('notification and popover', () => {
+    beforeEach(async () => {
+      const wrapper = fixtureSync(`
+        <div>
+          <vaadin-notification></vaadin-notification>
+          <div id="target"></div>
+          <vaadin-popover for="target" manual></vaadin-popover>
+        </div>
+      `);
+      const notification = wrapper.querySelector('vaadin-notification');
+      const popover = wrapper.querySelector('vaadin-popover');
+      popover.renderer = (root) => {
+        root.textContent = 'Popover content';
+      };
+      notification.opened = true;
+      popover.opened = true;
+      await nextRender();
+    });
+
+    it('should show popovers above notifications', () => {
+      const notificationContainer = document.querySelector('vaadin-notification-container');
+      const popoverOverlay = document.querySelector('vaadin-popover-overlay');
+
+      const notificationZIndex = parseInt(getComputedStyle(notificationContainer).zIndex);
+      const popoverZIndex = parseInt(getComputedStyle(popoverOverlay).zIndex);
+
+      expect(popoverZIndex).to.be.above(notificationZIndex);
+    });
+  });
+});