@ui5/webcomponents 2.6.2-rc.0 → 2.7.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.7.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.6.2...v2.7.0-rc.0) (2025-01-16)
+
+
+### Bug Fixes
+
+* ai button and color palette bring their own items ([#10517](https://github.com/SAP/ui5-webcomponents/issues/10517)) ([11b9356](https://github.com/SAP/ui5-webcomponents/commit/11b9356a13d01ece1ebcf4185b61259b9ad6d364))
+* **ui5-form:** prevent content overflow ([#10552](https://github.com/SAP/ui5-webcomponents/issues/10552)) ([819a453](https://github.com/SAP/ui5-webcomponents/commit/819a453c1a9dd8c55a89c6c32c34e73f9e127e86))
+* **ui5-label:** adjust asterisk size ([#10533](https://github.com/SAP/ui5-webcomponents/issues/10533)) ([44a245d](https://github.com/SAP/ui5-webcomponents/commit/44a245d685c0ace10f93af21652c6c89eb421498)), closes [#10494](https://github.com/SAP/ui5-webcomponents/issues/10494)
+* **ui5-popover:** fix opener reference ([#10507](https://github.com/SAP/ui5-webcomponents/issues/10507)) ([a38a28e](https://github.com/SAP/ui5-webcomponents/commit/a38a28e11245e0121bd0a2d6b9d1f5b294952a42))
+* **ui5-toast:** fix template and remove additional text ([#10559](https://github.com/SAP/ui5-webcomponents/issues/10559)) ([ad8f08f](https://github.com/SAP/ui5-webcomponents/commit/ad8f08f1a1b8d2e02b3a929afa46a38ae708feb3))
+* **ui5-toolbar:** correct display of overflow button in hidden container ([#10529](https://github.com/SAP/ui5-webcomponents/issues/10529)) ([3a2f8e3](https://github.com/SAP/ui5-webcomponents/commit/3a2f8e365a2319176e70e4e8cc8e575f58511c6f))
+* **ui5-toolbar:** overflow behaviour ([#10547](https://github.com/SAP/ui5-webcomponents/issues/10547)) ([8df4eb2](https://github.com/SAP/ui5-webcomponents/commit/8df4eb215a15e37df225bbd98836719b584f3065))
+
+
+### Features
+
+* **ui5-side-navigation:** update existing design for Horizon theme ([#10337](https://github.com/SAP/ui5-webcomponents/issues/10337)) ([d5eff51](https://github.com/SAP/ui5-webcomponents/commit/d5eff51f56042d5fbf94e87d6bd94cdbe2d55982))
+* **ui5-table:** popin-text property added ([#10514](https://github.com/SAP/ui5-webcomponents/issues/10514)) ([a01a303](https://github.com/SAP/ui5-webcomponents/commit/a01a3036526cd02eaac1a973ac5054a7c9c8a194))
+* **ui5-table:** table row actions feature added ([#10460](https://github.com/SAP/ui5-webcomponents/issues/10460)) ([dfe09ae](https://github.com/SAP/ui5-webcomponents/commit/dfe09ae51987ef6237fccfbf0bcb76abb8251dee))
+
+
+
+
+
+## [2.6.2](https://github.com/SAP/ui5-webcomponents/compare/v2.6.2-rc.0...v2.6.2) (2025-01-09)
+
+
+### Bug Fixes
+
+* **build:** fix incorrect module ref in custom-elements-manifest ([#10497](https://github.com/SAP/ui5-webcomponents/issues/10497)) ([ea8cdea](https://github.com/SAP/ui5-webcomponents/commit/ea8cdea0b43f31c11479aa2997387be0ef71c6cb))
+
+
+
+
+
 ## [2.6.2-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.6.1...v2.6.2-rc.0) (2025-01-09)
 
 

package/README.md

@@ -28,7 +28,7 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and
 | Checkbox                 | `ui5-checkbox`              | `import "@ui5/webcomponents/dist/CheckBox.js";`            |
 | Color Palette            | `ui5-color-palette`         | `import "@ui5/webcomponents/dist/ColorPalette.js";`        |
 | Color Palette Item       | `ui5-color-palette-item`    | comes with `ui5-color-palette`                             |
-| Color Palette Popover    | `ui5-color-palette-popover` | comes with `ui5-color-palette-popover`                     |
+| Color Palette Popover    | `ui5-color-palette-popover` | `import "@ui5/webcomponents/dist/ColorPalettePopover.js";` |
 | Color Picker             | `ui5-color-picker`          | `import "@ui5/webcomponents/dist/ComboPicker.js";`         |
 | ComboBox                 | `ui5-combobox`              | `import "@ui5/webcomponents/dist/ComboBox.js";`            |
 | ComboBox Item            | `ui5-cb-item`               | comes with `ui5-combobox`                                  |

package/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";
@@ -21,7 +22,7 @@ describe("Table - Rendering", () => {
 					<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
 					<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>
 				</ui5-table-row>
-			</ui5-table>	
+			</ui5-table>
 		`);
 
 		cy.get("ui5-table").should("exist");
@@ -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", () => {

package/cypress/specs/TableRowActions.cy.ts

@@ -0,0 +1,212 @@
+/* eslint-disable cypress/no-unnecessary-waiting */
+/* eslint-disable newline-per-chained-call */
+import "../../src/Table.js";
+import "../../src/TableHeaderRow.js";
+import "../../src/TableHeaderCell.js";
+import "../../src/TableRow.js";
+import "../../src/TableCell.js";
+import "../../src/TableRowAction.js";
+import "../../src/TableRowActionNavigation.js";
+import "../../src/Menu.js";
+import "../../src/MenuItem.js";
+import "@ui5/webcomponents-icons/dist/add.js";
+import "@ui5/webcomponents-icons/dist/edit.js";
+import "@ui5/webcomponents-icons/dist/delete.js";
+import "@ui5/webcomponents-icons/dist/share.js";
+import "@ui5/webcomponents-icons/dist/overflow.js";
+import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+
+describe("TableRowActions", () => {
+	function mountTable(rowActionCount = 0, rows = "") {
+		cy.mount(`
+			<ui5-table row-action-count="${rowActionCount}">
+				<ui5-table-header-row slot="headerRow"></ui5-table-header-row>
+				${rows}
+			</ui5-table>
+		`);
+
+		cy.get("[ui5-table]").as("table").children("ui5-table-row").as("rows");
+		cy.get("@table").children("ui5-table-header-row").first().as("headerRow");
+		cy.get("@table").shadow().find("#table").as("innerTable");
+		cy.get("@rows").then($rows => {
+			$rows.each(index => {
+				cy.get("@rows").eq(index).as(`row${index + 1}`);
+			});
+		});
+		cy.get("@table").then($table => {
+			$table[0].addEventListener("row-action-click", cy.stub().as("rowActionClick"));
+		});
+	}
+
+	describe("Rendering", () => {
+		it("tests single row action", () => {
+			mountTable(1, `
+				<ui5-table-row id="addRow">
+					<ui5-table-row-action slot="actions" id="addAction" icon="add" text="Add"></ui5-table-row-action>
+				</ui5-table-row>
+				<ui5-table-row>
+					<ui5-table-row-action slot="actions" icon="add" text="Add" invisible></ui5-table-row-action>
+				</ui5-table-row>
+				<ui5-table-row>
+					<ui5-table-row-action-navigation slot="actions"></ui5-table-row-action-navigation>
+				</ui5-table-row>
+				<ui5-table-row id="navigationRow">
+					<ui5-table-row-action-navigation slot="actions" id="navigationAction" interactive></ui5-table-row-action-navigation>
+				</ui5-table-row>
+			`);
+
+			cy.get("@headerRow").shadow().find("#actions-cell").should("exist");
+			cy.get("@innerTable").should("have.css", "gridTemplateColumns", `${8 + 36 + 8}px`);
+			cy.get("@row1").find("[icon=add]").shadow().find("ui5-button").should("exist");
+			cy.get("@row2").find("[icon=add]").should("have.css", "display", "block");
+			cy.get("@row3").find("ui5-table-row-action-navigation").shadow().find("ui5-icon").should("have.attr", "name", "navigation-right-arrow");
+			cy.get("@row4").find("ui5-table-row-action-navigation").shadow().find("ui5-button").should("have.attr", "icon", "navigation-right-arrow");
+
+			cy.get("#addAction").realClick();
+			cy.get("@rowActionClick").invoke("getCall", 0).its("args.0.detail.row.id").should("equal", "addRow");
+			cy.get("@rowActionClick").invoke("getCall", 0).its("args.0.detail.action.id").should("equal", "addAction");
+			cy.get("#navigationAction").realClick();
+			cy.get("@rowActionClick").invoke("getCall", 1).its("args.0.detail.row.id").should("equal", "navigationRow");
+			cy.get("@rowActionClick").invoke("getCall", 1).its("args.0.detail.action.id").should("equal", "navigationAction");
+
+			cy.get("@table").invoke("attr", "row-action-count", "0");
+			cy.get("@headerRow").shadow().find("#actions-cell").should("not.exist");
+			cy.get("@row1").shadow().find("#actions-cell").should("not.exist");
+		});
+
+		it("tests multiple row actions - all visible", () => {
+			mountTable(2, `
+				<ui5-table-row>
+					<ui5-table-row-action-navigation slot="actions" interactive></ui5-table-row-action-navigation>
+					<ui5-table-row-action slot="actions" id="addAction" icon="add" text="Add"></ui5-table-row-action>
+					<ui5-table-row-action slot="actions" id="editAction" icon="edit" text="Edit"></ui5-table-row-action>
+					<ui5-table-row-action slot="actions" icon="delete" text="Delete"></ui5-table-row-action>
+				</ui5-table-row>
+			`);
+
+			cy.get("@headerRow").shadow().find("#actions-cell").should("exist");
+			cy.get("@innerTable").should("have.css", "gridTemplateColumns", `${8 + 36 + 4 + 36 + 8}px`);
+			cy.get("@row1").shadow().find("#actions-cell").children().as("actions");
+			cy.get("@actions").should("have.length", 2);
+			cy.get("@actions").eq(0).as("overflowButton");
+			cy.get("@overflowButton").should("have.attr", "ui5-button");
+			cy.get("@overflowButton").and("have.attr", "icon", "overflow");
+			cy.get("@actions").eq(1).should("have.attr", "name", "actions-1");
+
+			cy.get("@overflowButton").realClick();
+			cy.wait(200);
+			cy.get("ui5-menu").should("exist");
+			cy.get("[ui5-menu-item]").as("menuItems").should("have.length", 3);
+			cy.get("@menuItems").eq(0).should("have.attr", "text", "Add").and("have.attr", "icon", "add");
+			cy.get("@menuItems").eq(1).should("have.attr", "text", "Edit").and("have.attr", "icon", "edit");
+			cy.get("@menuItems").eq(2).should("have.attr", "text", "Delete").and("have.attr", "icon", "delete");
+
+			cy.get("@menuItems").eq(0).ui5MenuItemClick();
+			cy.get("@rowActionClick").invoke("getCall", 0).its("args.0.detail.action.id").should("equal", "addAction");
+			cy.get("ui5-menu").invoke("get", 0).its("open").should("be.false");
+
+			cy.get("@overflowButton").realClick();
+			cy.wait(200);
+			cy.get("ui5-menu").should("have.length", 1);
+			cy.get("[ui5-menu-item]").as("menuItems").should("have.length", 3);
+			cy.get("@menuItems").eq(1).ui5MenuItemClick();
+			cy.get("@rowActionClick").invoke("getCall", 1).its("args.0.detail.action.id").should("equal", "editAction");
+
+			cy.get("@table").invoke("attr", "row-action-count", "3");
+			cy.get("@innerTable").should("have.css", "gridTemplateColumns", `${8 + 36 + 4 + 36 + 4 + 36 + 8}px`);
+			cy.get("@actions").should("have.length", 3);
+			cy.get("@actions").eq(0).should("have.attr", "name", "actions-2");
+			cy.get("@actions").eq(1).as("overflowButton").should("have.attr", "icon", "overflow");
+			cy.get("@actions").eq(2).should("have.attr", "name", "actions-1");
+			cy.get("@overflowButton").realClick();
+			cy.wait(200);
+			cy.get("[ui5-menu-item]").as("menuItems").should("have.length", 2);
+			cy.get("@menuItems").eq(0).should("have.attr", "text", "Edit").and("have.attr", "icon", "edit");
+			cy.get("@menuItems").eq(1).should("have.attr", "text", "Delete").and("have.attr", "icon", "delete");
+			cy.get("@menuItems").eq(0).ui5MenuItemClick();
+			cy.get("@rowActionClick").invoke("getCall", 2).its("args.0.detail.action.id").should("equal", "editAction");
+
+			cy.get("@table").invoke("attr", "row-action-count", "4");
+			cy.get("@innerTable").should("have.css", "gridTemplateColumns", `${8 + 36 + 4 + 36 + 4 + 36 + 4 + 36 + 8}px`);
+			cy.get("@actions").should("have.length", 4);
+			cy.get("@actions").eq(0).should("have.attr", "name", "actions-2");
+			cy.get("@actions").eq(1).should("have.attr", "name", "actions-3");
+			cy.get("@actions").eq(2).should("have.attr", "name", "actions-4");
+			cy.get("@actions").eq(3).should("have.attr", "name", "actions-1");
+
+			cy.get("@table").invoke("attr", "row-action-count", "5");
+			cy.get("@innerTable").should("have.css", "gridTemplateColumns", `${8 + 36 + 4 + 36 + 4 + 36 + 4 + 36 + 4 + 36 + 8}px`);
+			cy.get("@actions").should("have.length", 4);
+			cy.get("@row1").find("[slot=actions-4],[slot=actions-1]").then($lastActions => {
+				const lastAction = $lastActions[0];
+				const penultimateAction = $lastActions[1];
+				const distanceBetweenLastActions = lastAction.getBoundingClientRect().left - penultimateAction.getBoundingClientRect().right;
+				return distanceBetweenLastActions > lastAction.clientWidth;
+			}).should("be.true");
+
+			cy.get("@table").invoke("attr", "row-action-count", "1");
+			cy.get("@innerTable").should("have.css", "gridTemplateColumns", `${8 + 36 + 8}px`);
+			cy.get("@actions").should("have.length", 1);
+			cy.get("@actions").eq(0).should("have.attr", "icon", "overflow");
+		});
+
+		it("tests that invisible actions occupy space for alignment", () => {
+			mountTable(3, `
+				<ui5-table-row>
+					<ui5-table-row-action slot="actions" icon="add" text="Add"></ui5-table-row-action>
+					<ui5-table-row-action slot="actions" icon="edit" text="Edit" invisible></ui5-table-row-action>
+					<ui5-table-row-action slot="actions" icon="delete" text="Delete"></ui5-table-row-action>
+				</ui5-table-row>
+			`);
+
+			cy.get("@row1").find("ui5-table-row-action").then($actions => {
+				const firstAction = $actions[0];
+				const lastAction = $actions[2];
+				const distanceBetweenActions = lastAction.getBoundingClientRect().left - firstAction.getBoundingClientRect().right;
+				return distanceBetweenActions > lastAction.clientWidth;
+			}).should("be.true");
+		});
+
+		it("tests that avoiding overflow is more important than aligment", () => {
+			mountTable(3, `
+				<ui5-table-row>
+					<ui5-table-row-action slot="actions" icon="add" text="Add" invisible></ui5-table-row-action>
+					<ui5-table-row-action slot="actions" icon="edit" text="Edit"></ui5-table-row-action>
+					<ui5-table-row-action slot="actions" icon="delete" text="Delete"></ui5-table-row-action>
+					<ui5-table-row-action slot="actions" icon="share" text="Share" invisible></ui5-table-row-action>
+				</ui5-table-row>
+			`);
+
+			cy.get("@row1").shadow().find("#actions-cell").children().as("actions");
+			cy.get("@actions").should("have.length", 2);
+			cy.get("@actions").eq(0).should("have.attr", "name", "actions-2");
+			cy.get("@actions").eq(1).should("have.attr", "name", "actions-3");
+		});
+
+		it("tests that the aligment of navigation is more important than avoiding overflow", () => {
+			mountTable(3, `
+				<ui5-table-row>
+					<ui5-table-row-action-navigation slot="actions" invisible></ui5-table-row-action-navigation>
+					<ui5-table-row-action slot="actions" icon="add" text="Add"></ui5-table-row-action>
+					<ui5-table-row-action slot="actions" icon="edit" text="Edit"></ui5-table-row-action>
+					<ui5-table-row-action slot="actions" icon="delete" text="Delete"></ui5-table-row-action>
+				</ui5-table-row>
+			`);
+
+			cy.get("@row1").shadow().find("#actions-cell").children().as("actions");
+			cy.get("@actions").should("have.length", 3);
+			cy.get("@actions").eq(0).should("have.attr", "name", "actions-2");
+			cy.get("@actions").eq(1).as("overflowButton").should("have.attr", "icon", "overflow");
+			cy.get("@actions").eq(2).should("have.attr", "name", "actions-1");
+
+			cy.get("@overflowButton").realClick();
+			cy.wait(200);
+			cy.get("ui5-menu").should("have.length", 1);
+			cy.get("[ui5-menu-item]").as("menuItems").should("have.length", 2);
+			cy.get("@menuItems").eq(0).should("have.attr", "text", "Edit").and("have.attr", "icon", "edit");
+			cy.get("@menuItems").eq(1).should("have.attr", "text", "Delete").and("have.attr", "icon", "delete");
+			cy.get("@menuItems").eq(0).ui5MenuItemPress("Enter");
+			cy.get("@rowActionClick").invoke("getCall", 0).its("args.0.detail.action.icon").should("equal", "edit");
+		});
+	});
+});

package/cypress/specs/Toolbar.cy.ts

@@ -96,4 +96,30 @@ describe("Toolbar general interaction", () => {
 			.find(".ui5-tb-overflow-btn-hidden")
 			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
 	});
+
+	it("shouldn't display the overflow button when initially rendered in a hidden container and later made visible", () => {
+		cy.mount(html`
+			<div id="otb_hidden_container" style="display:none;">
+				<ui5-toolbar id="otb_hidden">
+					<ui5-toolbar-button icon="add" text="Append"></ui5-toolbar-button>
+				</ui5-toolbar>
+			</div>
+		`);
+
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(500);
+
+		cy.get("#otb_hidden_container")
+			.as("hiddenContainer");
+
+		// show the hidden container
+		cy.get("@hiddenContainer")
+			.invoke("show");
+
+		// overflowbutton should not be rendered
+		cy.get("#otb_hidden")
+			.shadow()
+			.find(".ui5-tb-overflow-btn-hidden")
+			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
+	});
 });