@ui5/webcomponents 2.4.0-rc.1 → 2.4.0-rc.3

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.2...v2.4.0-rc.3) (2024-10-28)
+
+
+### Features
+
+* **ui5-tabcontainer:** style adjustments for transparent header ([#10064](https://github.com/SAP/ui5-webcomponents/issues/10064)) ([b5e596e](https://github.com/SAP/ui5-webcomponents/commit/b5e596e542a4fbd3f0643b15d2f4023be2079f5a))
+
+
+
+
+
+# [2.4.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.1...v2.4.0-rc.2) (2024-10-24)
+
+
+### Bug Fixes
+
+* **ui5-list:** growing button loading layout fixed ([#10043](https://github.com/SAP/ui5-webcomponents/issues/10043)) ([efd7e6a](https://github.com/SAP/ui5-webcomponents/commit/efd7e6ad4f27befb5fb1316e8163456c6b77726f)), closes [#9977](https://github.com/SAP/ui5-webcomponents/issues/9977) [#10047](https://github.com/SAP/ui5-webcomponents/issues/10047)
+* **ui5-slider, ui5-range-slider:** adjust aria-attributes ([#10039](https://github.com/SAP/ui5-webcomponents/issues/10039)) ([ed3abfc](https://github.com/SAP/ui5-webcomponents/commit/ed3abfcf2eec5469bd18ac5becf29e34e427a2f1)), closes [#9547](https://github.com/SAP/ui5-webcomponents/issues/9547)
+* **ui5-split-button:** adjust focus outline on keydown ([#10001](https://github.com/SAP/ui5-webcomponents/issues/10001)) ([898db40](https://github.com/SAP/ui5-webcomponents/commit/898db4031d5710b890a0a9d76c34216cf35a969b))
+* **ui5-table:** wrong horiz. alignm. behavior and wrong texts ([#10040](https://github.com/SAP/ui5-webcomponents/issues/10040)) ([f3da992](https://github.com/SAP/ui5-webcomponents/commit/f3da99295b4255e8f22b58f4ed72561fa0bbe215)), closes [#9639](https://github.com/SAP/ui5-webcomponents/issues/9639) [#10017](https://github.com/SAP/ui5-webcomponents/issues/10017)
+
+
+
+
+
 # [2.4.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.0...v2.4.0-rc.1) (2024-10-17)
 
 

package/cypress/specs/Menu.cy.ts

@@ -27,13 +27,16 @@ describe("Menu interaction", () => {
 
 	it("Menu icons appearance", () => {
 		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-		<ui5-menu open opener="btnOpen">
+		<ui5-menu opener="btnOpen">
 			<ui5-menu-item text="Item 1.0" icon="open-folder">
 				<ui5-menu-item text="1.1"></ui5-menu-item>
 			</ui5-menu-item>
 			<ui5-menu-item text="Item 2.0"></ui5-menu-item>
 		</ui5-menu>`);
 
+		cy.get("[ui5-menu]")
+			.ui5MenuOpen();
+
 		cy.get("[ui5-menu] > [ui5-menu-item]")
 			.as("items");
 
@@ -55,12 +58,15 @@ describe("Menu interaction", () => {
 
 	it("Restore focus to previous element after close", () => {
 		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-		<ui5-menu open opener="btnOpen">
+		<ui5-menu opener="btnOpen">
 			<ui5-menu-item text="Item 1.0" icon="open-folder">
 				<ui5-menu-item text="1.1"></ui5-menu-item>
 			</ui5-menu-item>
 		</ui5-menu>`);
 
+		cy.get("[ui5-menu]")
+			.ui5MenuOpen();
+
 		cy.get("[ui5-menu]")
 			.ui5MenuOpened();
 
@@ -76,11 +82,14 @@ describe("Menu interaction", () => {
 
 	it("Enable navigaion over disabled items", () => {
 		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-		<ui5-menu id="menu" opener="btnOpen" open>
+		<ui5-menu id="menu" opener="btnOpen">
 			<ui5-menu-item text="Item 1"></ui5-menu-item>
 			<ui5-menu-item text="Item 2" disabled></ui5-menu-item>
 		</ui5-menu>`);
 
+		cy.get("[ui5-menu]")
+			.ui5MenuOpen();
+
 		cy.get("[ui5-menu]")
 			.ui5MenuOpened();
 
@@ -88,24 +97,27 @@ describe("Menu interaction", () => {
 			.as("items");
 
 		cy.get("@items")
-			.eq(0)
-			.should("be.focused");
+			.eq(1)
+			.should("be.visible")
+			.ui5MenuItemClick();
 
 		cy.get("@items")
 			.eq(1)
-			.ui5MenuItemClick()
 			.should("be.focused")
 			.and("have.attr", "disabled");
 	});
 
 	it("Add endContent to a menu item", () => {
 		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-		<ui5-menu id="menu" opener="btnOpen" open>
+		<ui5-menu id="menu" opener="btnOpen">
 			<ui5-menu-item text="Item 1">
 				<ui5-button slot="endContent">endContent</ui5-button>
 			</ui5-menu-item>
 		</ui5-menu>`);
 
+		cy.get("[ui5-menu]")
+			.ui5MenuOpen();
+
 		cy.get("[ui5-menu]")
 			.as("menu")
 			.ui5MenuOpened();
@@ -129,12 +141,15 @@ describe("Menu interaction", () => {
 
 	it("Menu and Menu items busy indication - with items", () => {
 		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-		<ui5-menu id="menu" opener="btnOpen" open>
+		<ui5-menu id="menu" opener="btnOpen">
 			<ui5-menu-item text="Item 1" loading-delay="500" loading>
 				<ui5-menu-item text="Item 1.1"></ui5-menu-item>
 			</ui5-menu-item>
 		</ui5-menu>`);
 
+		cy.get("[ui5-menu]")
+			.ui5MenuOpen();
+
 		cy.get("[ui5-menu]")
 			.ui5MenuOpened();
 
@@ -147,10 +162,13 @@ describe("Menu interaction", () => {
 
 	it("Menu and Menu items busy indication - without items", () => {
 		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-		<ui5-menu id="menu" opener="btnOpen" open>
+		<ui5-menu id="menu" opener="btnOpen">
 			<ui5-menu-item text="Item 1" loading-delay="500" loading></ui5-menu-item>
 		</ui5-menu>`);
 
+		cy.get("[ui5-menu]")
+			.ui5MenuOpen();
+
 		cy.get("[ui5-menu] > [ui5-menu-item]")
 			.shadow()
 			.find("[ui5-busy-indicator]")
@@ -190,10 +208,13 @@ describe("Menu interaction", () => {
 	describe("Event firing", () => {
 		it("Event firing - 'ui5-item-click' after 'click' on menu item", () => {
 			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-			<ui5-menu open opener="btnOpen">
+			<ui5-menu opener="btnOpen">
 				<ui5-menu-item text="Item 1.0"></ui5-menu-item>
 			</ui5-menu>`);
 
+			cy.get("[ui5-menu]")
+				.ui5MenuOpen();
+
 			cy.get("[ui5-menu]")
 				.then($item => {
 					$item.get(0).addEventListener("ui5-item-click", cy.stub().as("clicked"));
@@ -211,10 +232,13 @@ describe("Menu interaction", () => {
 
 		it("Event firing - 'ui5-item-click' after 'Space' on menu item", () => {
 			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-			<ui5-menu open opener="btnOpen">
+			<ui5-menu opener="btnOpen">
 				<ui5-menu-item text="Item 1.0"></ui5-menu-item>
 			</ui5-menu>`);
 
+			cy.get("[ui5-menu]")
+				.ui5MenuOpen();
+
 			cy.get("[ui5-menu]")
 				.then($menu => {
 					$menu.get(0).addEventListener("ui5-item-click", cy.stub().as("clicked"));
@@ -232,10 +256,13 @@ describe("Menu interaction", () => {
 
 		it("Event firing - 'ui5-item-click' after 'Enter' on menu item", () => {
 			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-			<ui5-menu open opener="btnOpen">
+			<ui5-menu opener="btnOpen">
 				<ui5-menu-item text="Item 1.0"></ui5-menu-item>
 			</ui5-menu>`);
 
+			cy.get("[ui5-menu]")
+				.ui5MenuOpen();
+
 			cy.get("[ui5-menu]")
 				.then($item => {
 					$item.get(0).addEventListener("ui5-item-click", cy.stub().as("clicked"));
@@ -253,10 +280,13 @@ describe("Menu interaction", () => {
 
 		it("Prevent menu closing on item press", () => {
 			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-			<ui5-menu open opener="btnOpen" @ui5-item-click="${(e: CustomEvent) => e.preventDefault()}">
+			<ui5-menu opener="btnOpen" @ui5-item-click="${(e: CustomEvent) => e.preventDefault()}">
 				<ui5-menu-item text="Item 1.0"></ui5-menu-item>
 			</ui5-menu>`);
 
+			cy.get("[ui5-menu]")
+				.ui5MenuOpen();
+
 			cy.get("[ui5-menu]")
 				.as("menu")
 				.then($item => {
@@ -335,7 +365,7 @@ describe("Menu interaction", () => {
 	describe("Accessibility", () => {
 		it("Menu and Menu items accessibility attributes", () => {
 			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-			<ui5-menu open opener="btnOpen">
+			<ui5-menu opener="btnOpen">
 				<ui5-menu-item text="Item 1.0" accessible-name="test accessible name">
 					<ui5-menu-item text="Item 1.1"></ui5-menu-item>
 				</ui5-menu-item>
@@ -343,6 +373,9 @@ describe("Menu interaction", () => {
 				<ui5-menu-item text="Item 3.0" additional-text="Ctrl+A"></ui5-menu-item>
 			</ui5-menu>`);
 
+			cy.get("[ui5-menu]")
+				.ui5MenuOpen();
+
 			cy.get("[ui5-menu]")
 				.as("menu");
 
@@ -397,12 +430,15 @@ describe("Menu interaction", () => {
 
 		it("Menu popover has an accessible name", () => {
 			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-			<ui5-menu open opener="btnOpen">
+			<ui5-menu opener="btnOpen">
 				<ui5-menu-item text="Item 1.0" icon="open-folder">
 					<ui5-menu-item text="1.1"></ui5-menu-item>
 				</ui5-menu-item>
 			</ui5-menu>`);
 
+			cy.get("[ui5-menu]")
+				.ui5MenuOpen();
+
 			cy.get("[ui5-menu]")
 				.ui5MenuOpened();
 

package/cypress/specs/base/Events.cy.ts

@@ -6,6 +6,8 @@ import "../../../src/Input.js";
 import "../../../src/SuggestionItem.js";
 import "../../../src/features/InputSuggestions.js";
 import "../../../src/MessageStrip.js";
+import "../../../src/MultiComboBox.js";
+import "../../../src/MultiComboBoxItem.js";
 import "../../../src/Panel.js";
 import "../../../src/CheckBox.js";
 import "../../../src/Label.js";
@@ -124,7 +126,12 @@ describe("Event bubbling", () => {
 						<ui5-option>Hello</ui5-option>
 						<ui5-option>World</ui5-option>
 						<ui5-option>Hello</ui5-option>
-					</ui5-select>					
+					</ui5-select>	
+					
+					<ui5-multi-combobox id="myMCB">
+						<ui5-mcb-item text="Cosy"></ui5-mcb-item>
+						<ui5-mcb-item selected text="Compact"></ui5-mcb-item>
+					</ui5-multi-combobox>
 				</ui5-dialog>
 			</div>
 		`);
@@ -135,20 +142,31 @@ describe("Event bubbling", () => {
 			.as("dialog");
 		cy.get("[ui5-select]")
 			.as("select");
+		cy.get("[ui5-multi-combobox]")
+			.as("multiCombobox");
+		cy.get("[ui5-multi-combobox]")
+			.shadow()
+			.find(".inputIcon")
+			.as("multiComboboxIcon");
 
 		cy.get("@app")
 			.then(app => {
-				app.get(0).addEventListener("close", cy.stub().as("appClosed"));
+				app.get(0).addEventListener("ui5-close", cy.stub().as("appClosed"));
 			});
 
 		cy.get("@dialog")
 			.then(dialog => {
-				dialog.get(0).addEventListener("close", cy.stub().as("dialogClosed")); // non-bubbling
+				dialog.get(0).addEventListener("ui5-close", cy.stub().as("dialogClosed"));
 			});
 
 		cy.get("@select")
 			.then(select => {
-				select.get(0).addEventListener("close", cy.stub().as("selClosed")); // non-bubbling
+				select.get(0).addEventListener("ui5-close", cy.stub().as("selClosed"));
+			});
+
+		cy.get("@multiCombobox")
+			.then(multiCombobox => {
+				multiCombobox.get(0).addEventListener("ui5-close", cy.stub().as("mcbClosed"));
 			});
 
 		cy.get("@dialog").invoke("attr", "open", true);
@@ -162,9 +180,24 @@ describe("Event bubbling", () => {
 			.eq(1)
 			.realClick();
 
-		// assert - the close event of the Select does not bubble
+		// act - open the  MultiComboBox
+		cy.get("@multiComboboxIcon")
+			.realClick();
+
+		cy.get("@multiCombobox")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.should("be.visible");
+
+		// act - close the MultiComboBox
+		cy.get("@multiComboboxIcon")
+			.realClick();
+
+		// assert - the close events of the Select and MultiComboBox do not bubble
 		cy.get("@selClosed")
 			.should("have.been.calledOnce");
+		cy.get("@mcbClosed")
+			.should("have.been.calledOnce");
 		cy.get("@dialogClosed")
 			.should("not.be.called");
 		cy.get("@appClosed")
@@ -186,7 +219,7 @@ describe("Event bubbling", () => {
 
 		cy.get("@checkbox")
 			.then(checkbox => {
-				checkbox.get(0).addEventListener("change", e => e.preventDefault());
+				checkbox.get(0).addEventListener("ui5-change", e => e.preventDefault());
 			});
 
 		// act

package/cypress/support/commands/Menu.commands.ts

@@ -21,12 +21,17 @@ Cypress.Commands.add("ui5MenuOpened", { prevSubject: true }, subject => {
 
 	cy.get("@menu")
 		.should("be.visible")
-		.should("have.attr", "open");
+		.and("have.attr", "open");
 
 	cy.get("@menu")
 		.shadow()
 		.find("[ui5-responsive-popover]")
-		.and("have.attr", "open");
+		.should("have.attr", "open");
+
+	cy.get("@menu")
+		.find(" > [ui5-menu-item]")
+		.first()
+		.should("be.visible");
 });
 
 Cypress.Commands.add("ui5MenuItemClick", { prevSubject: true }, subject => {