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}}
-
+ {{#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;
}