fix(ui5-toolbar): correct display of overflow button in hidden contai…

…ner (SAP#10529)

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

@@ -96,4 +96,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 display the overflow button when initially rendered in a hidden container and later made visible", () => {
+		cy.mount(html`
+			<div id="otb_hidden_container" style="display:none;">
+				<ui5-toolbar id="otb_hidden">
+					<ui5-toolbar-button icon="add" text="Append"></ui5-toolbar-button>
+				</ui5-toolbar>
+			</div>
+		`);
+
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(500);
+
+		cy.get("#otb_hidden_container")
+			.as("hiddenContainer");
+
+		// show the hidden container
+		cy.get("@hiddenContainer")
+			.invoke("show");
+
+		// overflowbutton should not be rendered
+		cy.get("#otb_hidden")
+			.shadow()
+			.find(".ui5-tb-overflow-btn-hidden")
+			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
+	});
 });

packages/main/src/Toolbar.ts

@@ -353,6 +353,9 @@ class Toolbar extends UI5Element {
 	 */
 
 	processOverflowLayout() {
+		if (this.offsetWidth === 0) {
+			return;
+		}
 		const containerWidth = this.offsetWidth - this.padding;
 		const contentWidth = this.itemsWidth;
 		let overflowSpace = contentWidth - containerWidth + this.overflowButtonSize;

packages/main/src/themes/sap_horizon_dark/parameters-bundle.css

@@ -52,6 +52,7 @@
 @import "./ToggleButton-parameters.css";
 @import "./YearPicker-parameters.css";
 @import "./CalendarHeader-parameters.css";
+@import "../base/Toolbar-parameters.css";
 @import "./Token-parameters.css";
 @import "./Tokenizer-parameters.css";
 @import "./MultiComboBox-parameters.css";