chore(ui5-shellbar): introduced private slot "midContent" (#8283)

SAP · Feb 20, 2024 · bde1cd8 · bde1cd8
1 parent ee81bff
commit bde1cd8
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 15 deletions.
diff --git a/packages/fiori/src/ShellBar.hbs b/packages/fiori/src/ShellBar.hbs
@@ -89,17 +89,24 @@
 		{{/if}}
 	</div>
 
-	<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-middle">
+	{{#if hasMidContent}}
+		<div class="ui5-shellbar-overflow-container ui5-shellbar-mid-content">
+			<slot name="midContent"></slot>
+		</div>
+	{{else}}
+		<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-middle">
 		{{#if _isXXLBreakpoint}}
 			{{#if hasSearchField}}
 				<slot name="searchField"></slot>
 			{{/if}}
 		{{/if}}
-	</div>
+		</div>
+	{{/if}}
 
 	<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right">
 		<div class="ui5-shellbar-overflow-container-right-child">
 
+		{{#unless hasMidContent }}
 		{{#unless _isXXLBreakpoint }}
 			{{#if hasSearchField}}
 				{{#if _fullWidthSearch}}
@@ -135,6 +142,7 @@
 					.accessibilityAttributes={{accInfo.search.accessibilityAttributes}}
 				></ui5-button>
 			{{/if}}
+		{{/unless}}
 		{{/unless}}
 
 			{{#if showCoPilot}}

diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
@@ -518,6 +518,17 @@ class ShellBar extends UI5Element {
 	@slot()
 	startButton!: Array<IButton>;
 
+	/**
+	 * The container is positioned in the center of the <code>ui5-shellbar</code> and occupies one-third of the total length of the <code>ui5-shellbar</code>.
+	 *
+	 * <br><br>
+	 * <b>Note:</b> If set, the <code>searchField</code> slot is not rendered.
+	 *
+	 * @private
+	 */
+	@slot()
+	midContent!: Array<HTMLElement>;
+
 	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<IShelBarItemInfo> = [
-			{
-				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
@@ -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;
 }