diff --git a/packages/main/cypress/specs/Toast.cy.ts b/packages/main/cypress/specs/Toast.cy.ts new file mode 100644 index 000000000000..f38efd1763ef --- /dev/null +++ b/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` + TopStart`); + cy.get("[ui5-toast]") + .should("have.attr", "popover", "manual") + .should("be.visible"); + }); + + it("Toast should stay on top of list after scroll", () => { + cy.mount(html` + TopStart + + List Item 1 + List Item 2 + List Item 3 + `); + + cy.get("[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; + }); + }); + }); +}); diff --git a/packages/main/src/Toast.ts b/packages/main/src/Toast.ts index d7424cf5042f..1deadbfec3ab 100644 --- a/packages/main/src/Toast.ts +++ b/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() { diff --git a/packages/main/src/themes/Toast.css b/packages/main/src/themes/Toast.css index 4117ac441102..9079e4993984 100644 --- a/packages/main/src/themes/Toast.css +++ b/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 {