diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js index f5db788ee80d..eb93316c8194 100644 --- a/packages/main/src/Button.js +++ b/packages/main/src/Button.js @@ -118,8 +118,8 @@ const metadata = { events: /** @lends sap.ui.webcomponents.main.Button.prototype */ { /** - * Fired when the ui5-button is pressed either with a - * click/tap or by using the Enter or Space key. + * Fired when the ui5-button is activated either with a + * mouse/tap or by using the Enter or Space key. *

* Note: The event will not be fired if the disabled * property is set to true. @@ -127,7 +127,7 @@ const metadata = { * @event * @public */ - press: {}, + click: {}, }, }; diff --git a/packages/main/src/Card.js b/packages/main/src/Card.js index e5f2da9dd1fc..89cf4c9357fc 100644 --- a/packages/main/src/Card.js +++ b/packages/main/src/Card.js @@ -90,15 +90,15 @@ const metadata = { events: /** @lends sap.ui.webcomponents.main.Card.prototype */ { /** - * Fired when the ui5-card header is pressed - * by click/tap or by using the Enter or Space key. + * Fired when the ui5-card header is activated + * by mouse/tap or by using the Enter or Space key. *

* Note: The event would be fired only if the headerInteractive 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"); } } diff --git a/packages/main/src/Link.js b/packages/main/src/Link.js index c4262211817d..42b23b08f9d7 100644 --- a/packages/main/src/Link.js +++ b/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 ui5-link is triggered either with a click/tap - * or by using the Space or Enter key. + * Fired when the ui5-link 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; diff --git a/packages/main/src/List.js b/packages/main/src/List.js index 2ba1d4f7a66d..11f3602ca924 100644 --- a/packages/main/src/List.js +++ b/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 type property + * Fired when an item is activated, unless the item's type property * is set to Inactive. * * @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) { diff --git a/packages/main/src/ShellBar.js b/packages/main/src/ShellBar.js index fc9686977470..7559c8d325ff 100644 --- a/packages/main/src/ShellBar.js +++ b/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"), }); } diff --git a/packages/main/src/TimelineItem.hbs b/packages/main/src/TimelineItem.hbs index cc87045333c2..dd59b9964849 100644 --- a/packages/main/src/TimelineItem.hbs +++ b/packages/main/src/TimelineItem.hbs @@ -28,7 +28,7 @@ {{#*inline "itemName"}} {{#if itemNameClickable}} - {{itemName}} + {{itemName}} {{/if}} {{#unless itemNameClickable}} diff --git a/packages/main/src/TimelineItem.js b/packages/main/src/TimelineItem.js index 0be13717521b..b91ad0c979e3 100644 --- a/packages/main/src/TimelineItem.js +++ b/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() { diff --git a/packages/main/src/themes/Link.css b/packages/main/src/themes/Link.css index 28cd681e72dc..e639c641c20f 100644 --- a/packages/main/src/themes/Link.css +++ b/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%; diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Card.html b/packages/main/test/sap/ui/webcomponents/main/pages/Card.html index f04f6c9caa21..e9f777ac3504 100644 --- a/packages/main/test/sap/ui/webcomponents/main/pages/Card.html +++ b/packages/main/test/sap/ui/webcomponents/main/pages/Card.html @@ -54,7 +54,7 @@ diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Link.html b/packages/main/test/sap/ui/webcomponents/main/pages/Link.html index 3af472afdff0..606540339797 100644 --- a/packages/main/test/sap/ui/webcomponents/main/pages/Link.html +++ b/packages/main/test/sap/ui/webcomponents/main/pages/Link.html @@ -39,6 +39,12 @@

cross-origin

linknative span +
+

prevent-default

+ link click default preventednative span + link press default preventednative span +
+

Disabled link

Disabled link @@ -59,18 +65,34 @@

Link designs

+
diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/List.html b/packages/main/test/sap/ui/webcomponents/main/pages/List.html index 4b508b67f7b4..a870c195c18c 100644 --- a/packages/main/test/sap/ui/webcomponents/main/pages/List.html +++ b/packages/main/test/sap/ui/webcomponents/main/pages/List.html @@ -33,7 +33,7 @@

ui5-list



- + \ No newline at end of file diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html b/packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html index de97c62848a9..76088aadcfd8 100644 --- a/packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html +++ b/packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html @@ -170,28 +170,28 @@ diff --git a/packages/main/test/sap/ui/webcomponents/main/samples/ShellBar.sample.html b/packages/main/test/sap/ui/webcomponents/main/samples/ShellBar.sample.html index 1c87bda21d55..8579b6a08574 100644 --- a/packages/main/test/sap/ui/webcomponents/main/samples/ShellBar.sample.html +++ b/packages/main/test/sap/ui/webcomponents/main/samples/ShellBar.sample.html @@ -92,7 +92,7 @@

ShellBar