feat(ui5-toolbar): fixed spacer behavior

There was a bug where if there is a spacer before the last item, the last item would always overflow. This change fixes the issue Fixes: SAP#10104
plamenivanov91 · Nov 13, 2024 · 11f002c · 11f002c
1 parent 4382d4e
commit 11f002c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts
@@ -384,14 +384,15 @@ class Toolbar extends UI5Element {
 	processOverflowLayout() {
 		const containerWidth = this.offsetWidth - this.padding;
 		const contentWidth = this.itemsWidth;
-		const overflowSpace = contentWidth - containerWidth + this.overflowButtonSize;
 
 		// skip calculation if the width has not been changed or if the items width has not been changed
 		if (this.width === containerWidth && this.contentWidth === contentWidth) {
 			return;
 		}
 
-		this.distributeItems(overflowSpace);
+		// if there is not enough space, distribute items while calculating overflow button. Otherwise don't calc overflow space/area
+		this.distributeItems(contentWidth > containerWidth ? contentWidth - containerWidth + this.overflowButtonSize : 0);
+
 		this.width = containerWidth;
 		this.contentWidth = contentWidth;
 	}
@@ -505,6 +506,12 @@ class Toolbar extends UI5Element {
 		}
 
 		this.closeOverflow();
+
+		// re-calculate items width if there is a dynamic spacer
+		if (this.hasFlexibleSpacers) {
+			this.storeItemsWidth();
+		}
+
 		this.processOverflowLayout();
 	}
 

diff --git a/packages/main/src/ToolbarSpacer.ts b/packages/main/src/ToolbarSpacer.ts
@@ -42,7 +42,7 @@ class ToolbarSpacer extends ToolbarItem {
 	}
 
 	get hasFlexibleWidth() {
-		return this.width === "";
+		return this.width === undefined || this.width === "auto";
 	}
 
 	static get toolbarTemplate() {

diff --git a/packages/main/test/pages/Toolbar.html b/packages/main/test/pages/Toolbar.html
@@ -13,6 +13,17 @@
 </head>
 <body>
 	<div id="toolbars-container">
+
+		<ui5-toolbar>
+			<ui5-toolbar-button icon="add" text="Plus" design="Default"></ui5-toolbar-button>
+			<ui5-toolbar-button icon="employee" text="Hire"></ui5-toolbar-button>
+			<ui5-toolbar-separator></ui5-toolbar-separator>
+			<ui5-toolbar-button icon="add" text="Add"></ui5-toolbar-button>
+			<ui5-toolbar-button icon="decline" text="Decline"></ui5-toolbar-button>
+			<ui5-toolbar-spacer></ui5-toolbar-spacer>
+			<ui5-toolbar-button icon="add" text="Append"></ui5-toolbar-button>
+		</ui5-toolbar>
+
 		<ui5-title level="H3">Basic</ui5-title>
 		<br /><br />
 		<ui5-toolbar id="clickCountToolbar">