Skip to content

Commit fdccbe3

Browse files
LidiyaGeorgievaLidiyaGeorgieva
authored
refactor(ui5-li-notification): change close event to non-bubbling (#11905)
fixes: #11756
1 parent 6579e7c commit fdccbe3

File tree

5 files changed

+150
-3
lines changed

5 files changed

+150
-3
lines changed

‎packages/fiori/cypress/specs/base/Events.cy.tsx

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import Dialog from "@ui5/webcomponents/dist/Dialog.js";
2+
import NotificationListItem from "../../../src/NotificationListItem.js";
3+
import NotificationList from "../../../src/NotificationList.js";
4+
import { setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
5+
import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
6+
7+
describe("Event bubbling", () => {
8+
before(() => {
9+
cy.wrap({ setAnimationMode })
10+
.invoke("setAnimationMode", AnimationMode.None);
11+
})
12+
13+
it("test bubbling events", () => {
14+
cy.mount(
15+
<div id="app">
16+
<Dialog id="myDialog" headerText="Dialog">
17+
<NotificationList id="myNotList" header-text="Notifications">
18+
<NotificationListItem id="myNotItem" show-close
19+
title-text="Single line notification."
20+
state="Information">
21+
<span slot="footnotes">Office Notifications</span>
22+
<span slot="footnotes">3 Days</span>
23+
</NotificationListItem>
24+
</NotificationList>
25+
</Dialog>
26+
</div>
27+
);
28+
29+
cy.get("#app")
30+
.as("app");
31+
32+
cy.get("[ui5-dialog]")
33+
.as("dialog");
34+
35+
cy.get("[ui5-notification-list]")
36+
.as("notificationList");
37+
38+
cy.get("[ui5-li-notification]")
39+
.as("notificationListItem");
40+
41+
cy.get("@app")
42+
.then(app => {
43+
app.get(0).addEventListener("ui5-close", cy.stub().as("appClosed"));
44+
});
45+
46+
cy.get("@dialog")
47+
.then(dialog => {
48+
dialog.get(0).addEventListener("ui5-close", cy.stub().as("dialogClosed"));
49+
});
50+
51+
cy.get("@notificationList")
52+
.then(notificationList => {
53+
notificationList.get(0).addEventListener("ui5-close", cy.stub().as("notListClosed"));
54+
});
55+
56+
cy.get("@notificationListItem")
57+
.then(notificationListItem => {
58+
notificationListItem.get(0).addEventListener("ui5-close", cy.stub().as("notListItemClosed"));
59+
});
60+
61+
cy.get("@dialog").invoke("attr", "open", true);
62+
63+
// act - close NotificationListItem
64+
cy.get("@notificationListItem")
65+
.shadow()
66+
.find(".ui5-nli-close-btn")
67+
.realClick();
68+
69+
// assert - the close event of the NotificationListItem does not bubble
70+
cy.get("@notListItemClosed")
71+
.should("have.been.calledOnce");
72+
cy.get("@notListClosed")
73+
.should("have.been.not.called");
74+
cy.get("@dialogClosed")
75+
.should("have.been.not.called");
76+
cy.get("@appClosed")
77+
.should("have.been.not.called");
78+
});
79+
});

‎packages/fiori/src/NotificationListItem.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,14 +145,22 @@ const ICON_PER_STATUS_DESIGN = {
145145
* @param {HTMLElement} item the closed item.
146146
* @public
147147
*/
148-
@event("close", {
148+
@event("close")
149+
150+
/**
151+
* Fired when the `Close` button is pressed.
152+
* @param {HTMLElement} item the closed item.
153+
* @private
154+
*/
155+
@event("_close", {
149156
bubbles: true,
150157
})
151158

152159
class NotificationListItem extends NotificationListItemBase {
153160
eventDetails!: NotificationListItemBase["eventDetails"] & {
154161
_press: NotificationListItemPressEventDetail,
155162
close: NotificationListItemCloseEventDetail,
163+
_close: NotificationListItemCloseEventDetail,
156164
}
157165
/**
158166
* Defines if the `titleText` and `description` should wrap,
@@ -499,6 +507,7 @@ class NotificationListItem extends NotificationListItemBase {
499507

500508
if (isDelete(e)) {
501509
this.fireDecoratorEvent("close", { item: this });
510+
this.fireDecoratorEvent("_close", { item: this });
502511
}
503512

504513
if (isF10Shift(e)) {
@@ -512,6 +521,7 @@ class NotificationListItem extends NotificationListItemBase {
512521

513522
_onBtnCloseClick() {
514523
this.fireDecoratorEvent("close", { item: this });
524+
this.fireDecoratorEvent("_close", { item: this });
515525
}
516526

517527
_onBtnMenuClick() {

‎packages/fiori/test/pages/EventBubbling.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6+
<title>Event Bubbling for Fiori</title>
7+
<script src="%VITE_BUNDLE_PATH%" type="module"></script>
8+
</head>
9+
10+
<body>
11+
<div id="app">
12+
<ui5-dialog id="myDialog" header-text="Dialog With Dropdowns" open>
13+
<ui5-notification-list id="myNotList" header-text="Notifications">
14+
<ui5-li-notification id="myNotItem" show-close
15+
title-text="Single line notification."
16+
state="Information">
17+
<span slot="footnotes">Office Notifications</span>
18+
<span slot="footnotes">3 Days</span>
19+
</ui5-li-notification>
20+
</ui5-notification-list>
21+
</ui5-dialog>
22+
</div>
23+
</body>
24+
25+
<script>
26+
app.addEventListener("close", function(e) {
27+
console.log("[X] App on close")
28+
});
29+
30+
app.addEventListener("item-close", function(e) {
31+
console.log("App on item-close")
32+
});
33+
34+
myDialog.addEventListener("close", function(e) {
35+
console.log("[X] Dialog on close")
36+
});
37+
38+
myDialog.addEventListener("item-close", function(e) {
39+
console.log("Dialog on item-close")
40+
});
41+
42+
myNotList.addEventListener("close", function(e) {
43+
console.log("[X] Notification List on close")
44+
});
45+
46+
myNotList.addEventListener("item-close", function(e) {
47+
console.log("Notification List on item-close")
48+
});
49+
50+
myNotItem.addEventListener("close", function(e) {
51+
console.log("Notification Item on close")
52+
});
53+
54+
btnOpen.addEventListener("click", function(e) {
55+
myMenu.open = true;
56+
});
57+
</script>
58+
</html>

‎packages/main/src/ListTemplate.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default function ListTemplate(this: List) {
1313
onDrop={this._ondrop}
1414
onDragLeave={this._ondragleave}
1515
// events bubbling from slotted items
16-
onui5-close={this.onItemClose}
16+
onui5-_close={this.onItemClose}
1717
onui5-toggle={this.onItemToggle}
1818
onui5-request-tabindex-change={this.onItemTabIndexChange}
1919
onui5-_focused={this.onItemFocused}

‎packages/main/test/pages/EventBubbling.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6-
<title>Event Bubbling</title>
6+
<title>Event Bubbling for Main</title>
77
<script src="%VITE_BUNDLE_PATH%" type="module"></script>
88
</head>
99

0 commit comments

Comments
 (0)