diff --git a/packages/main/cypress/specs/Toolbar.cy.tsx b/packages/main/cypress/specs/Toolbar.cy.tsx index 5d1033c0cd5b..f4c21fa0ed25 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,78 @@ describe("ToolbarButton", () => { }); }); }); + + it("Should display text only in overflow when showOverflowText is true", () => { + cy.mount( + + + + + + + + ); + + cy.viewport(800, 600); + + cy.get("[ui5-toolbar-button][text='Add Document']") + .should("have.prop", "isOverflowed", false) + .shadow() + .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]") + .shadow() + .find(".ui5-overflow-popover") + .should("have.attr", "open", "open"); + + cy.get("[ui5-toolbar-button][text='Add Document']") + .should("have.prop", "isOverflowed", true) + .shadow() + .find("[ui5-button]") + .should("contain.text", "Add Document"); + + cy.get("[ui5-toolbar-button][text='Employee']") + .should("have.prop", "isOverflowed", true) + .shadow() + .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 9396c144c74f..0e454156d4fd 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 }) + showOverflowText = false; + /** * Defines the width of the button. * @@ -162,6 +176,23 @@ class ToolbarButton extends ToolbarItem { }; } + /** + * Returns the effective text to display based on overflow state and showOverflowText property. + * + * When showOverflowText is true: + * - Normal state: returns empty string (icon-only) + * - Overflow state: returns text + * + * When showOverflowText is false: + * - Returns text in both states (normal behavior) + */ + get effectiveText(): string | undefined { + if (this.showOverflowText) { + return this.isOverflowed ? this.text : ""; + } + return 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} ); } diff --git a/packages/main/test/pages/Toolbar.html b/packages/main/test/pages/Toolbar.html index de6b72c48bcf..ebdd5f5c6922 100644 --- a/packages/main/test/pages/Toolbar.html +++ b/packages/main/test/pages/Toolbar.html @@ -316,6 +316,31 @@ +

+ 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. +

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

+