feat(ui5-table): popin-text property added (#10514)

SAP · Jan 10, 2025 · a01a303 · a01a303
1 parent dfe09ae
commit a01a303
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 10 deletions.
diff --git a/packages/main/cypress/specs/Table.cy.ts b/packages/main/cypress/specs/Table.cy.ts
@@ -5,6 +5,7 @@ import "../../src/TableHeaderRow.js";
 import "../../src/TableCell.js";
 import "../../src/TableRow.js";
 import "../../src/TableSelection.js";
+import type Table from "../../src/Table.js";
 
 // Porting Table.spec.js (wdio tests) to cypress tests
 const ROLE_COLUMN_HEADER = "columnheader";
@@ -60,7 +61,7 @@ describe("Table - Popin Mode", () => {
 					<ui5-table-header-cell id="colA" min-width="300px"><span>ColumnA</span></ui5-table-header-cell>
 					<ui5-table-header-cell id="colB" min-width="200px">Column B</ui5-table-header-cell>
 					<ui5-table-header-cell id="colC" min-width="200px">Column C</ui5-table-header-cell>
-					<ui5-table-header-cell id="colD" min-width="150px">Column D</ui5-table-header-cell>
+					<ui5-table-header-cell id="colD" min-width="150px" popin-text="Column ?">Column D</ui5-table-header-cell>
 				</ui5-table-header-row>
 				<ui5-table-row>
 					<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
@@ -194,6 +195,35 @@ describe("Table - Popin Mode", () => {
 			});
 		}
 	});
+
+	it("should show the popin-text in the popin area", () => {
+		cy.get("ui5-table").then($table => {
+			$table.css("width", "150px");
+		});
+
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(50);
+
+		cy.get("ui5-table").then($table => {
+			let popinCellCount = 0;
+			let validPopinTextCount = 0;
+			const table = $table[0] as Table;
+			// eslint-disable-next-line no-restricted-syntax
+			for (const row of table.rows) {
+				// eslint-disable-next-line no-restricted-syntax
+				for (const cell of row.cells) {
+					if (cell._popin) {
+						popinCellCount++;
+						const popinText = cell._headerCell.popinText || cell._headerCell.textContent;
+						if (cell.shadowRoot!.textContent === `${popinText}:`) {
+							validPopinTextCount++;
+						}
+					}
+				}
+			}
+			return popinCellCount && popinCellCount === validPopinTextCount;
+		}).should("be.true");
+	});
 });
 
 describe("Table - Horizontal alignment of cells", () => {

diff --git a/packages/main/src/TableCell.hbs b/packages/main/src/TableCell.hbs
@@ -1,9 +1,10 @@
 {{#if _popin}}
-	{{#if _popinHeader}}
-		<div class="popin-header-colon">
-			{{_popinHeader}}
-			<span class="popin-colon">{{_i18nPopinColon}}</span>
-		</div>
+	{{#if _popinText}}
+		{{_popinText}}
+		<span class="popin-colon">{{_i18nPopinColon}}</span>
+	{{else if _popinHeader}}
+		{{_popinHeader}}
+		<span class="popin-colon">{{_i18nPopinColon}}</span>
 	{{/if}}
 	<slot></slot>
 {{else}}

diff --git a/packages/main/src/TableCell.ts b/packages/main/src/TableCell.ts
@@ -39,12 +39,19 @@ class TableCell extends TableCellBase {
 		}
 	}
 
-	get _popinHeader() {
+	get _headerCell() {
 		const row = this.parentElement as TableRow;
 		const table = row.parentElement as Table;
 		const index = row.cells.indexOf(this);
-		const headerCell = table.headerRow[0].cells[index];
-		return headerCell.content[0]?.cloneNode(true);
+		return table.headerRow[0].cells[index];
+	}
+
+	get _popinText() {
+		return this._headerCell?.popinText;
+	}
+
+	get _popinHeader() {
+		return this._headerCell?.content[0]?.cloneNode(true);
 	}
 
 	get _i18nPopinColon() {

diff --git a/packages/main/src/TableHeaderCell.ts b/packages/main/src/TableHeaderCell.ts
@@ -75,6 +75,16 @@ class TableHeaderCell extends TableCellBase {
 	@property({ type: Number })
 	importance = 0;
 
+	/**
+	 * The text for the column when it pops in.
+	 *
+	 * @default undefined
+	 * @since 2.7.0
+	 * @public
+	 */
+	@property()
+	popinText?: string;
+
 	@property({ type: Boolean, noAttribute: true })
 	_popin = false;
 

diff --git a/packages/main/test/pages/TablePopin.html b/packages/main/test/pages/TablePopin.html
@@ -18,7 +18,7 @@
 				<ui5-table-header-cell id="colA" min-width="300px"><span>ColumnA</span></ui5-table-header-cell>
 				<ui5-table-header-cell id="colB" min-width="200px">Column B</ui5-table-header-cell>
 				<ui5-table-header-cell id="colC" min-width="200px">Column C</ui5-table-header-cell>
-				<ui5-table-header-cell id="colD" min-width="150px">Column D</ui5-table-header-cell>
+				<ui5-table-header-cell id="colD" min-width="150px" popin-text="Column ?">Column D</ui5-table-header-cell>
 			</ui5-table-header-row>
 			<ui5-table-row>
 				<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>