feat(ui5-tabcontainer): Responsive paddings are now supported

fixes SAP#2539

packages/base/src/Device.js

@@ -805,6 +805,96 @@ const isMobile = () => {
 	return Device.browser.mobile;
 };
 
+//******** Match Media ********
+
+/**
+ * API for screen width changes.
+ *
+ * @namespace
+ * @name Device.media
+ */
+
+/**
+ * Initializes a screen width media query range set.
+ *
+ * This initialization step makes the range set ready to be used for one of the other functions in namespace <code>Device.media</code>.
+ *
+ * A range set can be defined as shown in the following example:
+ * <pre>
+ * Device.media.initRangeSet("MyRangeSet", [200, 400], ["Small", "Medium", "Large"]);
+ * </pre>
+ * This example defines the following named ranges:
+ * <ul>
+ * <li><code>"Small"</code>: For screens smaller than 200 pixels.</li>
+ * <li><code>"Medium"</code>: For screens greater than or equal to 200 pixels and smaller than 400 pixels.</li>
+ * <li><code>"Large"</code>: For screens greater than or equal to 400 pixels.</li>
+ * </ul>
+ *
+ * @param {string} name The name of the range set to be initialized.
+ * The name must be a valid id and consist only of letters and numeric digits.
+ *
+ * @param {int[]} [borders] The range borders
+ *
+ * @param {string[]} [names] The names of the ranges. The names must be a valid id and consist only of letters and digits.
+ *
+ * @name Device.media.initRangeSet
+ * @function
+ * @public
+ */
+const _initRangeSet = (name, borders, names) => {
+	Device.media._querySets[name] = {
+		borders: borders,
+		names: names
+	}
+};
+
+/**
+ * Returns information about the current active range of the range set with the given name.
+ *
+ * If the optional parameter <code>iWidth</code> is given, the active range will be determined for that width,
+ * otherwise it is determined for the current window size.
+ *
+ * @param {string} name The name of the range set. The range set must be initialized beforehand ({@link Device.media.initRangeSet})
+ * @param {int} [width] An optional width, based on which the range should be determined;
+ *             If <code>iwWidth</code> is not a number, the window size will be used.
+ * @returns {string} The name of the current active interval of the range set.
+ *
+ * @name Device.media.getCurrentRange
+ * @function
+ * @public
+ */
+const _getCurrentRange = (name, width = window.innerWidth) => {
+	let querySet = Device.media._querySets[name];
+
+	if (!querySet) {
+		return null;
+	}
+
+	for (var i = 0; i < querySet.borders.length; i++) {
+		if (width < querySet.borders[i]) {
+			return querySet.names[i];
+		}
+	}
+
+	return query.names[i];
+};
+
+const _setMedia = () => {
+	Device.media = {
+		_querySets: {},
+		initRangeSet: _initRangeSet,
+		getCurrentRange: _getCurrentRange
+	};
+};
+
+const getMedia = () => {
+	if (!Device.media) {
+		_setMedia();
+	}
+
+	return Device.media;
+};
+
 export {
 	isIE,
 	isEdge,
@@ -820,4 +910,5 @@ export {
 	getSystem,
 	getBrowser,
 	supportTouch,
+	getMedia,
 };

packages/main/src/TabContainer.js

@@ -8,6 +8,7 @@ import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getMedia } from "@ui5/webcomponents-base/dist/Device.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
@@ -29,6 +30,8 @@ import tabContainerCss from "./generated/themes/TabContainer.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import TabLayout from "./types/TabLayout.js";
 
+const TC_RANGE_SET = "TCRangeSet";
+
 const SCROLL_STEP = 128;
 
 const tabStyles = [];
@@ -152,6 +155,16 @@ const metadata = {
 			defaultValue: TabLayout.Standard,
 		},
 
+		/**
+		 * Defines the current media query size.
+		 *
+		 * @type {string}
+		 * @private
+		 */
+		size: {
+			type: String,
+		},
+
 		_selectedTab: {
 			type: Object,
 		},
@@ -275,7 +288,9 @@ class TabContainer extends UI5Element {
 	constructor() {
 		super();
 
-		this._handleHeaderResize = this._handleHeaderResize.bind(this);
+		getMedia().initRangeSet(TC_RANGE_SET, [600, 1024, 1440], ["S", "M", "L", "XL"]);
+
+		this._handleResize = this._handleResize.bind(this);
 
 		// Init ScrollEnablement
 		this._scrollEnablement = new ScrollEnablement(this);
@@ -313,11 +328,11 @@ class TabContainer extends UI5Element {
 	}
 
 	onEnterDOM() {
-		ResizeHandler.register(this._getHeader(), this._handleHeaderResize);
+		ResizeHandler.register(this._getHeader(), this._handleResize);
 	}
 
 	onExitDOM() {
-		ResizeHandler.deregister(this._getHeader(), this._handleHeaderResize);
+		ResizeHandler.deregister(this._getHeader(), this._handleResize);
 	}
 
 	_onHeaderClick(event) {
@@ -471,8 +486,9 @@ class TabContainer extends UI5Element {
 			.then(_ => this._updateScrolling());
 	}
 
-	_handleHeaderResize() {
+	_handleResize() {
 		this._updateScrolling();
+		this._updateMediaRange();
 	}
 
 	async _closeRespPopover() {
@@ -492,6 +508,10 @@ class TabContainer extends UI5Element {
 		}
 	}
 
+	_updateMediaRange() {
+		this.size = getMedia().getCurrentRange(TC_RANGE_SET, this.getDomRef().offsetWidth);
+	}
+
 	_getHeader() {
 		return this.shadowRoot.querySelector(`#${this._id}-header`);
 	}