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

Fixes: SAP#2539
TeodorTaushanov · Feb 17, 2021 · d2cbc10 · d2cbc10
1 parent 7290a15
commit d2cbc10
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/packages/base/src/MediaRange.js b/packages/base/src/MediaRange.js
@@ -64,6 +64,31 @@ const _getCurrentRange = (name, width = window.innerWidth) => {
 	return querySet.names[i];
 };
 
+/**
+ * Enumeration containing the names and settings of predefined screen width media query range sets.
+ *
+ * @namespace
+ * @name MediaRange.RANGESETS
+ * @public
+ */
+var RANGESETS = {
+	/**
+	 * A 4-step range set (S-M-L-XL).
+	 *
+	 * The ranges of this set are:
+	 * <ul>
+	 * <li><code>"S"</code>: For screens smaller than 600 pixels.</li>
+	 * <li><code>"M"</code>: For screens greater than or equal to 600 pixels and smaller than 1024 pixels.</li>
+	 * <li><code>"L"</code>: For screens greater than or equal to 1024 pixels and smaller than 1440 pixels.</li>
+	 * <li><code>"XL"</code>: For screens greater than or equal to 1440 pixels.</li>
+	 * </ul>
+	 *
+	 * @name MediaRange.RANGESETS.RANGE_4STEPS
+	 * @public
+	 */
+	RANGE_4STEPS: "4Step"
+};
+
 /**
  * API for screen width changes.
  *
@@ -72,10 +97,13 @@ const _getCurrentRange = (name, width = window.innerWidth) => {
  */
 
 const MediaRange = {
+	RANGESETS: RANGESETS,
 	_querySets: {},
 	initRangeSet: _initRangeSet,
 	getCurrentRange: _getCurrentRange,
 };
 
 
+MediaRange.initRangeSet(MediaRange.RANGESETS.RANGE_4STEPS, [600, 1024, 1440], ["S", "M", "L", "XL"]);
+
 export default MediaRange;
diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js
@@ -288,8 +288,6 @@ class TabContainer extends UI5Element {
 	constructor() {
 		super();
 
-		MediaRange.initRangeSet(TC_RANGE_SET, [600, 1024, 1440], ["S", "M", "L", "XL"]);
-
 		this._handleResize = this._handleResize.bind(this);
 
 		// Init ScrollEnablement
@@ -509,7 +507,7 @@ class TabContainer extends UI5Element {
 	}
 
 	_updateMediaRange() {
-		this.mediaRange = MediaRange.getCurrentRange(TC_RANGE_SET, this.getDomRef().offsetWidth);
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
 	}
 
 	_getHeader() {