diff --git a/packages/main/src/Table.hbs b/packages/main/src/Table.hbs index e0bca47d9b0a..c375dd082a3f 100644 --- a/packages/main/src/Table.hbs +++ b/packages/main/src/Table.hbs @@ -14,7 +14,7 @@ {{#unless rows.length}} - + {{#if nodata.length}} {{else}} diff --git a/packages/main/src/themes/Table.css b/packages/main/src/themes/Table.css index 2c58f8b6cc5b..b8e947ba856e 100644 --- a/packages/main/src/themes/Table.css +++ b/packages/main/src/themes/Table.css @@ -12,7 +12,6 @@ #table { display: grid; grid-auto-rows: minmax(min-content, max-content); - background: var(--sapList_Background); } :host([overflow-mode="Scroll"]) #table { diff --git a/packages/main/src/themes/TableHeaderRow.css b/packages/main/src/themes/TableHeaderRow.css index 057c81c52c2e..dad6d22066ea 100644 --- a/packages/main/src/themes/TableHeaderRow.css +++ b/packages/main/src/themes/TableHeaderRow.css @@ -1,5 +1,6 @@ :host { background: var(--sapList_HeaderBackground); + border-top: var(--sapList_BorderWidth) solid var(--sapList_BorderColor); border-bottom: var(--sapList_BorderWidth) solid var(--sapList_HeaderBorderColor); } diff --git a/packages/main/src/themes/TableRowBase.css b/packages/main/src/themes/TableRowBase.css index 6af56bc22633..ee566aaaf65d 100644 --- a/packages/main/src/themes/TableRowBase.css +++ b/packages/main/src/themes/TableRowBase.css @@ -5,6 +5,8 @@ min-height: var(--_ui5_list_item_base_height); box-sizing: border-box; border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor); + border-right: var(--sapList_BorderWidth) solid var(--sapList_BorderColor); + border-left: var(--sapList_BorderWidth) solid var(--sapList_BorderColor); } :host([tabindex]:focus) { diff --git a/packages/main/src/themes/base/Table-parameters.css b/packages/main/src/themes/base/Table-parameters.css index 3000b9071ca8..7cf2b221d514 100644 --- a/packages/main/src/themes/base/Table-parameters.css +++ b/packages/main/src/themes/base/Table-parameters.css @@ -1,7 +1,7 @@ :root { --_ui5_table_cell_valign: center; --_ui5_table_cell_min_width: 2.75rem; - --_ui5_table_navigated_cell_width: 0.1875rem; + --_ui5_table_navigated_cell_width: 0.25rem; --_ui5_table_shadow_border_left: inset var(--sapContent_FocusWidth) 0 var(--sapContent_FocusColor); --_ui5_table_shadow_border_right: inset calc(-1 * var(--sapContent_FocusWidth)) 0 var(--sapContent_FocusColor); --_ui5_table_shadow_border_top: inset 0 var(--sapContent_FocusWidth) var(--sapContent_FocusColor); diff --git a/packages/main/test/specs/Table.spec.js b/packages/main/test/specs/Table.spec.js index 9ffe6f8d7418..0b0638c96244 100644 --- a/packages/main/test/specs/Table.spec.js +++ b/packages/main/test/specs/Table.spec.js @@ -54,11 +54,11 @@ describe("Table - Popin Mode", async () => { const headerCells = await headerRow.$$("ui5-table-header-cell"); const testWidths = [ - {width: 850, poppedIn: []}, - {width: 700, poppedIn: ["colD"]}, - {width: 500, poppedIn: ["colD", "colC"]}, - {width: 300, poppedIn: ["colD", "colC", "colB"]}, - {width: 150, poppedIn: ["colD", "colC", "colB"]} + {width: 1000, poppedIn: []}, + {width: 849, poppedIn: ["colD"]}, + {width: 699, poppedIn: ["colD", "colC"]}, + {width: 499, poppedIn: ["colD", "colC", "colB"]}, + {width: 299, poppedIn: ["colD", "colC", "colB"]} ]; for (const testWidth of testWidths) { @@ -87,13 +87,14 @@ describe("Table - Popin Mode", async () => { const headerRow = await table.$("ui5-table-header-row"); const headerCells = await headerRow.$$("ui5-table-header-cell"); + const borderWidth = 1; const testWidths = [ {width: 150, poppedIn: ["colD", "colC", "colB"]}, - {width: 300, poppedIn: ["colD", "colC", "colB"]}, - {width: 500, poppedIn: ["colD", "colC"]}, - {width: 700, poppedIn: ["colD"]}, - {width: 850, poppedIn: []}, + {width: 300 + borderWidth, poppedIn: ["colD", "colC", "colB"]}, + {width: 500 + borderWidth, poppedIn: ["colD", "colC"]}, + {width: 700 + borderWidth, poppedIn: ["colD"]}, + {width: 850 + borderWidth, poppedIn: []}, ]; for (const testWidth of testWidths) { @@ -406,10 +407,10 @@ describe("Table - Horizontal alignment of cells", async () => { const testWidths = [ {width: 1120, poppedIn: []}, - {width: 900, poppedIn: ["priceCol"]}, - {width: 800, poppedIn: ["priceCol", "weightCol"]}, - {width: 500, poppedIn: ["priceCol", "weightCol", "dimensionsCol"]}, - {width: 300, poppedIn: ["priceCol", "weightCol", "dimensionsCol", "supplierCol"]} + {width: 1119, poppedIn: ["priceCol"]}, + {width: 899, poppedIn: ["priceCol", "weightCol"]}, + {width: 799, poppedIn: ["priceCol", "weightCol", "dimensionsCol"]}, + {width: 499, poppedIn: ["priceCol", "weightCol", "dimensionsCol", "supplierCol"]} ]; for (const testWidth of testWidths) { @@ -567,7 +568,7 @@ describe("Table - Horizontal Scrolling", async () => { }); assert.equal(leftOffset, 0, "Table is not scrolled horizontally"); - assert.equal(fixedX, 0, "Selection column is fixed to the left"); + assert.equal(fixedX, 1, "Selection column is fixed to the left"); await lastColumn.scrollIntoView();