refactor(ui5-shellbar-item): rename "item-click" to "click" (#4282)

Change event name from "item-click" to "click" as it belongs to the ShellBarItem, not the ShellBar and using "item" in the event's name does not make sense and this is also the rule we used throughout the major API change activity in RC.15. BREAKING CHANGE: ShellBarItem's event "item-click" has been renamed to "click".
SAP · Nov 8, 2021 · 4cd86b1 · 4cd86b1
1 parent 3289da4
commit 4cd86b1
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/packages/fiori/src/ShellBar.js b/packages/fiori/src/ShellBar.js
@@ -729,7 +729,7 @@ class ShellBar extends UI5Element {
 				return this.shadowRoot.querySelector(`#${refItemId}`);
 			});
 
-			const prevented = !shellbarItem.fireEvent("item-click", { targetRef: event.target }, true);
+			const prevented = !shellbarItem.fireEvent("click", { targetRef: event.target }, true);
 
 			this._defaultItemPressPrevented = prevented;
 		}

diff --git a/packages/fiori/src/ShellBarItem.js b/packages/fiori/src/ShellBarItem.js
@@ -43,12 +43,13 @@ const metadata = {
 		/**
 		 * Fired, when the item is pressed.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBarItem#item-click
+		 * @event sap.ui.webcomponents.fiori.ShellBarItem#click
 		 * @allowPreventDefault
 		 * @param {HTMLElement} targetRef DOM ref of the clicked element
 		 * @public
+		 * @native
 		 */
-		"item-click": {
+		"click": {
 			detail: {
 				targetRef: { type: HTMLElement },
 			},

diff --git a/packages/fiori/test/pages/ShellBar.html b/packages/fiori/test/pages/ShellBar.html
@@ -213,6 +213,8 @@ <h3>ShellBar in Compact</h3>
 		<ui5-shellbar-item icon="discussion" count="2" id="test-invalidation-item"/>
 	</ui5-shellbar>
 
+	<ui5-toast id="wcToastTC">Custom Action Fired</ui5-toast>
+
 	<script>
 		mySearch.addEventListener("suggestionItemSelect", function (event) {
 			 console.log(event);
@@ -269,14 +271,14 @@ <h3>ShellBar in Compact</h3>
 		});
 
 		Array.from(document.querySelectorAll("ui5-shellbar-item")).forEach(function(item) {
-			item.addEventListener("item-click", function(event) {
-				console.log(event.detail.targetRef);
+			item.addEventListener("ui5-click", function(event) {
+				wcToastTC.show();
 			});
 		});
 
 		["disc", "call"].forEach(function(id) {
 			var currenItem = window[id][0] || window[id];
-			currenItem.addEventListener("ui5-itemClick", function(event) {
+			currenItem.addEventListener("ui5-click", function(event) {
 				event.preventDefault();
 				window["press-input"].value = event.target.id;
 				window["custom-item-popover"].showAt(event.detail.targetRef);