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

Fixes: SAP#2539

packages/base/src/Device.js

@@ -805,97 +805,6 @@ 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,
-		names,
-	};
-};
-
-/**
- * Returns information about the current active range of the range set with the given name.
- *
- * If the optional parameter <code>width</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>width</code> is not provided, 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) => {
-	const querySet = Device.media._querySets[name];
-	let i = 0;
-
-	if (!querySet) {
-		return null;
-	}
-
-	for (; i < querySet.borders.length; i++) {
-		if (width < querySet.borders[i]) {
-			return querySet.names[i];
-		}
-	}
-
-	return querySet.names[i];
-};
-
-const _setMedia = () => {
-	Device.media = {
-		_querySets: {},
-		initRangeSet: _initRangeSet,
-		getCurrentRange: _getCurrentRange,
-	};
-};
-
-const getMedia = () => {
-	if (!Device.media) {
-		_setMedia();
-	}
-
-	return Device.media;
-};
-
 export {
 	isIE,
 	isEdge,
@@ -911,5 +820,4 @@ export {
 	getSystem,
 	getBrowser,
 	supportTouch,
-	getMedia,
 };

packages/base/src/MediaRange.js

@@ -0,0 +1,81 @@
+/**
+ * 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>MediaRange</code>.
+ *
+ * A range set can be defined as shown in the following example:
+ * <pre>
+ * MediaRange.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 MediaRange.initRangeSet
+ * @function
+ * @public
+ */
+const _initRangeSet = (name, borders, names) => {
+	MediaRange._querySets[name] = {
+		borders,
+		names,
+	};
+};
+
+/**
+ * Returns information about the current active range of the range set with the given name.
+ *
+ * If the optional parameter <code>width</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 MediaRange.initRangeSet})
+ * @param {int} [width] An optional width, based on which the range should be determined;
+ *             If <code>width</code> is not provided, the window size will be used.
+ * @returns {string} The name of the current active interval of the range set.
+ *
+ * @name MediaRange.getCurrentRange
+ * @function
+ * @public
+ */
+const _getCurrentRange = (name, width = window.innerWidth) => {
+	const querySet = MediaRange._querySets[name];
+	let i = 0;
+
+	if (!querySet) {
+		return null;
+	}
+
+	for (; i < querySet.borders.length; i++) {
+		if (width < querySet.borders[i]) {
+			return querySet.names[i];
+		}
+	}
+
+	return querySet.names[i];
+};
+
+/**
+ * API for screen width changes.
+ *
+ * @namespace
+ * @name MediaRange
+ */
+
+const MediaRange = {
+	_querySets: {},
+	initRangeSet: _initRangeSet,
+	getCurrentRange: _getCurrentRange,
+};
+
+
+export default MediaRange;

packages/main/src/TabContainer.js

@@ -8,7 +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 MediaRange from "@ui5/webcomponents-base/dist/MediaRange.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";
@@ -288,7 +288,7 @@ class TabContainer extends UI5Element {
 	constructor() {
 		super();
 
-		getMedia().initRangeSet(TC_RANGE_SET, [600, 1024, 1440], ["S", "M", "L", "XL"]);
+		MediaRange.initRangeSet(TC_RANGE_SET, [600, 1024, 1440], ["S", "M", "L", "XL"]);
 
 		this._handleResize = this._handleResize.bind(this);
 
@@ -509,7 +509,7 @@ class TabContainer extends UI5Element {
 	}
 
 	_updateMediaRange() {
-		this.mediaRange = getMedia().getCurrentRange(TC_RANGE_SET, this.getDomRef().offsetWidth);
+		this.mediaRange = MediaRange.getCurrentRange(TC_RANGE_SET, this.getDomRef().offsetWidth);
 	}
 
 	_getHeader() {