fix(ui5-expandable-text): fix using "white-space" style in the component (#13599)

* fix(ui5-expandable-text): inherit white-space

* chore: inherit white-space in the popover

* chore: inherit fonts in the popover. Add tests

* chore: adress code comments

Author: TeodorTaushanov

packages/main/cypress/specs/ExpandableText.cy.tsx

@@ -223,6 +223,74 @@ 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(
+				<div style={{ whiteSpace: "pre-wrap" }}>
+					<ExpandableText text={text} maxCharacters={9999}></ExpandableText>
+				</div>
+			);
+
+			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(
+				<div style={{ whiteSpace: "nowrap" }}>
+					<ExpandableText text={text} maxCharacters={9999}></ExpandableText>
+				</div>
+			);
+
+			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(
+				<div style={{ whiteSpace: "pre-line" }}>
+					<ExpandableText text={text} maxCharacters={maxCharacters} overflowMode="Popover"></ExpandableText>
+				</div>
+			);
+
+			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
+
+			cy.get("@expTextShadow")
+				.find(".ui5-exp-text-toggle")
+				.realClick();
+
+			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);
+			});
+		});
+	});
+
 	describe("Empty Indicator", () => {
 		it("Should display empty indicator if text is empty and emptyIndicatorMode=On", () => {
 			cy.mount(<ExpandableText text="" emptyIndicatorMode="On"></ExpandableText>);

packages/main/src/ExpandableTextTemplate.tsx

@@ -37,7 +37,7 @@ export default function ExpandableTextTemplate(this: ExpandableText) {
 						class="ui5-exp-text-popover"
 						onClose={this._handlePopoverClose}
 					>
-						<Text id="popover-text">{this.text}</Text>
+						<Text class="ui5-exp-text-popover-text" id="popover-text">{this.text}</Text>
 						<div
 							slot="footer"
 							class="ui5-exp-text-footer"

packages/main/src/themes/ExpandableText.css

@@ -11,6 +11,7 @@
 
 .ui5-exp-text-text {
 	display: inline;
+	white-space: inherit;
 }
 
 .ui5-exp-text-text,
@@ -24,6 +25,13 @@
 	color: inherit;
 }
 
+.ui5-exp-text-popover,
+.ui5-exp-text-popover-text {
+	white-space: inherit;
+	font-family: inherit;
+	font-size: inherit;
+}
+
 .ui5-exp-text-popover::part(content) {
 	padding-inline: 1rem;
 }

packages/main/test/pages/ExpandableText.html

@@ -27,10 +27,10 @@ <h3>max-characters=9999</h3>
 
 	<h3>max-characters=0</h3>
 	<ui5-expandable-text max-characters="0" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac risus nec lorem pretium fringilla. Sed non eros nec nisl vehicula finibus. Suspendisse potenti. Quisque nec odio et est pharetra semper. Nullam nec ligula in risus laoreet pulvinar. Nullam et turpis ac eros viverra facilisis. Nullam et turpis ac eros viverra facilisis"></ui5-expandable-text>
-	
+
 	<h3>max-characters=-1</h3>
 	<ui5-expandable-text max-characters="-1" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac risus nec lorem pretium fringilla. Sed non eros nec nisl vehicula finibus. Suspendisse potenti. Quisque nec odio et est pharetra semper. Nullam nec ligula in risus laoreet pulvinar. Nullam et turpis ac eros viverra facilisis. Nullam et turpis ac eros viverra facilisis"></ui5-expandable-text>
-	
+
 	<h3>overflowMode=Popover</h3>
 	<ui5-expandable-text max-characters="150" overflow-mode="Popover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac risus nec lorem pretium fringilla. Sed non eros nec nisl vehicula finibus. Suspendisse potenti. Quisque nec odio et est pharetra semper. Nullam nec ligula in risus laoreet pulvinar. Nullam et turpis ac eros viverra facilisis. Nullam et turpis ac eros viverra facilisis"></ui5-expandable-text>
 
@@ -49,4 +49,18 @@ <h3>Off, with Text</h3>
 
 	<h3>RTL</h3>
 	<ui5-expandable-text dir="rtl" text="וְאָהַבְתָּ אֵת יְיָ | אֱלֹהֶיךָ, בְּכָל-לְבָֽבְךָ, וּבְכָל-נַפְשְׁךָ, וּבְכָל-מְאֹדֶֽךָ. וְהָיוּ הַדְּבָרִים הָאֵלֶּה, אֲשֶׁר | אָֽנֹכִי מְצַוְּךָ" max-characters="50"></ui5-expandable-text>
+
+	<h2>Whitespaces</h2>
+	<h3>overflowMode=Inline</h3>
+	<ui5-expandable-text style="white-space: break-spaces" text="Simple
+
+	text"></ui5-expandable-text>
+
+	<h3>overflowMode=Popover</h3>
+	<ui5-expandable-text style="white-space: break-spaces; font-size: 20px" overflow-mode="Popover" text="Lorem ipsum dolor sit
+
+	 amet, consectetur adipiscing elit.
+
+	  Donec ac risus nec lorem pretium fringilla. Sed non eros nec nisl vehicula finibus. Suspendisse potenti. Quisque nec odio et est pharetra semper. Nullam nec ligula in risus laoreet pulvinar. Nullam et turpis ac eros viverra facilisis. Nullam et turpis ac eros viverra facilisis"></ui5-expandable-text>
+</body>
 </html>