Skip to content

refactor(ui5-search-field): rename advancedFilter slot to filterButton #11617

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 2, 2025
Merged

refactor(ui5-search-field): rename advancedFilter slot to filterButton #11617

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions packages/fiori/cypress/specs/SearchField.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -426,42 +426,42 @@ describe("SearchField general interaction", () => {
});
});

describe("SearchField - Advanced filter and Scope Slot Rendering", () => {
it("renders the advanced filter slot content when only advanced filtering is provided", () => {
describe("SearchField - Filter button and Scope Slot Rendering", () => {
it("renders the filter button slot content when only advanced filtering is provided", () => {
cy.mount(
<SearchField value="test">
<Button slot="advancedFilter" icon="filter"></Button>
<Button slot="filterButton" icon="filter"></Button>
</SearchField>
);

cy.get("ui5-search-field").as("searchField");
cy.get("[ui5-search-field]").as("searchField");

cy.get("@searchField")
.shadow()
.find('slot[name="advancedFilter"]')
.find('slot[name="filterButton"]')
.should("exist");
});

it("renders the scope selector and omits advanced fliter slot when both are provided", () => {
it("renders the scope selector and omits advanced fliter button slot when both are provided", () => {
cy.mount(
<SearchField>
<Button slot="advancedFilter" icon="filter"></Button>
<Button slot="filterButton" icon="filter"></Button>
<SearchScope text="All" slot="scopes"></SearchScope>
<SearchScope text="Apps" selected slot="scopes"></SearchScope>
</SearchField>
);

cy.get("ui5-search-field")
cy.get("[ui5-search-field]")
.as("searchField");

cy.get("@searchField")
.shadow()
.find("ui5-select")
.find("[ui5-select]")
.should("exist");

cy.get("@searchField")
.shadow()
.find('slot[name="advancedFilter"]')
.find('slot[name="filterButton"]')
.should("not.exist");
});
});
Expand Down
6 changes: 4 additions & 2 deletions packages/fiori/src/SearchField.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,13 +161,15 @@ class SearchField extends UI5Element {
scopes!: Array<ISearchScope>;

/**
* Defines the advanced filter slot, used to display an additional filtering button.
* Defines the filter button slot, used to display an additional filtering button.
* This slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.
*
* **Note:** Scope button and Filter button are mutually exclusive.
* @public
* @since 2.11.0
*/
@slot()
advancedFilter!: Array<Button>;
filterButton!: Array<Button>;

/**
* @private
Expand Down
6 changes: 3 additions & 3 deletions packages/fiori/src/SearchFieldTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,10 @@ export default function SearchFieldTemplate(this: SearchField, options?: SearchF
</Select>
<div class="ui5-search-field-separator"></div>
</>
) : this.advancedFilter ? (
) : this.filterButton ? (
<>
<div class="ui5-advanced-wrapper" style="display: contents">
<slot name="advancedFilter"></slot>
<div class="ui5-filter-wrapper" style="display: contents">
<slot name="filterButton"></slot>
</div>
<div class="ui5-search-field-separator"></div>
</>
Expand Down
24 changes: 12 additions & 12 deletions packages/fiori/src/themes/SearchField.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,32 +105,32 @@
background-color: var(--sapShellColor);
}

.ui5-advanced-wrapper {
--_ui5_button_focused_border_radius: var(--_ui5_search_advanced_button_border_radius);
.ui5-filter-wrapper {
--_ui5_button_focused_border_radius: var(--_ui5_search_filter_button_border_radius);
}

/* advanced filter slot */
::slotted([slot="advancedFilter"]) {
/*filter button slot */
::slotted([slot="filterButton"]) {
min-width: var(--_ui5_search_icon_size);
height: var(--_ui5_search_icon_size);
border: var(--_ui5_search_advanced_button_border);
border-radius: var(--_ui5_search_advanced_button_border_radius);
border: var(--_ui5_search_filter_button_border);
border-radius: var(--_ui5_search_filter_button_border_radius);
color: var(--sapShell_InteractiveTextColor);
outline: none;
background: var(--_ui5-search-advanced_button_background_color);
background: var(--_ui5-search-filter_button_background_color);
box-sizing: border-box;
margin-inline-end: 0.1875rem;
margin-inline-start: 0.25rem;
}

::slotted([slot="advancedFilter"]:focus-within) {
background-color: var(--ui5_search_advanced_button_background_active);
border: var(--_ui5_search_advanced_button_border);
::slotted([slot="filterButton"]:focus-within) {
background-color: var(--ui5_search_filter_button_background_active);
border: var(--_ui5_search_filter_button_border);
}

::slotted([slot="advancedFilter"]:hover) {
::slotted([slot="filterButton"]:hover) {
background-color: var(--sapShell_Hover_Background);
border: var(--_ui5_seach_advanced_button_border_hover);
border: var(--_ui5_seach_filter_button_border_hover);
}

/* input */
Expand Down
10 changes: 5 additions & 5 deletions packages/fiori/src/themes/base/SearchField-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@
--_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_advanced_button_border_radius: 1.125rem;
--_ui5_seach_advanced_button_border_hover: 1px solid var(--sapButton_Hover_BorderColor);
--_ui5_search_advanced_button_border: none;
--_ui5-search-advanced_button_background_color: inherit;
--ui5_search_advanced_button_background_active: inherit;
--_ui5_search_filter_button_border_radius: 1.125rem;
--_ui5_seach_filter_button_border_hover: 1px solid var(--sapButton_Hover_BorderColor);
--_ui5_search_filter_button_border: none;
--_ui5-search-filter_button_background_color: inherit;
--ui5_search_filter_button_background_active: inherit;
--_ui5_search_icon_size: 1.75rem;
--_ui5_search_icon_padding: 0.375rem;
--_ui5_search_icon_hover_padding: 0.3125rem;
Expand Down
8 changes: 4 additions & 4 deletions packages/fiori/src/themes/sap_fiori_3/SearchField-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@
--_ui5-search-elements-active-background: var(--sapShell_Active_Background);
--_ui5_search_wrapper_outline: none;
--_ui5_search_input_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
--_ui5_search_advanced_button_border_radius: 0.375rem;
--_ui5_seach_advanced_button_border_hover: 1px solid var(--sapButton_Hover_BorderColor);
--_ui5-search-advanced_button_background_color: var(--sapShell_InteractiveBackground);
--ui5_search_advanced_button_background_active: var(--sapShell_InteractiveBackground);
--_ui5_search_filter_button_border_radius: 0.375rem;
--_ui5_seach_filter_button_border_hover: 1px solid var(--sapButton_Hover_BorderColor);
--_ui5-search-filter_button_background_color: var(--sapShell_InteractiveBackground);
--ui5_search_filter_button_background_active: var(--sapShell_InteractiveBackground);
--_ui5_search_icon_size: 2.25rem;
--_ui5_search_icon_padding: 0.625rem;
--_ui5_search_icon_hover_padding: 0.5625rem;
Expand Down
6 changes: 3 additions & 3 deletions packages/fiori/src/themes/sap_fiori_3_dark/SearchField-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
--_ui5-search-elements-active-background: var(--sapShell_Active_Background);
--_ui5_search_wrapper_outline: none;
--_ui5_search_input_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
--_ui5_search_advanced_button_border_radius: 0.375rem;
--_ui5-search-advanced_button_background_color: var(--sapShell_InteractiveBackground);
--ui5_search_advanced_button_background_active: var(--sapShell_InteractiveBackground);
--_ui5_search_filter_button_border_radius: 0.375rem;
--_ui5-search-filter_button_background_color: var(--sapShell_InteractiveBackground);
--ui5_search_filter_button_background_active: var(--sapShell_InteractiveBackground);
--_ui5_search_icon_size: 2.25rem;
--_ui5_search_icon_padding: 0.625rem;
--_ui5_search_icon_hover_padding: 0.5625rem;
Expand Down
8 changes: 4 additions & 4 deletions packages/fiori/src/themes/sap_fiori_3_hcb/SearchField-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@
--_ui5-search-elements-active-background: var(--sapShell_Active_Background);
--_ui5_search_wrapper_outline: none;
--_ui5_search_input_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
--_ui5_search_advanced_button_border_radius: 0.375rem;
--_ui5-search-advanced_button_background_color: var(--sapShell_InteractiveBackground);
--_ui5_search_advanced_button_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
--ui5_search_advanced_button_background_active: var(--sapShell_Hover_Background);
--_ui5_search_filter_button_border_radius: 0.375rem;
--_ui5-search-filter_button_background_color: var(--sapShell_InteractiveBackground);
--_ui5_search_filter_button_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
--ui5_search_filter_button_background_active: var(--sapShell_Hover_Background);
--_ui5_search_icon_size: 2.25rem;
--_ui5_search_icon_padding: 0.5625rem;
--_ui5_search_icon_hover_padding: 0.5625rem;
Expand Down
6 changes: 3 additions & 3 deletions packages/fiori/src/themes/sap_fiori_3_hcw/SearchField-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
--_ui5-search-elements-active-background: var(--sapShell_Active_Background);
--_ui5_search_wrapper_outline: none;
--_ui5_search_input_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
--_ui5_search_advanced_button_border_radius: 0.375rem;
--_ui5_search_advanced_button_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
--ui5_search_advanced_button_background_active: var(--sapShell_Hover_Background);
--_ui5_search_filter_button_border_radius: 0.375rem;
--_ui5_search_filter_button_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
--ui5_search_filter_button_background_active: var(--sapShell_Hover_Background);
--_ui5_search_icon_size: 2.25rem;
--_ui5_search_icon_padding: 0.5625rem;
--_ui5_search_icon_hover_padding: 0.5625rem;
Expand Down
6 changes: 3 additions & 3 deletions packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
--_ui5-search-elements-active-background: var(--sapShell_Active_Background);
--_ui5_search_wrapper_outline: none;
--_ui5_search_input_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
--_ui5_search_advanced_button_border_radius: 0.375rem;
--_ui5_search_advanced_button_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
--ui5_search_advanced_button_background_active: var(--sapShell_Hover_Background);
--_ui5_search_filter_button_border_radius: 0.375rem;
--_ui5_search_filter_button_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
--ui5_search_filter_button_background_active: var(--sapShell_Hover_Background);
--_ui5_search_icon_size: 2.25rem;
--_ui5_search_icon_padding: 0.5625rem;
--_ui5_search_icon_hover_padding: 0.5625rem;
Expand Down
6 changes: 3 additions & 3 deletions packages/fiori/src/themes/sap_horizon_hcw/SearchField-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
--_ui5-search-elements-active-background: var(--sapShell_Active_Background);
--_ui5_search_wrapper_outline: none;
--_ui5_search_input_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
--_ui5_search_advanced_button_border_radius: 0.375rem;
--_ui5_search_advanced_button_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
--ui5_search_advanced_button_background_active: var(--sapShell_Hover_Background);
--_ui5_search_filter_button_border_radius: 0.375rem;
--_ui5_search_filter_button_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
--ui5_search_filter_button_background_active: var(--sapShell_Hover_Background);
--_ui5_search_icon_size: 2.25rem;
--_ui5_search_icon_padding: 0.5625rem;
--_ui5_search_icon_hover_padding: 0.5625rem;
Expand Down
2 changes: 1 addition & 1 deletion packages/fiori/test/pages/SearchField.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
</div>
<ui5-label>Advanced filtering search</ui5-label>
<ui5-search-field>
<ui5-button slot="advancedFilter" icon="filter"></ui5-button>
<ui5-button slot="filterButton" 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>
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_components_pages/fiori/Search/Search.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ The examples show the search message area, the search action, filtering per user
<Advanced />

### Advanced Filtering Button
This example shows how to use a custom advanced filtering button via the `advancedFilter` slot.
This example shows how to use a custom advanced filtering button via the `filterButton` slot.

<AdvancedFilter />

Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/fiori/Search/AdvancedFilter/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<body style="background-color: var(--sapBackgroundColor); height: 350px">
<!-- playground-fold-end -->
<ui5-search id="advancedFiltering" placeholder="Start typing ...">
<ui5-button id="advancedButton" slot="advancedFilter" icon="sap-icon://filter"></ui5-button>
<ui5-button id="advancedButton" slot="filterButton" icon="sap-icon://filter"></ui5-button>
</ui5-search>
<ui5-toast id="advancedFilterToast" placement="BottomCenter">Search refined using advanced filters</ui5-toast>
<!-- playground-fold -->
Expand Down
Loading