@ui5/webcomponents 2.9.0-rc.1 → 2.9.0-rc.2

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.9.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.1...v2.9.0-rc.2) (2025-03-27)
+
+
+### Bug Fixes
+
+* **framework:** .d.ts errors that require skipLibCheck ([#11189](https://github.com/SAP/ui5-webcomponents/issues/11189)) ([92f0e68](https://github.com/SAP/ui5-webcomponents/commit/92f0e68c3b3b71ff27f707621b8b3da2248a2719))
+* **ui5-bar:** remove responsive paddings ([#11105](https://github.com/SAP/ui5-webcomponents/issues/11105)) ([e2024b1](https://github.com/SAP/ui5-webcomponents/commit/e2024b1bb7caaf12452a7e20b863eb569405706f)), closes [#10012](https://github.com/SAP/ui5-webcomponents/issues/10012)
+* **ui5-breadcrumbs:** show all items in popover on mobile ([#11138](https://github.com/SAP/ui5-webcomponents/issues/11138)) ([4d75b7d](https://github.com/SAP/ui5-webcomponents/commit/4d75b7db79ede9beee7611dde03de818ba48ad61)), closes [#9697](https://github.com/SAP/ui5-webcomponents/issues/9697)
+* **ui5-date-*:** make tests stable ([#11191](https://github.com/SAP/ui5-webcomponents/issues/11191)) ([b1d9311](https://github.com/SAP/ui5-webcomponents/commit/b1d931167bf29b600797974b29b788fbc3405b1f)), closes [#11188](https://github.com/SAP/ui5-webcomponents/issues/11188)
+* **ui5-input:** remove additional icon in Edge ([#11114](https://github.com/SAP/ui5-webcomponents/issues/11114)) ([9d2dfb1](https://github.com/SAP/ui5-webcomponents/commit/9d2dfb1293194fce19c99157892ac2db6ceff62f))
+* **ui5-popover:** fix popover flickering ([#10955](https://github.com/SAP/ui5-webcomponents/issues/10955)) ([712aae4](https://github.com/SAP/ui5-webcomponents/commit/712aae458b0a9279646ea079cb734674ae3e7b4f))
+* **ui5-tree:** noDataText is now properly rendered ([#11095](https://github.com/SAP/ui5-webcomponents/issues/11095)) ([e1c152c](https://github.com/SAP/ui5-webcomponents/commit/e1c152cbec16a47dd42e9813c68c0052828d6cdf)), closes [#11073](https://github.com/SAP/ui5-webcomponents/issues/11073)
+
+
+
+
+
 # [2.9.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.0...v2.9.0-rc.1) (2025-03-20)
 
 

package/cypress/specs/Breadcrumbs.mobile.cy.tsx

@@ -0,0 +1,53 @@
+import Breadcrumbs from "../../src/Breadcrumbs.js";
+import BreadcrumbsItem from "../../src/BreadcrumbsItem.js";
+
+describe("Breadcrumbs mobile behavior", () => {
+    before(() => {
+        cy.ui5SimulateDevice("phone");
+    });
+
+    it("displays all items in the popover on mobile", () => {
+        const breadcrumbItems = [
+            "Products",
+            "Categories",
+            "Laptops",
+            "Gaming Laptops",
+            "XPS Pro"
+        ];
+
+        cy.mount(
+            <Breadcrumbs>
+                {breadcrumbItems.map((item, index) => (
+                    <BreadcrumbsItem key={index} href={`#${item}`}>{item}</BreadcrumbsItem>
+                ))}
+            </Breadcrumbs>
+        );
+
+        // Open the overflow popover by clicking on the dropdown arrow within shadow DOM
+        cy.get("ui5-breadcrumbs")
+            .shadow()
+            .find(".ui5-breadcrumbs-dropdown-arrow-link-wrapper ui5-link")
+            .click();
+
+        // Wait for the popover to be fully open
+        cy.get("ui5-breadcrumbs")
+            .shadow()
+            .find("ui5-responsive-popover")
+            .shadow()
+            .find("ui5-dialog")
+            .should("be.visible");
+
+        // Verify that all items are displayed in the popover
+        cy.get("ui5-breadcrumbs")
+            .shadow()
+            .find("ui5-responsive-popover ui5-list ui5-li")
+            .should("have.length", breadcrumbItems.length);
+
+        // Verify the items are in the correct order (reversed)
+        cy.get("ui5-breadcrumbs")
+            .shadow()
+            .find("ui5-responsive-popover ui5-list ui5-li")
+            .eq(0)
+            .should("contain.text", breadcrumbItems[breadcrumbItems.length - 1]);
+    });
+});

package/cypress/specs/Button.cy.tsx

@@ -41,6 +41,7 @@ describe("Button general interaction", () => {
 			.find(".ui5-button-icon")
 			.should("not.exist", "icon is not present");
 	});
+
 	it("tests button's endIon rendering", () => {
 		cy.mount(<Button>Action Bar Button</Button>);
 
@@ -387,3 +388,11 @@ describe("Accessibility", () => {
 			.should("have.text", "999+");
 	});
 });
+
+ui5AccDescribe("Automated accessibility tests", () => {
+	it("Icon only", () => {
+		cy.mount(<Button icon="message-information"></Button>);
+
+		cy.ui5CheckA11y();
+	})
+});

package/cypress/specs/ColorPicker.cy.tsx

@@ -1,10 +1,10 @@
 import ColorPicker from "../../src/ColorPicker.js";
 
-describe("Color Picker tests", () => {
+describe("Color Picker general interaction tests", () => {
 	it("should not display color channel inputs and alpha slider in simplified mode", () => {
 		cy.mount(<ColorPicker simplified={true}></ColorPicker>);
 
-		cy.get("ui5-color-picker")
+		cy.get("[ui5-color-picker]")
 			.as("colorPicker");
 
 		cy.get<ColorPicker>("@colorPicker")
@@ -23,35 +23,104 @@ describe("Color Picker tests", () => {
 			.should("not.exist");
 	});
 
-	it("should toggle display to RGB or HSL when button is selected", () => {
+	it("should fire change event when color is changed", () => {
+		cy.mount(<ColorPicker></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.then($item => {
+				$item.get(0).addEventListener("change", cy.stub().as("valueChanged"));
+			});
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#red", "123");
+
+		cy.get("@valueChanged")
+			.should("have.been.calledOnce");
+	});
+
+	it("should correctly parse rgb value to color", () => {
+		cy.mount(<ColorPicker value="rgb(0, 255, 0)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "00ff00");
+	});
+
+	it("should correctly parse rgba value color", () => {
+		cy.mount(<ColorPicker value="rgba(255, 0, 255, 0.5)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "ff00ff");
+
+		cy.get("[ui5-color-picker]")
+			.ui5ColorPickerValidateInput("#alpha", "0.5");
+	});
+
+	it("should correctly parse HEX value to color", () => {
+		cy.mount(<ColorPicker value="#fafafa"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "fafafa");
+	});
+
+	it("should correctly parse short form HEX value to color", () => {
+		cy.mount(<ColorPicker value="#123"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "112233");
+	});
+
+	it("should correctly parse CSS color value to color", () => {
+		cy.mount(<ColorPicker value="gray"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "808080");
+	});
+
+	it("should toggle display from RGB to HSL when arrow button is selected", () => {
 		cy.mount(<ColorPicker value="rgba(112, 178, 225, 1)"></ColorPicker>);
 
-		cy.get("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");
+			.ui5ColorPickerValidateInput("#hue", "205");
 
 		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find("#saturation")
-			.should("have.attr", "value", "65");
+			.ui5ColorPickerValidateInput("#saturation", "65");
 
 		cy.get<ColorPicker>("@colorPicker")
-			.shadow()
-			.find("#light")
-			.should("have.attr", "value", "66");
+			.ui5ColorPickerValidateInput("#light", "66");
+	});
+
+	it("should update value when color is changed via the RGB input fields", () => {
+		cy.mount(<ColorPicker value="rgba(62, 128, 99, 1)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#red", "123");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#green", "56");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#blue", "93");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(123, 56, 93, 1)");
 	});
 
-	it("should update value when hue is changed via the input field", () => {
+	it("should update value when color is changed via the Hue input field", () => {
 		cy.mount(<ColorPicker value="rgba(112, 178, 225, 1)"></ColorPicker>);
 
-		cy.get("ui5-color-picker")
+		cy.get("[ui5-color-picker]")
 			.as("colorPicker");
 
 		cy.get<ColorPicker>("@colorPicker")
@@ -61,13 +130,13 @@ describe("Color Picker tests", () => {
 			.ui5ColorPickerUpdateInput("#hue", "130");
 
 		cy.get<ColorPicker>("@colorPicker")
-			.should("have.attr", "value", "rgba(112, 225, 131, 1)");
+			.should("have.value", "rgba(112, 225, 131, 1)");
 	});
 
-	it("should update value when saturation is changed via the input field", () => {
+	it("should update value when color is changed via the Saturation input field", () => {
 		cy.mount(<ColorPicker value="rgba(112, 225, 131, 1)"></ColorPicker>);
 
-		cy.get("ui5-color-picker")
+		cy.get("[ui5-color-picker]")
 			.as("colorPicker");
 
 		cy.get<ColorPicker>("@colorPicker")
@@ -77,13 +146,13 @@ describe("Color Picker tests", () => {
 			.ui5ColorPickerUpdateInput("#saturation", "44");
 
 		cy.get<ColorPicker>("@colorPicker")
-			.should("have.attr", "value", "rgba(130, 206, 143, 1)");
+			.should("have.value", "rgba(130, 206, 143, 1)");
 	});
 
-	it("should update value when light is changed via the input field", () => {
+	it("should update value when color is changed via the Light input field", () => {
 		cy.mount(<ColorPicker value="rgba(130, 206, 143, 1)"></ColorPicker>);
 
-		cy.get("ui5-color-picker")
+		cy.get("[ui5-color-picker]")
 			.as("colorPicker");
 
 		cy.get<ColorPicker>("@colorPicker")
@@ -93,13 +162,126 @@ describe("Color Picker tests", () => {
 			.ui5ColorPickerUpdateInput("#light", "30");
 
 		cy.get<ColorPicker>("@colorPicker")
-			.should("have.attr", "value", "rgba(43, 110, 54, 1)");
+			.should("have.value", "rgba(43, 110, 54, 1)");
+	});
+
+	it("should update value when color is changed via the HEX input field", () => {
+		cy.mount(<ColorPicker value="rgba(123, 56, 93, 1)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput(".ui5-color-picker-hex-input", "7be");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(119, 187, 238, 1)");
+	});
+
+	it("should update value when alpha is changed via the Alpha input field", () => {
+		cy.mount(<ColorPicker value="rgba(232, 128, 222, 0.89)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#alpha", "0.30");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(232, 128, 222, 0.3)");
+	});
+
+	it("should update value when color is changed via the Hue slider", () => {
+		cy.mount(<ColorPicker value="rgba(70, 64, 191, 1)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-hue-slider")
+			.realClick({ position: "center" });
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(64, 191, 189, 1)");
+	});
+
+	it("should update value when alpha is changed via the Alpha slider", () => {
+		cy.mount(<ColorPicker value="rgba(70, 64, 191, 0)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-alpha-slider")
+			.realClick({ position: "center" });
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.value", "rgba(70, 64, 191, 0.5)");
+	});
+
+	it("should update Saturation & Light inputs when selecting color from main color grid", () => {
+		cy.mount(<ColorPicker value="rgba(136, 64, 101, 1)"></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#hue", "329");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#saturation", "36");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#light", "39");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-main-color")
+			.realClick({ x: 200, y: 50 });
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#hue", "329");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#saturation", "81");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerValidateInput("#light", "78");
+	});
+});
+
+describe("Color Picker accessibility tests", () => {
+	it("should show correct accessibility info for RGB inputs", () => {
+		cy.mount(<ColorPicker></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#red")
+			.should("have.attr", "accessible-name", "Red");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#green")
+			.should("have.attr", "accessible-name", "Green");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#blue")
+			.should("have.attr", "accessible-name", "Blue");
 	});
 
 	it("should show correct accessibility info for HSL inputs", () => {
 		cy.mount(<ColorPicker></ColorPicker>);
 
-		cy.get("ui5-color-picker")
+		cy.get("[ui5-color-picker]")
 			.as("colorPicker");
 
 		cy.get<ColorPicker>("@colorPicker")
@@ -120,4 +302,31 @@ describe("Color Picker tests", () => {
 			.find("#light")
 			.should("have.attr", "accessible-name", "Light");
 	});
+
+	it("should show correct accessibility info for sliders and other input", () => {
+		cy.mount(<ColorPicker></ColorPicker>);
+
+		cy.get("[ui5-color-picker]")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#alpha")
+			.should("have.attr", "accessible-name", "Alpha");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-hex-input")
+			.should("have.attr", "accessible-name", "Hexadecimal");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-hue-slider")
+			.should("have.attr", "accessible-name", "Hue control");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-alpha-slider")
+			.should("have.attr", "accessible-name", "Alpha control");
+	});
 });

package/cypress/specs/DateControlsWithTimezone.cy.tsx

@@ -41,7 +41,7 @@ describe("Date related components in different timezone", () => {
 		now.setHours(now.getHours() + 13);
 		const hours = String(now.getHours()).padStart(2, "0");
 		const minutes = String(now.getMinutes()).padStart(2, "0");
-		const seconds = now.getSeconds();
+		const seconds = String(now.getSeconds()).padStart(2, "0");
 
 		const value = `${hours}:${minutes}:${seconds}`;
 
@@ -63,7 +63,7 @@ describe("Date related components in different timezone", () => {
 		const year = now.getFullYear();
 		const hours = String(now.getHours()).padStart(2, "0");
 		const minutes = String(now.getMinutes()).padStart(2, "0");
-		const seconds = now.getSeconds();
+		const seconds = String(now.getSeconds()).padStart(2, "0");
 
 		const value = `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;