@ui5/webcomponents 2.6.3 → 2.7.0-rc.1

package/CHANGELOG.md

@@ -3,12 +3,48 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [2.6.3](https://github.com/SAP/ui5-webcomponents/compare/v2.6.2...v2.6.3) (2025-01-29)
+# [2.7.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.0...v2.7.0-rc.1) (2025-01-23)
 
 
 ### Bug Fixes
 
-* **ui5-*:** fix jsx templates boolean checks ([#10516](https://github.com/SAP/ui5-webcomponents/issues/10516)) ([b31c7b5](https://github.com/SAP/ui5-webcomponents/commit/b31c7b5de74272f69287985763f4f01ef46169db)), closes [#10509](https://github.com/SAP/ui5-webcomponents/issues/10509)
+* **popup:** applying focus twice ([#10556](https://github.com/SAP/ui5-webcomponents/issues/10556)) ([27721a9](https://github.com/SAP/ui5-webcomponents/commit/27721a9518ac03efc0d2fb764442334bb07c6daf))
+* **ui5-card:** fix accessibiity role position ([#10437](https://github.com/SAP/ui5-webcomponents/issues/10437)) ([c9d7f3f](https://github.com/SAP/ui5-webcomponents/commit/c9d7f3ffec9ce02d465de03a5a946144ba31f0d5))
+* **ui5-tab:** semantic icon is properly aligned in high contrast themes ([#10467](https://github.com/SAP/ui5-webcomponents/issues/10467)) ([e263974](https://github.com/SAP/ui5-webcomponents/commit/e2639745f6aa1ae669dce7f3205a531a672ed711)), closes [#10455](https://github.com/SAP/ui5-webcomponents/issues/10455)
+* **ui5-time-picker:** display value state message in popover headers ([#10582](https://github.com/SAP/ui5-webcomponents/issues/10582)) ([df57f06](https://github.com/SAP/ui5-webcomponents/commit/df57f06a5e10f44ac784b33bc79b1e705f106476))
+* **ui5-toolbar:** correct event handlers attachment ([#10546](https://github.com/SAP/ui5-webcomponents/issues/10546)) ([f6d6c67](https://github.com/SAP/ui5-webcomponents/commit/f6d6c6703a02785fc790ef0794c972aeee115c60))
+* **ui5-tree:** improve keydown handling in content slot ([#10520](https://github.com/SAP/ui5-webcomponents/issues/10520)) ([1e01523](https://github.com/SAP/ui5-webcomponents/commit/1e01523569701da558d0ee3470c6936358dea457)), closes [#10474](https://github.com/SAP/ui5-webcomponents/issues/10474)
+
+
+### Features
+
+* **ui5-color-picker:** add HSL color selection ([#10157](https://github.com/SAP/ui5-webcomponents/issues/10157)) ([8d0e5a4](https://github.com/SAP/ui5-webcomponents/commit/8d0e5a492c9705499571ef223524f051454e766c)), closes [#10275](https://github.com/SAP/ui5-webcomponents/issues/10275)
+* update business-suite/icons to v2.087 & 1.087 ([#10605](https://github.com/SAP/ui5-webcomponents/issues/10605)) ([6b7dbf0](https://github.com/SAP/ui5-webcomponents/commit/6b7dbf09dd253de3e399d257441a386dc000c5ff))
+* update tnt/icons to v3.5 & 2.11 ([#10600](https://github.com/SAP/ui5-webcomponents/issues/10600)) ([5d4e3ba](https://github.com/SAP/ui5-webcomponents/commit/5d4e3ba1a74b2f4bea2321371656cbdbebc27975))
+
+
+
+
+
+# [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))
 
 
 

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/Card.cy.ts

@@ -0,0 +1,51 @@
+import { html } from "lit";
+import "../../src/Card.js";
+import "../../src/CardHeader.js";
+
+const interactiveCardHeader = html` <ui5-card>
+	<ui5-card-header
+        id="cardHeader1"
+		slot="header"
+		additional-text="4 of 10"
+		title-text="Quick Links"
+		subtitle-text="Quick links sub title"
+		interactive
+	>
+	</ui5-card-header>
+</ui5-card>`;
+
+const cardHeader = html` <ui5-card>
+	<ui5-card-header
+        id="cardHeader2"
+		slot="header"
+		additional-text="4 of 10"
+		title-text="Quick Links"
+		subtitle-text="Quick links sub title"
+	>
+	</ui5-card-header>
+</ui5-card>`;
+
+describe("Card header", () => {
+	it("Tests that aria attribute are correct on interactive header", () => {
+		cy.mount(interactiveCardHeader);
+
+		// assert
+		cy.get("#cardHeader1")
+			.shadow()
+			.find(".ui5-card-header-focusable-element")
+			.should("have.attr", "role", "button")
+			.and("have.attr", "tabindex", "0")
+			.and("have.attr", "aria-roledescription", "Interactive Card Header");
+	});
+	it("Tests that aria attribute are correct on a header", () => {
+		cy.mount(cardHeader);
+
+		// assert
+		cy.get("#cardHeader2")
+			.shadow()
+			.find(".ui5-card-header-focusable-element")
+			.should("have.attr", "role", "group")
+			.and("have.attr", "tabindex", "0")
+			.and("have.attr", "aria-roledescription", "Card Header");
+	});
+});

package/cypress/specs/ColorPicker.cy.ts

@@ -24,4 +24,102 @@ describe("Color Picker tests", () => {
 			.find("#alpha")
 			.should("not.exist");
 	});
+
+	it("should toggle display to RGB or HSL when button is selected", () => {
+		cy.mount(html`<ui5-color-picker value="rgba(112, 178, 225, 1)"></ui5-color-picker>`);
+
+		cy.get("ui5-color-picker")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#hue")
+			.should("have.attr", "value", "205");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#saturation")
+			.should("have.attr", "value", "65");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#light")
+			.should("have.attr", "value", "66");
+	});
+
+	it("should update value when hue is changed via the input field", () => {
+		cy.mount(html`<ui5-color-picker value="rgba(112, 178, 225, 1)"></ui5-color-picker>`);
+
+		cy.get("ui5-color-picker")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#hue", "130");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.attr", "value", "rgba(112, 225, 131, 1)");
+	});
+
+	it("should update value when saturation is changed via the input field", () => {
+		cy.mount(html`<ui5-color-picker value="rgba(112, 225, 131, 1)"></ui5-color-picker>`);
+
+		cy.get("ui5-color-picker")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#saturation", "44");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.attr", "value", "rgba(130, 206, 143, 1)");
+	});
+
+	it("should update value when light is changed via the input field", () => {
+		cy.mount(html`<ui5-color-picker value="rgba(130, 206, 143, 1)"></ui5-color-picker>`);
+
+		cy.get("ui5-color-picker")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#light", "30");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.attr", "value", "rgba(43, 110, 54, 1)");
+	});
+
+	it("should show correct accessibility info for HSL inputs", () => {
+		cy.mount(html`<ui5-color-picker></ui5-color-picker>`);
+
+		cy.get("ui5-color-picker")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#hue")
+			.should("have.attr", "accessible-name", "Hue");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#saturation")
+			.should("have.attr", "accessible-name", "Saturation");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#light")
+			.should("have.attr", "accessible-name", "Light");
+	});
 });

package/cypress/specs/Label.cy.ts

@@ -0,0 +1,128 @@
+import { html } from "lit";
+import "../../src/Label.js";
+import "../../src/Input.js";
+import "../../src/TextArea.js";
+import "../../src/DatePicker.js";
+import "../../test/pages/modules/LabelPageCustomElement.js";
+import {
+	LABEL_COLON,
+} from "../../src/generated/i18n/i18n-defaults.js";
+
+describe("Label", () => {
+	describe("General API ", () => {
+		it("tests initial rendering - root and slot", () => {
+			cy.mount(html`<ui5-label>Basic Label</ui5-label>`);
+			cy.get("[ui5-label]").shadow().find(".ui5-label-root").should("exist");
+			cy.get("[ui5-label]").shadow().find("slot:not([name])");
+		});
+
+		it("should show required star", () => {
+			cy.mount(html`<ui5-label required>Required Label</ui5-label>`);
+			cy.get("[ui5-label]")
+				.shadow()
+				.find(".ui5-label-required-colon")
+				.then($el => {
+					return getComputedStyle($el[0], ":after").content;
+				})
+				.should("equal", `"*"`);
+		});
+
+		it("tests show-colon does not force truncation", () => {
+			cy.mount(html`
+				<ui5-label id="showColon-false">Basic Label</ui5-label>
+				<ui5-label show-colon id="showColon-true">Basic Label</ui5-label>
+			`);
+
+			cy.get("#showColon-true").shadow().find(".ui5-label-text-wrapper").invoke("width")
+				.then($labelWithColonWidth => {
+					cy.get("#showColon-false").shadow().find(".ui5-label-text-wrapper").should("have.css", "width", `${$labelWithColonWidth}px`);
+				});
+		});
+
+		it("should wrap the text of the label by default and truncate when wrappingType is None", () => {
+			cy.mount(html`
+				<ui5-label id="wrapping-label-1" style="width: 200px">Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.</ui5-label>
+				<ui5-label id="truncated-label-1" wrapping-type="None" style="width: 200px">Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.</ui5-label>
+			`);
+
+			cy.get("#wrapping-label-1").invoke("height").then($wrappingLabelHeight => {
+				cy.get("#truncated-label-1").invoke("height").should($truncatedLabelHeight => {
+					expect($wrappingLabelHeight).to.be.greaterThan(16);
+					expect($truncatedLabelHeight).to.be.lessThan(17);
+				});
+			});
+		});
+
+		it("colon symbol should be taken from the i18n bundle", () => {
+			cy.mount(html`<ui5-label show-colon id="showColon-true">Basic Label</ui5-label>`);
+
+			cy.get("#showColon-true").shadow().find(".ui5-label-required-colon").then($el => {
+				return getComputedStyle($el[0], ":before").content;
+			})
+				.should("equal", `"${LABEL_COLON.defaultText}"`);
+		});
+	});
+
+	describe("linked element with 'for' property", () => {
+		it("should focus ui5-input on click and set correct aria-label", () => {
+			cy.mount(html`
+				<ui5-label for="form-ui5-input">Label for Input</ui5-label>
+				<ui5-input id="form-ui5-input" style="width: 200px"></ui5-input>
+			`);
+
+			cy.get("[ui5-label]").realClick();
+			cy.get("[ui5-input]").should("be.focused");
+
+			cy.get("[ui5-input]").shadow().find(".ui5-input-inner").should("have.attr", "aria-label", "Label for Input");
+		});
+
+		it("should focus native HTML input on click", () => {
+			cy.mount(html`
+				<ui5-label for="native-input">Label for Native Input</ui5-label>
+				<input id="native-input" />
+			`);
+
+			cy.get("[ui5-label]").realClick();
+			cy.get("#native-input").should("be.focused");
+		});
+
+		it("should focus ui5-textarea on click", () => {
+			cy.mount(html`
+				<ui5-label for="ui5-textarea">Label for Textarea</ui5-label>
+				<ui5-textarea id="ui5-textarea"></ui5-textarea>
+			`);
+
+			cy.get("[ui5-label]").realClick();
+			cy.get("#ui5-textarea").should("be.focused");
+		});
+
+		it("should focus native HTML textarea on click", () => {
+			cy.mount(html`
+				<ui5-label for="native-textarea">Label for Native Textarea</ui5-label>
+				<textarea id="native-textarea"></textarea>
+			`);
+
+			cy.get("[ui5-label]").realClick();
+			cy.get("#native-textarea").should("be.focused");
+		});
+
+		it("should focus ui5-date-picker on click", () => {
+			cy.mount(html`
+				<ui5-label for="ui5-datepicker">Label for Date Picker</ui5-label>
+				<ui5-date-picker id="ui5-datepicker"></ui5-date-picker>
+			`);
+
+			cy.get("[ui5-label]").realClick();
+			cy.get("#ui5-datepicker").should("be.focused");
+		});
+
+		it("should focus within a shadow root", () => {
+			cy.mount(html`
+				<label-page-custom-element id="custom-element-with-label"></label-page-custom-element>
+			`);
+
+			cy.get("#custom-element-with-label").shadow().find("[ui5-label]").realClick();
+			cy.get("#custom-element-with-label").shadow().find("#input").should("be.focused");
+		});
+	});
+});

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");
+		});
+	});
+});