Skip to content

Commit 1ec0be6

Browse files
DonkeyCoDonkeyCo
authored
feat(ui5-table): improve default column widths (#11078)
1 parent 637cdd0 commit 1ec0be6

File tree

17 files changed

+597
-58
lines changed

17 files changed

+597
-58
lines changed

‎packages/main/cypress/specs/Table.cy.tsx‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,12 @@ import Button from "../../src/Button.js";
1616
const ROLE_COLUMN_HEADER = "columnheader";
1717

1818
describe("Table - Rendering", () => {
19+
function checkWidth(id: string, expectedWidth: number) {
20+
cy.get(id).then($cell => {
21+
expect($cell.outerWidth()).to.be.equal(expectedWidth);
22+
});
23+
};
24+
1925
it("tests if table is rendered", () => {
2026
cy.mount(
2127
<Table id="table">
@@ -57,6 +63,163 @@ describe("Table - Rendering", () => {
5763
// eslint-disable-next-line cypress/no-unnecessary-waiting
5864
cy.wait(500);
5965
});
66+
67+
it("columns have equal widths width default width", () => {
68+
cy.mount(
69+
<Table style="width: 400px;" id="table">
70+
<TableHeaderRow slot="headerRow">
71+
<TableHeaderCell><span>ColumnA</span></TableHeaderCell>
72+
<TableHeaderCell><span>ColumnB</span></TableHeaderCell>
73+
<TableHeaderCell><span>ColumnC</span></TableHeaderCell>
74+
<TableHeaderCell><span>ColumnD</span></TableHeaderCell>
75+
</TableHeaderRow>
76+
<TableRow>
77+
<TableCell><Label>Cell A</Label></TableCell>
78+
<TableCell><Label>Cell B</Label></TableCell>
79+
<TableCell><Label>Cell C</Label></TableCell>
80+
<TableCell><Label>Cell D</Label></TableCell>
81+
</TableRow>
82+
</Table>
83+
);
84+
85+
const expectedWidth = 100;
86+
cy.get("ui5-table-header-cell").each(($cell) => {
87+
expect($cell.outerWidth()).to.be.equal(expectedWidth);
88+
});
89+
});
90+
91+
it("columns have width set", () => {
92+
cy.mount(
93+
<Table style="width: 200px;" id="table">
94+
<TableHeaderRow slot="headerRow">
95+
<TableHeaderCell width="100px"><span>ColumnA</span></TableHeaderCell>
96+
<TableHeaderCell width="100px"><span>ColumnB</span></TableHeaderCell>
97+
<TableHeaderCell width="100px"><span>ColumnC</span></TableHeaderCell>
98+
<TableHeaderCell width="100px"><span>ColumnD</span></TableHeaderCell>
99+
</TableHeaderRow>
100+
<TableRow>
101+
<TableCell><Label>Cell A</Label></TableCell>
102+
<TableCell><Label>Cell B</Label></TableCell>
103+
<TableCell><Label>Cell C</Label></TableCell>
104+
<TableCell><Label>Cell D</Label></TableCell>
105+
</TableRow>
106+
</Table>
107+
);
108+
109+
const expectedWidth = 100;
110+
cy.get("ui5-table-header-cell").each(($cell) => {
111+
expect($cell.outerWidth()).to.be.equal(expectedWidth);
112+
});
113+
});
114+
115+
it("columns have relative width set", () => {
116+
cy.mount(
117+
<Table style="width: 200px;" id="table">
118+
<TableHeaderRow slot="headerRow">
119+
<TableHeaderCell id="colA" width="10%"><span>ColumnA</span></TableHeaderCell>
120+
<TableHeaderCell id="colB" width="25%"><span>ColumnB</span></TableHeaderCell>
121+
<TableHeaderCell id="colC" width="25%"><span>ColumnC</span></TableHeaderCell>
122+
<TableHeaderCell id="colD" width="40%"><span>ColumnD</span></TableHeaderCell>
123+
</TableHeaderRow>
124+
<TableRow>
125+
<TableCell><Label>Cell A</Label></TableCell>
126+
<TableCell><Label>Cell B</Label></TableCell>
127+
<TableCell><Label>Cell C</Label></TableCell>
128+
<TableCell><Label>Cell D</Label></TableCell>
129+
</TableRow>
130+
</Table>
131+
);
132+
133+
checkWidth("#colA", 48);
134+
checkWidth("#colB", 50);
135+
checkWidth("#colC", 50);
136+
checkWidth("#colD", 80);
137+
138+
cy.get("ui5-table").then($table => {
139+
$table.css("width", "800px");
140+
});
141+
142+
checkWidth("#colA", 80);
143+
checkWidth("#colB", 200);
144+
checkWidth("#colC", 200);
145+
checkWidth("#colD", 320);
146+
});
147+
148+
it("columns have min-width set", () => {
149+
cy.mount(
150+
<Table style="width: 800px;" id="table">
151+
<TableHeaderRow slot="headerRow">
152+
<TableHeaderCell minWidth="100px"><span>ColumnA</span></TableHeaderCell>
153+
<TableHeaderCell minWidth="100px"><span>ColumnB</span></TableHeaderCell>
154+
<TableHeaderCell minWidth="100px"><span>ColumnC</span></TableHeaderCell>
155+
<TableHeaderCell minWidth="100px"><span>ColumnD</span></TableHeaderCell>
156+
</TableHeaderRow>
157+
<TableRow>
158+
<TableCell><Label>Cell A</Label></TableCell>
159+
<TableCell><Label>Cell B</Label></TableCell>
160+
<TableCell><Label>Cell C</Label></TableCell>
161+
<TableCell><Label>Cell D</Label></TableCell>
162+
</TableRow>
163+
</Table>
164+
);
165+
166+
cy.get("ui5-table-header-cell").each(($cell) => {
167+
const expectedWidth = 200;
168+
expect($cell.outerWidth()).to.be.equal(expectedWidth);
169+
});
170+
171+
cy.get("ui5-table").then($table => {
172+
$table.css("width", "400px");
173+
});
174+
175+
cy.get("ui5-table-header-cell").each(($cell) => {
176+
const expectedWidth = 100;
177+
expect($cell.outerWidth()).to.be.equal(expectedWidth);
178+
});
179+
180+
cy.get("ui5-table").then($table => {
181+
$table.css("width", "100px");
182+
});
183+
184+
cy.get("ui5-table-header-cell").each(($cell) => {
185+
const expectedWidth = 100;
186+
expect($cell.outerWidth()).to.be.equal(expectedWidth);
187+
});
188+
});
189+
190+
it("column width settings combined", () => {
191+
cy.mount(
192+
<Table style="width: 800px;" id="table">
193+
<TableHeaderRow slot="headerRow">
194+
<TableHeaderCell id="colA" minWidth="50px"><span>ColumnA</span></TableHeaderCell>
195+
<TableHeaderCell id="colB" width="300px"><span>ColumnB</span></TableHeaderCell>
196+
<TableHeaderCell id="colC" minWidth="200px" width="50%"><span>ColumnC</span></TableHeaderCell>
197+
<TableHeaderCell id="colD" width="2fr"><span>ColumnD</span></TableHeaderCell>
198+
</TableHeaderRow>
199+
<TableRow>
200+
<TableCell><Label>Cell A</Label></TableCell>
201+
<TableCell><Label>Cell B</Label></TableCell>
202+
<TableCell><Label>Cell C</Label></TableCell>
203+
<TableCell><Label>Cell D</Label></TableCell>
204+
</TableRow>
205+
</Table>
206+
);
207+
208+
checkWidth("#colA", 50);
209+
checkWidth("#colB", 300);
210+
checkWidth("#colC", 400);
211+
checkWidth("#colD", 50);
212+
213+
cy.get("ui5-table").then($table => {
214+
$table.css("width", "200px");
215+
});
216+
217+
checkWidth("#colA", 50);
218+
checkWidth("#colB", 300);
219+
checkWidth("#colC", 200);
220+
// 2fr is being ignored
221+
checkWidth("#colD", 48);
222+
});
60223
});
61224

62225
describe("Table - Popin Mode", () => {

‎packages/main/cypress/specs/TableRowActions.cy.tsx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,15 @@ describe("TableRowActions", () => {
3939
});
4040
}
4141

42+
function checkTemplateColumn(expectedWidth: string) {
43+
cy.get("@innerTable").should($table => {
44+
const gridTemplateColumns = getComputedStyle($table[0]).gridTemplateColumns;
45+
console.log(gridTemplateColumns, expectedWidth, gridTemplateColumns.startsWith(expectedWidth));
46+
// eslint-disable-next-line no-unused-expressions
47+
expect(gridTemplateColumns.startsWith(expectedWidth)).to.be.true;
48+
});
49+
}
50+
4251
describe("Rendering", () => {
4352
it("tests single row action", () => {
4453
mountTable(1, () => <>
@@ -58,7 +67,7 @@ describe("TableRowActions", () => {
5867
);
5968

6069
cy.get("@headerRow").shadow().find("#actions-cell").should("exist");
61-
cy.get("@innerTable").should("have.css", "gridTemplateColumns", `${8 + 36 + 8}px`);
70+
checkTemplateColumn(`${8 + 36 + 8}px`);
6271
cy.get("@row1").find("[icon=add]").shadow().find("ui5-button").should("exist");
6372
cy.get("@row2").find("[icon=add]").should("have.css", "display", "block");
6473
cy.get("@row3").find("ui5-table-row-action-navigation").shadow().find("ui5-icon").should("have.attr", "name", "navigation-right-arrow");
@@ -92,7 +101,7 @@ describe("TableRowActions", () => {
92101
);
93102

94103
cy.get("@headerRow").shadow().find("#actions-cell").should("exist");
95-
cy.get("@innerTable").should("have.css", "gridTemplateColumns", `${8 + 36 + 4 + 36 + 8}px`);
104+
checkTemplateColumn(`${8 + 36 + 4 + 36 + 8}px`);
96105
cy.get("@row1").shadow().find("#actions-cell").children().as("actions");
97106
cy.get("@actions").should("have.length", 2);
98107
cy.get("@actions").eq(0).as("overflowButton");
@@ -122,7 +131,7 @@ describe("TableRowActions", () => {
122131
cy.get("@rowActionClick").invoke("getCall", 1).its("args.0.detail.action.id").should("equal", "editAction");
123132

124133
cy.get("@table").invoke("attr", "row-action-count", "3");
125-
cy.get("@innerTable").should("have.css", "gridTemplateColumns", `${8 + 36 + 4 + 36 + 4 + 36 + 8}px`);
134+
checkTemplateColumn(`${8 + 36 + 4 + 36 + 4 + 36 + 8}px`);
126135
cy.get("@actions").should("have.length", 3);
127136
cy.get("@actions").eq(0).should("have.attr", "name", "actions-2");
128137
cy.get("@actions").eq(1).as("overflowButton").should("have.attr", "icon", "overflow");
@@ -136,15 +145,15 @@ describe("TableRowActions", () => {
136145
cy.get("@rowActionClick").invoke("getCall", 2).its("args.0.detail.action.id").should("equal", "editAction");
137146

138147
cy.get("@table").invoke("attr", "row-action-count", "4");
139-
cy.get("@innerTable").should("have.css", "gridTemplateColumns", `${8 + 36 + 4 + 36 + 4 + 36 + 4 + 36 + 8}px`);
148+
checkTemplateColumn(`${8 + 36 + 4 + 36 + 4 + 36 + 4 + 36 + 8}px`);
140149
cy.get("@actions").should("have.length", 4);
141150
cy.get("@actions").eq(0).should("have.attr", "name", "actions-2");
142151
cy.get("@actions").eq(1).should("have.attr", "name", "actions-3");
143152
cy.get("@actions").eq(2).should("have.attr", "name", "actions-4");
144153
cy.get("@actions").eq(3).should("have.attr", "name", "actions-1");
145154

146155
cy.get("@table").invoke("attr", "row-action-count", "5");
147-
cy.get("@innerTable").should("have.css", "gridTemplateColumns", `${8 + 36 + 4 + 36 + 4 + 36 + 4 + 36 + 4 + 36 + 8}px`);
156+
checkTemplateColumn(`${8 + 36 + 4 + 36 + 4 + 36 + 4 + 36 + 4 + 36 + 8}px`);
148157
cy.get("@actions").should("have.length", 4);
149158
cy.get("@row1").find("[slot=actions-4],[slot=actions-1]").then($lastActions => {
150159
const lastAction = $lastActions[0];
@@ -154,7 +163,7 @@ describe("TableRowActions", () => {
154163
}).should("be.true");
155164

156165
cy.get("@table").invoke("attr", "row-action-count", "1");
157-
cy.get("@innerTable").should("have.css", "gridTemplateColumns", `${8 + 36 + 8}px`);
166+
checkTemplateColumn(`${8 + 36 + 8}px`);
158167
cy.get("@actions").should("have.length", 1);
159168
cy.get("@actions").eq(0).should("have.attr", "icon", "overflow");
160169
});

‎packages/main/cypress/specs/TableSelection.cy.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ Object.entries(testConfig).forEach(([mode, testConfigEntry]) => {
182182
});
183183

184184
it("select row via SPACE", () => {
185-
cy.get("@row0").realClick({ position: "left" });
185+
cy.get("@row0").realClick();
186186
cy.get("@row0").realPress("Space");
187187
checkSelection(testConfigEntry.cases.SPACE.space_0);
188188

‎packages/main/cypress/specs/TableSelections.cy.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,7 @@ Object.entries(testConfig).forEach(([mode, testConfigEntry]) => {
207207
});
208208

209209
it("select row via SPACE", () => {
210-
cy.get("@row0").realClick({ position: "left" });
210+
cy.get("@row0").realClick();
211211
cy.get("@row0").realPress("Space");
212212
checkSelection(testConfigEntry.cases.SPACE.space_0);
213213
checkSelectionChangeSpy(1);

‎packages/main/cypress/specs/TableUtils.cy.tsx‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { isInstanceOfTable } from "../../src/TableUtils.js";
1+
import { isInstanceOfTable, isValidColumnWidth } from "../../src/TableUtils.js";
22
import Table from "../../src/Table.js";
33
import TableRow from "../../src/TableRow.js";
44

@@ -24,3 +24,40 @@ describe("#isInstanceOfTable", () => {
2424
.should("be.false");
2525
});
2626
});
27+
28+
describe("#isValidColumnWidth", () => {
29+
it("px", () => {
30+
const width = "100px";
31+
cy.wrap({ isValidColumnWidth })
32+
.invoke("isValidColumnWidth", width)
33+
.should("be.true");
34+
});
35+
36+
it("rem", () => {
37+
const width = "10rem";
38+
cy.wrap({ isValidColumnWidth })
39+
.invoke("isValidColumnWidth", width)
40+
.should("be.true");
41+
});
42+
43+
it("%", () => {
44+
const width = "100%";
45+
cy.wrap({ isValidColumnWidth })
46+
.invoke("isValidColumnWidth", width)
47+
.should("be.true");
48+
});
49+
50+
it("auto", () => {
51+
const width = "auto";
52+
cy.wrap({ isValidColumnWidth })
53+
.invoke("isValidColumnWidth", width)
54+
.should("be.false");
55+
});
56+
57+
it("empty", () => {
58+
const width = "";
59+
cy.wrap({ isValidColumnWidth })
60+
.invoke("isValidColumnWidth", width)
61+
.should("be.false");
62+
});
63+
});

0 commit comments

Comments
 (0)