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

package/CHANGELOG.md

@@ -3,6 +3,45 @@
 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.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)
+
+
+### Bug Fixes
+
+* **ui5-carousel:** hideNavigationArrows property works on touch devices ([#10397](https://github.com/SAP/ui5-webcomponents/issues/10397)) ([e655644](https://github.com/SAP/ui5-webcomponents/commit/e6556440aae4a1200902776a2450f9e1b9997633))
+* **ui5-cb/mcb-item:** handle setting malicious text ([#10382](https://github.com/SAP/ui5-webcomponents/issues/10382)) ([9b4cd2b](https://github.com/SAP/ui5-webcomponents/commit/9b4cd2b7c6c083694814f0e96ccaf6b3cd275805))
+* **ui5-file-uploader:** use optional chain in onclick check ([#10408](https://github.com/SAP/ui5-webcomponents/issues/10408)) ([8e100d4](https://github.com/SAP/ui5-webcomponents/commit/8e100d45d1591f4683a2b7ea80c30e67dc58016c))
+* **ui5-multi-input:** one token added on enter press ([#10385](https://github.com/SAP/ui5-webcomponents/issues/10385)) ([54ee836](https://github.com/SAP/ui5-webcomponents/commit/54ee836eeb8ceb6a648145b35be221004e35a06d))
+* **ui5-table:** apply focus over whole row ([#10407](https://github.com/SAP/ui5-webcomponents/issues/10407)) ([bbe7d57](https://github.com/SAP/ui5-webcomponents/commit/bbe7d57b41738c333c8042b6d086c5aaf8ffe153)), closes [#10286](https://github.com/SAP/ui5-webcomponents/issues/10286)
+* **ui5-toolbar:** hide overflow button when content fits ([#10405](https://github.com/SAP/ui5-webcomponents/issues/10405)) ([4ac9428](https://github.com/SAP/ui5-webcomponents/commit/4ac9428ad3b2a91549f683b45badb716f3a7b594)), closes [#10376](https://github.com/SAP/ui5-webcomponents/issues/10376)
+
+
+### Features
+
+* **ui5-color-palette:** set selected color to inner color picker ([#10276](https://github.com/SAP/ui5-webcomponents/issues/10276)) ([7a152a1](https://github.com/SAP/ui5-webcomponents/commit/7a152a1dc0defcb031d859012f4310ca5c52bee4)), closes [#8772](https://github.com/SAP/ui5-webcomponents/issues/8772)
+
+
+
+
+
 # [2.6.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.0...v2.6.0-rc.1) (2024-12-16)
 
 

package/cypress/specs/ColorPalette.cy.ts

@@ -0,0 +1,47 @@
+import { html } from "lit";
+import "../../src/ColorPalette.js";
+import "../../src/ColorPaletteItem.js";
+import "../../src/features/ColorPaletteMoreColors.js";
+
+describe("Color Palette tests", () => {
+	it("internal color picker should have selected color set on open", () => {
+		cy.mount(html`<ui5-color-palette show-more-colors show-recent-colors>
+<ui5-color-palette-item id="named" value="red"></ui5-color-palette-item>
+<ui5-color-palette-item id="rgba" value="rgba(0, 255, 0, 0.5)"></ui5-color-palette-item>
+<ui5-color-palette-item id="rgb" value="rgb(0,0,255)"></ui5-color-palette-item>
+<ui5-color-palette-item id="hex" value="#C0FFEE"></ui5-color-palette-item>
+</ui5-color-palette>`);
+
+		cy.get("ui5-color-palette")
+			.ui5ColorPaletteCheckSelectedColor("#named", {
+				r: "255",
+				g: "0",
+				b: "0",
+				a: "1",
+			});
+
+		cy.get("ui5-color-palette")
+			.ui5ColorPaletteCheckSelectedColor("#rgba", {
+				r: "0",
+				g: "255",
+				b: "0",
+				a: "0.5",
+			});
+
+		cy.get("ui5-color-palette")
+			.ui5ColorPaletteCheckSelectedColor("#rgb", {
+				r: "0",
+				g: "0",
+				b: "255",
+				a: "1",
+			});
+
+		cy.get("ui5-color-palette")
+			.ui5ColorPaletteCheckSelectedColor("#hex", {
+				r: "192",
+				g: "255",
+				b: "238",
+				a: "1",
+			});
+	});
+});

package/cypress/specs/ComboBox.cy.ts

@@ -0,0 +1,22 @@
+import { html } from "lit";
+import "../../src/ComboBox.js";
+import "../../src/ComboBoxItem.js";
+
+describe("Security", () => {
+	it("tests setting malicious text to items", () => {
+		cy.mount(html`
+			<ui5-combobox>
+				<ui5-cb-item text="<script>alert('XSS')</script>"></ui5-cb-item>
+				<ui5-cb-item text="<b onmouseover=alert('XSS')></b>"></ui5-cb-item>
+				<ui5-cb-item text="Albania<button onClick='alert(1)'>alert</button>"></ui5-cb-item>
+			</ui5-combobox>
+		`);
+
+		cy.get("ui5-cb-item").eq(0).shadow().find(".ui5-li-title")
+			.should("have.text", "<script>alert('XSS')</script>");
+		cy.get("ui5-cb-item").eq(1).shadow().find(".ui5-li-title")
+			.should("have.text", "<b onmouseover=alert('XSS')></b>");
+		cy.get("ui5-cb-item").eq(2).shadow().find(".ui5-li-title")
+			.should("have.text", "Albania<button onClick='alert(1)'>alert</button>");
+	});
+});

package/cypress/specs/MultiComboBox.cy.ts

@@ -0,0 +1,22 @@
+import { html } from "lit";
+import "../../src/MultiComboBox.js";
+import "../../src/MultiComboBoxItem.js";
+
+describe("Security", () => {
+	it("tests setting malicious text to items", () => {
+		cy.mount(html`
+			<ui5-multi-combobox>
+				<ui5-mcb-item text="<script>alert('XSS')</script>"></ui5-mcb-item>
+				<ui5-mcb-item text="<b onmouseover=alert('XSS')></b>"></ui5-mcb-item>
+				<ui5-mcb-item text="Albania<button onClick='alert(1)'>alert</button>"></ui5-mcb-item>
+			</ui5-multi-combobox>
+		`);
+
+		cy.get("ui5-mcb-item").eq(0).shadow().find(".ui5-li-title")
+			.should("have.text", "<script>alert('XSS')</script>");
+		cy.get("ui5-mcb-item").eq(1).shadow().find(".ui5-li-title")
+			.should("have.text", "<b onmouseover=alert('XSS')></b>");
+		cy.get("ui5-mcb-item").eq(2).shadow().find(".ui5-li-title")
+			.should("have.text", "Albania<button onClick='alert(1)'>alert</button>");
+	});
+});

package/cypress/specs/MultiInput.cy.ts

@@ -0,0 +1,47 @@
+import { html } from "lit";
+import "../../src/MultiInput.js";
+import "../../src/Tokenizer.js";
+import "../../src/features/InputSuggestions.js";
+import "../../src/SuggestionItem.js";
+
+describe("MultiInput Web Component", () => {
+	it("creates only one token when typing 'ad' and pressing Enter", () => {
+		cy.mount(html`<ui5-multi-input show-suggestions show-value-help-icon id="suggestion-token">
+            <ui5-suggestion-item text="Aute"></ui5-suggestion-item>
+            <ui5-suggestion-item text="ad"></ui5-suggestion-item>
+            <ui5-suggestion-item text="exercitation"></ui5-suggestion-item>
+            <ui5-suggestion-item text="esse"></ui5-suggestion-item>
+            <ui5-suggestion-item text="labore"></ui5-suggestion-item>
+            <ui5-suggestion-item text="amet"></ui5-suggestion-item>
+            <ui5-suggestion-item text="aute"></ui5-suggestion-item>
+            <ui5-suggestion-item text="excepteur"></ui5-suggestion-item>
+        </ui5-multi-input>`);
+		cy.get("#suggestion-token").then(multiInput => {
+			const createTokenFromText = (text: string): HTMLElement => {
+				const token = document.createElement("ui5-token");
+				token.setAttribute("text", text);
+				token.setAttribute("slot", "tokens");
+				return token;
+			};
+
+			multiInput[0].addEventListener("keydown", (event: KeyboardEvent) => {
+				const inputElement = multiInput[0] as HTMLInputElement;
+				if (event.key === "Enter" && inputElement.value) {
+					const token = createTokenFromText(inputElement.value);
+					inputElement.appendChild(token);
+					inputElement.value = "";
+				}
+			});
+		});
+
+		cy.get("#suggestion-token")
+			.shadow()
+			.find("input")
+			.type("ad{enter}");
+
+		cy.get("ui5-multi-input")
+			.find("ui5-token")
+			.should("have.length", 1)
+			.and("have.attr", "text", "ad");
+	});
+});

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">
@@ -91,4 +70,30 @@ describe("Toolbar general interaction", () => {
 			.find(".ui5-tb-overflow-btn-hidden")
 			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
 	});
+
+	it("shouldn't show overflow button if there is enough space", () => {
+		cy.mount(html`
+			<ui5-toolbar style="width:fit-content;max-width:100%;">
+				<ui5-toolbar-button icon="decline">
+				</ui5-toolbar-button>
+
+				<ui5-toolbar-button icon="add">
+				</ui5-toolbar-button>
+
+				<ui5-toolbar-button icon="employee">
+				</ui5-toolbar-button>
+			</ui5-toolbar>
+		`);
+
+		cy.get("[ui5-toolbar]")
+			.as("toolbar");
+
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(500);
+
+		cy.get("@toolbar")
+			.shadow()
+			.find(".ui5-tb-overflow-btn-hidden")
+			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
+	});
 });

package/cypress/support/commands/ColorPalette.commands.ts

@@ -0,0 +1,62 @@
+Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true }, (subject, colorPaletteItem, values) => {
+	cy.get(subject)
+		.as("colorPalette");
+
+	cy.get("ui5-color-palette")
+		.shadow()
+		.find(".ui5-cp-more-colors")
+		.as("moreColors");
+
+	cy.get("@colorPalette")
+		.find(colorPaletteItem)
+		.realClick();
+
+	cy.get("@moreColors")
+		.realClick();
+
+	cy.get("@colorPalette")
+		.shadow()
+		.find("ui5-color-picker")
+		.as("colorPicker");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find("#red")
+		.as("redColor");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find("#green")
+		.as("greenColor");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find("#blue")
+		.as("blueColor");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find("#alpha")
+		.as("alpha");
+
+	cy.get("@colorPalette")
+		.shadow()
+		.find("ui5-dialog")
+		.find("ui5-button")
+		.as("okButton");
+
+	cy.get("@redColor")
+		.should("have.attr", "value", values.r);
+
+	cy.get("@greenColor")
+		.should("have.attr", "value", values.g);
+
+	cy.get("@blueColor")
+		.should("have.attr", "value", values.b);
+
+	cy.get("@alpha")
+		.should("have.attr", "value", values.a);
+
+	cy.get("@okButton")
+		.realClick();
+});

package/cypress/support/commands.ts

@@ -38,6 +38,7 @@
 
 import { internals, isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import "./commands/Menu.commands.js";
+import "./commands/ColorPalette.commands.js";
 
 type SimulationDevices = "phone"
 
@@ -50,6 +51,7 @@ declare global {
 			ui5MenuItemClick(): Chainable<void>
 			ui5DOMRef(): Chainable<void>
 			ui5MenuItemPress(key: any): Chainable<void>
+			ui5ColorPaletteCheckSelectedColor(colorPaletteItem: string, values: {r: string, g: string, b: string, a: string}): Chainable<void>
 		}
 	}
 }