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

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 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.1](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.0...v2.4.0-rc.1) (2024-10-17)
+
+
+### Bug Fixes
+
+* **localization:** legacy date customization ([#10026](https://github.com/SAP/ui5-webcomponents/issues/10026)) ([273c015](https://github.com/SAP/ui5-webcomponents/commit/273c01597ae483fdfe1996dad733d32e4c9a13a9))
+* scoping issues and document how scoping is used correctly ([#10023](https://github.com/SAP/ui5-webcomponents/issues/10023)) ([ee808c3](https://github.com/SAP/ui5-webcomponents/commit/ee808c309f316fe145b05d292c92328396c655ab))
+* **tools:** revert tsconfig moduleResolution to node ([#10014](https://github.com/SAP/ui5-webcomponents/issues/10014)) ([0724b92](https://github.com/SAP/ui5-webcomponents/commit/0724b9289ad04f88972d4978ed37e76f13abca13))
+* **ui5-popup:** add role attribute to focus helper element ([#10004](https://github.com/SAP/ui5-webcomponents/issues/10004)) ([82a95ce](https://github.com/SAP/ui5-webcomponents/commit/82a95cebfc93fb4be696b76110f2089be1593db8)), closes [#9982](https://github.com/SAP/ui5-webcomponents/issues/9982)
+* **ui5-range-slider:** right click on the slider handle does not throw ([#10015](https://github.com/SAP/ui5-webcomponents/issues/10015)) ([e92caf9](https://github.com/SAP/ui5-webcomponents/commit/e92caf96d9ab4548090820e6bbf7217c43d99fd4))
+* **ui5-slider, ui5-range-slider:** adjust styles according to Fiori specs ([#9973](https://github.com/SAP/ui5-webcomponents/issues/9973)) ([e1182a9](https://github.com/SAP/ui5-webcomponents/commit/e1182a9ee44c6975b93208c16ef584cf0d0104d6)), closes [#9614](https://github.com/SAP/ui5-webcomponents/issues/9614)
+
+
+### Features
+
+* **ui5-slider, ui5-range-slider:** add input as a tooltip ([#9547](https://github.com/SAP/ui5-webcomponents/issues/9547)) ([6a4dedf](https://github.com/SAP/ui5-webcomponents/commit/6a4dedf47431d7f7dda7c19f54170bc877c2a33d))
+
+
+
+
+
 # [2.4.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.3.1-rc.0...v2.4.0-rc.0) (2024-10-10)
 
 

package/cypress/specs/Button.cy.ts

@@ -127,8 +127,7 @@ describe("Button general interaction", () => {
 		cy.get("@button")
 			.shadow()
 			.find("button")
-			.invoke("attr", "aria-expanded")
-			.should("be.equal", "true");
+			.should("have.attr", "aria-expanded", "true");
 
 		cy.get<Button>("@button")
 			.then($el => {
@@ -140,8 +139,7 @@ describe("Button general interaction", () => {
 		cy.get("@button")
 			.shadow()
 			.find("button")
-			.invoke("attr", "aria-expanded")
-			.should("be.equal", "false");
+			.should("have.attr", "aria-expanded", "false");
 	});
 
 	it("not setting accessible-role on the host keeps the correct role on the button tag", () => {
@@ -153,24 +151,21 @@ describe("Button general interaction", () => {
 			.as("button");
 
 		cy.get("@button")
-			.invoke("attr", "role")
-			.should("be.equal", "button");
+			.should("have.attr", "role", "button");
 	});
 
 	it("tests button's icon only rendering", () => {
 		cy.mount(html`<ui5-button icon="home"><!----><!----></ui5-button>`);
 
 		cy.get("[ui5-button]")
-			.invoke("attr", "icon-only")
-			.should("exist");
+			.should("have.attr", "icon-only");
 	});
 
 	it("tests button's icon only rendering", () => {
 		cy.mount(html`<ui5-button icon="text"> </ui5-button>`);
 
 		cy.get("[ui5-button]")
-			.invoke("attr", "icon-only")
-			.should("exist");
+			.should("have.attr", "icon-only");
 	});
 
 	it("tests button's slot rendering", () => {
@@ -255,8 +250,7 @@ describe("Button general interaction", () => {
 		cy.get("@button")
 			.shadow()
 			.find("[ui5-icon]")
-			.invoke("attr", "mode")
-			.should("be.equal", "Decorative");
+			.should("have.attr", "mode", "Decorative");
 	});
 
 	it("aria-describedby properly applied on the button tag", () => {
@@ -270,8 +264,7 @@ describe("Button general interaction", () => {
 		cy.get("@button")
 			.shadow()
 			.find("button")
-			.invoke("attr", "aria-describedby")
-			.should("be.equal", hiddenTextTypeId);
+			.should("have.attr", "aria-describedby", hiddenTextTypeId);
 
 		cy.get("@button")
 			.shadow()
@@ -289,8 +282,7 @@ describe("Button general interaction", () => {
 			.as("button");
 
 		cy.get("@button")
-			.invoke("attr", "aria-label")
-			.should("be.equal", "Download Application");
+			.should("have.attr", "aria-label", "Download Application");
 	});
 
 	it("aria-haspopup and aria-controls are properly applied on the button tag", () => {
@@ -310,14 +302,12 @@ describe("Button general interaction", () => {
 		cy.get("@button")
 			.shadow()
 			.find("button")
-			.invoke("attr", "aria-haspopup")
-			.should("be.equal", "dialog");
+			.should("have.attr", "aria-haspopup", "dialog");
 
 		cy.get("@button")
 			.shadow()
 			.find("button")
-			.invoke("attr", "aria-controls")
-			.should("be.equal", "registration-dialog");
+			.should("have.attr", "aria-controls", "registration-dialog");
 	});
 
 	it("setting tooltip on the host is reflected on the button tag", () => {
@@ -329,8 +319,7 @@ describe("Button general interaction", () => {
 			.as("button");
 
 		cy.get("@button")
-			.invoke("attr", "title")
-			.should("be.equal", "Go home");
+			.should("have.attr", "title", "Go home");
 	});
 
 	it("tooltip from inner icon is propagated", () => {
@@ -342,8 +331,7 @@ describe("Button general interaction", () => {
 			.as("button");
 
 		cy.get("@button")
-			.invoke("attr", "title")
-			.should("be.equal", "Download");
+			.should("have.attr", "title", "Download");
 	});
 
 	it("setting accessible-role on the host is reflected on the button tag", () => {
@@ -355,7 +343,6 @@ describe("Button general interaction", () => {
 			.as("button");
 
 		cy.get("@button")
-			.invoke("attr", "role")
-			.should("be.equal", "link");
+			.should("have.attr", "role", "link");
 	});
 });

package/cypress/specs/Form.cy.ts

@@ -4,6 +4,58 @@ import "../../src/FormItem.js";
 import "../../src/FormGroup.js";
 
 describe("General API", () => {
+	it("tests calculated state of Form with default layout and label-span", () => {
+		cy.mount(html`<ui5-form class="addressForm" header-text="Default form">
+			<ui5-form-group header-text="Address">
+				<ui5-form-item>
+					<span slot="labelContent">Name:</span>
+					<span class="text">Red Point Stores</span>
+				</ui5-form-item>
+			</ui5-form-group>
+
+			<ui5-form-group id="testFormGroup2" header-text="Contact">
+				<ui5-form-item>
+					<span slot="labelContent">Twitter:</span>
+					<span class="text">@sap</span>
+				</ui5-form-item>
+			</ui5-form-group>
+
+			<ui5-form-group id="testFormGroup3" header-text="Other info">
+				<ui5-form-item>
+					<span slot="labelContent">Name:</span>
+					<span class="text">Red Point Stores</span>
+				</ui5-form-item>
+			</ui5-form-group>
+		</ui5-form>`);
+
+		cy.get("[ui5-form]")
+			.as("form");
+
+		cy.get("@form")
+			.should("have.prop", "columnsS", 1);
+
+		cy.get("@form")
+			.should("have.prop", "labelSpanS", 12);
+
+		cy.get("@form")
+			.should("have.prop", "columnsM", 1);
+
+		cy.get("@form")
+			.should("have.prop", "labelSpanM", 4);
+
+		cy.get("@form")
+			.should("have.prop", "columnsL", 2);
+
+		cy.get("@form")
+			.should("have.prop", "labelSpanL", 4);
+
+		cy.get("@form")
+			.should("have.prop", "columnsXl", 3);
+
+		cy.get("@form")
+			.should("have.prop", "labelSpanXl", 4);
+	});
+
 	it("tests calculated state of Form with layout='S1 M2 L3 XL6' and label-span='S12 M4 L4 XL4'", () => {
 		cy.mount(html`<ui5-form class="addressForm" header-text="WebC :: Supplier 3gr (S1 M2 L3 XL6)" layout="S1 M2 L3 XL6">
 	<ui5-form-group header-text="Address">
@@ -32,36 +84,28 @@ describe("General API", () => {
 			.as("form");
 
 		cy.get("@form")
-			.invoke("prop", "columnsS")
-			.should("be.equal", 1);
+			.should("have.prop", "columnsS", 1);
 
 		cy.get("@form")
-			.invoke("prop", "labelSpanS")
-			.should("be.equal", 12);
+			.should("have.prop", "labelSpanS", 12);
 
 		cy.get("@form")
-			.invoke("prop", "columnsM")
-			.should("be.equal", 2);
+			.should("have.prop", "columnsM", 2);
 
 		cy.get("@form")
-			.invoke("prop", "labelSpanM")
-			.should("be.equal", 4);
+			.should("have.prop", "labelSpanM", 4);
 
 		cy.get("@form")
-			.invoke("prop", "columnsL")
-			.should("be.equal", 3);
+			.should("have.prop", "columnsL", 3);
 
 		cy.get("@form")
-			.invoke("prop", "labelSpanL")
-			.should("be.equal", 4);
+			.should("have.prop", "labelSpanL", 4);
 
 		cy.get("@form")
-			.invoke("prop", "columnsXl")
-			.should("be.equal", 6);
+			.should("have.prop", "columnsXl", 6);
 
 		cy.get("@form")
-			.invoke("prop", "labelSpanXl")
-			.should("be.equal", 4);
+			.should("have.prop", "labelSpanXl", 4);
 	});
 
 	it("tests calculated state of Form with layout='S1 M2 L2 XL3' label-span='S12 M12 L12 XL12'", () => {
@@ -103,36 +147,28 @@ describe("General API", () => {
 			.as("form");
 
 		cy.get("@form")
-			.invoke("prop", "columnsS")
-			.should("be.equal", 1);
+			.should("have.prop", "columnsS", 1);
 
 		cy.get("@form")
-			.invoke("prop", "labelSpanS")
-			.should("be.equal", 12);
+			.should("have.prop", "labelSpanS", 12);
 
 		cy.get("@form")
-			.invoke("prop", "columnsM")
-			.should("be.equal", 2);
+			.should("have.prop", "columnsM", 2);
 
 		cy.get("@form")
-			.invoke("prop", "labelSpanM")
-			.should("be.equal", 12);
+			.should("have.prop", "labelSpanM", 12);
 
 		cy.get("@form")
-			.invoke("prop", "columnsL")
-			.should("be.equal", 2);
+			.should("have.prop", "columnsL", 2);
 
 		cy.get("@form")
-			.invoke("prop", "labelSpanL")
-			.should("be.equal", 12);
+			.should("have.prop", "labelSpanL", 12);
 
 		cy.get("@form")
-			.invoke("prop", "columnsXl")
-			.should("be.equal", 3);
+			.should("have.prop", "columnsXl", 3);
 
 		cy.get("@form")
-			.invoke("prop", "labelSpanXl")
-			.should("be.equal", 12);
+			.should("have.prop", "labelSpanXl", 12);
 	});
 
 	it("tests calculated state of two FormGroups in layout='S1 M2 L3 XL4'", () => {
@@ -163,36 +199,28 @@ describe("General API", () => {
 			.as("formGr2");
 
 		cy.get("@formGr1")
-			.invoke("prop", "colsS")
-			.should("be.equal", 1);
+			.should("have.prop", "colsS", 1);
 
 		cy.get("@formGr2")
-			.invoke("prop", "colsS")
-			.should("be.equal", 1);
+			.should("have.prop", "colsS", 1);
 
 		cy.get("@formGr1")
-			.invoke("prop", "colsM")
-			.should("be.equal", 1);
+			.should("have.prop", "colsM", 1);
 
 		cy.get("@formGr2")
-			.invoke("prop", "colsM")
-			.should("be.equal", 1);
+			.should("have.prop", "colsM", 1);
 
 		cy.get("@formGr1")
-			.invoke("prop", "colsL")
-			.should("be.equal", 1);
+			.should("have.prop", "colsL", 1);
 
 		cy.get("@formGr2")
-			.invoke("prop", "colsL")
-			.should("be.equal", 2);
+			.should("have.prop", "colsL", 2);
 
 		cy.get("@formGr1")
-			.invoke("prop", "colsXl")
-			.should("be.equal", 2);
+			.should("have.prop", "colsXl", 2);
 
 		cy.get("@formGr2")
-			.invoke("prop", "colsXl")
-			.should("be.equal", 2);
+			.should("have.prop", "colsXl", 2);
 	});
 
 	it("tests calculated state of three FormGroups in layout='S1 M2 L3 XL6'", () => {
@@ -244,52 +272,40 @@ describe("General API", () => {
 			.as("formGr3");
 
 		cy.get("@formGr1")
-			.invoke("prop", "colsS")
-			.should("be.equal", 1);
+			.should("have.prop", "colsS", 1);
 
 		cy.get("@formGr2")
-			.invoke("prop", "colsS")
-			.should("be.equal", 1);
+			.should("have.prop", "colsS", 1);
 
 		cy.get("@formGr3")
-			.invoke("prop", "colsS")
-			.should("be.equal", 1);
+			.should("have.prop", "colsS", 1);
 
 		cy.get("@formGr1")
-			.invoke("prop", "colsM")
-			.should("be.equal", 1);
+			.should("have.prop", "colsM", 1);
 
 		cy.get("@formGr2")
-			.invoke("prop", "colsM")
-			.should("be.equal", 1);
+			.should("have.prop", "colsM", 1);
 
 		cy.get("@formGr3")
-			.invoke("prop", "colsM")
-			.should("be.equal", 1);
+			.should("have.prop", "colsM", 1);
 
 		cy.get("@formGr1")
-			.invoke("prop", "colsL")
-			.should("be.equal", 1);
+			.should("have.prop", "colsL", 1);
 
 		cy.get("@formGr2")
-			.invoke("prop", "colsL")
-			.should("be.equal", 1);
+			.should("have.prop", "colsL", 1);
 
 		cy.get("@formGr3")
-			.invoke("prop", "colsL")
-			.should("be.equal", 1);
+			.should("have.prop", "colsL", 1);
 
 		cy.get("@formGr1")
-			.invoke("prop", "colsXl")
-			.should("be.equal", 2);
+			.should("have.prop", "colsXl", 2);
 
 		cy.get("@formGr2")
-			.invoke("prop", "colsXl")
-			.should("be.equal", 2);
+			.should("have.prop", "colsXl", 2);
 
 		cy.get("@formGr3")
-			.invoke("prop", "colsXl")
-			.should("be.equal", 2);
+			.should("have.prop", "colsXl", 2);
 	});
 
 	it("tests calculated state of three FormGroups in layout='S1 M2 L3 XL4'", () => {
@@ -331,51 +347,39 @@ describe("General API", () => {
 			.as("formGr3");
 
 		cy.get("@formGr1")
-			.invoke("prop", "colsS")
-			.should("be.equal", 1);
+			.should("have.prop", "colsS", 1);
 
 		cy.get("@formGr2")
-			.invoke("prop", "colsS")
-			.should("be.equal", 1);
+			.should("have.prop", "colsS", 1);
 
 		cy.get("@formGr3")
-			.invoke("prop", "colsS")
-			.should("be.equal", 1);
+			.should("have.prop", "colsS", 1);
 
 		cy.get("@formGr1")
-			.invoke("prop", "colsM")
-			.should("be.equal", 1);
+			.should("have.prop", "colsM", 1);
 
 		cy.get("@formGr2")
-			.invoke("prop", "colsM")
-			.should("be.equal", 1);
+			.should("have.prop", "colsM", 1);
 
 		cy.get("@formGr3")
-			.invoke("prop", "colsM")
-			.should("be.equal", 1);
+			.should("have.prop", "colsM", 1);
 
 		cy.get("@formGr1")
-			.invoke("prop", "colsL")
-			.should("be.equal", 1);
+			.should("have.prop", "colsL", 1);
 
 		cy.get("@formGr2")
-			.invoke("prop", "colsL")
-			.should("be.equal", 1);
+			.should("have.prop", "colsL", 1);
 
 		cy.get("@formGr3")
-			.invoke("prop", "colsL")
-			.should("be.equal", 1);
+			.should("have.prop", "colsL", 1);
 
 		cy.get("@formGr1")
-			.invoke("prop", "colsXl")
-			.should("be.equal", 1);
+			.should("have.prop", "colsXl", 1);
 
 		cy.get("@formGr2")
-			.invoke("prop", "colsXl")
-			.should("be.equal", 2);
+			.should("have.prop", "colsXl", 2);
 
 		cy.get("@formGr3")
-			.invoke("prop", "colsXl")
-			.should("be.equal", 1);
+			.should("have.prop", "colsXl", 1);
 	});
 });

package/cypress/specs/Menu.cy.ts

@@ -380,22 +380,19 @@ describe("Menu interaction", () => {
 				.eq(2)
 				.shadow()
 				.find("li")
-				.invoke("attr", "aria-keyshortcuts")
-				.should("be.equal", "Ctrl+A");
+				.should("have.attr", "aria-keyshortcuts", "Ctrl+A");
 
 			cy.get("@items")
 				.eq(2)
 				.shadow()
 				.find("li")
-				.invoke("attr", "role")
-				.should("be.equal", "alertdialog");
+				.should("have.attr", "role", "alertdialog");
 
 			cy.get("@items")
 				.eq(2)
 				.shadow()
 				.find("li .ui5-li-additional-text")
-				.invoke("attr", "aria-hidden")
-				.should("be.equal", "true");
+				.should("have.attr", "aria-hidden", "true");
 		});
 
 		it("Menu popover has an accessible name", () => {
@@ -412,8 +409,7 @@ describe("Menu interaction", () => {
 			cy.get("[ui5-menu]")
 				.shadow()
 				.find("[ui5-responsive-popover]")
-				.invoke("attr", "accessible-name")
-				.should("be.equal", "Select an option from the menu");
+				.should("have.attr", "accessible-name", "Select an option from the menu");
 
 			cy.get("[ui5-menu-item][text='Item 1.0']")
 				.as("item")
@@ -422,8 +418,7 @@ describe("Menu interaction", () => {
 			cy.get("@item")
 				.shadow()
 				.find("[ui5-responsive-popover]")
-				.invoke("attr", "accessible-name")
-				.should("be.equal", "Select an option from the menu");
+				.should("have.attr", "accessible-name", "Select an option from the menu");
 		});
 	});
 });

package/cypress/specs/RTL.cy.ts

@@ -9,11 +9,9 @@ describe("RTL", () => {
 </section>`);
 
 		cy.get("#cbRTL")
-			.invoke("prop", "effectiveDir")
-			.should("be.equal", "rtl");
+			.should("have.prop", "effectiveDir", "rtl");
 
 		cy.get("#cbLTR")
-			.invoke("prop", "effectiveDir")
-			.should("be.equal", "ltr");
+			.should("have.prop", "effectiveDir", "ltr");
 	});
 });

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

@@ -105,8 +105,7 @@ describe("AriaLabelHelper", () => {
 
 		// assert
 		cy.get("@input")
-			.invoke("attr", "aria-label")
-			.should("eq", UPDATED_ACCESSIBLE_NAME);
+			.should("have.attr", "aria-label", UPDATED_ACCESSIBLE_NAME);
 
 		// act - remove acccessible-name
 		cy.get("#inputEnterDesc")
@@ -114,8 +113,7 @@ describe("AriaLabelHelper", () => {
 
 		// assert - aria-label fallbacks to use the label's for, pointing to this input
 		cy.get("@input")
-			.invoke("attr", "aria-label")
-			.should("eq", "Label for inputEnterDesc");
+			.should("have.attr", "aria-label", "Label for inputEnterDesc");
 
 		// act - add acccessible-name-ref
 		cy.get("#inputEnterDesc")