feat(ui5-table): navigated property for rows (#9292)

feat(ui5-table) navigated property for rows

packages/main/src/Table.ts

@@ -178,7 +178,14 @@ class Table extends UI5Element {
 	 *
 	 * @public
 	 */
-	@slot({ type: HTMLElement, "default": true })
+	@slot({
+		type: HTMLElement,
+		"default": true,
+		invalidateOnChildChange: {
+			properties: ["navigated"],
+			slots: false,
+		},
+	})
 	rows!: Array<TableRow>;
 
 	/**
@@ -275,6 +282,9 @@ class Table extends UI5Element {
 	@property({ type: Number, noAttribute: true })
 	_invalidate = 0;
 
+	@property({ type: Boolean, noAttribute: true })
+	_renderNavigated = false;
+
 	static i18nBundle: I18nBundle;
 	static async onDefine() {
 		Table.i18nBundle = await getI18nBundle("@ui5/webcomponents");
@@ -313,6 +323,12 @@ class Table extends UI5Element {
 	}
 
 	onBeforeRendering(): void {
+		const renderNavigated = this._renderNavigated;
+		this._renderNavigated = this.rows.some(row => row.navigated);
+		if (renderNavigated !== this._renderNavigated) {
+			this.rows.forEach(row => row._renderNavigated = this._renderNavigated);
+		}
+
 		this.style.setProperty(getScopedVarName("--ui5_grid_sticky_top"), this.stickyTop);
 		this._refreshPopinState();
 	}
@@ -487,6 +503,9 @@ class Table extends UI5Element {
 			}
 			return `minmax(${cell.width}, ${cell.width})`;
 		}));
+		if (this._renderNavigated) {
+			widths.push(`var(${getScopedVarName("--_ui5_table_navigated_cell_width")})`);
+		}
 		return widths.join(" ");
 	}
 

packages/main/src/TableRow.hbs

@@ -21,6 +21,10 @@
     <slot name="{{_individualSlot}}"></slot>
 {{/each}}
 
+{{#if _renderNavigated}}
+    <ui5-table-cell id="navigated-cell" excluded-from-navigation></ui5-table-cell>
+{{/if}}
+
 {{#if _popinCells.length}}
     <ui5-table-cell id="popin-cell">
         {{#each _popinCells}}

packages/main/src/TableRow.ts

@@ -69,6 +69,18 @@ class TableRow extends TableRowBase {
 	@property({ type: Boolean })
 	interactive = false;
 
+	/**
+	 * Defines the navigated state of the row.
+	 *
+	 * @default false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	navigated = false;
+
+	@property({ type: Boolean, noAttribute: true })
+	_renderNavigated = false;
+
 	static async onDefine() {
 		await super.onDefine();
 		if (isSafari() && isIOS()) {
@@ -80,6 +92,11 @@ class TableRow extends TableRowBase {
 	onBeforeRendering() {
 		super.onBeforeRendering();
 		this.toggleAttribute("_interactive", this._isInteractive);
+		if (this._renderNavigated && this.navigated) {
+			this.setAttribute("aria-current", "true");
+		} else {
+			this.removeAttribute("aria-current");
+		}
 	}
 
 	async focus(focusOptions?: FocusOptions | undefined): Promise<void> {

packages/main/src/themes/TableRow.css

@@ -31,4 +31,18 @@
 	align-content: initial;
 	flex-direction: column;
 	grid-column: 1 / -1;
-}
+}
+
+#navigated-cell {
+	grid-row: span 2;
+	min-width: 0;
+	padding: 0;
+}
+
+:host([navigated]) #navigated-cell {
+    background-color: var(--sapList_SelectionBorderColor);
+}
+
+:host([navigated]) #popin-cell {
+	grid-column: 1 / -2;
+}

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

@@ -1,4 +1,5 @@
 :root {
 	--_ui5_table_cell_valign: center;
 	--_ui5_table_cell_min_width: 2.75rem;
+	--_ui5_table_navigated_cell_width: 0.25rem;
 }

packages/main/test/pages/Table.html

@@ -35,7 +35,7 @@
 			<ui5-table-header-cell id="weightCol" popin-text="Weight">Weight</ui5-table-header-cell>
 			<ui5-table-header-cell id="priceCol" min-width="220px">Price</ui5-table-header-cell>
 		</ui5-table-header-row>
-		<ui5-table-row key="0">
+		<ui5-table-row key="0" navigated>
 			<ui5-table-cell><ui5-label><b>Notebook Basic 15</b><br><a href="#">HT-1000</a></ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>Very Best Screens</ui5-label></ui5-table-cell>
 			<ui5-table-cell><ui5-label>30 x 18 x 3 cm</ui5-label></ui5-table-cell>

packages/main/test/pages/TableLoading.html

@@ -14,7 +14,10 @@
 			<ui5-table-header-row slot="headerRow">
 				<ui5-table-header-cell id="colA"><span>ColumnA</span></ui5-table-header-cell>
 			</ui5-table-header-row>
-			<ui5-table-row>
+			<ui5-table-row id="row1">
+				<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
+			</ui5-table-row>
+			<ui5-table-row id="row2">
 				<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
 			</ui5-table-row>
 		</ui5-table>

packages/main/test/specs/Table.spec.js

@@ -196,4 +196,41 @@ describe("Table - Fixed Header", async () => {
 		assert.isAbove(headerYPosition, 50, "Header is above the viewport and above the toolbar");
 		assert.ok(headerRow.isDisplayedInViewport(), "Header is displayed in the viewport");
 	});
+});
+
+// Tests navigated property of rows
+describe("Table - Navigated Rows", async () => {
+	before(async () => {
+		await browser.url(`test/pages/TableLoading.html`);
+	});
+
+	it("Navigated cell is rendered", async () => {
+		await browser.executeAsync(done => {
+			document.getElementById("row1").navigated = true;
+			done();
+		});
+
+		const row1 = await browser.$("#row1");
+		const row2 = await browser.$("#row1");
+		const navigatedCell1 = await row1.shadow$("#navigated-cell");
+		const navigatedCell2 = await row1.shadow$("#navigated-cell");
+
+		assert.ok(await navigatedCell1.isExisting(), "The navigated cell is rendered for the row with navigated=true");
+		assert.ok(await navigatedCell2.isExisting(), "The navigated cell is also rendered for the row with navigated=false");
+		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 navigatedCell2BG = await browser.executeAsync(done => {
+			done(getComputedStyle(document.getElementById("row2").shadowRoot.querySelector("#navigated-cell")).backgroundColor);
+		});
+		assert.notEqual(navigatedCell1BG, navigatedCell2BG, "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);
+		});
+		assert.ok(gridTemplateColumns.endsWith("table_navigated_cell_width)"), "gridTemplateColumns is correct");
+	});
 });