fix(ui5-table): add the missing headerRow dependency

- Busy indicator dim background is added - Explicit header row height is removed - Multiple selection mode sample is fixed - Navigated outline is aligned with spec
SAP · Jul 22, 2024 · af337ef · af337ef
1 parent ca153d0
commit af337ef
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 11 deletions.
diff --git a/packages/main/src/Table.ts b/packages/main/src/Table.ts
@@ -13,7 +13,7 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import TableTemplate from "./generated/templates/TableTemplate.lit.js";
 import TableStyles from "./generated/themes/Table.css.js";
 import TableRow from "./TableRow.js";
-import type TableHeaderRow from "./TableHeaderRow.js";
+import TableHeaderRow from "./TableHeaderRow.js";
 import type TableHeaderCell from "./TableHeaderCell.js";
 import TableExtension from "./TableExtension.js";
 import type TableSelection from "./TableSelection.js";
@@ -160,6 +160,7 @@ type TableRowClickEventDetail = {
 	fastNavigation: true,
 	dependencies: [
 		BusyIndicator,
+		TableHeaderRow,
 		TableCell,
 		TableRow,
 	],

diff --git a/packages/main/src/TableRow.hbs b/packages/main/src/TableRow.hbs
@@ -22,7 +22,9 @@
 {{/each}}
 
 {{#if _renderNavigated}}
-    <ui5-table-cell id="navigated-cell" excluded-from-navigation></ui5-table-cell>
+    <ui5-table-cell id="navigated-cell" excluded-from-navigation>
+        <div id="navigated"></div>
+    </ui5-table-cell>
 {{/if}}
 
 {{#if _popinCells.length}}

diff --git a/packages/main/src/themes/Table.css b/packages/main/src/themes/Table.css
@@ -39,4 +39,8 @@
     inset: 0;
     height: 100%;
     z-index: 2;
+}
+
+#loading[_is-busy] {
+	background-color: var(--_ui5_busy_indicator_block_layer);
 }
diff --git a/packages/main/src/themes/TableHeaderRow.css b/packages/main/src/themes/TableHeaderRow.css
@@ -1,6 +1,5 @@
 :host {
     background: var(--sapList_HeaderBackground);
-    grid-template-rows: var(--_ui5_list_item_base_height);
     border-bottom: var(--sapList_BorderWidth) solid var(--sapList_HeaderBorderColor);
 }
 

diff --git a/packages/main/src/themes/TableRow.css b/packages/main/src/themes/TableRow.css
@@ -34,15 +34,29 @@
 }
 
 #navigated-cell {
+	position: relative;
+	overflow: visible;
 	grid-row: span 2;
 	min-width: 0;
 	padding: 0;
 }
 
-:host([navigated]) #navigated-cell {
+:host([navigated]) #navigated {
+	position: absolute;
+	inset: 0;
     background-color: var(--sapList_SelectionBorderColor);
 }
 
+:host([tabindex]:focus) #navigated {
+	transform: translateX(calc(var(--_ui5_table_navigated_cell_width) * -1));
+	bottom: 2px;
+	top: 3px;
+}
+
+:host([tabindex]:focus) #navigated:dir(rtl) {
+	transform: translateX(var(--_ui5_table_navigated_cell_width));
+}
+
 :host([navigated]) #popin-cell {
 	grid-column: 1 / -2;
 }
diff --git a/packages/main/src/themes/base/Table-parameters.css b/packages/main/src/themes/base/Table-parameters.css
@@ -1,5 +1,5 @@
 :root {
 	--_ui5_table_cell_valign: center;
 	--_ui5_table_cell_min_width: 2.75rem;
-	--_ui5_table_navigated_cell_width: 0.25rem;
+	--_ui5_table_navigated_cell_width: 0.1875rem;
 }
diff --git a/packages/main/test/specs/Table.spec.js b/packages/main/test/specs/Table.spec.js
@@ -220,13 +220,13 @@ describe("Table - Navigated Rows", async () => {
 		assert.strictEqual(await navigatedCell1.getAttribute("excluded-from-navigation"), "", "The navigated cell is excluded from item navigation");
 		assert.strictEqual(await navigatedCell2.getAttribute("excluded-from-navigation"), "", "The navigated cell is excluded from item navigation");
 
-		const navigatedCell1BG = await browser.executeAsync(done => {
-			done(getComputedStyle(document.getElementById("row1").shadowRoot.querySelector("#navigated-cell")).backgroundColor);
+		const navigated1BG = await browser.executeAsync(done => {
+			done(getComputedStyle(document.getElementById("row1").shadowRoot.querySelector("#navigated")).backgroundColor);
 		});
-		const navigatedCell2BG = await browser.executeAsync(done => {
-			done(getComputedStyle(document.getElementById("row2").shadowRoot.querySelector("#navigated-cell")).backgroundColor);
+		const navigated2BG = await browser.executeAsync(done => {
+			done(getComputedStyle(document.getElementById("row2").shadowRoot.querySelector("#navigated")).backgroundColor);
 		});
-		assert.notEqual(navigatedCell1BG, navigatedCell2BG, "Background color of navigated cell is different from the one of non-navigated cell");
+		assert.notEqual(navigated1BG, navigated2BG, "Background color of navigated cell is different from the one of non-navigated cell");
 
 		const gridTemplateColumns = await browser.executeAsync(done => {
 			done(document.getElementById("table1").shadowRoot.querySelector("#table").style.gridTemplateColumns);

diff --git a/packages/website/docs/_samples/main/Table/Selection/main.js b/packages/website/docs/_samples/main/Table/Selection/main.js
@@ -1,6 +1,7 @@
 import "@ui5/webcomponents/dist/Table.js";
 import "@ui5/webcomponents/dist/TableHeaderRow.js";
 import "@ui5/webcomponents/dist/TableHeaderCell.js";
+import "@ui5/webcomponents/dist/TableSelection.js";
 import "@ui5/webcomponents/dist/Label.js";
 import "@ui5/webcomponents/dist/Input.js";
 import "@ui5/webcomponents/dist/ComboBox.js";

diff --git a/packages/website/docs/_samples/main/Table/Selection/sample.html b/packages/website/docs/_samples/main/Table/Selection/sample.html
@@ -12,7 +12,7 @@
     <div class="section">
 <!-- playground-fold-end -->
 		<div id="selectionGroup" role="radiogroup">
-			<ui5-radio-button name="selection" text="Multi" checked></ui5-radio-button>
+			<ui5-radio-button name="selection" text="Multiple" checked></ui5-radio-button>
 			<ui5-radio-button name="selection" text="Single"></ui5-radio-button>
 			<ui5-radio-button name="selection" text="None"></ui5-radio-button>
 		</div>