From eeb194f51297b828680645ad4c75ebdc07f2eda5 Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Mon, 7 Apr 2025 11:30:47 +0300 Subject: [PATCH 01/16] refactor(ui5-shellbar): support ui5-search --- packages/fiori/src/ShellBar.ts | 117 +++++++---- packages/fiori/src/ShellBarTemplate.tsx | 48 +++-- packages/fiori/src/themes/ShellBar.css | 9 +- .../fiori/test/pages/ShellBar_evolution.html | 186 ++---------------- 4 files changed, 128 insertions(+), 232 deletions(-) diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index b5eb271f9e80..e7ce79062408 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -68,6 +68,7 @@ import { SHELLBAR_SEARCH_BTN_OPEN, SHELLBAR_PRODUCT_SWITCH_BTN, } from "./generated/i18n/i18n-defaults.js"; +import type Search from "./Search.js"; type ShellBarLogoAccessibilityAttributes = { role?: Extract, @@ -113,6 +114,10 @@ type ShellBarSearchButtonEventDetail = { searchFieldVisible: boolean; }; +type ShellBarSearchFieldExpandEventDetail = { + value: boolean; +}; + interface IShellBarHidableItem { classes: string, id: string, @@ -262,6 +267,10 @@ const PREDEFINED_PLACE_ACTIONS = ["feedback", "sys-help"]; bubbles: true, }) +@event("search-field-expand", { + bubbles: true, +}) + /** * Fired, when an item from the content slot is hidden or shown. * **Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change. @@ -282,6 +291,7 @@ class ShellBar extends UI5Element { "logo-click": ShellBarLogoClickEventDetail, "menu-item-click": ShellBarMenuItemClickEventDetail, "search-button-click": ShellBarSearchButtonEventDetail, + "search-field-expand": ShellBarSearchFieldExpandEventDetail, "content-item-visibility-change": ShellBarContentItemVisibilityChangeEventDetail } /** @@ -329,16 +339,6 @@ class ShellBar extends UI5Element { @property({ type: Boolean }) showProductSwitch = false; - /** - * Defines, if the Search Field would be displayed when there is a valid `searchField` slot. - * - * **Note:** By default the Search Field is not displayed. - * @default false - * @public - */ - @property({ type: Boolean }) - showSearchField = false; - /** * Defines additional accessibility attributes on different areas of the component. * @@ -458,7 +458,10 @@ class ShellBar extends UI5Element { * Defines the `ui5-input`, that will be used as a search field. * @public */ - @slot() + @slot({ + type: HTMLElement, + invalidateOnChildChange: true, + }) searchField!: Array; /** @@ -508,6 +511,7 @@ class ShellBar extends UI5Element { _autoRestoreSearchField = false; _headerPress: () => void; + _showSearchField = false; static get FIORI_3_BREAKPOINTS() { return [ @@ -568,14 +572,14 @@ class ShellBar extends UI5Element { const spacerWidth = this.shadowRoot!.querySelector(".ui5-shellbar-spacer") ? this.shadowRoot!.querySelector(".ui5-shellbar-spacer")!.getBoundingClientRect().width : 0; const searchFieldWidth = this.domCalculatedValues("--_ui5_shellbar_search_field_width"); if (this.showFullWidthSearch) { - this.showSearchField = false; + this.setSearchState(true); return; } if ((spacerWidth <= searchFieldWidth && this.contentItemsHidden.length !== 0) && this.showSearchField) { - this.showSearchField = false; + this.setSearchState(false); this._autoRestoreSearchField = true; } else if (spacerWidth > searchFieldWidth && this._autoRestoreSearchField) { - this.showSearchField = true; + this.setSearchState(true); this._autoRestoreSearchField = false; } } @@ -711,10 +715,6 @@ class ShellBar extends UI5Element { return Number(styleSet.getPropertyValue(propertyName).replace("rem", "")) * parseInt(getComputedStyle(document.body).getPropertyValue("font-size")); } - _parsePxValue(styleSet: CSSStyleDeclaration, propertyName: string): number { - return Number(styleSet.getPropertyValue(propertyName).replace("px", "")); - } - domCalculatedValues(cssVar: string): number { const shellbarComputerStyle = getComputedStyle(this.getDomRef()!); return this._calculateCSSREMValue(shellbarComputerStyle, getScopedVarName(cssVar)); // px @@ -736,6 +736,37 @@ class ShellBar extends UI5Element { this._observeContentItems(); } + get showSearchField() { + if (this.hasAdvancedSearch) { + return !this.advancedSearch.collapsed; + } + return this._showSearchField; + } + + /** + * Defines, if the Search Field would be displayed when there is a valid `searchField` slot. + * + * **Note:** By default the Search Field is not displayed. + * @default false + * @public + */ + @property({ type: Boolean }) + set showSearchField(value: boolean) { + if (this.hasAdvancedSearch) { + this.advancedSearch.collapsed = !value; + } + this._showSearchField = value; + } + + /** + * Use this method to change the state of the search filed according to internal logic. + * An event is fired to notify the change. + */ + setSearchState(value: boolean) { + this.fireDecoratorEvent("search-field-expand", { value }); + this.showSearchField = value; + } + onAfterRendering() { this._lastOffsetWidth = this.offsetWidth; this._overflowActions(); @@ -833,7 +864,7 @@ class ShellBar extends UI5Element { this._updateItemsInfo(itemsInfo); this._updateContentInfo(contentInfo); this._updateOverflowNotifications(); - this.showFullWidthSearch = this.overflowed; + this.showFullWidthSearch = this.overflowed && this.showSearchField; } _toggleActionPopover() { @@ -865,7 +896,7 @@ class ShellBar extends UI5Element { if (defaultPrevented) { return; } - this.showSearchField = !this.showSearchField; + this.setSearchState(!this.showSearchField); if (!this.showSearchField) { return; @@ -932,7 +963,8 @@ class ShellBar extends UI5Element { } _handleCancelButtonPress() { - this.showSearchField = false; + this.showFullWidthSearch = false; + this.setSearchState(false); } _handleProductSwitchPress(e: MouseEvent) { @@ -1201,7 +1233,7 @@ class ShellBar extends UI5Element { get autoSearchField() { const onFocus = document.activeElement === this.searchField[0]; - const isEmpty = this.searchField[0]?.value.length === 0; + const isEmpty = this.searchField[0]?.value?.length === 0; return (this.showSearchField || this._autoRestoreSearchField) && !onFocus && isEmpty; } @@ -1249,6 +1281,7 @@ class ShellBar extends UI5Element { }, search: { "ui5-shellbar-hidden-button": this.isIconHidden("search"), + "ui5-shellbar-search-trigger": true, }, overflow: { "ui5-shellbar-hidden-button": this._hiddenIcons.length === 0, @@ -1257,14 +1290,20 @@ class ShellBar extends UI5Element { "ui5-shellbar-hidden-button": this.isIconHidden("assistant"), "ui5-shellbar-assistant-button": true, }, + searchField: { + "ui5-shellbar-search-field": this.showSearchField, + "ui5-shellbar-search-trigger": this.hasAdvancedSearch, + "ui5-shellbar-hidden-button": !this.showSearchField, + }, }; } get styles() { + const styles = { + "display": this.showSearchField ? "flex" : "none", + }; return { - searchField: { - "display": this.showSearchField ? "flex" : "none", - }, + searchField: this.hasAdvancedSearch ? {} : styles, }; } @@ -1340,7 +1379,7 @@ class ShellBar extends UI5Element { } get _contentItemsText() { - return ShellBar.i18nBundle.getText(SHELLBAR_ADDITIONAL_CONTEXT); + return this._enableContentAreaAccessibility ? ShellBar.i18nBundle.getText(SHELLBAR_ADDITIONAL_CONTEXT) : undefined; } get _searchFieldDescription() { @@ -1348,11 +1387,13 @@ class ShellBar extends UI5Element { } get _contentItemsRole() { - if (this.contentItems.length === 1) { - return; + if (this._enableContentAreaAccessibility) { + return "group"; } + } - return "group"; + get _enableContentAreaAccessibility() { + return this.contentItems.length > 1; } get contentItems() { @@ -1402,10 +1443,6 @@ class ShellBar extends UI5Element { return ShellBar.i18nBundle.getText(SHELLBAR_PRODUCT_SWITCH_BTN); } - get isSearchFieldVisible() { - return this.searchField[0]?.offsetWidth || 0; - } - get _profileText() { return this.accessibilityAttributes.profile?.name as string || ShellBar.i18nBundle.getText(SHELLBAR_PROFILE); } @@ -1429,7 +1466,7 @@ class ShellBar extends UI5Element { get hidableDomElements(): HTMLElement [] { const items = Array.from(this.shadowRoot!.querySelectorAll(".ui5-shellbar-button:not(.ui5-shellbar-search-button):not(.ui5-shellbar-overflow-button):not(.ui5-shellbar-cancel-button):not(.ui5-shellbar-no-overflow-button)")); const assistant = this.shadowRoot!.querySelector(".ui5-shellbar-assistant-button"); - const searchButton = this.shadowRoot!.querySelector(".ui5-shellbar-search-button"); + const searchTrigger = this.shadowRoot!.querySelector(".ui5-shellbar-search-trigger"); const contentItems = this.contentItemsWrappersSorted; const firstContentItem = contentItems.pop(); const prioritizeContent = this.showSearchField && this.hasSearchField; @@ -1455,7 +1492,7 @@ class ShellBar extends UI5Element { ...items.toReversed(), assistant, ...contentItems, - searchButton, + searchTrigger, firstContentItem, ]; } @@ -1531,9 +1568,17 @@ class ShellBar extends UI5Element { get isSBreakPoint() { return this.breakpointSize === "S"; } + + get hasAdvancedSearch() { + return this.hasSearchField && !this.searchField[0].hasAttribute("ui5-input"); + } + + get advancedSearch() { + return this.searchField[0] as unknown as Search; + } } -ShellBar.define(); +ShellBar.define(); export default ShellBar; diff --git a/packages/fiori/src/ShellBarTemplate.tsx b/packages/fiori/src/ShellBarTemplate.tsx index 42ec7e756d85..c66e2ebb0888 100644 --- a/packages/fiori/src/ShellBarTemplate.tsx +++ b/packages/fiori/src/ShellBarTemplate.tsx @@ -75,7 +75,11 @@ export default function ShellBarTemplate(this: ShellBar) {
{this.hasContentItems && ( - <> +
{this.showStartSeparator && (
)} - +
)} {!this.hasContentItems &&
}
@@ -138,27 +142,29 @@ export default function ShellBarTemplate(this: ShellBar) {
)} -
+
-
)} -
+
- {!this.hasAdvancedSearch && ( + {!this.hasSelfCollapsibleSearch && ( +
+ @@ -123,5 +173,28 @@ searches.forEach((searchField) => { searchField.addEventListener('ui5-search', handleSearchEvent); }); + + ["focus", "blur", "input"].forEach((event) => { + customSearchInput.addEventListener(event, () => { + shellbar_custom_search.disableAutoSearchField = + customSearchInput.value || customSearchInput === document.activeElement; + }); + }); + + shellbar_custom_search.addEventListener('ui5-search-field-expand', async (e) => { + shellbar_custom_search.hideSearchButton = e.detail.value; + }); + + shellbar_custom_search.addEventListener('ui5-search-button-click', async (e) => { + await window["sap-ui-webcomponents-bundle"].renderFinished(); + customSearchInput.focus(); + }); + + customSearchClose.addEventListener('click', async () => { + shellbar_custom_search.showSearchField = false; + shellbar_custom_search.hideSearchButton = false; + await window["sap-ui-webcomponents-bundle"].renderFinished(); + shellbar_custom_search.searchButtonDomRef.focus(); + }); From fff1bae714aab2bfcc9e0d61235152701a7afd67 Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Thu, 10 Apr 2025 01:33:28 +0300 Subject: [PATCH 06/16] refactor: renames and tests --- packages/fiori/cypress/specs/ShellBar.cy.tsx | 105 +++++++++ packages/fiori/src/ShellBar.ts | 33 ++- .../fiori/test/pages/ShellBar_evolution.html | 222 ++++++++++++++---- 3 files changed, 305 insertions(+), 55 deletions(-) diff --git a/packages/fiori/cypress/specs/ShellBar.cy.tsx b/packages/fiori/cypress/specs/ShellBar.cy.tsx index 5527304ed42c..d68dd8f3ac0f 100644 --- a/packages/fiori/cypress/specs/ShellBar.cy.tsx +++ b/packages/fiori/cypress/specs/ShellBar.cy.tsx @@ -11,6 +11,7 @@ import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js"; import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js"; import Avatar from "@ui5/webcomponents/dist/Avatar.js"; import Switch from "@ui5/webcomponents/dist/Switch.js"; +import Search from "../../src/Search.js"; const RESIZE_THROTTLE_RATE = 300; // ms @@ -390,4 +391,108 @@ describe("Slots", () => { .should("not.exist"); }); }); + + describe("Search field slot", () => { + it("Test search button is not visible when the search field slot is empty", () => { + cy.mount( + + ); + cy.get("#shellbar") + .shadow() + .find(".ui5-shellbar-search-button") + .should("not.exist"); + }); + + it("Test search button is visible when the search field slot is not empty", () => { + cy.mount( + + + + ); + cy.get("#shellbar") + .shadow() + .find(".ui5-shellbar-search-button") + .should("exist"); + }); + + it("Test search button is not visible when the hide-search-button property is set to true", () => { + cy.mount( + + + + ); + cy.get("#shellbar") + .shadow() + .find(".ui5-shellbar-search-button") + .should("not.exist"); + }); + + it("Test search field is collapsed by default and expanded on click", () => { + cy.mount( + + + + ); + cy.get("#shellbar").shadow().as("shellbar"); + cy.get("@shellbar").find(".ui5-shellbar-search-field").should("not.exist"); + cy.get("@shellbar").find(".ui5-shellbar-search-button").click(); + cy.get("@shellbar").find(".ui5-shellbar-search-field").should("exist"); + }); + + it("Test search field is expanded by default when show-search-field is set to true", () => { + cy.mount( + + + + ); + cy.get("#shellbar") + .shadow() + .find(".ui5-shellbar-search-field") + .should("exist"); + }); + + it("Test search button is not visible when a self-collapsible search field slot is empty", () => { + cy.mount( + + + + ); + cy.get("#shellbar") + .shadow() + .find(".ui5-shellbar-search-button") + .should("not.exist"); + }); + + it("Test self-collapsible search is expanded and collapsed by the show-search-field property", () => { + cy.mount( + + + + ); + cy.get("#search").should("have.prop", "collapsed", false); + cy.get("#shellbar").invoke("prop", "showSearchField", false); + cy.get("#search").should("have.prop", "collapsed", true); + }); + + + it("Test showSearchField property is true when using expanded search field", () => { + cy.mount( + + + + ); + cy.get("#search").should("have.prop", "collapsed", false); + cy.get("#shellbar").invoke("prop", "showSearchField").should("equal", true); + }); + + it("Test showSearchField property is false when using collapsed search field", () => { + cy.mount( + + + + ); + cy.get("#search").should("have.prop", "collapsed", true); + cy.get("#shellbar").invoke("prop", "showSearchField").should("equal", false); + }); + }); }); diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index f6fd80adfa63..09c4d5151a43 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -114,7 +114,7 @@ type ShellBarSearchButtonEventDetail = { }; type ShellBarSearchFieldExpandEventDetail = { - value: boolean; + expanded: boolean; }; interface IShellBarHidableItem { @@ -266,6 +266,12 @@ const PREDEFINED_PLACE_ACTIONS = ["feedback", "sys-help"]; bubbles: true, }) +/** + * Fired, when the search field is expanded or collapsed. + * @public + * @since 2.10.0 + * @param {Boolean} expanded whether the search field is expanded + */ @event("search-field-expand", { bubbles: true, }) @@ -294,9 +300,21 @@ class ShellBar extends UI5Element { "content-item-visibility-change": ShellBarContentItemVisibilityChangeEventDetail } + /** + * Defines the visibility state of the search button. + * @public + * **Note:** The `hideSearchButton` property is in an experimental state and is a subject to change. + * @default false + */ @property({ type: Boolean }) hideSearchButton = false; + /** + * Disabled the automatic search field expansion/collapse when the available space is not enough. + * @public + * **Note:** The `disableAutoSearchField` property is in an experimental state and is a subject to change. + * @default false + */ @property({ type: Boolean }) disableAutoSearchField = false; @@ -768,9 +786,9 @@ class ShellBar extends UI5Element { * Use this method to change the state of the search filed according to internal logic. * An event is fired to notify the change. */ - setSearchState(value: boolean) { - this.fireDecoratorEvent("search-field-expand", { value }); - this.showSearchField = value; + setSearchState(expanded: boolean) { + this.fireDecoratorEvent("search-field-expand", { expanded }); + this.showSearchField = expanded; } onAfterRendering() { @@ -1032,6 +1050,12 @@ class ShellBar extends UI5Element { return this.shadowRoot!.querySelector(`*[data-ui5-stable="product-switch"]`); } + /** + * Returns the `search` icon DOM ref. + * @public + * @default null + * @since 2.10.0 + */ get searchButtonDomRef(): HTMLElement | null { return this.shadowRoot!.querySelector(`*[data-ui5-stable="toggle-search"]`); } @@ -1616,4 +1640,5 @@ export type { ShellBarMenuItemClickEventDetail, ShellBarAccessibilityAttributes, ShellBarSearchButtonEventDetail, + ShellBarSearchFieldExpandEventDetail, }; diff --git a/packages/fiori/test/pages/ShellBar_evolution.html b/packages/fiori/test/pages/ShellBar_evolution.html index 5980c47b5cff..675d2ae5740f 100644 --- a/packages/fiori/test/pages/ShellBar_evolution.html +++ b/packages/fiori/test/pages/ShellBar_evolution.html @@ -20,58 +20,96 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + - - PR10 + primary-title="S/4HANA Cloud" + show-notifications + > + + - PR 4 - PR3 + - + EMEA + Deliveries overdue for billing neeed more text because of a bug - PR2 - - PR1 - - PR6 - - PR7 - - PR8 +
+ New Version + +
- PR9 + +
Instructions
+ - + + + John Miller + + - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + - @@ -98,27 +136,23 @@ - - + - + - @@ -157,9 +191,93 @@ - + + + + + + + + + + + + + + + + + + + + + + +
+ + + + From 6eddab1a02a7d6c1e73d601ecb1974d86641e998 Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Thu, 10 Apr 2025 01:47:57 +0300 Subject: [PATCH 07/16] test: fix failing --- packages/fiori/cypress/specs/ShellBar.cy.tsx | 4 ++-- packages/fiori/src/themes/ShellBar.css | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/fiori/cypress/specs/ShellBar.cy.tsx b/packages/fiori/cypress/specs/ShellBar.cy.tsx index d68dd8f3ac0f..f30f9b67c01f 100644 --- a/packages/fiori/cypress/specs/ShellBar.cy.tsx +++ b/packages/fiori/cypress/specs/ShellBar.cy.tsx @@ -325,13 +325,13 @@ describe("Slots", () => { function assertStartSeparatorVisibility(expectedExist: boolean) { cy.get("#shellbar") .shadow() - .find(".ui5-shellbar-overflow-container-right-inner > .ui5-shellbar-separator-start") + .find(".ui5-shellbar-content-items > .ui5-shellbar-separator-start") .should(expectedExist ? "exist" : "not.exist"); } function assertEndSeparatorVisibility(expectedExist: boolean) { cy.get("#shellbar") .shadow() - .find(".ui5-shellbar-overflow-container-right-inner > .ui5-shellbar-separator-end") + .find(".ui5-shellbar-content-items > .ui5-shellbar-separator-end") .should(expectedExist ? "exist" : "not.exist"); } diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css index 419928e6d548..d93fd7dee73b 100644 --- a/packages/fiori/src/themes/ShellBar.css +++ b/packages/fiori/src/themes/ShellBar.css @@ -360,6 +360,9 @@ slot[name="profile"] { justify-content: center; align-items: center; flex-grow: 1; + /* max-content prevents the container from overflowing + which is needed for the responsive logic */ + min-width: max-content; } .ui5-shellbar-spacer { From d5440d13b815cca4ab827bfe322abd769e541a9e Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Thu, 10 Apr 2025 01:57:10 +0300 Subject: [PATCH 08/16] Update packages/fiori/src/ShellBar.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- packages/fiori/src/ShellBar.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index 09c4d5151a43..aac9fa0adff1 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -310,7 +310,7 @@ class ShellBar extends UI5Element { hideSearchButton = false; /** - * Disabled the automatic search field expansion/collapse when the available space is not enough. + * Disables the automatic search field expansion/collapse when the available space is not enough. * @public * **Note:** The `disableAutoSearchField` property is in an experimental state and is a subject to change. * @default false From cc9cf00c2275f28bab9ae235eac934ee813f2fdf Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Thu, 10 Apr 2025 12:15:12 +0300 Subject: [PATCH 09/16] test: fix failing --- packages/fiori/test/specs/ShellBar.spec.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/fiori/test/specs/ShellBar.spec.js b/packages/fiori/test/specs/ShellBar.spec.js index f729d352e4e4..b2f1fd232fba 100644 --- a/packages/fiori/test/specs/ShellBar.spec.js +++ b/packages/fiori/test/specs/ShellBar.spec.js @@ -172,6 +172,8 @@ describe("Component Behavior", () => { it("tests search-button-click event", async () => { await browser.setWindowSize(870, 1680); // search icon is not visible on XXL breakpoint await browser.pause(HANDLE_RESIZE_DEBOUNCE_RATE_WAIT); + const shellBar = await browser.$("#shellbar"); + await shellBar.setProperty('showSearchField', false); const searchIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-search-button"); const input = await browser.$("#press-input"); From e6dd2ba0198497e90a923e67b7317620a9eace27 Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Thu, 10 Apr 2025 14:20:58 +0300 Subject: [PATCH 10/16] chore: rename event --- packages/fiori/src/ShellBar.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index aac9fa0adff1..925a5b2ae6d9 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -113,7 +113,7 @@ type ShellBarSearchButtonEventDetail = { searchFieldVisible: boolean; }; -type ShellBarSearchFieldExpandEventDetail = { +type ShellBarSearchFieldToggleEventDetail = { expanded: boolean; }; @@ -272,7 +272,7 @@ const PREDEFINED_PLACE_ACTIONS = ["feedback", "sys-help"]; * @since 2.10.0 * @param {Boolean} expanded whether the search field is expanded */ -@event("search-field-expand", { +@event("search-field-toggle", { bubbles: true, }) @@ -296,7 +296,7 @@ class ShellBar extends UI5Element { "logo-click": ShellBarLogoClickEventDetail, "menu-item-click": ShellBarMenuItemClickEventDetail, "search-button-click": ShellBarSearchButtonEventDetail, - "search-field-expand": ShellBarSearchFieldExpandEventDetail, + "search-field-toggle": ShellBarSearchFieldToggleEventDetail, "content-item-visibility-change": ShellBarContentItemVisibilityChangeEventDetail } @@ -787,7 +787,7 @@ class ShellBar extends UI5Element { * An event is fired to notify the change. */ setSearchState(expanded: boolean) { - this.fireDecoratorEvent("search-field-expand", { expanded }); + this.fireDecoratorEvent("search-field-toggle", { expanded }); this.showSearchField = expanded; } @@ -1640,5 +1640,5 @@ export type { ShellBarMenuItemClickEventDetail, ShellBarAccessibilityAttributes, ShellBarSearchButtonEventDetail, - ShellBarSearchFieldExpandEventDetail, + ShellBarSearchFieldToggleEventDetail, }; From 3b7b8a90abc39da3db36e89b9a58b3b56821ecb8 Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Thu, 10 Apr 2025 14:22:58 +0300 Subject: [PATCH 11/16] chore: export interface --- packages/fiori/src/ShellBar.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index 925a5b2ae6d9..f02498fbeca7 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -1641,4 +1641,5 @@ export type { ShellBarAccessibilityAttributes, ShellBarSearchButtonEventDetail, ShellBarSearchFieldToggleEventDetail, + IShellBarSelfCollapsibleSearch, }; From 6e5abd4e0a3ac0c4131990f88c3fef70ea8422f1 Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Thu, 10 Apr 2025 14:23:37 +0300 Subject: [PATCH 12/16] chore: change type to interface --- packages/fiori/src/ShellBar.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index f02498fbeca7..be349bb1f1c9 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -1616,8 +1616,8 @@ class ShellBar extends UI5Element { } } -type IShellBarSelfCollapsibleSearch = { - "collapsed": boolean; +interface IShellBarSelfCollapsibleSearch { + collapsed: boolean; } const isSelfCollapsibleSearch = (searchField: any): searchField is IShellBarSelfCollapsibleSearch => { From 4e6911f944c040c1800395941fc66d7cfd807754 Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Thu, 10 Apr 2025 15:49:21 +0300 Subject: [PATCH 13/16] chore: rename event in sample --- packages/fiori/test/pages/ShellBar_evolution.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fiori/test/pages/ShellBar_evolution.html b/packages/fiori/test/pages/ShellBar_evolution.html index 675d2ae5740f..fa879cae34d3 100644 --- a/packages/fiori/test/pages/ShellBar_evolution.html +++ b/packages/fiori/test/pages/ShellBar_evolution.html @@ -299,7 +299,7 @@ }); }); - shellbar_hide_search.addEventListener('ui5-search-field-expand', async (e) => { + shellbar_hide_search.addEventListener('ui5-search-field-toggle', async (e) => { shellbar_hide_search.hideSearchButton = e.detail.expanded; }); From a6629ab06078937788ee59aff5e81cff342735af Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Thu, 10 Apr 2025 16:20:33 +0300 Subject: [PATCH 14/16] chore: explicit type of showSearchField --- packages/fiori/src/ShellBar.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index be349bb1f1c9..aab175b3722a 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -760,13 +760,6 @@ class ShellBar extends UI5Element { this._observeContentItems(); } - get showSearchField() { - if (isSelfCollapsibleSearch(this.search)) { - return !this.search.collapsed; - } - return this._showSearchField; - } - /** * Defines, if the Search Field would be displayed when there is a valid `searchField` slot. * @@ -782,6 +775,13 @@ class ShellBar extends UI5Element { this._showSearchField = value; } + get showSearchField(): boolean { + if (isSelfCollapsibleSearch(this.search)) { + return !this.search.collapsed; + } + return this._showSearchField; + } + /** * Use this method to change the state of the search filed according to internal logic. * An event is fired to notify the change. From 5a26e0a4e6e601c4dd88cbf02e8d012dd751c6a6 Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Thu, 10 Apr 2025 16:29:16 +0300 Subject: [PATCH 15/16] chore: correct public jsdoc tag --- packages/fiori/src/ShellBar.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index aab175b3722a..44028e5dd9e5 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -268,9 +268,9 @@ const PREDEFINED_PLACE_ACTIONS = ["feedback", "sys-help"]; /** * Fired, when the search field is expanded or collapsed. - * @public * @since 2.10.0 * @param {Boolean} expanded whether the search field is expanded + * @public */ @event("search-field-toggle", { bubbles: true, @@ -302,18 +302,20 @@ class ShellBar extends UI5Element { /** * Defines the visibility state of the search button. - * @public + * * **Note:** The `hideSearchButton` property is in an experimental state and is a subject to change. * @default false + * @public */ @property({ type: Boolean }) hideSearchButton = false; /** * Disables the automatic search field expansion/collapse when the available space is not enough. - * @public + * * **Note:** The `disableAutoSearchField` property is in an experimental state and is a subject to change. * @default false + * @public */ @property({ type: Boolean }) disableAutoSearchField = false; From eab5b8aea3f7084449cea6bd16f921dfbfff300f Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Fri, 11 Apr 2025 09:47:02 +0300 Subject: [PATCH 16/16] test: refactor failing test to cypress --- packages/fiori/cypress/specs/ShellBar.cy.tsx | 28 ++++++++++++++++++++ packages/fiori/src/ShellBar.ts | 2 +- packages/fiori/test/specs/ShellBar.spec.js | 13 --------- 3 files changed, 29 insertions(+), 14 deletions(-) diff --git a/packages/fiori/cypress/specs/ShellBar.cy.tsx b/packages/fiori/cypress/specs/ShellBar.cy.tsx index f30f9b67c01f..3f7c1ad3b4ca 100644 --- a/packages/fiori/cypress/specs/ShellBar.cy.tsx +++ b/packages/fiori/cypress/specs/ShellBar.cy.tsx @@ -496,3 +496,31 @@ describe("Slots", () => { }); }); }); + +describe("Events", () => { + it("Test click on the search button fires search-button-click event", () => { + cy.mount( + + + + ); + cy.get("[ui5-shellbar") + .as("shellbar"); + + cy.get("@shellbar") + .then(shellbar => { + shellbar.get(0).addEventListener("ui5-search-button-click", cy.stub().as("searchButtonClick")); + }); + + cy.get("@shellbar") + .shadow() + .find(".ui5-shellbar-search-button") + .as("searchButton"); + + cy.get("@searchButton") + .click(); + + cy.get("@searchButtonClick") + .should("have.been.calledOnce"); + }); +}); \ No newline at end of file diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index 44028e5dd9e5..e5ffd3fb2931 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -789,8 +789,8 @@ class ShellBar extends UI5Element { * An event is fired to notify the change. */ setSearchState(expanded: boolean) { - this.fireDecoratorEvent("search-field-toggle", { expanded }); this.showSearchField = expanded; + this.fireDecoratorEvent("search-field-toggle", { expanded }); } onAfterRendering() { diff --git a/packages/fiori/test/specs/ShellBar.spec.js b/packages/fiori/test/specs/ShellBar.spec.js index b2f1fd232fba..f816bd0d8d73 100644 --- a/packages/fiori/test/specs/ShellBar.spec.js +++ b/packages/fiori/test/specs/ShellBar.spec.js @@ -169,19 +169,6 @@ describe("Component Behavior", () => { assert.strictEqual(await input.getValue(), "Logo", "Input value is set by click event of Logo"); }); - it("tests search-button-click event", async () => { - await browser.setWindowSize(870, 1680); // search icon is not visible on XXL breakpoint - await browser.pause(HANDLE_RESIZE_DEBOUNCE_RATE_WAIT); - const shellBar = await browser.$("#shellbar"); - await shellBar.setProperty('showSearchField', false); - - 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"); - }); - it("tests search-button-click event", async () => { await browser.setWindowSize(870, 1680); // search icon is not visible on XXL breakpoint await browser.pause(HANDLE_RESIZE_DEBOUNCE_RATE_WAIT);