fix(ui5-toolbar): hide overflow button when content fits (#10405)

If the content width of ui5-toolbar fits within the toolbar's width, the overflow button was incorrectly displayed. Additionally, there was an issue where the last visible item had extra padding because a selector never matched. This pull request fixes both problems by ensuring the overflow button only appears when necessary and removing the unnecessary padding from the last item. Fixes: #10376
SAP · Dec 18, 2024 · 4ac9428 · 4ac9428
1 parent 7a152a1
commit 4ac9428
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 35 deletions.
diff --git a/packages/main/cypress/specs/Toolbar.cy.ts b/packages/main/cypress/specs/Toolbar.cy.ts
@@ -91,4 +91,30 @@ describe("Toolbar general interaction", () => {
 			.find(".ui5-tb-overflow-btn-hidden")
 			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
 	});
+
+	it("shouldn't show overflow button if there is enough space", () => {
+		cy.mount(html`
+			<ui5-toolbar style="width:fit-content;max-width:100%;">
+				<ui5-toolbar-button icon="decline">
+				</ui5-toolbar-button>
+
+				<ui5-toolbar-button icon="add">
+				</ui5-toolbar-button>
+
+				<ui5-toolbar-button icon="employee">
+				</ui5-toolbar-button>
+			</ui5-toolbar>
+		`);
+
+		cy.get("[ui5-toolbar]")
+			.as("toolbar");
+
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(500);
+
+		cy.get("@toolbar")
+			.shadow()
+			.find(".ui5-tb-overflow-btn-hidden")
+			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
+	});
 });
diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts
@@ -365,7 +365,11 @@ class Toolbar extends UI5Element {
 	processOverflowLayout() {
 		const containerWidth = this.offsetWidth - this.padding;
 		const contentWidth = this.itemsWidth;
-		const overflowSpace = contentWidth - containerWidth + this.overflowButtonSize;
+		let overflowSpace = contentWidth - containerWidth + this.overflowButtonSize;
+
+		if (contentWidth <= containerWidth) {
+			overflowSpace = 0;
+		}
 
 		// 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) {

diff --git a/packages/main/src/themes/Toolbar.css b/packages/main/src/themes/Toolbar.css
@@ -20,19 +20,15 @@
 	display: inherit;
 	align-items: inherit;
 	justify-content: inherit;
+	gap: var(--_ui5-toolbar-items-gap);
 }
 
 .ui5-tb-items-full-width {
-    width: 100%;
+	width: 100%;
 }
 
 .ui5-tb-item {
-    flex-shrink: 0;
-}
-
-.ui5-tb-item:not(:last-child) {
-	margin-inline-end: var(--_ui5-toolbar-item-margin-right);
-	margin-inline-start: var(--_ui5-toolbar-item-margin-left);
+	flex-shrink: 0;
 }
 
 .ui5-tb-separator {

diff --git a/packages/main/src/themes/base/Toolbar-parameters.css b/packages/main/src/themes/base/Toolbar-parameters.css
@@ -1,7 +1,5 @@
 :root {
     --_ui5-toolbar-padding-left: 0.5rem;
 	--_ui5-toolbar-padding-right: 0.5rem;
-
-	--_ui5-toolbar-item-margin-left: 0;
-	--_ui5-toolbar-item-margin-right: 0.25rem;
+	--_ui5-toolbar-items-gap: 0.25rem;
 }
diff --git a/packages/main/test/pages/Toolbar.html b/packages/main/test/pages/Toolbar.html
@@ -11,6 +11,7 @@
 	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
 	<link rel="stylesheet" type="text/css" href="./styles/Toolbar.css">
 </head>
+
 <body>
 	<div id="toolbars-container">
 
@@ -34,7 +35,7 @@
 			<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
 			<ui5-toolbar-button id="btnOpenMenu" text="Open Menu" prevent-overflow-closing></ui5-toolbar-button>
 		</ui5-toolbar>
-		  <ui5-menu header-text="Basic Menu with Items" id="menu" opener="btnOpenMenu">
+		<ui5-menu header-text="Basic Menu with Items" id="menu" opener="btnOpenMenu">
 			<ui5-menu-item text="New File" icon="add-document"></ui5-menu-item>
 			<ui5-menu-item text="New Folder" icon="add-folder" disabled></ui5-menu-item>
 			<ui5-menu-separator></ui5-menu-separator>
@@ -43,8 +44,8 @@
 			<ui5-menu-separator></ui5-menu-separator>
 			<ui5-menu-item text="Preferences" icon="action-settings"></ui5-menu-item>
 			<ui5-menu-item text="Exit" icon="journey-arrive"></ui5-menu-item>
-		  </ui5-menu>
-		  
+		</ui5-menu>
+
 		<ui5-input id="input" value="0"></ui5-input>
 
 		<br /><br />
@@ -95,15 +96,17 @@
 			<div class="main-wrapper">
 				<div class="first-toolbar-wrapper">
 					<ui5-toolbar id="otb_a">
-						<ui5-toolbar-button icon="add" stable-dom-ref="otb_button_1" text="Left 1 (long)" width="150px"></ui5-toolbar-button>
+						<ui5-toolbar-button icon="add" stable-dom-ref="otb_button_1" text="Left 1 (long)"
+							width="150px"></ui5-toolbar-button>
 						<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
 						<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
 						<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
 						<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
 						<ui5-toolbar-button icon="decline" text="Mid 2"></ui5-toolbar-button>
 						<ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
 						<ui5-toolbar-button icon="employee" text="Right 4"></ui5-toolbar-button>
-						<ui5-toolbar-button id="myOverflowBtn"  prevent-overflow-closing icon="employee" text="User Menu"></ui5-toolbar-button>
+						<ui5-toolbar-button id="myOverflowBtn" prevent-overflow-closing icon="employee"
+							text="User Menu"></ui5-toolbar-button>
 					</ui5-toolbar>
 				</div>
 				<div class="second-toolbar-wrapper">
@@ -113,16 +116,19 @@
 				</div>
 				<div class="third-toolbar-wrapper">
 					<ui5-toolbar id="otb_c">
-						<ui5-toolbar-button icon="decline" stable-dom-ref="tb-button-decline" overflow-priority="NeverOverflow" text="Left 2"></ui5-toolbar-button>
-						<ui5-toolbar-button icon="employee" overflow-priority="NeverOverflow" text="Left 3"></ui5-toolbar-button>
+						<ui5-toolbar-button icon="decline" stable-dom-ref="tb-button-decline"
+							overflow-priority="NeverOverflow" text="Left 2"></ui5-toolbar-button>
+						<ui5-toolbar-button icon="employee" overflow-priority="NeverOverflow"
+							text="Left 3"></ui5-toolbar-button>
 					</ui5-toolbar>
 				</div>
 			</div>
 
 		</section>
 		<br /><br />
 
-		<ui5-title level="H3">Toolbar with "AlwaysOverflow" overflow priority item (divided visually by internal separator)</ui5-title>
+		<ui5-title level="H3">Toolbar with "AlwaysOverflow" overflow priority item (divided visually by internal
+			separator)</ui5-title>
 		<br />
 
 		<section>
@@ -136,27 +142,31 @@
 				<ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
 				<ui5-toolbar-button icon="employee" text="Right 4"></ui5-toolbar-button>
 				<ui5-toolbar-separator></ui5-toolbar-separator>
-				<ui5-toolbar-button icon="employee" text="Call me later" stable-dom-ref="tb-button-employee-d" overflow-priority="AlwaysOverflow"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Call me later" stable-dom-ref="tb-button-employee-d"
+					overflow-priority="AlwaysOverflow"></ui5-toolbar-button>
 			</ui5-toolbar>
 		</section>
 
 		<br /><br />
 
-		<ui5-title level="H3">Toolbar with "NeverOverflow" overflow priority item (divided visually by internal separator)</ui5-title>
+		<ui5-title level="H3">Toolbar with "NeverOverflow" overflow priority item (divided visually by internal
+			separator)</ui5-title>
 		<br />
 
 		<section>
 			<ui5-toolbar id="otb_e">
 				<ui5-toolbar-button icon="add" text="Left 1 (long)" width="150px"></ui5-toolbar-button>
-				<ui5-toolbar-button icon="decline" text="Left 2"  overflow-priority="NeverOverflow"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Left 2" overflow-priority="NeverOverflow"></ui5-toolbar-button>
 				<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
 				<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
 				<ui5-toolbar-button icon="add" text="Mid 1" overflow-priority="NeverOverflow"></ui5-toolbar-button>
 				<ui5-toolbar-button icon="decline" text="Mid 2" overflow-priority="NeverOverflow"></ui5-toolbar-button>
 				<ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
-				<ui5-toolbar-button icon="employee" text="Right 4" overflow-priority="NeverOverflow"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Right 4"
+					overflow-priority="NeverOverflow"></ui5-toolbar-button>
 				<ui5-toolbar-separator></ui5-toolbar-separator>
-				<ui5-toolbar-button icon="employee" text="Call me later" stable-dom-ref="tb-button-employee-e" overflow-priority="NeverOverflow"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Call me later" stable-dom-ref="tb-button-employee-e"
+					overflow-priority="NeverOverflow"></ui5-toolbar-button>
 			</ui5-toolbar>
 		</section>
 		<br /><br />
@@ -176,7 +186,8 @@
 				<ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
 				<ui5-toolbar-button icon="employee" text="Right 4"></ui5-toolbar-button>
 				<ui5-toolbar-spacer></ui5-toolbar-spacer>
-				<ui5-toolbar-button icon="employee" text="Call me later" stable-dom-ref="tb-button-employee_f"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Call me later"
+					stable-dom-ref="tb-button-employee_f"></ui5-toolbar-button>
 			</ui5-toolbar>
 		</section>
 		<br /><br />
@@ -195,7 +206,8 @@
 				<ui5-toolbar-button icon="decline" text="Mid 2"></ui5-toolbar-button>
 				<ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
 				<ui5-toolbar-button icon="employee" text="Right 4"></ui5-toolbar-button>
-				<ui5-toolbar-button icon="employee" text="Call me later" stable-dom-ref="tb-button-employee-g"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Call me later"
+					stable-dom-ref="tb-button-employee-g"></ui5-toolbar-button>
 			</ui5-toolbar>
 		</section>
 
@@ -234,13 +246,28 @@
 		</section>
 
 		<br /><br />
+
+		<ui5-title level="H3">fit-content width</ui5-title>
+		<div style="display:flex;justify-content: center;">
+			<ui5-toolbar style="width:fit-content;max-width:100%;">
+				<ui5-toolbar-button icon="decline">
+				</ui5-toolbar-button>
+
+				<ui5-toolbar-button icon="add">
+				</ui5-toolbar-button>
+
+				<ui5-toolbar-button icon="employee">
+				</ui5-toolbar-button>
+			</ui5-toolbar>
+		</div>
 		<ui5-title level="H3">Dynamic Title example</ui5-title>
 		<br />
 		<section id="titleRestSection">
 			<div class="dynamic-title-wrapper">
 				<div class="title-wrapper">
 					<ui5-breadcrumbs>
-						<ui5-breadcrumbs-item href="https://www.sap.com" target="_blank">Root Page </ui5-breadcrumbs-item>
+						<ui5-breadcrumbs-item href="https://www.sap.com" target="_blank">Root Page
+						</ui5-breadcrumbs-item>
 						<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
 						<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
 					</ui5-breadcrumbs>
@@ -253,7 +280,7 @@
 						<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
 
 					</ui5-toolbar>
-		</div>
+				</div>
 				<div class="actions-wrapper">
 					<div class="first-toolbar-wrapper">
 						<ui5-toolbar>
@@ -270,14 +297,15 @@
 					</div>
 					<div class="third-toolbar-wrapper">
 						<ui5-toolbar>
-							<ui5-toolbar-button icon="full-screen" stable-dom-ref="tb-button-decline" overflow-priority="NeverOverflow"></ui5-toolbar-button>
+							<ui5-toolbar-button icon="full-screen" stable-dom-ref="tb-button-decline"
+								overflow-priority="NeverOverflow"></ui5-toolbar-button>
 							<ui5-toolbar-button icon="decline" overflow-priority="NeverOverflow"></ui5-toolbar-button>
 						</ui5-toolbar>
 					</div>
 				</div>
 			</div>
-
 		</section>
+
 		<section id="testEventpreventClosing">
 			<div style="width: 250px;">
 				<ui5-toolbar id="testEventpreventClosing-toolbar">
@@ -303,7 +331,7 @@
 				<ui5-li>World</ui5-li>
 				<ui5-li>Again</ui5-li>
 			</ui5-list>
-			<br/>
+			<br />
 			<ui5-button>Hi!</ui5-button>
 		</div>
 	</ui5-popover>
@@ -335,7 +363,7 @@
 		clickCountToolbar.addEventListener('click', (e) => {
 			if (e.target.id === "clearCounter") {
 				input.setAttribute("value", "0");
-			} else  {
+			} else {
 				let clickCounter = parseInt(input.getAttribute("value"));
 				input.setAttribute("value", `${++clickCounter}`);
 			}
@@ -348,9 +376,10 @@
 		const btnOpenMenu = document.getElementById("btnOpenMenu");
 		const menu = document.getElementById("menu");
 
-		btnOpenMenu.addEventListener("ui5-click", function(event) {
+		btnOpenMenu.addEventListener("ui5-click", function (event) {
 			menu.open = !menu.open;
 		});
 	</script>
-	</body>
-</html>
+</body>
+
+</html>