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