refactor(ui5-tabcontainer): revert responsive paddings using containe…

…r logic (#8279) * feat(ui5-tabcontainer): revert responsive paddings using container logic * feat(ui5-tabcontainer): fix jsdoc error
SAP · Mar 20, 2024 · 9ec565f · 9ec565f
1 parent e3a983a
commit 9ec565f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 16 deletions.
diff --git a/packages/main/src/TabContainer.ts b/packages/main/src/TabContainer.ts
@@ -21,6 +21,7 @@ import {
 	isLeft,
 	isUp,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
@@ -285,6 +286,14 @@ class TabContainer extends UI5Element {
 	@property({ type: TabContainerTabsPlacement, defaultValue: TabContainerTabsPlacement.Top })
 	tabsPlacement!: `${TabContainerTabsPlacement}`;
 
+	/**
+	 * Defines the current media query size.
+	 *
+	 * @private
+	 */
+	@property()
+	mediaRange!: string;
+
 	@property({ type: Object })
 	_selectedTab!: Tab;
 
@@ -436,6 +445,11 @@ class TabContainer extends UI5Element {
 
 		// invalidate
 		this._width = this.offsetWidth;
+		this._updateMediaRange(this._width);
+	}
+
+	_updateMediaRange(width: number) {
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, width);
 	}
 
 	_setItemsPrivateProperties(items: Array<ITab>) {

diff --git a/packages/main/src/themes/TabContainer.css b/packages/main/src/themes/TabContainer.css
@@ -6,7 +6,6 @@
 :host(:not([hidden])) {
 	display: inline-block;
 	width: 100%;
-	container-type: inline-size;
 }
 
 .ui5-tc-root {
@@ -150,22 +149,20 @@
 	padding: 1rem;
 }
 
-@container (min-width: 600px) {
-	.ui5-tc__header {
-		padding: 0 1rem;
-	}
+:host([media-range="M"]) .ui5-tc__header,
+:host([media-range="L"]) .ui5-tc__header {
+	padding: 0 1rem;
+}
 
-	.ui5-tc__content {
-		padding: 1rem 2rem;
-	}
+:host([media-range="M"]) .ui5-tc__content,
+:host([media-range="L"]) .ui5-tc__content {
+	padding: 1rem 2rem;
 }
 
-@container (min-width: 1440px) {
-	.ui5-tc__header {
-		padding: 0 2rem;
-	}
-
-	.ui5-tc__content {
-		padding: 1rem 3rem;
-	}
+:host([media-range="XL"]) .ui5-tc__header {
+	padding: 0 2rem;
 }
+
+:host([media-range="XL"]) .ui5-tc__content {
+	padding: 1rem 3rem;
+}
diff --git a/packages/main/test/specs/TabContainer.spec.js b/packages/main/test/specs/TabContainer.spec.js
@@ -55,6 +55,20 @@ describe("TabContainer general interaction", () => {
 		await cbPrevent.click();
 	});
 
+	it("tests custom media ranges", async () => {
+		await browser.setWindowSize(520, 1080);
+		assert.strictEqual(await browser.$("#tabContainerIconOnly").getAttribute("media-range"), "S", "media-range=S");
+
+		await browser.setWindowSize(650, 1080);
+		assert.strictEqual(await browser.$("#tabContainerIconOnly").getAttribute("media-range"), "M", "media-range=M");
+
+		await browser.setWindowSize(1350, 1080);
+		assert.strictEqual(await browser.$("#tabContainerIconOnly").getAttribute("media-range"), "L", "media-range=L");
+
+		await browser.setWindowSize(1650, 1080);
+		assert.strictEqual(await browser.$("#tabContainerIconOnly").getAttribute("media-range"), "XL", "media-range=XL");
+	});
+
 	it("tests if content is scrollable when tabcontainer takes limited height by its parent", async () => {
 		const { tcHeight, tcScrollHeight } = await browser.executeAsync(done => {
 			const scrollableContent = document.getElementById("tc-scrollable-child");