fix(ui5-table): adjust header row's height according to the visual sp…

…ecification (#4424) * fix(ui5-table): adjust header row's height according to the visual specification * correctly define parameter values
SAP · Dec 7, 2021 · 175fce3 · 175fce3
1 parent eb796f7
commit 175fce3
Show file tree

Hide file tree

Showing 9 changed files with 10 additions and 6 deletions.
diff --git a/packages/main/src/Table.hbs b/packages/main/src/Table.hbs
@@ -5,7 +5,7 @@
 
 	<table border="0" cellspacing="0" cellpadding="0" @keydown="{{_onkeydown}}" role="table">
 		<thead>
-			<tr id="{{_columnHeader.id}}" role="row" class="ui5-table-header-row" aria-label="{{ariaLabelText}}" tabindex="{{_columnHeader._tabIndex}}" style="{{styles.table}}" @click="{{_onColumnHeaderClick}}">
+			<tr id="{{_columnHeader.id}}" role="row" class="ui5-table-header-row" aria-label="{{ariaLabelText}}" tabindex="{{_columnHeader._tabIndex}}" @click="{{_onColumnHeaderClick}}">
 				{{#if isMultiSelect}}
 					<th class="ui5-table-select-all-column" role="presentation" aria-hidden="true">
 						<ui5-checkbox class="ui5-table-select-all-checkbox"

diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js
@@ -688,9 +688,6 @@ class Table extends UI5Element {
 
 	get styles() {
 		return {
-			table: {
-				height: "48px",
-			},
 			busy: {
 				position: this.busyIndPosition,
 			},

diff --git a/packages/main/src/themes/Table.css b/packages/main/src/themes/Table.css
@@ -18,7 +18,7 @@ table {
 
 .ui5-table-header-row {
 	color: var(--sapTextColor);
-	height: 3rem;
+	height: var(--ui5_table_header_row_height);
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	font-weight: var(--ui5_table_header_row_font_weight);

diff --git a/packages/main/src/themes/TableColumn.css b/packages/main/src/themes/TableColumn.css
@@ -11,7 +11,6 @@ th {
 	font-size: var(--sapFontMediumSize);
 	padding: 0.25rem;
 	box-sizing: border-box;
-	height: 3rem;
 	text-align: left;
 	vertical-align: middle;
 }

diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -103,6 +103,7 @@
 	--_ui5_load_more_text_height: 2.75rem;
 	--_ui5_load_more_text_font_size: var(--sapFontMediumSize);
 	--_ui5_load_more_desc_padding:  0.375rem 2rem 0.875rem 2rem;
+	--ui5_table_header_row_height: 2.75rem;
 
 	/* Tree */
 	--_ui5-tree-indent-step: 1.5rem;
@@ -287,6 +288,7 @@
 	--_ui5_load_more_text_height: 2.625rem;
 	--_ui5_load_more_text_font_size: var(--sapFontSize);
 	--_ui5_load_more_desc_padding: 0 2rem 0.875rem 2rem;
+	--ui5_table_header_row_height: 2rem;
 
 	/* Tree */
 	--_ui5-tree-indent-step: 0.5rem;

diff --git a/packages/main/src/themes/sap_belize/Table-parameters.css b/packages/main/src/themes/sap_belize/Table-parameters.css
@@ -1,4 +1,7 @@
+@import "../base/Table-parameters.css";
+
 :root {
 	--ui5_table_header_row_outline_width: 1px;
 	--ui5_table_multiselect_column_width: 3rem;
+	--ui5_table_header_row_height: 3rem;
 }
diff --git a/packages/main/src/themes/sap_belize_hcb/Table-parameters.css b/packages/main/src/themes/sap_belize_hcb/Table-parameters.css
@@ -3,4 +3,5 @@
 :root {
 	--ui5_table_header_row_outline_width: 0.125rem;
 	--ui5_table_multiselect_column_width: 3rem;
+	--ui5_table_header_row_height: 3rem;
 }
diff --git a/packages/main/src/themes/sap_belize_hcw/Table-parameters.css b/packages/main/src/themes/sap_belize_hcw/Table-parameters.css
@@ -3,4 +3,5 @@
 :root {
 	--ui5_table_header_row_outline_width: 0.125rem;
 	--ui5_table_multiselect_column_width: 3rem;
+	--ui5_table_header_row_height: 3rem;
 }
diff --git a/packages/main/src/themes/sap_horizon/Table-parameters.css b/packages/main/src/themes/sap_horizon/Table-parameters.css
@@ -4,4 +4,5 @@
 	--ui5_table_bottom_border: none;
 	--ui5_table_header_row_outline_width: var(--sapContent_FocusWidth);
 	--ui5_table_header_row_font_weight: bold;
+	--ui5_table_header_row_height: 2.75rem;
 }