From f3da99295b4255e8f22b58f4ed72561fa0bbe215 Mon Sep 17 00:00:00 2001
From: Daniel Nowak <122458698+nowakdaniel@users.noreply.github.com>
Date: Fri, 18 Oct 2024 10:41:36 +0200
Subject: [PATCH] fix(ui5-table): wrong horiz. alignm. behavior and wrong texts
(#10040)
Fixed a problem where the horizontalAlign property would be applied to cells inside the popin area.
In addition I've changed some of the texts reviewed in the last PR (#9639).
fixes: #10017
---
packages/main/src/Table.ts | 2 +-
packages/main/src/TableCellBase.ts | 2 +-
packages/main/test/pages/HAlignTable.html | 2 +-
packages/main/test/specs/Table.spec.js | 66 +++++++++++++++++++
.../main/Table/TableCell.mdx | 14 ++--
.../main/Table/TableHeaderCell.mdx | 14 ++--
6 files changed, 83 insertions(+), 17 deletions(-)
diff --git a/packages/main/src/Table.ts b/packages/main/src/Table.ts
index c379aaed1d0f..cb75c5c1f126 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 3f3cc1c06b0d..22232d40c53d 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 1a64c4933b0e..206d8bd4f5e8 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 69325edaf986..6469745f29c7 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 0db76d953d13..b1399636d1c3 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 b8306ab9f36e..defc3b8e2481 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