refactor(components): rename event names to kebab case (#1692)

Rename all components event names that are currently camelCase to kebab-case, but keep the camelCase events firing for backward compatibility for at least one release to allow smooth migrations of the applications.

BREAKING_CHANGE: all event names are renamed from camelCase to kebabCase.
**Examples**: "selectionChange" becomes "selection-change", "itemClose" becomes "item-close",
"afterOpen" becomes "after-open", etc.

Author: ilhan007

docs/Configuration.md

@@ -61,13 +61,13 @@ The `noConflict` configuration setting allows certain control over this behavior
  The format of this object is as follows:
  ```json
  {
-	 "events": ["selectionChange", "headerClick"]
+	 "events": ["selection-change", "header-click"]
  }
  ```
  *Please note that other keys may be added to this object in the future for the purpose of name conflict resolution.*
 
- In the above example, only the `selectionChange` and `headerClick` events will be fired with a prefix. 
- You can still use them by listening to `ui5-selectionChange` and `ui5-headerClick`, but the names `selectionChange` and `headerClick` will be
+ In the above example, only the `selection-change` and `header-click` events will be fired with a prefix. 
+ You can still use them by listening to `ui5-selection-change` and `ui5-header-click`, but the names `selection-change` and `header-click` will be
  free for use by other UI components and libraries without name collision.
 
 <a name="formatSettings"></a>
@@ -103,7 +103,7 @@ In order to provide configuration settings, include the following ```<script>```
 	},
 	"theme": "sap_belize_hcb",
 	"noConflict": {
-		"events": ["selectionChange", "headerClick"]
+		"events": ["selection-change", "header-click"]
 	}
 }
 </script>

packages/base/src/UI5Element.js

@@ -16,7 +16,7 @@ import isSlot from "./util/isSlot.js";
 
 const metadata = {
 	events: {
-		_propertyChange: {},
+		"_property-change": {},
 	},
 };
 
@@ -381,15 +381,15 @@ class UI5Element extends HTMLElement {
 			this._monitoredChildProps.set(slotName, { observedProps, notObservedProps });
 		}
 
-		child.addEventListener("_propertyChange", this._invalidateParentOnPropertyUpdate);
+		child.addEventListener("_property-change", this._invalidateParentOnPropertyUpdate);
 		child._firePropertyChange = true;
 	}
 
 	/**
 	 * @private
 	 */
 	_detachChildPropertyUpdated(child) {
-		child.removeEventListener("_propertyChange", this._invalidateParentOnPropertyUpdate);
+		child.removeEventListener("_property-change", this._invalidateParentOnPropertyUpdate);
 		child._firePropertyChange = false;
 	}
 
@@ -400,7 +400,7 @@ class UI5Element extends HTMLElement {
 		this._updateAttribute(name, value);
 
 		if (this._firePropertyChange) {
-			this.dispatchEvent(new CustomEvent("_propertyChange", {
+			this.dispatchEvent(new CustomEvent("_property-change", {
 				detail: { name, newValue: value },
 				composed: false,
 				bubbles: true,
@@ -596,6 +596,17 @@ class UI5Element extends HTMLElement {
 	 * @returns {boolean} false, if the event was cancelled (preventDefault called), true otherwise
 	 */
 	fireEvent(name, data, cancelable) {
+		const eventResult = this._fireEvent(name, data, cancelable);
+		const camelCaseEventName = kebabToCamelCase(name);
+
+		if (camelCaseEventName !== name) {
+			return eventResult && this._fireEvent(camelCaseEventName, data, cancelable);
+		}
+
+		return eventResult;
+	}
+
+	_fireEvent(name, data, cancelable) {
 		let compatEventResult = true; // Initialized to true, because if the event is not fired at all, it should be considered "not-prevented"
 
 		const noConflictEvent = new CustomEvent(`ui5-${name}`, {

packages/base/test/pages/ConfigurationScript.html

@@ -17,7 +17,7 @@
             },
             "theme": "sap_belize_hcb",
             "noConflict": {
-                "events": ["selectionChange", "headerClick"]
+                "events": ["selection-change", "header-click"]
             }
         }
     </script>

packages/base/test/specs/ConfigurationChange.spec.js

@@ -17,9 +17,9 @@ describe("Some configuration options can be changed at runtime", () => {
 	it("Tests that noConflict can be changed", () => {
 		const res = browser.execute( () => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
-			config.setNoConflict({events: ["selectionChange"]});
+			config.setNoConflict({events: ["selection-change"]});
 			return config.getNoConflict();
 		});
-		assert.strictEqual(res.events.includes("selectionChange"), true, "selectionChange was successfully registered as a no conflict event");
+		assert.strictEqual(res.events.includes("selection-change"), true, "selection-change was successfully registered as a no conflict event");
 	});
 });

packages/base/test/specs/ConfigurationScript.spec.js

@@ -48,7 +48,7 @@ describe("Configuration script has effect", () => {
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
 			return config.getNoConflict();
 		});
-		assert.strictEqual(res.events.includes("selectionChange"), true, "selectionChange was successfully registered as a no conflict event");
+		assert.strictEqual(res.events.includes("selection-change"), true, "selectionChange was successfully registered as a no conflict event");
 	});
 
 	it("Tests that animationMode is applied", () => {

packages/fiori/src/ShellBar.js

@@ -239,11 +239,11 @@ const metadata = {
 		 * Fired, when the notification icon is activated.
 		 *
 		 *
-		 * @event
+		 * @event sap.ui.webcomponents.fiori.ShellBar#notifications-click
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
 		 */
-		notificationsClick: {
+		"notifications-click": {
 			detail: {
 				targetRef: { type: HTMLElement },
 			},
@@ -252,11 +252,11 @@ const metadata = {
 		/**
 		 * Fired, when the profile slot is present.
 		 *
-		 * @event
+		 * @event sap.ui.webcomponents.fiori.ShellBar#profile-click
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
 		 */
-		profileClick: {
+		"profile-click": {
 			detail: {
 				targetRef: { type: HTMLElement },
 			},
@@ -266,11 +266,11 @@ const metadata = {
 		 * Fired, when the product switch icon is activated.
 		 * <b>Note:</b> You can prevent closing of oveflow popover by calling <code>event.preventDefault()</code>.
 		 *
-		 * @event
+		 * @event sap.ui.webcomponents.fiori.ShellBar#product-switch-click
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
 		 */
-		productSwitchClick: {
+		"product-switch-click": {
 			detail: {
 				targetRef: { type: HTMLElement },
 			},
@@ -279,12 +279,12 @@ const metadata = {
 		/**
 		 * Fired, when the logo is activated.
 		 *
-		 * @event
+		 * @event sap.ui.webcomponents.fiori.ShellBar#logo-click
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @since 0.10
 		 * @public
 		 */
-		logoClick: {
+		"logo-click": {
 			detail: {
 				targetRef: { type: HTMLElement },
 			},
@@ -293,12 +293,12 @@ const metadata = {
 		/**
 		 * Fired, when the co pilot is activated.
 		 *
-		 * @event
+		 * @event sap.ui.webcomponents.fiori.ShellBar#co-pilot-click
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @since 0.10
 		 * @public
 		 */
-		coPilotClick: {
+		"co-pilot-click": {
 			detail: {
 				targetRef: { type: HTMLElement },
 			},
@@ -308,12 +308,12 @@ const metadata = {
 		 * Fired, when a menu item is activated
 		 * <b>Note:</b> You can prevent closing of oveflow popover by calling <code>event.preventDefault()</code>.
 		 *
-		 * @event
+		 * @event sap.ui.webcomponents.fiori.ShellBar#menu-item-click
 		 * @param {HTMLElement} item dom ref of the activated list item
 		 * @since 0.10
 		 * @public
 		 */
-		menuItemClick: {
+		"menu-item-click": {
 			detail: {
 				item: { type: HTMLElement },
 			},
@@ -431,13 +431,13 @@ class ShellBar extends UI5Element {
 	}
 
 	_menuItemPress(event) {
-		this.fireEvent("menuItemClick", {
+		this.fireEvent("menu-item-click", {
 			item: event.detail.item,
 		}, true);
 	}
 
 	_logoPress() {
-		this.fireEvent("logoClick", {
+		this.fireEvent("logo-click", {
 			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-logo"),
 		});
 	}
@@ -476,7 +476,7 @@ class ShellBar extends UI5Element {
 	}
 
 	_fireCoPilotClick() {
-		this.fireEvent("coPilotClick", {
+		this.fireEvent("co-pilot-click", {
 			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-coPilot"),
 		});
 	}
@@ -683,7 +683,7 @@ class ShellBar extends UI5Element {
 				return item.shadowRoot.querySelector(`#${refItemId}`);
 			});
 
-			const prevented = !shellbarItem.fireEvent("itemClick", { targetRef: event.target }, true);
+			const prevented = !shellbarItem.fireEvent("item-click", { targetRef: event.target }, true);
 
 			this._defaultItemPressPrevented = prevented;
 		}
@@ -696,21 +696,21 @@ class ShellBar extends UI5Element {
 	_handleNotificationsPress(event) {
 		const notificationIconRef = this.shadowRoot.querySelector(".ui5-shellbar-bell-button");
 
-		this._defaultItemPressPrevented = !this.fireEvent("notificationsClick", {
+		this._defaultItemPressPrevented = !this.fireEvent("notifications-click", {
 			targetRef: notificationIconRef.classList.contains("ui5-shellbar-hidden-button") ? event.target : notificationIconRef,
 		}, true);
 	}
 
 	_handleProfilePress(event) {
-		this.fireEvent("profileClick", {
+		this.fireEvent("profile-click", {
 			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-image-button"),
 		});
 	}
 
 	_handleProductSwitchPress(event) {
 		const buttonRef = this.shadowRoot.querySelector(".ui5-shellbar-button-product-switch");
 
-		this._defaultItemPressPrevented = !this.fireEvent("productSwitchClick", {
+		this._defaultItemPressPrevented = !this.fireEvent("product-switch-click", {
 			targetRef: buttonRef.classList.contains("ui5-shellbar-hidden-button") ? event.target : buttonRef,
 		}, true);
 	}

packages/fiori/src/ShellBarItem.js

@@ -46,11 +46,11 @@ const metadata = {
 		/**
 		 * Fired, when the item is pressed.
 		 *
-		 * @event
+		 * @event sap.ui.webcomponents.fiori.ShellBarItem#item-click
 		 * @param {HTMLElement} targetRef dom ref of the clicked element
 		 * @public
 		 */
-		itemClick: {
+		"item-click": {
 			detail: {
 				targetRef: { type: HTMLElement },
 			},

packages/fiori/src/ShellBarPopover.hbs

@@ -1,9 +1,9 @@
 <ui5-popover class="ui5-shellbar-menu-popover"
 	placement-type="Bottom"
-	@ui5-beforeOpen={{_menuPopoverBeforeOpen}}
-	@ui5-afterClose={{_menuPopoverAfterClose}}
+	@ui5-before-open={{_menuPopoverBeforeOpen}}
+	@ui5-after-close={{_menuPopoverAfterClose}}
 >
-	<ui5-list separators="None" mode="SingleSelect" @ui5-itemPress={{_menuItemPress}}>
+	<ui5-list separators="None" mode="SingleSelect" @ui5-item-press={{_menuItemPress}}>
 		{{#each _menuPopoverItems}}
 			{{ this }}
 		{{/each}}
@@ -14,10 +14,10 @@
 	placement-type="Bottom"
 	horizontal-align="{{popoverHorizontalAlign}}"
 	no-arrow
-	@ui5-beforeOpen={{_overflowPopoverBeforeOpen}}
-	@ui5-afterClose={{_overflowPopoverAfterClose}}
+	@ui5-before-open={{_overflowPopoverBeforeOpen}}
+	@ui5-after-close={{_overflowPopoverAfterClose}}
 >
-	<ui5-list separators="None" @ui5-itemPress="{{_actionList.itemPress}}">
+	<ui5-list separators="None" @ui5-item-press="{{_actionList.itemPress}}">
 		{{#each _hiddenIcons}}
 			<ui5-li
 				data-ui5-external-action-item-id="{{this.refItemid}}"

packages/fiori/src/UploadCollection.hbs

@@ -5,8 +5,8 @@
 	<div class="{{classes.content}}">
 		<ui5-list
 			mode="{{mode}}"
-			@ui5-selectionChange="{{_onSelectionChange}}"
-			@ui5-itemDelete="{{_onItemDelete}}"
+			@ui5-selection-change="{{_onSelectionChange}}"
+			@ui5-item-delete="{{_onItemDelete}}"
 		>
 			<slot></slot>
 		</ui5-list>

packages/fiori/src/UploadCollection.js

@@ -129,11 +129,11 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> A Delete button is displayed on each item,
 		 * when the <code>ui5-upload-collection</code> <code>mode</code> property is set to <code>Delete</code>.
-		 * @event
+		 * @event sap.ui.webcomponents.fiori.UploadCollection#file-deleted
 		 * @param {HTMLElement} item The <code>ui5-upload-collection-item</code> which was renamed.
 		 * @public
 		 */
-		fileDeleted: {
+		"file-deleted": {
 			detail: {
 				item: { type: HTMLElement },
 			},
@@ -143,11 +143,11 @@ const metadata = {
 		 * Fired when selection is changed by user interaction
 		 * in <code>SingleSelect</code> and <code>MultiSelect</code> modes.
 		 *
-		 * @event
+		 * @event sap.ui.webcomponents.fiori.UploadCollection#selection-change
 		 * @param {Array} selectedItems An array of the selected items.
 		 * @public
 		 */
-		selectionChange: {
+		"selection-change": {
 			detail: {
 				selectedItems: { type: Array },
 			},
@@ -264,11 +264,11 @@ class UploadCollection extends UI5Element {
 	}
 
 	_onItemDelete(event) {
-		this.fireEvent("fileDeleted", { item: event.detail.item });
+		this.fireEvent("file-deleted", { item: event.detail.item });
 	}
 
 	_onSelectionChange(event) {
-		this.fireEvent("selectionChange", { selectedItems: event.detail.selectedItems });
+		this.fireEvent("selection-change", { selectedItems: event.detail.selectedItems });
 	}
 
 	get classes() {

packages/fiori/src/UploadCollectionItem.js

@@ -58,7 +58,7 @@ const metadata = {
 		},
 
 		/**
-		 * If set to <code>true</code> the file name will be clickable and it will fire <code>fileNameClick</code> event upon click.
+		 * If set to <code>true</code> the file name will be clickable and it will fire <code>file-name-click</code> event upon click.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -171,10 +171,10 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> This event is only available when <code>fileNameClickable</code> property is <code>true</code>.
 		 *
-		 * @event
+		 * @event sap.ui.webcomponents.fiori.UploadCollectionItem#file-name-click
 		 * @public
 		 */
-		fileNameClick: { },
+		"file-name-click": { },
 
 		/**
 		 * Fired when the <code>fileName</code> property gets changed.
@@ -322,7 +322,7 @@ class UploadCollectionItem extends ListItem {
 	}
 
 	_onFileNameClick(event) {
-		this.fireEvent("fileNameClick");
+		this.fireEvent("file-name-click");
 	}
 
 	_onRetry(event) {