refactor: remove press event in favour of click

packages/main/src/Button.js

@@ -118,16 +118,16 @@ const metadata = {
 	events: /** @lends sap.ui.webcomponents.main.Button.prototype */ {
 
 		/**
-		 * Fired when the <code>ui5-button</code> is pressed either with a
-		 * click/tap or by using the Enter or Space key.
+		 * Fired when the <code>ui5-button</code> is activated either with a
+		 * mouse/tap or by using the Enter or Space key.
 		 * <br><br>
 		 * <b>Note:</b> The event will not be fired if the <code>disabled</code>
 		 * property is set to <code>true</code>.
 		 *
 		 * @event
 		 * @public
 		 */
-		press: {},
+		click: {},
 	},
 };
 

packages/main/src/Card.js

@@ -90,15 +90,15 @@ const metadata = {
 	events: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
 
 		/**
-		 * Fired when the <code>ui5-card</code> header is pressed
-		 * by click/tap or by using the Enter or Space key.
+		 * Fired when the <code>ui5-card</code> header is activated
+		 * by mouse/tap or by using the Enter or Space key.
 		 * <br><br>
 		 * <b>Note:</b> The event would be fired only if the <code>headerInteractive</code> property is set to true.
 		 * @event
 		 * @public
 		 * @since 0.10.0
 		 */
-		headerPress: {},
+		headerClick: {},
 	},
 };
 
@@ -181,7 +181,7 @@ class Card extends UI5Element {
 
 	_headerClick() {
 		if (this.headerInteractive) {
-			this.fireEvent("headerPress");
+			this.fireEvent("headerClick");
 		}
 	}
 
@@ -196,7 +196,7 @@ class Card extends UI5Element {
 		this._headerActive = enter || space;
 
 		if (enter) {
-			this.fireEvent("headerPress");
+			this.fireEvent("headerClick");
 			return;
 		}
 
@@ -215,7 +215,7 @@ class Card extends UI5Element {
 		this._headerActive = false;
 
 		if (space) {
-			this.fireEvent("headerPress");
+			this.fireEvent("headerClick");
 		}
 	}
 

packages/main/src/Link.js

@@ -1,6 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/src/renderer/LitRenderer.js";
-import { isSpace } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";
 import LinkDesign from "./types/LinkDesign.js";
 
 // Template
@@ -106,13 +105,13 @@ const metadata = {
 	events: /** @lends sap.ui.webcomponents.main.Link.prototype */ {
 
 		/**
-		 * Fired when the <code>ui5-link</code> is triggered either with a click/tap
-		 * or by using the Space or Enter key.
+		 * Fired when the <code>ui5-link</code> is triggered either with a mouse/tap
+		 * or by using the Enter key.
 		 *
 		 * @event
 		 * @public
 		 */
-		press: {},
+		click: {},
 	},
 };
 
@@ -179,7 +178,6 @@ class Link extends UI5Element {
 		return linkCss;
 	}
 
-
 	onBeforeRendering() {
 		const needsNoReferrer = this.target === "_blank"
 			&& this.href
@@ -188,45 +186,6 @@ class Link extends UI5Element {
 		this._rel = needsNoReferrer ? "noreferrer" : undefined;
 	}
 
-	onclick(event) {
-		if (this.disabled) {
-			return;
-		}
-
-		const defaultPrevented = !this.fireEvent("press", {}, true);
-		if (defaultPrevented) {
-			event.preventDefault();
-		}
-	}
-
-	onkeydown(event) {
-		if (this.disabled) {
-			return;
-		}
-
-		if (isSpace(event)) {
-			event.preventDefault();
-		}
-	}
-
-	onkeyup(event) {
-		if (this.disabled) {
-			return;
-		}
-
-		if (isSpace(event)) {
-			const defaultPrevented = !this.fireEvent("press", {}, true);
-			if (defaultPrevented) {
-				return;
-			}
-
-			// Simulate click event
-			const oClickEvent = document.createEvent("MouseEvents");
-			oClickEvent.initEvent("click" /* event type */, false/* no-bubbling */, true /* cancelable */);
-			this.getDomRef().dispatchEvent(oClickEvent);
-		}
-	}
-
 	_isCrossOrigin() {
 		const loc = window.location;
 

packages/main/src/List.js

@@ -134,14 +134,14 @@ const metadata = {
 	events: /** @lends  sap.ui.webcomponents.main.List.prototype */ {
 
 		/**
-		 * Fired when an item is pressed, unless the item's <code>type</code> property
+		 * Fired when an item is activated, unless the item's <code>type</code> property
 		 * is set to <code>Inactive</code>.
 		 *
 		 * @event
-		 * @param {HTMLElement} item the pressed item.
+		 * @param {HTMLElement} item the clicked item.
 		 * @public
 		 */
-		itemPress: {
+		itemClick: {
 			detail: {
 				item: { type: HTMLElement },
 			},
@@ -442,6 +442,7 @@ class List extends UI5Element {
 
 		if (pressedItem.type === ListItemType.Active) {
 			this.fireEvent("itemPress", { item: pressedItem });
+			this.fireEvent("itemClick", { item: pressedItem });
 		}
 
 		if (!this._selectionRequested && this.mode !== ListMode.Delete) {

packages/main/src/ShellBar.js

@@ -185,82 +185,82 @@ const metadata = {
 	events: /** @lends sap.ui.webcomponents.main.ShellBar.prototype */ {
 		/**
 		 *
-		 * Fired, when the notification icon is pressed.
+		 * Fired, when the notification icon is activated.
 		 *
 		 *
 		 * @event
-		 * @param {HTMLElement} targetRef dom ref of the clicked element
+		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
 		 */
-		notificationsPress: {
+		notificationsClick: {
 			detail: {
 				targetRef: { type: HTMLElement },
 			},
 		},
 
 		/**
-		 * Fired, when the profile icon is pressed.
+		 * Fired, when the profile icon is activated.
 		 *
 		 * @event
-		 * @param {HTMLElement} targetRef dom ref of the clicked element
+		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
 		 */
-		profilePress: {
+		profileClick: {
 			detail: {
 				targetRef: { type: HTMLElement },
 			},
 		},
 
 		/**
-		 * Fired, when the product switch icon is pressed.
+		 * Fired, when the product switch icon is activated.
 		 *
 		 * @event
-		 * @param {HTMLElement} targetRef dom ref of the clicked element
+		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
 		 */
-		productSwitchPress: {
+		productSwitchClick: {
 			detail: {
 				targetRef: { type: HTMLElement },
 			},
 		},
 
 		/**
-		 * Fired, when the logo is pressed.
+		 * Fired, when the logo is activated.
 		 *
 		 * @event
-		 * @param {HTMLElement} targetRef dom ref of the clicked element
+		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @since 0.10
 		 * @public
 		 */
-		logoPress: {
+		logoClick: {
 			detail: {
 				targetRef: { type: HTMLElement },
 			},
 		},
 
 		/**
-		 * Fired, when the co pilot is pressed.
+		 * Fired, when the co pilot is activated.
 		 *
 		 * @event
-		 * @param {HTMLElement} targetRef dom ref of the clicked element
+		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @since 0.10
 		 * @public
 		 */
-		coPilotPress: {
+		coPilotClick: {
 			detail: {
 				targetRef: { type: HTMLElement },
 			},
 		},
 
 		/**
-		 * Fired, when a menu item is selected
+		 * Fired, when a menu item is activated
 		 *
 		 * @event
-		 * @param {HTMLElement} item dom ref of the clicked list item
+		 * @param {HTMLElement} item dom ref of the activated list item
 		 * @since 0.10
 		 * @public
 		 */
-		menuItemPress: {
+		menuItemClick: {
 			detail: {
 				item: { type: HTMLElement },
 			},
@@ -424,19 +424,19 @@ class ShellBar extends UI5Element {
 	}
 
 	_menuItemPress(event) {
-		this.fireEvent("menuItemPress", {
+		this.fireEvent("menuItemClick", {
 			item: event.detail.item,
 		});
 	}
 
 	_logoPress(event) {
-		this.fireEvent("logoPress", {
+		this.fireEvent("logoClick", {
 			targetRef: this.shadowRoot.querySelector(".sapWCShellBarLogo"),
 		});
 	}
 
 	_coPilotPress(event) {
-		this.fireEvent("coPilotPress", {
+		this.fireEvent("coPilotClick", {
 			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-coPilot"),
 		});
 	}
@@ -691,19 +691,19 @@ class ShellBar extends UI5Element {
 	}
 
 	_handleNotificationsPress(event) {
-		this.fireEvent("notificationsPress", {
+		this.fireEvent("notificationsClick", {
 			targetRef: this.shadowRoot.querySelector(".sapWCShellBarBellIcon"),
 		});
 	}
 
 	_handleProfilePress(event) {
-		this.fireEvent("profilePress", {
+		this.fireEvent("profileClick", {
 			targetRef: this.shadowRoot.querySelector(".sapWCShellBarImageButton"),
 		});
 	}
 
 	_handleProductSwitchPress(event) {
-		this.fireEvent("productSwitchPress", {
+		this.fireEvent("productSwitchClick", {
 			targetRef: this.shadowRoot.querySelector(".sapWCShellBarIconProductSwitch"),
 		});
 	}

packages/main/src/TimelineItem.hbs

@@ -28,7 +28,7 @@
 
 {{#*inline "itemName"}}
 	{{#if itemNameClickable}}
-		<ui5-link @ui5-press="{{onItemNamePress}}">{{itemName}}</ui5-link>
+		<ui5-link @click="{{onItemNamePress}}">{{itemName}}</ui5-link>
 	{{/if}}
 
 	{{#unless itemNameClickable}}

packages/main/src/TimelineItem.js

@@ -101,7 +101,7 @@ const metadata = {
 		 * @event
 		 * @public
 		 */
-		itemNamePress: {},
+		itemNameClick: {},
 	},
 };
 
@@ -141,7 +141,7 @@ class TimelineItem extends UI5Element {
 	}
 
 	onItemNamePress() {
-		this.fireEvent("itemNamePress", {});
+		this.fireEvent("itemNameClick", {});
 	}
 
 	get classes() {

packages/main/src/themes/Link.css

@@ -3,6 +3,14 @@
 	max-width: 100%;
 }
 
+:host([disabled]) {
+	pointer-events: none;
+}
+
+ui5-link[disabled] {
+	pointer-events: none;
+}
+
 ui5-link {
 	display: inline-block;
 	max-width: 100%;

packages/main/test/sap/ui/webcomponents/main/pages/Card.html

@@ -54,7 +54,7 @@
 </ui5-card>
 
 <script>
-	card.addEventListener("ui5-headerPress", function (event) {
+	card.addEventListener("ui5-headerClick", function (event) {
 		console.log(event);
 		field.value = parseInt(field.value) + 1;
 	});

packages/main/test/sap/ui/webcomponents/main/pages/Eventing.html

@@ -21,7 +21,7 @@
 
 <script>
     var link = document.getElementById("defaultPreventedLink");
-    link.addEventListener("ui5-press", function(event) {
+    link.addEventListener("click", function(event) {
         event.preventDefault();
     });
 </script>