From af337efd903b393cb71ef5b27fd9ea2854c588cf Mon Sep 17 00:00:00 2001 From: Cahit Guerguec Date: Tue, 16 Jul 2024 05:58:59 +0200 Subject: [PATCH] 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 --- packages/main/src/Table.ts | 3 ++- packages/main/src/TableRow.hbs | 4 +++- packages/main/src/themes/Table.css | 4 ++++ packages/main/src/themes/TableHeaderRow.css | 1 - packages/main/src/themes/TableRow.css | 16 +++++++++++++++- .../main/src/themes/base/Table-parameters.css | 2 +- packages/main/test/specs/Table.spec.js | 10 +++++----- .../docs/_samples/main/Table/Selection/main.js | 1 + .../_samples/main/Table/Selection/sample.html | 2 +- 9 files changed, 32 insertions(+), 11 deletions(-) diff --git a/packages/main/src/Table.ts b/packages/main/src/Table.ts index feea14032107..8ea5bce6b201 100644 --- 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 index 9ce5f7951a41..21d9b81a4f2f 100644 --- a/packages/main/src/TableRow.hbs +++ b/packages/main/src/TableRow.hbs @@ -22,7 +22,9 @@ {{/each}} {{#if _renderNavigated}} - + + + {{/if}} {{#if _popinCells.length}} diff --git a/packages/main/src/themes/Table.css b/packages/main/src/themes/Table.css index c602f2eb3b02..ffab6b155632 100644 --- 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); } \ No newline at end of file diff --git a/packages/main/src/themes/TableHeaderRow.css b/packages/main/src/themes/TableHeaderRow.css index 861ce99a3133..de8760eb9dd7 100644 --- 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 index 27e968660340..6b5ef4b5aae1 100644 --- 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 index 970efb577542..202a244990da 100644 --- 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; } \ No newline at end of file diff --git a/packages/main/test/specs/Table.spec.js b/packages/main/test/specs/Table.spec.js index 632e779b698e..90b3dbafb343 100644 --- 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 index a2ed3ca89189..89d32b1a8118 100644 --- 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 index e3cba7abef26..8a3ab932c9aa 100644 --- a/packages/website/docs/_samples/main/Table/Selection/sample.html +++ b/packages/website/docs/_samples/main/Table/Selection/sample.html @@ -12,7 +12,7 @@
- +