feat(ui5-shellbar): new event added (#8197)

New event search-button-click is added, which allows different actions to be triggered
when it is fired on the search button inside the ui5-shellbar.
If its preventDefault method is called, the default action of the search button
(expanding/collapsing the input) won`t be triggered, but let the users trigger their own.

Related: #6273

packages/fiori/src/ShellBar.ts

@@ -100,6 +100,11 @@ type ShellBarMenuItemClickEventDetail = {
 	item: HTMLElement;
 };
 
+type ShellBarSearchButtonEventDetail = {
+	targetRef: HTMLElement;
+	searchFieldVisible: boolean;
+};
+
 type ShellBarCoPilot = {
 	animated?: boolean,
 	animationValues?: string,
@@ -279,6 +284,23 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms
 	},
 })
 
+/**
+ * Fired, when the search button is activated.
+ * <b>Note:</b> You can prevent expanding/collapsing of the search field by calling <code>event.preventDefault()</code>.
+ *
+ * @allowPreventDefault
+ * @param {HTMLElement} targetRef dom ref of the activated element
+ * @param {Boolean} searchFieldVisible whether the search field is visible
+ * @public
+ */
+
+@event<ShellBarSearchButtonEventDetail>("search-button-click", {
+	detail: {
+		targetRef: { type: HTMLElement },
+		searchFieldVisible: { type: Boolean },
+	},
+})
+
 class ShellBar extends UI5Element {
 	/**
 	 * Defines the <code>primaryTitle</code>.
@@ -796,6 +818,15 @@ class ShellBar extends UI5Element {
 	}
 
 	_handleSearchIconPress() {
+		const searchButtonRef = this.shadowRoot!.querySelector<Button>(".ui5-shellbar-search-button")!;
+		const defaultPrevented = !this.fireEvent<ShellBarSearchButtonEventDetail>("search-button-click", {
+			targetRef: searchButtonRef,
+			searchFieldVisible: this.showSearchField,
+		}, true);
+
+		if (defaultPrevented) {
+			return;
+		}
 		this.showSearchField = !this.showSearchField;
 
 		if (!this.showSearchField) {
@@ -1328,4 +1359,5 @@ export type {
 	ShellBarAccessibilityAttributes,
 	ShellBarAccessibilityRoles,
 	ShellBarAccessibilityTexts,
+	ShellBarSearchButtonEventDetail,
 };

packages/fiori/test/pages/ShellBar.html

@@ -232,8 +232,11 @@ <h3>ShellBar in Compact</h3>
 		<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
 	</ui5-shellbar>
 
-	<ui5-shellbar id="sbAccRoles">
+	<ui5-shellbar id="sb">
 		<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo"/>
+		<ui5-input slot="searchField">
+			<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">1</ui5-li>
+		</ui5-input>
 	</ui5-shellbar>
 
 	<script>
@@ -269,6 +272,10 @@ <h3>ShellBar in Compact</h3>
 			window["press-input"].value = "CoPilot";
 		});
 
+		shellbar.addEventListener("ui5-search-button-click", function(event) {
+			window["press-input"].value = "Search Button";
+		});
+
 		shellbar.addEventListener("ui5-menu-item-click", function(event) {
 			if (checkKeepPopoverOpen.checked) {
 				event.preventDefault();
@@ -322,9 +329,14 @@ <h3>ShellBar in Compact</h3>
 			logoTitle: "Custom logo title",
 		};
 
-		sbAccRoles.accessibilityRoles = {
+		sb.accessibilityRoles = {
 			logoRole: "link"
 		};
+
+		sb.addEventListener("ui5-search-button-click", function(event) {
+			event.preventDefault();
+		});
+
 	</script>
 </body>
 </html>

packages/fiori/test/specs/ShellBar.spec.js

@@ -47,7 +47,7 @@ describe("Component Behavior", () => {
 		});
 
 		it("tests acc custom roles", async () => {
-			const sb = await browser.$("#sbAccRoles");
+			const sb = await browser.$("#sb");
 			const logoDOM = await sb.shadow$(".ui5-shellbar-logo");
 
 			// assertHANDLE_RESIZE_DEBOUNCE_RATE_WAIT
@@ -389,6 +389,30 @@ describe("Component Behavior", () => {
 				assert.strictEqual(await input.getValue(), "CoPilot", "Input value is set by click event of CoPilot");
 			});
 
+			it("tests search-button-click event", async () => {
+				setTimeout(async () => {
+					const searchIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-search-button");
+					const input = await browser.$("#press-input");
+
+					await searchIcon.click();
+					assert.strictEqual(await input.getValue(), "Search Button", "Input value is set by click event of Search Button");
+				}, HANDLE_RESIZE_DEBOUNCE_RATE_WAIT);
+
+			});
+
+			it("tests search-button-click event", async () => {
+				setTimeout(async () => {
+					const searchButton  = await browser.$("#sb").shadow$(".ui5-shellbar-search-button");
+					const searchField  = await browser.$("#sb").shadow$(".ui5-shellbar-search-field");
+					assert.strictEqual(await searchField.isDisplayed(), false, "Search is hidden by default");
+
+					await searchButton .click();
+					assert.notOk(await searchField.isDisplayed(), "Search field should not be opened");
+				}, HANDLE_RESIZE_DEBOUNCE_RATE_WAIT);
+
+			});
+
+
 			it("tests menuItemClick event", async () => {
 				const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button");
 				const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar");