fix(ui5-toast): implement popover api to ensure toast is top level element

packages/main/cypress/specs/Toast.cy.ts

@@ -0,0 +1,43 @@
+import { html } from "lit";
+import "../../src/Toast.js";
+import "../../src/Button.js";
+import "../../src/List.js";
+import type Toast from "../../src/Toast.js";
+
+describe("Toast - test popover API", () => {
+	it("Should verify the toast has the popover attribute set to manual", () => {
+		cy.mount(html`
+		<ui5-toast id="toast" open placement="TopStart">TopStart</ui5-toast>`);
+		cy.get<Toast>("[ui5-toast]")
+			.should("have.attr", "popover", "manual")
+			.should("be.visible");
+	});
+
+	it("Toast should stay on top of list after scroll", () => {
+		cy.mount(html`
+		<ui5-toast id="toast" open duration="999999" placement="TopStart">TopStart</ui5-toast>
+		<ui5-list id="list" header-text="List with ListItemStandard" style="opacity: 0.7">
+			<ui5-li additional-text="3">List Item 1</ui5-li>
+			<ui5-li additional-text="2">List Item 2</ui5-li>
+			<ui5-li additional-text="1">List Item 3</ui5-li>
+		</ui5-list>`);
+
+		cy.get<Toast>("[ui5-toast]")
+			.should("have.attr", "popover", "manual")
+			.should("be.visible");
+
+		cy.get("#toast")
+			.then($toast => {
+				const toastRect = $toast[0].getBoundingClientRect();
+				cy.get("#list")
+					.then($list => {
+						const listRect = $list[0].getBoundingClientRect();
+						const isOverlapping = toastRect.right > listRect.left
+							&& toastRect.left < listRect.right
+							&& toastRect.bottom > listRect.top
+							&& toastRect.top < listRect.bottom;
+						expect(isOverlapping).to.be.true;
+					});
+			});
+	});
+});

packages/main/src/Toast.ts

@@ -187,6 +187,15 @@ class Toast extends UI5Element {
 		}
 	}
 
+	onAfterRendering() {
+		if (!this.hasAttribute("popover")) {
+			this.setAttribute("popover", "manual");
+		}
+		if (this.open) {
+			this.showPopover();
+		}
+	}
+
 	_onfocusin() {
 		if (this.focusable) {
 			this.focused = true;
@@ -214,6 +223,7 @@ class Toast extends UI5Element {
 		this.focusable = false;
 		this.focused = false;
 		this.fireDecoratorEvent("close");
+		this.hidePopover();
 	}
 
 	_onmouseover() {

packages/main/src/themes/Toast.css

@@ -17,6 +17,9 @@
 	text-overflow: ellipsis;
 	white-space: pre-line;
 	padding: 1rem;
+	inset: unset;
+    margin: 0;
+	border: none;
 }
 
 .ui5-toast-root {