From 641c848cc152ffb01878610a667b38c3cdf660a0 Mon Sep 17 00:00:00 2001 From: Evdokia Yordanova Date: Thu, 14 Nov 2024 02:09:30 +0200 Subject: [PATCH 01/10] fix(ui5-toast): implement popover api to ensure toast is top level element --- packages/main/src/Toast.ts | 1 + packages/main/src/themes/Toast.css | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/main/src/Toast.ts b/packages/main/src/Toast.ts index d7424cf5042f..ab10687b9dab 100644 --- a/packages/main/src/Toast.ts +++ b/packages/main/src/Toast.ts @@ -236,6 +236,7 @@ class Toast extends UI5Element { } onEnterDOM(): void { + this.setAttribute("popover", "manual"); this.addEventListener("focusin", this._onfocusinFn); this.addEventListener("focusout", this._onfocusoutFn); this.addEventListener("keydown", this._onkeydownFn); diff --git a/packages/main/src/themes/Toast.css b/packages/main/src/themes/Toast.css index 4117ac441102..3f40fd7a0b1d 100644 --- a/packages/main/src/themes/Toast.css +++ b/packages/main/src/themes/Toast.css @@ -2,7 +2,7 @@ font-family: "72override", var(--sapFontFamily); color: var(--sapList_TextColor); font-size: var(--sapFontSize); - position: fixed; + position: fixed !important; display: none; box-sizing: border-box; max-width: 15rem; @@ -17,6 +17,9 @@ text-overflow: ellipsis; white-space: pre-line; padding: 1rem; + inset: unset; + margin: 0; + border: none; } .ui5-toast-root { From 8c5734b39f2d5ae09797e94f78bb831c0c23bf4a Mon Sep 17 00:00:00 2001 From: Evdokia Yordanova Date: Fri, 22 Nov 2024 00:31:50 +0200 Subject: [PATCH 02/10] fix(ui5-toast): implement popover api to ensure toast is top level element add show/hide func of popover api --- packages/main/src/Toast.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/main/src/Toast.ts b/packages/main/src/Toast.ts index ab10687b9dab..e9826e701e8b 100644 --- a/packages/main/src/Toast.ts +++ b/packages/main/src/Toast.ts @@ -169,6 +169,7 @@ class Toast extends UI5Element { if (this.open) { openedToasts.pop(); openedToasts.push(this); + this.showPopover(); } requestAnimationFrame(() => { @@ -214,6 +215,7 @@ class Toast extends UI5Element { this.focusable = false; this.focused = false; this.fireDecoratorEvent("close"); + this.hidePopover(); } _onmouseover() { From a07ea937ac9eed351f46de2695356060170019ba Mon Sep 17 00:00:00 2001 From: Evdokia Yordanova Date: Thu, 28 Nov 2024 09:38:23 +0200 Subject: [PATCH 03/10] fix(ui5-toast): implement popover api to ensure toast is top level element --- packages/main/cypress/specs/Toast.cy.ts | 43 +++++++++++++++++++++++++ packages/main/src/Toast.ts | 4 ++- 2 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 packages/main/cypress/specs/Toast.cy.ts diff --git a/packages/main/cypress/specs/Toast.cy.ts b/packages/main/cypress/specs/Toast.cy.ts new file mode 100644 index 000000000000..38189774c168 --- /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; + }); + }); + }); +}); \ No newline at end of file diff --git a/packages/main/src/Toast.ts b/packages/main/src/Toast.ts index e9826e701e8b..8418adc7ae9b 100644 --- a/packages/main/src/Toast.ts +++ b/packages/main/src/Toast.ts @@ -166,6 +166,9 @@ class Toast extends UI5Element { } onBeforeRendering() { + if (!this.hasAttribute("popover")) { + this.setAttribute("popover", "manual"); + } if (this.open) { openedToasts.pop(); openedToasts.push(this); @@ -238,7 +241,6 @@ class Toast extends UI5Element { } onEnterDOM(): void { - this.setAttribute("popover", "manual"); this.addEventListener("focusin", this._onfocusinFn); this.addEventListener("focusout", this._onfocusoutFn); this.addEventListener("keydown", this._onkeydownFn); From f5d03386a953e48a0c197da6564651e08b970a71 Mon Sep 17 00:00:00 2001 From: Evdokia Yordanova Date: Thu, 28 Nov 2024 10:20:34 +0200 Subject: [PATCH 04/10] fix(ui5-toast): implement popover api to ensure toast is top level element update lint --- packages/main/cypress/specs/Toast.cy.ts | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/packages/main/cypress/specs/Toast.cy.ts b/packages/main/cypress/specs/Toast.cy.ts index 38189774c168..28e7a9b815d6 100644 --- a/packages/main/cypress/specs/Toast.cy.ts +++ b/packages/main/cypress/specs/Toast.cy.ts @@ -5,13 +5,12 @@ 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', () => { + 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'); + .should("have.attr", "popover", "manual") + .should("be.visible"); }); it("Toast should stay on top of list after scroll", () => { @@ -24,20 +23,20 @@ describe("Toast - test popover API", () => { `); cy.get("[ui5-toast]") - .should('have.attr', 'popover', 'manual') - .should('be.visible'); + .should("have.attr", "popover", "manual") + .should("be.visible"); - cy.get('#toast').then(($toast) => { + cy.get("#toast").then(($toast) => { const toastRect = $toast[0].getBoundingClientRect(); - cy.get('#list').then(($list) => { + 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; + toastRect.right > listRect.left + && toastRect.left < listRect.right + && toastRect.bottom > listRect.top + && toastRect.top < listRect.bottom; expect(isOverlapping).to.be.true; }); }); }); -}); \ No newline at end of file +}) From 74766e8d3320f89fdcbbde897ff5313cf23c0269 Mon Sep 17 00:00:00 2001 From: Evdokia Yordanova Date: Thu, 28 Nov 2024 10:50:14 +0200 Subject: [PATCH 05/10] fix(ui5-toast): implement popover api to ensure toast is top level element fix lint errors --- packages/main/cypress/specs/Toast.cy.ts | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/main/cypress/specs/Toast.cy.ts b/packages/main/cypress/specs/Toast.cy.ts index 28e7a9b815d6..f38efd1763ef 100644 --- a/packages/main/cypress/specs/Toast.cy.ts +++ b/packages/main/cypress/specs/Toast.cy.ts @@ -26,17 +26,18 @@ describe("Toast - test popover API", () => { .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; + 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; + }); }); - }); }); -}) +}); From a40a481fe42c8847b1116033f8292f70516d3c9e Mon Sep 17 00:00:00 2001 From: Evdokia Yordanova Date: Mon, 2 Dec 2024 09:12:55 +0200 Subject: [PATCH 06/10] fix(ui5-toast): implement popover api to ensure toast is top level element --- packages/main/src/Toast.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/main/src/Toast.ts b/packages/main/src/Toast.ts index 8418adc7ae9b..2fa0b6e8b9fb 100644 --- a/packages/main/src/Toast.ts +++ b/packages/main/src/Toast.ts @@ -241,6 +241,7 @@ class Toast extends UI5Element { } onEnterDOM(): void { + this.setAttribute("popover", "manual"); this.addEventListener("focusin", this._onfocusinFn); this.addEventListener("focusout", this._onfocusoutFn); this.addEventListener("keydown", this._onkeydownFn); From 7241270620b696d358820fb8744742bd719c17eb Mon Sep 17 00:00:00 2001 From: Evdokia Yordanova Date: Mon, 2 Dec 2024 10:02:58 +0200 Subject: [PATCH 07/10] fix(ui5-toast): implement popover api to ensure toast is top level element --- packages/main/src/Toast.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/main/src/Toast.ts b/packages/main/src/Toast.ts index 2fa0b6e8b9fb..3bbe6a4b4301 100644 --- a/packages/main/src/Toast.ts +++ b/packages/main/src/Toast.ts @@ -166,13 +166,9 @@ class Toast extends UI5Element { } onBeforeRendering() { - if (!this.hasAttribute("popover")) { - this.setAttribute("popover", "manual"); - } if (this.open) { openedToasts.pop(); openedToasts.push(this); - this.showPopover(); } requestAnimationFrame(() => { @@ -191,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; From 1ecae4af8b944bbd5a228504e8b6b5731917c377 Mon Sep 17 00:00:00 2001 From: Evdokia Yordanova Date: Mon, 2 Dec 2024 10:10:25 +0200 Subject: [PATCH 08/10] fix(ui5-toast): implement popover api to ensure toast is top level element --- packages/main/test/pages/Toast.html | 64 +---------------------------- 1 file changed, 2 insertions(+), 62 deletions(-) diff --git a/packages/main/test/pages/Toast.html b/packages/main/test/pages/Toast.html index 0588a11a49ae..c9e0fbcd9d3b 100644 --- a/packages/main/test/pages/Toast.html +++ b/packages/main/test/pages/Toast.html @@ -21,67 +21,7 @@ Show TopStart Toast TopStart -
- - - Show TopCenter Toast - TopCenter - -
- - - Show TopEnd Toast - TopEnd - -
- - - Show MiddleStart Toast - MiddleStart - -
- - - Show MiddleCenter Toast - MiddleCenter - -
- - - Show MiddleEnd Toast - MiddleEnd - -
- - - Show BottomStart Toast - BottomStart - -
- - - Show BottomCenter Toast - BottomCenter - -
- - - Show BottomEnd Toast - BottomEnd - -
- - - Show Styled Toast - -
- Styled Toast -
- UNDO - DISMISS -
-
- + TopStart @@ -89,7 +29,7 @@ Close Dialog Open Toast - Toast + Toast

Test Dialog and Toast

From 8682f1fae94e24c1db985a8e7a2f2d517427ffa3 Mon Sep 17 00:00:00 2001 From: Evdokia Yordanova Date: Mon, 2 Dec 2024 10:14:43 +0200 Subject: [PATCH 09/10] fix(ui5-toast): implement popover api to ensure toast is top level element Revert html page and fix lint --- packages/main/src/Toast.ts | 2 +- packages/main/test/pages/Toast.html | 64 ++++++++++++++++++++++++++++- 2 files changed, 63 insertions(+), 3 deletions(-) diff --git a/packages/main/src/Toast.ts b/packages/main/src/Toast.ts index 3bbe6a4b4301..71270722fa1b 100644 --- a/packages/main/src/Toast.ts +++ b/packages/main/src/Toast.ts @@ -191,7 +191,7 @@ class Toast extends UI5Element { if (!this.hasAttribute("popover")) { this.setAttribute("popover", "manual"); } - if(this.open) { + if (this.open) { this.showPopover(); } } diff --git a/packages/main/test/pages/Toast.html b/packages/main/test/pages/Toast.html index c9e0fbcd9d3b..0588a11a49ae 100644 --- a/packages/main/test/pages/Toast.html +++ b/packages/main/test/pages/Toast.html @@ -21,7 +21,67 @@ Show TopStart Toast TopStart - TopStart +
+ + + Show TopCenter Toast + TopCenter + +
+ + + Show TopEnd Toast + TopEnd + +
+ + + Show MiddleStart Toast + MiddleStart + +
+ + + Show MiddleCenter Toast + MiddleCenter + +
+ + + Show MiddleEnd Toast + MiddleEnd + +
+ + + Show BottomStart Toast + BottomStart + +
+ + + Show BottomCenter Toast + BottomCenter + +
+ + + Show BottomEnd Toast + BottomEnd + +
+ + + Show Styled Toast + +
+ Styled Toast +
+ UNDO + DISMISS +
+
+ @@ -29,7 +89,7 @@ Close Dialog Open Toast - Toast + Toast

Test Dialog and Toast

From 861d7c7efbc89a147767cb47bc3cb1a04da65283 Mon Sep 17 00:00:00 2001 From: Evdokia Yordanova Date: Thu, 5 Dec 2024 00:05:20 +0200 Subject: [PATCH 10/10] fix(ui5-toast): remove popover attribute from on enter dom --- packages/main/src/Toast.ts | 1 - packages/main/src/themes/Toast.css | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/main/src/Toast.ts b/packages/main/src/Toast.ts index 71270722fa1b..1deadbfec3ab 100644 --- a/packages/main/src/Toast.ts +++ b/packages/main/src/Toast.ts @@ -246,7 +246,6 @@ class Toast extends UI5Element { } onEnterDOM(): void { - this.setAttribute("popover", "manual"); this.addEventListener("focusin", this._onfocusinFn); this.addEventListener("focusout", this._onfocusoutFn); this.addEventListener("keydown", this._onkeydownFn); diff --git a/packages/main/src/themes/Toast.css b/packages/main/src/themes/Toast.css index 3f40fd7a0b1d..9079e4993984 100644 --- a/packages/main/src/themes/Toast.css +++ b/packages/main/src/themes/Toast.css @@ -2,7 +2,7 @@ font-family: "72override", var(--sapFontFamily); color: var(--sapList_TextColor); font-size: var(--sapFontSize); - position: fixed !important; + position: fixed; display: none; box-sizing: border-box; max-width: 15rem;