feat(ui5-tabcontainer): support responsive paddings (#2775)

Fixes: #2539

Author: TeodorTaushanov

packages/base/src/MediaRange.js

@@ -0,0 +1,110 @@
+const querySets = {};
+
+/**
+ * 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) => {
+	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 = 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];
+};
+
+/**
+ * Enumeration containing the names and settings of predefined screen width media query range sets.
+ *
+ * @namespace
+ * @name MediaRange.RANGESETS
+ * @public
+ */
+const 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.
+ *
+ * @namespace
+ * @name MediaRange
+ */
+
+const MediaRange = {
+	RANGESETS,
+	initRangeSet: _initRangeSet,
+	getCurrentRange: _getCurrentRange,
+};
+
+
+MediaRange.initRangeSet(MediaRange.RANGESETS.RANGE_4STEPS, [600, 1024, 1440], ["S", "M", "L", "XL"]);
+
+export default MediaRange;

packages/main/src/TabContainer.hbs

@@ -7,30 +7,41 @@
 	{{/if}}
 
 	<div class="{{classes.header}}" id="{{_id}}-header">
-		<ui5-icon @click="{{_onHeaderBackArrowClick}}" class="{{classes.headerBackArrow}}" name="slim-arrow-left" tabindex="-1" accessible-name="{{previousIconACCName}}" show-tooltip></ui5-icon>
-
-		<!-- tab items -->
-		<div class="{{classes.headerScrollContainer}}" id="{{_id}}-headerScrollContainer">
-			<ul
-				role="tablist"
-				class="{{classes.headerList}}"
-				@click="{{_onHeaderClick}}"
-				@keydown="{{_onHeaderKeyDown}}"
-				@keyup="{{_onHeaderKeyUp}}"
-			>
-				{{#each items}}
-					{{#unless this.isSeparator}}
-						{{this.stripPresentation}}
-					{{/unless}}
-					{{#if this.isSeparator}}
-						<li id="{{this._id}}" role="separator" class="{{../classes.separator}}" style="list-style-type: none;"></li>
-					{{/if}}
-				{{/each}}
-			</ul>
+		<div class="{{classes.headerInnerContainer}}">
+			<div class="{{classes.headerBackArrow}}">
+				<ui5-button @click="{{_onHeaderBackArrowClick}}"
+							icon="slim-arrow-left"
+							design="Transparent"
+							tabindex="-1"
+							title="{{previousIconACCName}}"></ui5-button>
+			</div>
+			<!-- tab items -->
+			<div class="{{classes.headerScrollContainer}}" id="{{_id}}-headerScrollContainer">
+				<ul
+					role="tablist"
+					class="{{classes.headerList}}"
+					@click="{{_onHeaderClick}}"
+					@keydown="{{_onHeaderKeyDown}}"
+					@keyup="{{_onHeaderKeyUp}}"
+				>
+					{{#each items}}
+						{{#unless this.isSeparator}}
+							{{this.stripPresentation}}
+						{{/unless}}
+						{{#if this.isSeparator}}
+							<li id="{{this._id}}" role="separator" class="{{../classes.separator}}" style="list-style-type: none;"></li>
+						{{/if}}
+					{{/each}}
+				</ul>
+			</div>
+			<div class="{{classes.headerForwardArrow}}">
+			<ui5-button @click="{{_onHeaderForwardArrowClick}}"
+						icon="slim-arrow-right"
+						design="Transparent"
+						tabindex="-1"
+						title="{{nextIconACCName}}"></ui5-button>
+		</div>
 		</div>
-
-		<ui5-icon @click="{{_onHeaderForwardArrowClick}}" class="{{classes.headerForwardArrow}}" name="slim-arrow-right" tabindex="-1" accessible-name="{{nextIconACCName}}" show-tooltip></ui5-icon>
-
 		<!-- overflow button -->
 		{{#if shouldShowOverflow}}
 			<div
@@ -43,9 +54,9 @@
 					<ui5-button
 						icon="{{overflowMenuIcon}}"
 						design="Transparent"
+						tabindex="-1"
 						title="{{overflowMenuTitle}}"
-						aria-haspopup="true"
-					></ui5-button>
+						aria-haspopup="true"></ui5-button>
 				{{/if}}
 			</div>
 		{{/if}}

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 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";
@@ -152,6 +153,16 @@ const metadata = {
 			defaultValue: TabLayout.Standard,
 		},
 
+		/**
+		 * Defines the current media query size.
+		 *
+		 * @type {string}
+		 * @private
+		 */
+		mediaRange: {
+			type: String,
+		},
+
 		_selectedTab: {
 			type: Object,
 		},
@@ -275,7 +286,7 @@ class TabContainer extends UI5Element {
 	constructor() {
 		super();
 
-		this._handleHeaderResize = this._handleHeaderResize.bind(this);
+		this._handleResize = this._handleResize.bind(this);
 
 		// Init ScrollEnablement
 		this._scrollEnablement = new ScrollEnablement(this);
@@ -313,11 +324,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 +482,9 @@ class TabContainer extends UI5Element {
 			.then(_ => this._updateScrolling());
 	}
 
-	_handleHeaderResize() {
+	_handleResize() {
 		this._updateScrolling();
+		this._updateMediaRange();
 	}
 
 	async _closeRespPopover() {
@@ -492,6 +504,10 @@ class TabContainer extends UI5Element {
 		}
 	}
 
+	_updateMediaRange() {
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
+	}
+
 	_getHeader() {
 		return this.shadowRoot.querySelector(`#${this._id}-header`);
 	}
@@ -523,6 +539,9 @@ class TabContainer extends UI5Element {
 				"ui5-tc__header": true,
 				"ui5-tc__header--scrollable": this._scrollable,
 			},
+			headerInnerContainer: {
+				"ui5-tc__headerInnerContainer": true,
+			},
 			headerScrollContainer: {
 				"ui-tc__headerScrollContainer": true,
 			},

packages/main/src/themes/TabContainer.css

@@ -16,6 +16,8 @@
 }
 
 .ui5-tc__header {
+	position: relative;
+	padding: 0 1rem;
 	display: flex;
 	align-items: center;
 	height: var(--_ui5_tc_header_height);
@@ -24,8 +26,14 @@
 	box-sizing: border-box;
 }
 
+.ui5-tc__headerInnerContainer {
+	position: relative;
+	flex: 1 1 100%;
+	min-width: 0; /* fixes chrome flex issue */
+}
+
 :host([tabs-placement="Bottom"]) .ui5-tc__header {
-    border-top: var(--_ui5_tc_header_border_bottom);
+	border-top: var(--_ui5_tc_header_border_bottom);
 }
 
 .ui5-tc-root.ui5-tc--textOnly .ui5-tc__header {
@@ -35,7 +43,7 @@
 .ui-tc__headerScrollContainer {
 	box-sizing: border-box;
 	overflow: hidden;
-	flex: 1;
+	flex: 1 1 100%;
 }
 
 .ui5-tc__headerList {
@@ -56,12 +64,26 @@
 }
 
 .ui5-tc__headerArrow {
-	cursor: pointer;
+	position: absolute;
+	top: 0;
+	bottom: 1px;
+	z-index: 1;
+	display: flex;
+	align-items: center;
 	color: var(--sapContent_IconColor);
+	background-color: var(--sapObjectHeader_Background);
 	padding: 0 0.25rem;
 	visibility: hidden;
 }
 
+.ui5-tc__headerArrowLeft {
+	left: 0;
+}
+
+.ui5-tc__headerArrowRight {
+	right: 0;
+}
+
 .ui5-tc__headerArrow:hover,
 .ui5-tc__headerArrow:active {
 	color: var(--sapHighlightColor);
@@ -84,7 +106,7 @@
 	position: relative;
 	display: flex;
 	height: calc(100% - var(--_ui5_tc_header_height)); /* the header height (tabs with icons and text) */
-	padding: 1rem;
+	padding: 1rem 2rem;
 	background-color: var(--sapGroup_ContentBackground);
 	border-bottom: var(--_ui5_tc_content_border_bottom);
 	box-sizing: border-box;
@@ -103,7 +125,7 @@
 }
 
 .ui5-tc__contentItem {
-    max-height: 100%;
+	max-height: 100%;
 	display: flex;
 	flex-grow: 1;
 	overflow: auto;
@@ -113,6 +135,24 @@
 	display: none;
 }
 
+/*** Responsive paddings ***/
+
+:host([media-range="S"]) .ui5-tc__header {
+	padding: 0;
+}
+
+:host([media-range="S"]) .ui5-tc__content {
+	padding: 1rem;
+}
+
+:host([media-range="XL"]) .ui5-tc__header {
+	padding: 0 2rem;
+}
+
+:host([media-range="XL"]) .ui5-tc__content {
+	padding: 1rem 3rem;
+}
+
 /*** RTL ***/
 [dir=rtl] .ui-tc__overflowButton {
 	margin-right: auto;