fix(ui5-tabcontainer): fix tab content overflow and height calculation (#1056)

Author: ilhan007

packages/main/src/TabContainer.hbs

@@ -1,5 +1,5 @@
 <div
-	class="ui5-tc-root"
+	class="{{classes.root}}"
 	dir="{{rtl}}"
 >
 	<div class="{{classes.header}}" id="{{_id}}-header">

packages/main/src/TabContainer.js

@@ -100,6 +100,11 @@ const metadata = {
 			type: Boolean,
 			noAttribute: true,
 		},
+		_textOnly: {
+			type: Boolean,
+			noAttribute: true,
+		},
+
 	},
 	events: /** @lends  sap.ui.webcomponents.main.TabContainer.prototype */ {
 		/**
@@ -182,12 +187,13 @@ class TabContainer extends UI5Element {
 
 	onBeforeRendering() {
 		const hasSelected = this.items.some(item => item.selected);
+		this._textOnly = this.items.every(item => !item.icon);
+
 		this.items.forEach(item => {
 			item._getTabContainerHeaderItemCallback = _ => {
 				return this.getDomRef().querySelector(`#${item._id}`);
 			};
 		});
-
 		if (this.items.length && !hasSelected) {
 			this.items[0].selected = true;
 		}
@@ -351,6 +357,10 @@ class TabContainer extends UI5Element {
 
 	get classes() {
 		return {
+			root: {
+				"ui5-tc-root": true,
+				"ui5-tc--textOnly": this._textOnly,
+			},
 			header: {
 				"ui5-tc__header": true,
 				"ui5-tc__header--scrollable": this._scrollable,

packages/main/src/themes/TabContainer.css

@@ -16,11 +16,17 @@
 }
 
 .ui5-tc__header {
+	display: flex;
+	align-items: center;
+	height: var(--_ui5_tc_header_height);
 	background-color: var(--sapUiObjectHeaderBackground);
 	border-bottom: var(--_ui5_tc_header_border_bottom);
 	box-shadow: var(--_ui5_tc_header_box_shadow);
-	display: flex;
-	align-items: center;
+	box-sizing: border-box;
+}
+
+.ui5-tc-root.ui5-tc--textOnly .ui5-tc__header {
+	height: var(--_ui5_tc_header_height_text_only);
 }
 
 .ui-tc__headerScrollContainer {
@@ -236,13 +242,17 @@
 	color: currentColor;
 }
 
+.ui5-tc-root.ui5-tc--textOnly .ui5-tc__content {
+	height: calc(100% - var(--_ui5_tc_header_height_text_only)); /* the header height (text only tabs) */
+}
 
 .ui5-tc__content {
+	position: relative;
+	height: calc(100% - var(--_ui5_tc_header_height)); /* the header height (tabs with icons and text) */
+	padding: 1rem;
 	background-color: var(--sapUiGroupContentBackground);
 	border-bottom: var(--_ui5_tc_content_border_bottom);
-	padding: 1rem;
-	position: relative;
-	height: 100%;
+	box-sizing: border-box;
 }
 
 .ui5-tc__content--collapsed {
@@ -411,3 +421,19 @@
 :host([data-ui5-compact-size]) .ui5-tc__headerItem--withIcon  .ui5-tc__headerItemAdditionalText + .ui5-tc__headerItemText {
 	margin-top: 0.3125rem;
 }
+
+:host([data-ui5-compact-size]) .ui5-tc-root.ui5-tc--textOnly .ui5-tc__header {
+	height: var(--_ui5_tc_header_height_text_only_compact);
+}
+
+:host([data-ui5-compact-size]) .ui5-tc__header {
+	height: var(--_ui5_tc_header_height_compact);
+}
+
+:host([data-ui5-compact-size]) .ui5-tc__content {
+	height: calc(100% - var(--_ui5_tc_header_height_compact)); /* the header height (tabs with icons and text) */
+}
+
+:host([data-ui5-compact-size]) .ui5-tc-root.ui5-tc--textOnly .ui5-tc__content {
+	height: calc(100% - var(--_ui5_tc_header_height_text_only_compact)); /* the header height (tabs text only) */
+}

packages/main/src/themes/base/TabContainer-parameters.css

@@ -1,4 +1,9 @@
 :root {
+	/* Header */
+	--_ui5_tc_header_height: 4.6875rem;
+	--_ui5_tc_header_height_compact: 3.6875rem;
+	--_ui5_tc_header_height_text_only: 3rem;
+	--_ui5_tc_header_height_text_only_compact: 2rem;
 	--_ui5_tc_header_box_shadow: inset 0 -0.25rem 0 -0.125rem var(--sapUiObjectHeaderBorderColor);
 	--_ui5_tc_header_border_bottom: 0.125rem solid var(--sapUiObjectHeaderBackground);