From 468684319e00861e305b1c624d83452e30b211bb Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Fri, 24 Oct 2025 18:17:40 +0300 Subject: [PATCH 1/4] feat(ui5-toolbar-button): show tooltip as text in overflow --- packages/main/src/ToolbarButton.ts | 9 +++++++++ packages/main/src/ToolbarButtonTemplate.tsx | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/main/src/ToolbarButton.ts b/packages/main/src/ToolbarButton.ts index 9396c144c74f..3b0c376c9e9b 100644 --- a/packages/main/src/ToolbarButton.ts +++ b/packages/main/src/ToolbarButton.ts @@ -162,6 +162,15 @@ class ToolbarButton extends ToolbarItem { }; } + /** + * Returns the effective text to display based on overflow state. + * When not overflowed, returns the original text. + * When overflowed, returns text if available, otherwise tooltip as fallback. + */ + get effectiveText(): string | undefined { + return this.isOverflowed ? (this.text || this.tooltip) : this.text; + } + onClick(e: Event) { e.stopImmediatePropagation(); const prevented = !this.fireDecoratorEvent("click", { targetRef: e.target as HTMLElement }); diff --git a/packages/main/src/ToolbarButtonTemplate.tsx b/packages/main/src/ToolbarButtonTemplate.tsx index f1600f670dc6..4f31ed35a20f 100644 --- a/packages/main/src/ToolbarButtonTemplate.tsx +++ b/packages/main/src/ToolbarButtonTemplate.tsx @@ -22,7 +22,7 @@ export default function ToolbarButtonTemplate(this: ToolbarButton) { data-ui5-stable={this.stableDomRef} onClick={(...args) => this.onClick(...args)} > - {this.text} + {this.effectiveText} ); } From 30f8226c3e5da5f6a185c6874f80df6e9ab2f886 Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Mon, 27 Oct 2025 10:37:20 +0200 Subject: [PATCH 2/4] chore: add test --- packages/main/cypress/specs/Toolbar.cy.tsx | 44 +++++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/packages/main/cypress/specs/Toolbar.cy.tsx b/packages/main/cypress/specs/Toolbar.cy.tsx index 5d1033c0cd5b..acbf7a8fab8f 100644 --- a/packages/main/cypress/specs/Toolbar.cy.tsx +++ b/packages/main/cypress/specs/Toolbar.cy.tsx @@ -544,7 +544,7 @@ describe("ToolbarButton", () => { cy.get("[ui5-toolbar-button][accessible-name]").shadow().find(".ui5-tb-button") .should("have.prop", "accessibilityAttributes") .should("deep.include", { expanded: "true", controls: "btn", hasPopup: "dialog" }); - }); + }); it("Should not recalculate overflow when button state changes without affecting width", () => { cy.mount( @@ -589,4 +589,46 @@ describe("ToolbarButton", () => { }); }); }); + + it("Should display tooltip as text for icon-only buttons in overflow popover", () => { + cy.viewport(150, 600); + + cy.mount( + + + + + + + + + ); + + cy.get("[ui5-toolbar]") + .shadow() + .find(".ui5-tb-overflow-btn") + .should("not.have.class", "ui5-tb-overflow-btn-hidden"); + + cy.get("[ui5-toolbar]") + .shadow() + .find(".ui5-tb-overflow-btn") + .realClick(); + + cy.get("[ui5-toolbar]") + .shadow() + .find(".ui5-overflow-popover") + .should("have.attr", "open", "open"); + + cy.get("[ui5-toolbar-button][icon='decline']") + .should("have.prop", "isOverflowed", true) + .shadow() + .find("ui5-button") + .should("contain.text", "Decline Request"); + + cy.get("[ui5-toolbar-button][icon='save']") + .should("have.prop", "isOverflowed", true) + .shadow() + .find("ui5-button") + .should("contain.text", "Save Document"); + }); }); From 7640378230a094c7b223b73e118f192d59107d73 Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Mon, 3 Nov 2025 10:53:09 +0200 Subject: [PATCH 3/4] feat(ui5-toolbar-button): add overflowTextOnly property --- packages/main/cypress/specs/Toolbar.cy.tsx | 68 ++++++++++++++++------ packages/main/src/ToolbarButton.ts | 30 ++++++++-- packages/main/test/pages/Toolbar.html | 25 ++++++++ 3 files changed, 101 insertions(+), 22 deletions(-) diff --git a/packages/main/cypress/specs/Toolbar.cy.tsx b/packages/main/cypress/specs/Toolbar.cy.tsx index acbf7a8fab8f..585729fb94bb 100644 --- a/packages/main/cypress/specs/Toolbar.cy.tsx +++ b/packages/main/cypress/specs/Toolbar.cy.tsx @@ -590,28 +590,54 @@ describe("ToolbarButton", () => { }); }); - it("Should display tooltip as text for icon-only buttons in overflow popover", () => { - cy.viewport(150, 600); - + it("Should display text only in overflow when overflowTextOnly is true", () => { cy.mount( - - - - - - + + + + + ); - cy.get("[ui5-toolbar]") + cy.viewport(800, 600); + + cy.get("[ui5-toolbar-button][text='Add Document']") + .should("have.prop", "isOverflowed", false) .shadow() - .find(".ui5-tb-overflow-btn") - .should("not.have.class", "ui5-tb-overflow-btn-hidden"); + .find("[ui5-button]") + .should("not.contain.text", "Add Document"); + + cy.get("[ui5-toolbar-button][text='Employee']") + .should("have.prop", "isOverflowed", false) + .shadow() + .find("[ui5-button]") + .should("contain.text", "Employee"); + + cy.get("[ui5-toolbar-button][text='Decline Item']") + .should("have.prop", "isOverflowed", false) + .shadow() + .find("[ui5-button]") + .should("contain.text", "Decline Item"); + + cy.viewport(100, 600); cy.get("[ui5-toolbar]") .shadow() .find(".ui5-tb-overflow-btn") + .should("not.have.class", "ui5-tb-overflow-btn-hidden") .realClick(); cy.get("[ui5-toolbar]") @@ -619,16 +645,22 @@ describe("ToolbarButton", () => { .find(".ui5-overflow-popover") .should("have.attr", "open", "open"); - cy.get("[ui5-toolbar-button][icon='decline']") + cy.get("[ui5-toolbar-button][text='Add Document']") .should("have.prop", "isOverflowed", true) .shadow() - .find("ui5-button") - .should("contain.text", "Decline Request"); + .find("[ui5-button]") + .should("contain.text", "Add Document"); - cy.get("[ui5-toolbar-button][icon='save']") + cy.get("[ui5-toolbar-button][text='Employee']") .should("have.prop", "isOverflowed", true) .shadow() - .find("ui5-button") - .should("contain.text", "Save Document"); + .find("[ui5-button]") + .should("contain.text", "Employee"); + + cy.get("[ui5-toolbar-button][text='Decline Item']") + .should("have.prop", "isOverflowed", true) + .shadow() + .find("[ui5-button]") + .should("contain.text", "Decline Item"); }); }); diff --git a/packages/main/src/ToolbarButton.ts b/packages/main/src/ToolbarButton.ts index 3b0c376c9e9b..5377d8f58126 100644 --- a/packages/main/src/ToolbarButton.ts +++ b/packages/main/src/ToolbarButton.ts @@ -145,6 +145,20 @@ class ToolbarButton extends ToolbarItem { @property() text?: string; + /** + * Defines whether the button text should only be displayed in the overflow popover. + * + * When set to `true`, the button appears as icon-only in the main toolbar, + * but shows both icon and text when moved to the overflow popover. + * + * **Note:** This property only takes effect when the `text` property is also set. + * + * @default false + * @public + */ + @property({ type: Boolean }) + overflowTextOnly = false; + /** * Defines the width of the button. * @@ -163,12 +177,20 @@ class ToolbarButton extends ToolbarItem { } /** - * Returns the effective text to display based on overflow state. - * When not overflowed, returns the original text. - * When overflowed, returns text if available, otherwise tooltip as fallback. + * Returns the effective text to display based on overflow state and overflowTextOnly property. + * + * When overflowTextOnly is true: + * - Normal state: returns empty string (icon-only) + * - Overflow state: returns text + * + * When overflowTextOnly is false: + * - Returns text in both states (normal behavior) */ get effectiveText(): string | undefined { - return this.isOverflowed ? (this.text || this.tooltip) : this.text; + if (this.overflowTextOnly) { + return this.isOverflowed ? this.text : ""; + } + return this.text; } onClick(e: Event) { diff --git a/packages/main/test/pages/Toolbar.html b/packages/main/test/pages/Toolbar.html index de6b72c48bcf..00bb79bef4ff 100644 --- a/packages/main/test/pages/Toolbar.html +++ b/packages/main/test/pages/Toolbar.html @@ -316,6 +316,31 @@ +

+ Toolbar with overflowTextOnly property + Resize the viewport to see the overflow behavior. Buttons with overflowTextOnly show icon-only in the toolbar but display text when overflowed. +

+
+ + + + + + + + + + + + + + + + +
+ +

+
From 45afda1519716cf1c623ac826c396e442758ce4c Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Wed, 5 Nov 2025 16:17:29 +0200 Subject: [PATCH 4/4] refactor: change the property name --- packages/main/cypress/specs/Toolbar.cy.tsx | 6 +++--- packages/main/src/ToolbarButton.ts | 10 +++++----- packages/main/test/pages/Toolbar.html | 16 ++++++++-------- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/main/cypress/specs/Toolbar.cy.tsx b/packages/main/cypress/specs/Toolbar.cy.tsx index 585729fb94bb..f4c21fa0ed25 100644 --- a/packages/main/cypress/specs/Toolbar.cy.tsx +++ b/packages/main/cypress/specs/Toolbar.cy.tsx @@ -590,19 +590,19 @@ describe("ToolbarButton", () => { }); }); - it("Should display text only in overflow when overflowTextOnly is true", () => { + it("Should display text only in overflow when showOverflowText is true", () => { cy.mount(

- Toolbar with overflowTextOnly property - Resize the viewport to see the overflow behavior. Buttons with overflowTextOnly show icon-only in the toolbar but display text when overflowed. + Toolbar with showOverflowText property + Resize the viewport to see the overflow behavior. Buttons with showOverflowText show icon-only in the toolbar but display text when overflowed.

- - - + + + @@ -333,9 +333,9 @@ - - - + + +