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

fixes SAP#2539
TeodorTaushanov · Feb 17, 2021 · c9d4354 · c9d4354
1 parent dc5f140
commit c9d4354
Show file tree

Hide file tree

Showing 4 changed files with 323 additions and 295 deletions.
diff --git a/packages/main/src/TabContainer.hbs b/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}}

diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js
@@ -523,6 +523,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,
 			},

diff --git a/packages/main/src/themes/TabContainer.css b/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,13 @@
 	box-sizing: border-box;
 }
 
+.ui5-tc__headerInnerContainer {
+	position: relative;
+	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 {
@@ -56,12 +63,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);