refactor(ui5-popover, ui5-responsive-popover): rename "openBy" to "sh…

…owAt" (#3540) Rename the Popover's and ResponsivePopover's "openBy" method to "showAt" to have more consistent API with the Toast and Dialog components, which have "show" method. The name "showBy" has been also discussed, but from English language perspective to "show" something "at" some place is more accurate to say and this why we picked up "showAt". BREAKING CHANGE: Popover's and ResponsivePopover's "openBy" method has been renamed to "showAt".
SAP · Jul 28, 2021 · 59f5354 · 59f5354
1 parent a58a1a4
commit 59f5354
Show file tree

Hide file tree

Showing 38 changed files with 101 additions and 101 deletions.
diff --git a/packages/base/src/util/PopupUtils.js b/packages/base/src/util/PopupUtils.js
@@ -62,7 +62,7 @@ const isClickInRect = (event, rect) => {
 const getClosedPopupParent = el => {
 	const parent = el.parentElement || (el.getRootNode && el.getRootNode().host);
 
-	if (parent && ((parent.openBy && parent.isUI5Element) || (parent.open && parent.isUI5Element) || parent === document.documentElement)) {
+	if (parent && ((parent.showAt && parent.isUI5Element) || (parent.open && parent.isUI5Element) || parent === document.documentElement)) {
 		return parent;
 	}
 

diff --git a/packages/fiori/src/NotificationListItemBase.js b/packages/fiori/src/NotificationListItemBase.js
@@ -257,7 +257,7 @@ class NotificationListItemBase extends ListItemBase {
 
 	async openOverflow() {
 		const overflowPopover = await this.getOverflowPopover();
-		overflowPopover.openBy(this.overflowButtonDOM);
+		overflowPopover.showAt(this.overflowButtonDOM);
 	}
 
 	async closeOverflow() {

diff --git a/packages/fiori/src/ShellBar.js b/packages/fiori/src/ShellBar.js
@@ -460,7 +460,7 @@ class ShellBar extends UI5Element {
 
 				if (this.hasMenuItems) {
 					const menuPopover = await this._getMenuPopover();
-					menuPopover.openBy(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
+					menuPopover.showAt(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
 				}
 			},
 		};
@@ -688,7 +688,7 @@ class ShellBar extends UI5Element {
 
 	_toggleActionPopover() {
 		const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
-		this.overflowPopover.openBy(overflowButton);
+		this.overflowPopover.showAt(overflowButton);
 	}
 
 	onEnterDOM() {

diff --git a/packages/fiori/src/SideNavigation.js b/packages/fiori/src/SideNavigation.js
@@ -242,7 +242,7 @@ class SideNavigation extends UI5Element {
 
 	async openPicker(opener) {
 		const responsivePopover = await this.getPicker();
-		responsivePopover.openBy(opener);
+		responsivePopover.showAt(opener);
 	}
 
 	async closePicker(opener) {

diff --git a/packages/fiori/src/Wizard.js b/packages/fiori/src/Wizard.js
@@ -592,7 +592,7 @@ class Wizard extends UI5Element {
 		}
 
 		const responsivePopover = await this._respPopover();
-		responsivePopover.openBy(oDomTarget);
+		responsivePopover.showAt(oDomTarget);
 	}
 
 	async _onGroupedTabClick(event) {

diff --git a/packages/fiori/test/pages/NotificationListGroupItem.html b/packages/fiori/test/pages/NotificationListGroupItem.html
@@ -315,7 +315,7 @@ <h3>Events on ui5-list level</h3>
 		});
 
 		openNotifications.addEventListener("click", function(event) {
-			notificationsPopover.openBy(openNotifications);
+			notificationsPopover.showAt(openNotifications);
 		});
 
 		btnMakeGroupBusy.addEventListener("click", function(event) {
@@ -330,7 +330,7 @@ <h3>Events on ui5-list level</h3>
 
 		shellbar.addEventListener("ui5-notificationsClick", function(event) {
 			event.preventDefault();
-			notificationsPopover.openBy(event.detail.targetRef);
+			notificationsPopover.showAt(event.detail.targetRef);
 		});
 	</script>
 </body>

diff --git a/packages/fiori/test/pages/NotificationListItem.html b/packages/fiori/test/pages/NotificationListItem.html
@@ -286,12 +286,12 @@ <h3>Events on ui5-list level</h3>
 		});
 
 		openNotifications.addEventListener("click", function(event) {
-			notificationsPopover.openBy(openNotifications);
+			notificationsPopover.showAt(openNotifications);
 		});
 
 		shellbar.addEventListener("ui5-notificationsClick", function(event) {
 			event.preventDefault();
-			notificationsPopover.openBy(event.detail.targetRef);
+			notificationsPopover.showAt(event.detail.targetRef);
 		});
 	</script>
 </body>

diff --git a/packages/fiori/test/pages/ShellBar.html b/packages/fiori/test/pages/ShellBar.html
@@ -231,14 +231,14 @@ <h3>ShellBar in Compact</h3>
 		});
 
 		shellbar.addEventListener("ui5-profileClick", function(event) {
-			popover.openBy(event.detail.targetRef);
+			popover.showAt(event.detail.targetRef);
 			window["press-input"].value = "Profile";
 		});
 
 		shellbar.addEventListener("ui5-notificationsClick", function(event) {
 			window["press-input"].value = "Notifications";
 			event.preventDefault();
-			popover.openBy(event.detail.targetRef);
+			popover.showAt(event.detail.targetRef);
 		});
 
 		shellbar.addEventListener("ui5-productSwitchClick", function(event) {
@@ -266,12 +266,12 @@ <h3>ShellBar in Compact</h3>
 
 		shelbarCompact.addEventListener("ui5-notificationsClick", function(event) {
 			event.preventDefault();
-			popover.openBy(event.detail.targetRef);
+			popover.showAt(event.detail.targetRef);
 		});
 
 		shelbarCompact.addEventListener("ui5-productSwitchClick", function(event) {
 			event.preventDefault();
-			popover.openBy(event.detail.targetRef);
+			popover.showAt(event.detail.targetRef);
 		});
 
 		menuItemsSB.addEventListener("ui5-menuItemClick", function(event) {
@@ -285,7 +285,7 @@ <h3>ShellBar in Compact</h3>
 			currenItem.addEventListener("ui5-itemClick", function(event) {
 				event.preventDefault();
 				window["press-input"].value = event.target.id;
-				window["custom-item-popover"].openBy(event.detail.targetRef);
+				window["custom-item-popover"].showAt(event.detail.targetRef);
 			});
 		});
 	</script>

diff --git a/packages/fiori/test/samples/NotificationListGroupItem.sample.html b/packages/fiori/test/samples/NotificationListGroupItem.sample.html
@@ -301,7 +301,7 @@ <h3>NotificationListGroupItem In ShellBar</h3>
 		<script>
 			shellbar.addEventListener("ui5-notifications-click", function(event) {
 				event.preventDefault();
-				notificationsPopover.openBy(event.detail.targetRef);
+				notificationsPopover.showAt(event.detail.targetRef);
 			});
 		</script>
 	</div>
@@ -347,7 +347,7 @@ <h3>NotificationListGroupItem In ShellBar</h3>
 
 <script>
 	shellbar.addEventListener("ui5-notifications-click", function(event) {
-		notificationsPopover.openBy(event.detail.targetRef);
+		notificationsPopover.showAt(event.detail.targetRef);
 	});
 </script>
 

diff --git a/packages/fiori/test/samples/NotificationListItem.sample.html b/packages/fiori/test/samples/NotificationListItem.sample.html
@@ -221,7 +221,7 @@ <h3>NotificationListItem In ShellBar</h3>
 		<script>
 			shellbar.addEventListener("ui5-notifications-click", function(event) {
 				event.preventDefault();
-				notificationsPopover.openBy(event.detail.targetRef);
+				notificationsPopover.showAt(event.detail.targetRef);
 			});
 		</script>
 	</div>
@@ -260,7 +260,7 @@ <h3>NotificationListItem In ShellBar</h3>
 
 <script>
 	shellbar.addEventListener("ui5-notifications-click", function(event) {
-		notificationsPopover.openBy(event.detail.targetRef);
+		notificationsPopover.showAt(event.detail.targetRef);
 	});
 </script>
 

diff --git a/packages/fiori/test/samples/ProductSwitch.sample.html b/packages/fiori/test/samples/ProductSwitch.sample.html
@@ -68,7 +68,7 @@ <h3>ProductSwitch within ShellBar</h3>
 					popover.close();
 				} else {
 					event.preventDefault();
-					popover.openBy(event.detail.targetRef);
+					popover.showAt(event.detail.targetRef);
 				}
 			});
 		</script>
@@ -109,7 +109,7 @@ <h3>ProductSwitch within ShellBar</h3>
 		if (popover.opened) {
 			popover.close();
 		} else {
-			popover.openBy(event.detail.targetRef);
+			popover.showAt(event.detail.targetRef);
 		}
 	});
 </script>

diff --git a/packages/fiori/test/samples/ShellBar.sample.html b/packages/fiori/test/samples/ShellBar.sample.html
@@ -57,7 +57,7 @@ <h3>ShellBar</h3>
 
 	<script>
 		shellbar.addEventListener("profile-click", function(event) {
-			window["action-popover"].openBy(event.detail.targetRef);
+			window["action-popover"].showAt(event.detail.targetRef);
 		});
 	</script>
 	</div>
@@ -107,7 +107,7 @@ <h3>ShellBar</h3>
 
 <script>
 	shellbar.addEventListener("profile-click", function(event) {
-		popover.openBy(event.detail.targetRef);
+		popover.showAt(event.detail.targetRef);
 	});
 </script>
 	</xmp></pre>

diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js
@@ -479,7 +479,7 @@ class ComboBox extends UI5Element {
 
 	async openValueStatePopover() {
 		this.popover = await this._getPopover();
-		this.popover && this.popover.openBy(this);
+		this.popover && this.popover.showAt(this);
 	}
 
 	async closeValueStatePopover() {
@@ -648,7 +648,7 @@ class ComboBox extends UI5Element {
 	}
 
 	_openRespPopover() {
-		this.responsivePopover.openBy(this);
+		this.responsivePopover.showAt(this);
 	}
 
 	_filterItems(str) {

diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js
@@ -550,7 +550,7 @@ class DatePicker extends DateComponentBase {
 
 	_click(event) {
 		if (isPhone()) {
-			this.responsivePopover.openBy(this);
+			this.responsivePopover.showAt(this);
 			event.preventDefault(); // prevent immediate selection of any item
 		}
 	}
@@ -712,7 +712,7 @@ class DatePicker extends DateComponentBase {
 		this._calendarCurrentPicker = "day";
 		this.responsivePopover = await this._respPopover();
 
-		this.responsivePopover.openBy(this);
+		this.responsivePopover.showAt(this);
 	}
 
 	togglePicker() {

diff --git a/packages/main/src/FileUploader.js b/packages/main/src/FileUploader.js
@@ -386,7 +386,7 @@ class FileUploader extends UI5Element {
 		const popover = await this._getPopover();
 
 		if (popover) {
-			popover.openBy(this);
+			popover.showAt(this);
 		}
 	}
 

diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
@@ -691,7 +691,7 @@ class Input extends UI5Element {
 
 	_click(event) {
 		if (isPhone() && !this.readonly && this.Suggestions) {
-			this.Suggestions.openBy(this);
+			this.Suggestions.showAt(this);
 			this.isRespPopoverOpen = true;
 		}
 	}
@@ -813,7 +813,7 @@ class Input extends UI5Element {
 
 		if (popover) {
 			this._isPopoverOpen = true;
-			popover.openBy(this);
+			popover.showAt(this);
 		}
 	}
 

diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
@@ -503,7 +503,7 @@ class MultiComboBox extends UI5Element {
 			if (filteredItems.length === 0) {
 				this.allItemsPopover.close();
 			} else {
-				this.allItemsPopover.openBy(this);
+				this.allItemsPopover.showAt(this);
 			}
 		}
 
@@ -664,7 +664,7 @@ class MultiComboBox extends UI5Element {
 
 	_click(event) {
 		if (isPhone() && !this.readonly && !this._showMorePressed) {
-			this.allItemsPopover.openBy(this);
+			this.allItemsPopover.showAt(this);
 		}
 
 		this._showMorePressed = false;
@@ -731,7 +731,7 @@ class MultiComboBox extends UI5Element {
 		const popover = await this._getPopover();
 
 		if (popover) {
-			popover.openBy(this);
+			popover.showAt(this);
 		}
 	}
 

diff --git a/packages/main/src/Popover.js b/packages/main/src/Popover.js
@@ -290,14 +290,14 @@ class Popover extends Popup {
 	}
 
 	/**
-	 * Opens the popover.
-	 * @param {HTMLElement} opener the element that the popover is opened by
+	 * Shows the popover.
+	 * @param {HTMLElement} opener the element that the popover is shown at
 	 * @param {boolean} preventInitialFocus prevents applying the focus inside the popover
 	 * @public
 	 * @async
 	 * @returns {Promise} Resolved when the popover is open
 	 */
-	async openBy(opener, preventInitialFocus = false) {
+	async showAt(opener, preventInitialFocus = false) {
 		if (!opener || this.opened) {
 			return;
 		}
@@ -337,7 +337,7 @@ class Popover extends Popup {
 		let overflowsBottom = false;
 		let overflowsTop = false;
 
-		if (closedPopupParent.openBy) {
+		if (closedPopupParent.showAt) {
 			const contentRect = closedPopupParent.contentDOM.getBoundingClientRect();
 			overflowsBottom = openerRect.top > (contentRect.top + contentRect.height);
 			overflowsTop = (openerRect.top + openerRect.height) < contentRect.top;

diff --git a/packages/main/src/ResponsivePopover.js b/packages/main/src/ResponsivePopover.js
@@ -114,13 +114,13 @@ class ResponsivePopover extends Popover {
 	}
 
 	/**
-	 * Opens popover on desktop and dialog on mobile.
-	 * @param {HTMLElement} opener the element that the popover is opened by
+	 * Shows popover on desktop and dialog on mobile.
+	 * @param {HTMLElement} opener the element that the popover is shown at
 	 * @public
 	 * @async
 	 * @returns {Promise} Resolves when the responsive popover is open
 	 */
-	async openBy(opener) {
+	async showAt(opener) {
 		this.style.display = this._isPhone ? "contents" : "";
 
 		if (this.isOpen() || (this._dialog && this._dialog.isOpen())) {
@@ -132,7 +132,7 @@ class ResponsivePopover extends Popover {
 			if (!this.noStretch) {
 				this._minWidth = Math.max(POPOVER_MIN_WIDTH, opener.getBoundingClientRect().width);
 			}
-			await super.openBy(opener);
+			await super.showAt(opener);
 		} else {
 			this.style.zIndex = getNextZIndex();
 			await this._dialog.show();
@@ -156,7 +156,7 @@ class ResponsivePopover extends Popover {
 			return this.close();
 		}
 
-		this.openBy(opener);
+		this.showAt(opener);
 	}
 
 	/**

diff --git a/packages/main/src/Select.js b/packages/main/src/Select.js
@@ -372,7 +372,7 @@ class Select extends UI5Element {
 		if (this._isPickerOpen) {
 			this.responsivePopover.close();
 		} else {
-			this.responsivePopover.openBy(this);
+			this.responsivePopover.showAt(this);
 		}
 	}
 
@@ -712,7 +712,7 @@ class Select extends UI5Element {
 	async openValueStatePopover() {
 		this.popover = await this._getPopover();
 		if (this.popover) {
-			this.popover.openBy(this);
+			this.popover.showAt(this);
 		}
 	}
 

diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js
@@ -497,7 +497,7 @@ class TabContainer extends UI5Element {
 		if (this.responsivePopover.opened) {
 			this.responsivePopover.close();
 		} else {
-			this.responsivePopover.openBy(button);
+			this.responsivePopover.showAt(button);
 		}
 	}
 

diff --git a/packages/main/src/TextArea.js b/packages/main/src/TextArea.js
@@ -498,7 +498,7 @@ class TextArea extends UI5Element {
 
 	async openPopover() {
 		this.popover = await this._getPopover();
-		this.popover && this.popover.openBy(this.shadowRoot.querySelector(".ui5-textarea-inner"));
+		this.popover && this.popover.showAt(this.shadowRoot.querySelector(".ui5-textarea-inner"));
 	}
 
 	async closePopover() {

diff --git a/packages/main/src/TimePickerBase.js b/packages/main/src/TimePickerBase.js
@@ -302,7 +302,7 @@ class TimePickerBase extends UI5Element {
 	async openPicker() {
 		this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(new Date());
 		const responsivePopover = await this._getPopover();
-		responsivePopover.openBy(this);
+		responsivePopover.showAt(this);
 		this._isPickerOpen = true;
 	}