diff --git a/packages/fiori/src/ShellBar.hbs b/packages/fiori/src/ShellBar.hbs index 2e41248ff559..9954cbb374ac 100644 --- a/packages/fiori/src/ShellBar.hbs +++ b/packages/fiori/src/ShellBar.hbs @@ -89,17 +89,24 @@ {{/if}} -
+ {{#if hasMidContent}} +
+ +
+ {{else}} +
{{#if _isXXLBreakpoint}} {{#if hasSearchField}} {{/if}} {{/if}} -
+
+ {{/if}}
+ {{#unless hasMidContent }} {{#unless _isXXLBreakpoint }} {{#if hasSearchField}} {{#if _fullWidthSearch}} @@ -135,6 +142,7 @@ .accessibilityAttributes={{accInfo.search.accessibilityAttributes}} > {{/if}} + {{/unless}} {{/unless}} {{#if showCoPilot}} diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index 34ba86707d25..d8d971458956 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -518,6 +518,17 @@ class ShellBar extends UI5Element { @slot() startButton!: Array; + /** + * The container is positioned in the center of the ui5-shellbar and occupies one-third of the total length of the ui5-shellbar. + * + *

+ * Note: If set, the searchField slot is not rendered. + * + * @private + */ + @slot() + midContent!: Array; + static i18nBundle: I18nBundle; overflowPopover?: Popover | null; menuPopover?: Popover | null; @@ -972,21 +983,21 @@ class ShellBar extends UI5Element { */ _getAllItems(showOverflowButton: boolean) { let domOrder = -1; + const search = { + icon: "search", + text: this._searchText, + classes: `${this.searchField.length ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-search-button ui5-shellbar-button`, + priority: 4, + domOrder: this.searchField.length ? (++domOrder) : -1, + styles: { + order: this.searchField.length ? 1 : -10, + }, + id: `${this._id}-item-${1}`, + press: this._handleSearchIconPress.bind(this), + show: !!this.searchField.length, + }; const items: Array = [ - { - icon: "search", - text: this._searchText, - classes: `${this.searchField.length ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-search-button ui5-shellbar-button`, - priority: 4, - domOrder: this.searchField.length ? (++domOrder) : -1, - styles: { - order: this.searchField.length ? 1 : -10, - }, - id: `${this._id}-item-${1}`, - press: this._handleSearchIconPress.bind(this), - show: !!this.searchField.length, - }, { icon: this._coPilotIcon, text: this._copilotText, @@ -1075,6 +1086,9 @@ class ShellBar extends UI5Element { press: this._handleProductSwitchPress.bind(this), }, ]; + if (this.midContent.length < 1 && items[0].text !== this._searchText) { + items.unshift(search); + } return items; } @@ -1223,6 +1237,10 @@ class ShellBar extends UI5Element { return !!this.searchField.length; } + get hasMidContent() { + return !!this.midContent.length; + } + get hasProfile() { return !!this.profile.length; } diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css index bc8c89c060df..ae11a4efda85 100644 --- a/packages/fiori/src/themes/ShellBar.css +++ b/packages/fiori/src/themes/ShellBar.css @@ -144,6 +144,19 @@ slot[name="profile"] { width: 7.5rem; } +.ui5-shellbar-mid-content { + height: var(--_ui5_shellbar_overflow_container_middle_height); + width: 33.4%; +} + +.ui5-shellbar-overflow-container-left:has(+ .ui5-shellbar-mid-content) { + width: 33.3%; +} + +.ui5-shellbar-mid-content + .ui5-shellbar-overflow-container-right { + width: 33.3%; +} + :host([breakpoint-size="S"]) .ui5-shellbar-overflow-container-middle { width: 0; }