From 02296d688f45c4abb638a99d98d5f3be52afc8a7 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Wed, 27 May 2026 15:46:58 +0300 Subject: [PATCH 1/4] fix(ui5-expandable-text): inherit white-space --- packages/main/src/themes/ExpandableText.css | 1 + packages/main/test/pages/ExpandableText.html | 10 ++++++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/main/src/themes/ExpandableText.css b/packages/main/src/themes/ExpandableText.css index 063074bd6054..e907eb1b679a 100644 --- a/packages/main/src/themes/ExpandableText.css +++ b/packages/main/src/themes/ExpandableText.css @@ -11,6 +11,7 @@ .ui5-exp-text-text { display: inline; + white-space: inherit; } .ui5-exp-text-text, diff --git a/packages/main/test/pages/ExpandableText.html b/packages/main/test/pages/ExpandableText.html index b462c0147c88..9c1a9d81a35d 100644 --- a/packages/main/test/pages/ExpandableText.html +++ b/packages/main/test/pages/ExpandableText.html @@ -27,10 +27,10 @@

max-characters=9999

max-characters=0

- +

max-characters=-1

- +

overflowMode=Popover

@@ -49,4 +49,10 @@

Off, with Text

RTL

+ +

Whitespaces

+ + From af02eccd8977b908e2f0872ae15b5da160a23f64 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Tue, 2 Jun 2026 11:19:45 +0300 Subject: [PATCH 2/4] chore: inherit white-space in the popover --- packages/main/src/ExpandableTextTemplate.tsx | 2 +- packages/main/src/themes/ExpandableText.css | 5 +++++ packages/main/test/pages/ExpandableText.html | 8 ++++++++ 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/main/src/ExpandableTextTemplate.tsx b/packages/main/src/ExpandableTextTemplate.tsx index eee3966f882e..22c0e6a0d329 100644 --- a/packages/main/src/ExpandableTextTemplate.tsx +++ b/packages/main/src/ExpandableTextTemplate.tsx @@ -37,7 +37,7 @@ export default function ExpandableTextTemplate(this: ExpandableText) { class="ui5-exp-text-popover" onClose={this._handlePopoverClose} > - {this.text} + {this.text}
RTL

Whitespaces

+

overflowMode=Inline

+ +

overflowMode=Popover

+ From 6982c2b23d7f284c75bb0356dbafdd94193faaf3 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Tue, 2 Jun 2026 11:29:56 +0300 Subject: [PATCH 3/4] chore: inherit fonts in the popover. Add tests --- .../main/cypress/specs/ExpandableText.cy.tsx | 70 +++++++++++++++++++ packages/main/src/themes/ExpandableText.css | 2 + packages/main/test/pages/ExpandableText.html | 2 +- 3 files changed, 73 insertions(+), 1 deletion(-) diff --git a/packages/main/cypress/specs/ExpandableText.cy.tsx b/packages/main/cypress/specs/ExpandableText.cy.tsx index 18ef33e4e8cb..06a2e66a6c97 100644 --- a/packages/main/cypress/specs/ExpandableText.cy.tsx +++ b/packages/main/cypress/specs/ExpandableText.cy.tsx @@ -223,6 +223,76 @@ describe("ExpandableText", () => { }); }); + describe("CSS Inheritance", () => { + it("Text element inherits white-space from host", () => { + const text = "This is a very long text that should be displayed"; + + cy.mount( +
+ +
+ ); + + cy.get("[ui5-expandable-text]") + .shadow() + .find(".ui5-exp-text-text") + .should("have.css", "white-space", "pre-wrap") + .and("have.css", "display", "inline"); + }); + + it("Text element inherits white-space 'nowrap' from host", () => { + const text = "This is a very long text that should be displayed"; + + cy.mount( +
+ +
+ ); + + cy.get("[ui5-expandable-text]") + .shadow() + .find(".ui5-exp-text-text") + .should("have.css", "white-space", "nowrap"); + }); + + it("Popover and popover text inherit white-space, font-family, and font-size from host", () => { + const text = "This is a very long text that should be displayed"; + const maxCharacters = 5; + + cy.mount( +
+ +
+ ); + + cy.get("[ui5-expandable-text]").shadow().as("expTextShadow"); + + cy.get("@expTextShadow") + .find(".ui5-exp-text-toggle") + .realClick(); + + cy.get("[ui5-expandable-text]") + .invoke("css", "font-family") + .then(hostFontFamily => { + cy.get("[ui5-expandable-text]") + .invoke("css", "font-size") + .then(hostFontSize => { + cy.get("@expTextShadow") + .find(".ui5-exp-text-popover") + .should("have.css", "white-space", "pre-line") + .and("have.css", "font-family", hostFontFamily as unknown as string) + .and("have.css", "font-size", hostFontSize as unknown as string); + + cy.get("@expTextShadow") + .find(".ui5-exp-text-popover-text") + .should("have.css", "white-space", "pre-line") + .and("have.css", "font-family", hostFontFamily as unknown as string) + .and("have.css", "font-size", hostFontSize as unknown as string); + }); + }); + }); + }); + describe("Empty Indicator", () => { it("Should display empty indicator if text is empty and emptyIndicatorMode=On", () => { cy.mount(); diff --git a/packages/main/src/themes/ExpandableText.css b/packages/main/src/themes/ExpandableText.css index 81eb56fd406f..478cddcd04b0 100644 --- a/packages/main/src/themes/ExpandableText.css +++ b/packages/main/src/themes/ExpandableText.css @@ -28,6 +28,8 @@ .ui5-exp-text-popover, .ui5-exp-text-popover-text { white-space: inherit; + font-family: inherit; + font-size: inherit; } .ui5-exp-text-popover::part(content) { diff --git a/packages/main/test/pages/ExpandableText.html b/packages/main/test/pages/ExpandableText.html index 76b850c2c90e..479a925d05fe 100644 --- a/packages/main/test/pages/ExpandableText.html +++ b/packages/main/test/pages/ExpandableText.html @@ -57,7 +57,7 @@

overflowMode=Inline

text">

overflowMode=Popover

- { .find(".ui5-exp-text-toggle") .realClick(); - cy.get("[ui5-expandable-text]") - .invoke("css", "font-family") - .then(hostFontFamily => { - cy.get("[ui5-expandable-text]") - .invoke("css", "font-size") - .then(hostFontSize => { - cy.get("@expTextShadow") - .find(".ui5-exp-text-popover") - .should("have.css", "white-space", "pre-line") - .and("have.css", "font-family", hostFontFamily as unknown as string) - .and("have.css", "font-size", hostFontSize as unknown as string); - - cy.get("@expTextShadow") - .find(".ui5-exp-text-popover-text") - .should("have.css", "white-space", "pre-line") - .and("have.css", "font-family", hostFontFamily as unknown as string) - .and("have.css", "font-size", hostFontSize as unknown as string); - }); - }); + cy.get("[ui5-expandable-text]").then($host => { + const hostWhiteSpace = $host.css("white-space"); + const hostFontFamily = $host.css("font-family"); + const hostFontSize = $host.css("font-size"); + + cy.get("@expTextShadow") + .find(".ui5-exp-text-popover") + .should("have.css", "white-space", hostWhiteSpace) + .and("have.css", "font-family", hostFontFamily) + .and("have.css", "font-size", hostFontSize); + + cy.get("@expTextShadow") + .find(".ui5-exp-text-popover-text") + .should("have.css", "white-space", hostWhiteSpace) + .and("have.css", "font-family", hostFontFamily) + .and("have.css", "font-size", hostFontSize); + }); }); });