fix(ui5-toolbar): fix spacers with flexible width (#13274)

Author: PetyaMarkovaBogdanova

packages/main/cypress/specs/Toolbar.cy.tsx

@@ -71,6 +71,45 @@ describe("Toolbar general interaction", () => {
 			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
 	});
 
+	it("Should apply fixed spacer widths without enabling flexible full-width layout", () => {
+		cy.mount(
+			<Toolbar id="otb_fixed_spacers">
+				<ToolbarSpacer width="50px"></ToolbarSpacer>
+				<ToolbarButton text="Left"></ToolbarButton>
+				<ToolbarSpacer width="100px"></ToolbarSpacer>
+				<ToolbarButton text="Right"></ToolbarButton>
+			</Toolbar>
+		);
+
+		cy.get("#otb_fixed_spacers")
+			.as("toolbar");
+
+		cy.get("@toolbar")
+			.shadow()
+			.find(".ui5-tb-items")
+			.should("not.have.class", "ui5-tb-items-full-width");
+
+		cy.get("@toolbar")
+			.then($toolbar => {
+				const toolbar = $toolbar[0] as Toolbar;
+				const fixedSpacers = Array.from(toolbar.querySelectorAll("ui5-toolbar-spacer")) as ToolbarSpacer[];
+
+				expect(fixedSpacers).to.have.length(2);
+				expect(fixedSpacers[0].hasFlexibleWidth).to.be.false;
+				expect(fixedSpacers[1].hasFlexibleWidth).to.be.false;
+
+				cy.get("@toolbar")
+					.shadow()
+					.find(`#${fixedSpacers[0]._individualSlot}`)
+					.should("have.css", "width", "50px");
+
+				cy.get("@toolbar")
+					.shadow()
+					.find(`#${fixedSpacers[1]._individualSlot}`)
+					.should("have.css", "width", "100px");
+			});
+	});
+
 	it("shouldn't show overflow button if there is enough space", () => {
 		cy.mount(
 			<Toolbar style={{ width: "fit-content", " max-width": "100%;" }}>

packages/main/src/ToolbarItemBase.ts

@@ -116,6 +116,17 @@ class ToolbarItemBase extends UI5Element {
 		return false;
 	}
 
+	/**
+	 * Returns if the item is a spacer.
+	 * A spacer item is an item that takes space in the toolbar, but does not render any content.
+	 * @protected
+	 * @since 2.21.0
+	 */
+
+	get isSpacer() {
+		return false;
+	}
+
 	get stableDomRef() {
 		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
 	}
@@ -128,6 +139,10 @@ class ToolbarItemBase extends UI5Element {
 			},
 		};
 	}
+
+	get styles() {
+		return {};
+	}
 }
 
 export type {

packages/main/src/ToolbarSpacer.ts

@@ -45,6 +45,9 @@ class ToolbarSpacer extends ToolbarItemBase {
 	get isInteractive() {
 		return false;
 	}
+	get isSpacer() {
+		return true;
+	}
 }
 
 ToolbarSpacer.define();

packages/main/src/ToolbarTemplate.tsx

@@ -17,9 +17,8 @@ export default function ToolbarTemplate(this: Toolbar) {
 				return (
 					<div class={{
 						"ui5-tb-item": !item.hasFlexibleWidth,
-						"ui5-tb-spacer": item.hasFlexibleWidth,
 						"ui5-tb-self-overflow": item.hasOverflow,
-					}} id={item._individualSlot}>
+					}} id={item._individualSlot} style={item.isSpacer ? item.styles : undefined}>
 						<slot name={item._individualSlot}></slot>
 					</div>
 				);

packages/main/src/themes/Toolbar.css

@@ -32,12 +32,6 @@
 	margin-inline-start: var(--_ui5-toolbar-item-margin-left);
 }
 
-.ui5-tb-spacer {
-	flex: 1 1 auto;
-	margin-inline-end: var(--_ui5-toolbar-item-margin-right);
-	margin-inline-start: var(--_ui5-toolbar-item-margin-left);
-}
-
 .ui5-tb-self-overflow {
 	min-width:  2.5rem;
 	flex-shrink: 1;