fix(ui5-tab-container): correct inline mode visualization (#8335)

The additional text (the number) is rendered only once - in the brackets after the rest of the text Fixes #8274
SAP · Mar 20, 2024 · 70d4392 · 70d4392
1 parent 615575e
commit 70d4392
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/packages/main/src/TabInStrip.hbs b/packages/main/src/TabInStrip.hbs
@@ -26,7 +26,7 @@
 	{{/if}}
 
 	<div class="ui5-tab-strip-itemContent">
-		{{#unless this._isInline}}
+		{{#unless this.isInline}}
 			{{> additionalText}}
 		{{/unless}}
 

diff --git a/packages/main/test/pages/TabContainer.html b/packages/main/test/pages/TabContainer.html
@@ -431,7 +431,7 @@ <h4>Content with set height: 300px</h4>
 	<section>
 		<h2>Icon and Text with tabLayout="Inline"</h2>
 
-		<ui5-tabcontainer tab-layout="Inline">
+		<ui5-tabcontainer tab-layout="Inline" id="tabContainerInlineTab">
 			<ui5-tab icon="sap-icon://card" text="Tab 1" additional-text="123">
 				<div class="tabcontainer2auto">
 					<h4>Content with set height: 300px</h4>

diff --git a/packages/main/test/specs/TabContainer.spec.js b/packages/main/test/specs/TabContainer.spec.js
@@ -336,6 +336,15 @@ describe("TabContainer general interaction", () => {
 		assert.ok(productsTabDomRefInStrip.isEqual(productsTabDomRefInStripExpected) , "Tab dom ref in strip should be the first child of the tab container's strip");
 	});
 
+	it("tests inline visualization", async () => {
+		const tabContainer = await browser.$("#tabContainerInlineTab");
+		const firstTabItemText = await tabContainer.shadow$(".ui5-tab-strip-itemText");
+
+		// Assert
+		assert.notOk(await tabContainer.shadow$(".ui5-tab-strip-itemAdditionalText").isExisting(), "There is no additional text.");
+		assert.strictEqual(await firstTabItemText.getProperty("innerText"), "Tab 1 (123)" , "The inline number is added to the text.");
+	});
+
 });
 
 describe("TabContainer keyboard handling", () => {