diff --git a/packages/main/src/Table.ts b/packages/main/src/Table.ts index c379aaed1d0..cb75c5c1f12 100644 --- a/packages/main/src/Table.ts +++ b/packages/main/src/Table.ts @@ -465,7 +465,7 @@ class Table extends UI5Element { get styles() { const headerStyleMap = this.headerRow?.[0]?.cells?.reduce((headerStyles, headerCell) => { - if (headerCell.horizontalAlign !== undefined) { + if (headerCell.horizontalAlign !== undefined && !headerCell._popin) { headerStyles[`--horizontal-align-${headerCell._individualSlot}`] = headerCell.horizontalAlign; } return headerStyles; diff --git a/packages/main/src/TableCellBase.ts b/packages/main/src/TableCellBase.ts index 3f3cc1c06b0..22232d40c53 100644 --- a/packages/main/src/TableCellBase.ts +++ b/packages/main/src/TableCellBase.ts @@ -34,7 +34,7 @@ abstract class TableCellBase extends UI5Element { /** * Determines the horizontal alignment of table cells. - * Note: All values valid for justify-content can be used not just the ones inside the enum. + * **Note:** All values valid for justify-content can be used, not just the ones inside the enumeration. * @default undefined * @public */ diff --git a/packages/main/test/pages/HAlignTable.html b/packages/main/test/pages/HAlignTable.html index 1a64c4933b0..206d8bd4f5e 100644 --- a/packages/main/test/pages/HAlignTable.html +++ b/packages/main/test/pages/HAlignTable.html @@ -10,7 +10,7 @@
- + Product Supplier diff --git a/packages/main/test/specs/Table.spec.js b/packages/main/test/specs/Table.spec.js index 69325edaf98..6469745f29c 100644 --- a/packages/main/test/specs/Table.spec.js +++ b/packages/main/test/specs/Table.spec.js @@ -396,6 +396,72 @@ describe("Table - Horizontal alignment of cells", async () => { assert.equal(justifyContent.value, index === rowWithChangedCell ? customAlignmentCell : alignment, "justify-content correctly set."); } }); + + it("test horizontalAlign behavior with one by one popping in", async() => { + let table = await browser.$("#table"); + assert.ok(table.isExisting(), "Table exists"); + + const headerRow = await table.$("ui5-table-header-row"); + const headerCells = await headerRow.$$("ui5-table-header-cell"); + + 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"]} + ]; + + for (const testWidth of testWidths) { + await table.setProperty("style", `width: ${testWidth.width}px`); + assert.strictEqual(await table.getSize("width"), testWidth.width, `Table is ${testWidth.width} wide`); + + for (const [index, headerCell] of headerCells.entries()) { + const headerRole = await headerCell.getAttribute("role"); + const headerId = await headerCell.getAttribute("id"); + const slotName = await headerCell.getAttribute("slot"); + + let expectRole = true; + if (testWidth.poppedIn.includes(headerId)) { + expectRole = false; + } + + assert.strictEqual(headerRole === ROLE_COLUMN_HEADER, expectRole, `Cell has role (width: ${testWidth.width}): (${expectRole})`) + assert.strictEqual(await headerRow.shadow$(`slot[name=${slotName}]`).isExisting(), expectRole, `Header cell ${slotName} has been rendered (width: ${testWidth.width}): ${expectRole}`); + + const style = await headerCell.getAttribute("style"); + const justifyContentHeaderCellUncomputed = style.match(/justify-content: ([^;]+)/)[1]; + const cssVariable = `var(--horizontal-align-default-${index+1})`; + assert.equal(justifyContentHeaderCellUncomputed, cssVariable); + + // justify-content should be the default value in case the cell is inside the popin area + if (!expectRole) { + const tableRows = await table.$$("ui5-table-row"); + for (const row of tableRows) { + const rowCells = await row.$$("ui5-table-cell"); + const justifyContent = await rowCells[index].getCSSProperty("justify-content"); + + assert.equal(justifyContent.value, "normal", "justify-content correctly set."); + } + } + } + } + + /* const justifyContentHeaderCell = await headerCell.getCSSProperty("justify-content"); + const style = await headerCell.getAttribute("style"); + const justifyContentHeaderCellUncomputed = style.match(/justify-content: ([^;]+)/)[1]; + const cssVariable = "var(--horizontal-align-default-1)"; + assert.equal(justifyContentHeaderCell.value, alignment, "justify-content correctly set."); + assert.equal(justifyContentHeaderCellUncomputed, cssVariable, "horizontalAlign not set"); + + const tableRows = await table.$$("ui5-table-row"); + for (const row of tableRows) { + const rowCells = await row.$$("ui5-table-cell"); + const justifyContent = await rowCells[3].getCSSProperty("justify-content"); + + assert.equal(justifyContent.value, alignment, "justify-content correctly set."); + } */ + }); }); // Tests for the fixed header, whether it is shown correctly and behaves as expected diff --git a/packages/website/docs/_components_pages/main/Table/TableCell.mdx b/packages/website/docs/_components_pages/main/Table/TableCell.mdx index 0db76d953d1..b1399636d1c 100644 --- a/packages/website/docs/_components_pages/main/Table/TableCell.mdx +++ b/packages/website/docs/_components_pages/main/Table/TableCell.mdx @@ -11,14 +11,14 @@ import HAlign from "../../../_samples/main/Table/HAlign/HAlign.md"; ## Horizontal cell alignment -Control the horizontal alignment of cells by utilizing the `horizontalAlign` property. +Controls the horizontal alignment of cells by using the `horizontalAlign` property. -Please note that the behaviour of `horizontalAlign` depends on where you set it: -1. `horizontalAlign` is set on `TableHeaderCell` level
-Changes the horizontal alignment of the `TableHeaderCell` and their corresponding `TableCells`. -2. `horizontalAlign` is set on `TableCell` level only
+Please note that the behavior of `horizontalAlign` depends on where you set it: +- `horizontalAlign` is set on `TableHeaderCell` level
+Changes the horizontal alignment of the `TableHeaderCell` and its corresponding `TableCell`. +- `horizontalAlign` is set on `TableCell` level only
The horizontal alignment is only changed for this one `TableCell` -3. `horizontalAlign` is set on `TableHeaderCell` and `TableCell` level
-Changing the `horizontalAlign` property on `TableHeaderCell` level changes only the `TableHeaderCell` itself and those `TableCells` without a `horizontalAlign` property. +- `horizontalAlign` is set on `TableHeaderCell` and `TableCell` level
+Changing the `horizontalAlign` property on `TableHeaderCell` level changes only the `TableHeaderCell` itself and those `TableCell` without a `horizontalAlign` property. \ No newline at end of file diff --git a/packages/website/docs/_components_pages/main/Table/TableHeaderCell.mdx b/packages/website/docs/_components_pages/main/Table/TableHeaderCell.mdx index b8306ab9f36..defc3b8e248 100644 --- a/packages/website/docs/_components_pages/main/Table/TableHeaderCell.mdx +++ b/packages/website/docs/_components_pages/main/Table/TableHeaderCell.mdx @@ -21,14 +21,14 @@ import HAlign from "../../../_samples/main/Table/HAlign/HAlign.md"; ## Horizontal cell alignment -Control the horizontal alignment of cells by utilizing the `horizontalAlign` property. +Controls the horizontal alignment of cells by using the `horizontalAlign` property. -Please note that the behaviour of `horizontalAlign` depends on where you set it: -1. `horizontalAlign` is set on `TableHeaderCell` level
-Changes the horizontal alignment of the `TableHeaderCell` and their corresponding `TableCells`. -2. `horizontalAlign` is set on `TableCell` level only
+Please note that the behavior of `horizontalAlign` depends on where you set it: +- `horizontalAlign` is set on `TableHeaderCell` level
+Changes the horizontal alignment of the `TableHeaderCell` and its corresponding `TableCell`. +- `horizontalAlign` is set on `TableCell` level only
The horizontal alignment is only changed for this one `TableCell` -3. `horizontalAlign` is set on `TableHeaderCell` and `TableCell` level
-Changing the `horizontalAlign` property on `TableHeaderCell` level changes only the `TableHeaderCell` itself and those `TableCells` without a `horizontalAlign` property. +- `horizontalAlign` is set on `TableHeaderCell` and `TableCell` level
+Changing the `horizontalAlign` property on `TableHeaderCell` level changes only the `TableHeaderCell` itself and those `TableCell` without a `horizontalAlign` property. \ No newline at end of file