@ui5/webcomponents 2.6.0-rc.2 → 2.6.0-rc.4

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.6.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.3...v2.6.0-rc.4) (2025-01-02)
+
+**Note:** Version bump only for package @ui5/webcomponents
+
+
+
+
+
+# [2.6.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.2...v2.6.0-rc.3) (2024-12-26)
+
+
+### Bug Fixes
+
+* **ui5-popover:** allow setting `opener` to an abstract element DOM reference ([#10419](https://github.com/SAP/ui5-webcomponents/issues/10419)) ([1dd8c2e](https://github.com/SAP/ui5-webcomponents/commit/1dd8c2e4d1d8f5d1fcc57f0d5d53c8639e271cb5))
+* **ui5-popover:** fix finding opener ([#10414](https://github.com/SAP/ui5-webcomponents/issues/10414)) ([36f1565](https://github.com/SAP/ui5-webcomponents/commit/36f1565a0880af8a24a82d9ae5c57f25cff2f53b))
+
+
+### Features
+
+* **ui5-ai-button:** implement split button functionality ([#10242](https://github.com/SAP/ui5-webcomponents/issues/10242)) ([55c9e4d](https://github.com/SAP/ui5-webcomponents/commit/55c9e4d67800d82a0d357eda8859b78d69dc25ab))
+* **ui5-rating-indicator:** provide the possibility to set size of the icons ([#10406](https://github.com/SAP/ui5-webcomponents/issues/10406)) ([a01eccb](https://github.com/SAP/ui5-webcomponents/commit/a01eccb150e631cb5609ccef1579b52f2399975e))
+
+
+
+
+
 # [2.6.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.1...v2.6.0-rc.2) (2024-12-19)
 
 

package/cypress/specs/MessageStrip.cy.ts

@@ -1,8 +1,51 @@
 import { html } from "lit";
 import "../../src/MessageStrip.js";
-import { MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION, MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM } from "../../src/generated/i18n/i18n-defaults.js";
+import {
+	MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION,
+	MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM,
+	MESSAGE_STRIP_INFORMATION,
+	MESSAGE_STRIP_CLOSABLE,
+	MESSAGE_STRIP_CUSTOM,
+} from "../../src/generated/i18n/i18n-defaults.js";
+
+describe("API", () => {
+	it("tests close event", () => {
+		cy.mount(html`<ui5-message-strip>MessageStrip</ui5-message-strip>`);
+
+		cy.get("[ui5-message-strip]").then($strip => {
+			$strip.get(0).addEventListener("close", cy.stub().as("close"));
+		});
+
+		cy.get("[ui5-message-strip]")
+			.shadow()
+			.find(".ui5-message-strip-close-button")
+			.as("closeButton");
+
+		cy.get("@closeButton")
+			.realClick();
+
+		cy.get("@closeButton")
+			.realPress("Space");
+
+		cy.get("@closeButton")
+			.realPress("Enter");
+
+		cy.get("@close").should("have.callCount", 3);
+	});
+
+	it("Message strip is rendered without icon when design changes from default to a specific color set and scheme", () => {
+		cy.mount(html`<ui5-message-strip >MessageStrip w/ default properties</ui5-message-strip>`);
+
+		cy.get("[ui5-message-strip]")
+			.invoke("prop", "design", "ColorSet1")
+			.invoke("prop", "colorScheme", "1");
+
+		cy.get("[ui5-message-strip]")
+			.shadow()
+			.find("ui5-icon")
+			.should("not.exist");
+	});
 
-describe("MessageStrip close button tooltip", () => {
 	it("should display the correct tooltip text for different designs", () => {
 		const designs = [
 		  {
@@ -25,5 +68,24 @@ describe("MessageStrip close button tooltip", () => {
 				.find("button")
 				.should("have.attr", "title", btnText);
 		});
-	  });
+	});
+});
+
+describe("Accessibility", () => {
+	it("Test hidden text element content", () => {
+		cy.mount(html`
+			<ui5-message-strip id="messageStrip">Hello World!</ui5-message-strip>
+			<ui5-message-strip id="colorSet1ColorScheme1" design="ColorSet1" color-scheme="1" class="top"><ui5-icon name="palette" slot="icon"></ui5-icon>Color Set 1 - color-scheme 1</ui5-message-strip>
+		`);
+
+		cy.get("#messageStrip")
+			.shadow()
+			.find(".ui5-hidden-text")
+			.should("have.text", `${MESSAGE_STRIP_INFORMATION.defaultText} ${MESSAGE_STRIP_CLOSABLE.defaultText}`);
+
+		cy.get("#colorSet1ColorScheme1")
+			.shadow()
+			.find(".ui5-hidden-text")
+			.should("have.text", `${MESSAGE_STRIP_CUSTOM.defaultText} ${MESSAGE_STRIP_CLOSABLE.defaultText}`);
+	});
 });

package/cypress/specs/Popover.cy.ts

@@ -0,0 +1,62 @@
+import { html } from "lit";
+import "../../src/Button.js";
+import "../../src/Toolbar.js";
+import "../../src/ToolbarButton.js";
+import "../../src/Popover.js";
+
+describe("Popover opener", () => {
+	it("tests 'opener' set as string of abstract element's ID ", () => {
+		cy.mount(html`
+			<ui5-toolbar id="tb">
+				<ui5-toolbar-button text="Add"></ui5-toolbar-button>
+				<ui5-toolbar-button text="Delete" id="clearCounter"></ui5-toolbar-button>
+				<ui5-toolbar-button id="btnOpenMenu" text="Open Menu" prevent-overflow-closing></ui5-toolbar-button>
+			</ui5-toolbar>
+			<ui5-popover id="popup" opener="btnOpenMenu">
+				<ui5-button id="btnClosePopover">Close</ui5-button>
+			</ui5-popover>
+		`);
+
+		// act
+		cy.get("#popup").invoke("prop", "open", "true");
+
+		// assert - The button inside the popover is accessible => popover is opened properly.
+		cy.get("#btnClosePopover").then($btnClosePopover => {
+			$btnClosePopover.get(0).addEventListener("click", () => {
+				cy.get("#popup").invoke("prop", "open", false);
+			});
+		});
+		cy.get("#btnClosePopover").realClick();
+	});
+
+	it("tests 'opener' set as DOM ref of abstract element's DOM reference", () => {
+		cy.mount(html`
+			<ui5-toolbar id="tb">
+				<ui5-toolbar-button text="Add"></ui5-toolbar-button>
+				<ui5-toolbar-button text="Delete"></ui5-toolbar-button>
+				<ui5-toolbar-button id="btnOpenPopover" text="Open Menu" prevent-overflow-closing></ui5-toolbar-button>
+			</ui5-toolbar>
+			<ui5-popover id="popup">
+				<ui5-button id="btnClosePopover">Close</ui5-button>
+			</ui5-popover>
+		`);
+
+		cy.get("#btnOpenPopover").then($toolbarBtn => {
+			cy.wrap($toolbarBtn.get(0)).as("toolbarBtn");
+		});
+
+		// act
+		cy.get("@toolbarBtn").then($toolbarBtn => {
+			cy.get("#popup").invoke("prop", "opener", $toolbarBtn.get(0));
+		});
+		cy.get("#popup").invoke("prop", "open", true);
+
+		// assert - The button inside the popover is accessible => popover is opened properly.
+		cy.get("#btnClosePopover").then($btnClosePopover => {
+			$btnClosePopover.get(0).addEventListener("click", () => {
+				cy.get("#popup").invoke("prop", "open", false);
+			});
+		});
+		cy.get("#btnClosePopover").realClick();
+	});
+});

package/cypress/specs/RatingIndicator.cy.ts

@@ -36,4 +36,31 @@ describe("RatingIndicator", () => {
 				.should("have.attr", "name", attributeValue);
 		});
 	});
+
+	describe("RatingIndicator Sizes", () => {
+		it("should apply correct size and spacing for size 'S'", () => {
+			cy.mount(html`<ui5-rating-indicator size="S" value="3"></ui5-rating-indicator>`);
+
+			cy.get("ui5-rating-indicator")
+				.shadow()
+				.find("li.ui5-rating-indicator-item.ui5-rating-indicator-item-sel")
+				.should("have.css", "height", "22px")
+				.should("have.css", "margin-right", "3px");
+		});
+		it("should apply correct size and spacing for size 'L' readonly", () => {
+			cy.mount(html`<ui5-rating-indicator size="L" value="3.5" readonly></ui5-rating-indicator>`);
+
+			cy.get("ui5-rating-indicator")
+				.shadow()
+				.find("li.ui5-rating-indicator-item.ui5-rating-indicator-item-sel")
+				.should("have.css", "height", "32px")
+				.should("have.css", "margin-right", "4px");
+
+			cy.get("ui5-rating-indicator")
+				.shadow()
+				.find("li.ui5-rating-indicator-item.ui5-rating-indicator-item-unsel")
+				.find("ui5-icon")
+				.should("have.css", "height", "24px");
+		});
+	});
 });

package/cypress/specs/Toolbar.cy.ts

@@ -46,27 +46,6 @@ describe("Toolbar general interaction", () => {
 			});
 	});
 
-	it("should be able to use toolbar button as popover opener", () => {
-		cy.mount(html`
-			<ui5-toolbar id="tb">
-				<ui5-toolbar-button icon="add" text="Left 1 (long)" id="clickCounter"></ui5-toolbar-button>
-				<ui5-toolbar-button icon="decline" text="Left 2" id="clearCounter"></ui5-toolbar-button>
-				<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
-				<ui5-toolbar-separator></ui5-toolbar-separator>
-				<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
-				<ui5-toolbar-button id="btnOpenMenu" text="Open Menu" prevent-overflow-closing></ui5-toolbar-button>
-			</ui5-toolbar>
-			<ui5-popover id="popup" opener="btnOpenMenu">
-				Hello World
-			</ui5-popover>
-		`);
-
-		cy.get("#popup").invoke("prop", "open", "true");
-
-		cy.get("#popup")
-			.should("be.visible");
-	});
-
 	it("shouldn't have toolbar button as popover opener when there is spacer before last toolbar item", () => {
 		cy.mount(html`
 			<ui5-toolbar id="otb_spacer">