From 11f002cda81bfb919a2168063fb6812de77cefd3 Mon Sep 17 00:00:00 2001 From: plamenivanov91 Date: Wed, 13 Nov 2024 14:13:49 +0200 Subject: [PATCH] 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: #10104 --- packages/main/src/Toolbar.ts | 11 +++++++++-- packages/main/src/ToolbarSpacer.ts | 2 +- packages/main/test/pages/Toolbar.html | 11 +++++++++++ 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts index 1da5caa61b8a..7b6ac0faea9e 100644 --- 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 index ab67e5083691..ed20554e3678 100644 --- 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 index 3621f1474269..ad1a4b860972 100644 --- a/packages/main/test/pages/Toolbar.html +++ b/packages/main/test/pages/Toolbar.html @@ -13,6 +13,17 @@
+ + + + + + + + + + + Basic