From 165f07e0e7c626a432945208a880605974025caf Mon Sep 17 00:00:00 2001
From: Stefan Dimitrov <stefan.dimitrov02@sap.com>
Date: Mon, 28 Apr 2025 22:09:53 +0300
Subject: [PATCH] feat(ui5-search-field): introduce advanced filtering

---
 .../fiori/cypress/specs/SearchField.cy.tsx    | 40 +++++++++++++++++++
 packages/fiori/src/SearchField.ts             |  3 ++
 packages/fiori/src/SearchFieldTemplate.tsx    | 19 +++++----
 packages/fiori/src/themes/SearchField.css     | 23 +++++++++++
 .../themes/base/SearchField-parameters.css    |  2 +
 .../SearchField-parameters.css                |  2 +
 .../SearchField-parameters.css                |  2 +
 packages/fiori/test/pages/SearchField.html    |  4 ++
 8 files changed, 88 insertions(+), 7 deletions(-)

diff --git a/packages/fiori/cypress/specs/SearchField.cy.tsx b/packages/fiori/cypress/specs/SearchField.cy.tsx
index b1398b77f721..dcd87637cc9f 100644
--- a/packages/fiori/cypress/specs/SearchField.cy.tsx
+++ b/packages/fiori/cypress/specs/SearchField.cy.tsx
@@ -1,3 +1,4 @@
+import Button from "@ui5/webcomponents/dist/Button.js";
 import SearchField from "../../src/SearchField.js";
 import SearchScope from "../../src/SearchScope.js";
 import {
@@ -405,4 +406,43 @@ describe("SearchField general interaction", () => {
 				.should("have.been.calledOnce");
 		});
 	});
+
+	describe("SearchField - Advanced and Scope Slot Rendering", () => {
+		it("renders the advanced slot content when only advanced filtering is provided", () => {
+			cy.mount(
+				<SearchField value="test">
+					<Button slot="advanced" icon="filter"></Button>
+				</SearchField>
+			);
+
+			cy.get("ui5-search-field").as("searchField");
+
+			cy.get("@searchField")
+				.shadow()
+				.find('slot[name="advanced"]')
+				.should("exist");
+		});
+
+		it("renders the scope selector and omits advanced slot when both are provided", () => {
+			cy.mount(
+				<SearchField>
+					<Button slot="advanced" icon="filter"></Button>
+					<SearchScope text="All" slot="scopes"></SearchScope>
+					<SearchScope text="Apps" selected slot="scopes"></SearchScope>
+				</SearchField>
+			);
+
+			cy.get("ui5-search-field").as("searchField");
+
+			cy.get("@searchField")
+				.shadow()
+				.find("ui5-select")
+				.should("exist");
+
+			cy.get("@searchField")
+				.shadow()
+				.find('slot[name="advanced"]')
+				.should("not.exist");
+		});
+	});
 });
diff --git a/packages/fiori/src/SearchField.ts b/packages/fiori/src/SearchField.ts
index eb80edb98c18..59f76a938cc4 100644
--- a/packages/fiori/src/SearchField.ts
+++ b/packages/fiori/src/SearchField.ts
@@ -158,6 +158,9 @@ class SearchField extends UI5Element {
 	@slot({ type: HTMLElement, individualSlots: true, invalidateOnChildChange: true })
 	scopes!: Array<ISearchScope>;
 
+	@slot()
+	advanced!: HTMLElement;
+
 	/**
 	 * @private
 	 */
diff --git a/packages/fiori/src/SearchFieldTemplate.tsx b/packages/fiori/src/SearchFieldTemplate.tsx
index 5f0be6805098..c7695ec2d30d 100644
--- a/packages/fiori/src/SearchFieldTemplate.tsx
+++ b/packages/fiori/src/SearchFieldTemplate.tsx
@@ -23,25 +23,30 @@ export default function SearchFieldTemplate(this: SearchField) {
 		) : (
 			<div class="ui5-search-field-root" role="search" onFocusOut={this._onFocusOutSearch}>
 				<div class="ui5-search-field-content">
-					{!!this.scopes.length &&
+					{this.scopes?.length ? (
 						<>
 							<Select
 								onChange={this._handleScopeChange}
 								class="sapUiSizeCompact ui5-search-field-select"
 								accessibleName={this._translations.scope}
 								tooltip={this._translations.scope}>
-								{this.scopes.map(scopeOption => {
-									return <Option
+								{this.scopes.map(scopeOption => (
+									<Option
 										selected={scopeOption.selected}
 										data-ui5-stable={scopeOption.stableDomRef}
 										ref={this.captureRef.bind(scopeOption)}
-									>{scopeOption.text}</Option>;
-								},
-								this)}
+									>{scopeOption.text}
+									</Option>
+								))}
 							</Select>
 							<div class="ui5-search-field-separator"></div>
 						</>
-					}
+					) : this.advanced ? (
+						<>
+							<slot name="advanced"></slot>
+							<div class="ui5-search-field-separator"></div>
+						</>
+					) : null}
 
 					<input
 						class="ui5-search-field-inner-input"
diff --git a/packages/fiori/src/themes/SearchField.css b/packages/fiori/src/themes/SearchField.css
index 14d1b154aec6..a8ef9ca72b38 100644
--- a/packages/fiori/src/themes/SearchField.css
+++ b/packages/fiori/src/themes/SearchField.css
@@ -97,6 +97,29 @@
 	background-color: var(--sapShellColor);
 }
 
+/* advanced slot */
+::slotted([slot="advanced"]) {
+	min-width: var(--_ui5_search_icon_size);
+	height: var(--_ui5_search_icon_size);
+	border: var(--_ui5-search-icon-border);
+	border-radius: var(--_ui5_search_icon_border_radius);
+	color: var(--sapShell_InteractiveTextColor);
+	outline: none;
+	background: none;
+	box-sizing: border-box;
+	margin-inline-end: 0.25rem;
+	margin-inline-start: 0.25rem;
+}
+
+::slotted([slot="advanced"]:hover) {
+	background: var(--_ui5-search-elements-active-background);
+	border: var(--_ui5_search_filter_button_border_hover);
+}
+
+::slotted([slot="advanced"]:focus-within){
+	background: var(--_ui5-search-elements-active-background);
+}
+
 /* input */
 .ui5-search-field-inner-input {
 	font-size: var(--sapFontSize);
diff --git a/packages/fiori/src/themes/base/SearchField-parameters.css b/packages/fiori/src/themes/base/SearchField-parameters.css
index 80a78959fbbc..6199de598a6b 100644
--- a/packages/fiori/src/themes/base/SearchField-parameters.css
+++ b/packages/fiori/src/themes/base/SearchField-parameters.css
@@ -1,5 +1,6 @@
 :root {
 	--_ui5_search_icon_border_radius: 1.125rem;
+	--_ui5_search_filter_button_border_radius: 1.125rem;
 	--_ui5_search_input_border_radius: 1.125rem;
 	--_ui5-search-border: none;
 	--_ui5-search-wrapper-background: var(--sapShell_InteractiveBackground);
@@ -12,6 +13,7 @@
 	--_ui5-search-elements-background: inherit;
 	--_ui5_search_wrapper_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
 	--_ui5_search_input_outline: none;
+	--_ui5_search_filter_button_border_hover: 1px solid var(--sapButton_Hover_BorderColor);
 	--_ui5_search_icon_size: 1.75rem;
 	--_ui5_search_icon_padding: 0.375rem;
 	--_ui5_search_icon_hover_padding: 0.3125rem;
diff --git a/packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css
index 4c6765422eb6..0058d31c3380 100644
--- a/packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css
@@ -13,6 +13,8 @@
 	--_ui5-search-elements-hover-background: var(--sapShell_Hover_Background);
 	--_ui5-search-elements-active-background: var(--sapShell_Active_Background);
 	--_ui5_search_wrapper_outline: none;
+	/* --_ui5_search_filter_button_border_hover: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor); */
+	--_ui5_search_filter_button_border_hover: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 	--_ui5_search_input_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
 	--_ui5_search_icon_size: 2.25rem;
 	--_ui5_search_icon_padding: 0.5625rem;
diff --git a/packages/fiori/src/themes/sap_horizon_hcw/SearchField-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/SearchField-parameters.css
index 4c6765422eb6..381fae6751d6 100644
--- a/packages/fiori/src/themes/sap_horizon_hcw/SearchField-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_hcw/SearchField-parameters.css
@@ -12,6 +12,8 @@
 	--_ui5-search-elements-background: var(--sapShell_InteractiveBackground);
 	--_ui5-search-elements-hover-background: var(--sapShell_Hover_Background);
 	--_ui5-search-elements-active-background: var(--sapShell_Active_Background);
+	/* --_ui5_search_filter_button_border_hover: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor); */
+	--_ui5_search_filter_button_border_hover: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 	--_ui5_search_wrapper_outline: none;
 	--_ui5_search_input_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
 	--_ui5_search_icon_size: 2.25rem;
diff --git a/packages/fiori/test/pages/SearchField.html b/packages/fiori/test/pages/SearchField.html
index 3b8f50a4331e..01ac880373dd 100644
--- a/packages/fiori/test/pages/SearchField.html
+++ b/packages/fiori/test/pages/SearchField.html
@@ -38,6 +38,10 @@
 			<ui5-search-scope text="Products" slot="scopes"></ui5-search-scope>
 		</ui5-search-field>
 	</div>
+	<ui5-label>advanced filtering search</ui5-label>
+	<ui5-search-field>
+			<ui5-button slot="advanced" icon="filter"></ui5-button>
+	</ui5-search-field>
 	<div class="container" style="padding-top: 1rem; display: flex; flex-direction: column;">
 		<ui5-label>Collapsed search</ui5-label>
 		<div class="container" style="border: 1px solid black; display: flex; padding: 4px; justify-content: flex-end;">