@ui5/webcomponents 2.8.0-rc.2 → 2.8.0

package/CHANGELOG.md

@@ -3,6 +3,53 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.8.0](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.3...v2.8.0) (2025-03-04)
+
+
+### Bug Fixes
+
+* **ui5-avatar-group:** fixed unnecessary rendering of overflow button ([#10979](https://github.com/SAP/ui5-webcomponents/issues/10979)) ([97ccd05](https://github.com/SAP/ui5-webcomponents/commit/97ccd0581de4ed2ae62648628598e20c47391f46)), closes [#10948](https://github.com/SAP/ui5-webcomponents/issues/10948)
+* **ui5-popover:** ensure that popover is closed when mousedown propagation is stopped ([#10953](https://github.com/SAP/ui5-webcomponents/issues/10953)) ([dbd3ab7](https://github.com/SAP/ui5-webcomponents/commit/dbd3ab7ca3110bd5a90698514b5e032f4f6902f5))
+* **ui5-switch:** reduce touch area according to VD spec ([#10954](https://github.com/SAP/ui5-webcomponents/issues/10954)) ([8cba1cf](https://github.com/SAP/ui5-webcomponents/commit/8cba1cfa1606edb7a595931481c182c97fd804a1))
+* **ui5-token:** align selected token height with non selected ([#10868](https://github.com/SAP/ui5-webcomponents/issues/10868)) ([16af941](https://github.com/SAP/ui5-webcomponents/commit/16af941257c42d91d8dd098ccd9404d952d47d4d)), closes [#10444](https://github.com/SAP/ui5-webcomponents/issues/10444)
+* **ui5-toolbar:** prevent default dialog announcement ([#10971](https://github.com/SAP/ui5-webcomponents/issues/10971)) ([edd54da](https://github.com/SAP/ui5-webcomponents/commit/edd54da0493022d0367e17b30de7abe702806390)), closes [#10324](https://github.com/SAP/ui5-webcomponents/issues/10324)
+
+
+### Features
+
+* **framework:** add `.currentTarget` to the type of event handler in TSX and UI5CustomEvent ([#10957](https://github.com/SAP/ui5-webcomponents/issues/10957)) ([f56753c](https://github.com/SAP/ui5-webcomponents/commit/f56753c5142d6e817b05d7e33bd160f09c2d5205))
+* **ui5-tabcontainer:** add `noAutoSelection` property ([#10877](https://github.com/SAP/ui5-webcomponents/issues/10877)) ([581a626](https://github.com/SAP/ui5-webcomponents/commit/581a626f37fd8d05195555fae2e1d1b2a7a41498))
+
+
+
+
+
+# [2.8.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.2...v2.8.0-rc.3) (2025-02-27)
+
+
+### Bug Fixes
+
+* **ui5-input:** call change before submit event ([#10613](https://github.com/SAP/ui5-webcomponents/issues/10613)) ([3c3d641](https://github.com/SAP/ui5-webcomponents/commit/3c3d6410da70eec6f979c134539a0e2227be997b)), closes [#10534](https://github.com/SAP/ui5-webcomponents/issues/10534)
+* **ui5-list:** improved acc description when groups are available ([#10561](https://github.com/SAP/ui5-webcomponents/issues/10561)) ([a7a981c](https://github.com/SAP/ui5-webcomponents/commit/a7a981c9095737941baa3c4052c4718cc9088713))
+* **ui5-menu:** prevent global line-height inheritance ([#10916](https://github.com/SAP/ui5-webcomponents/issues/10916)) ([f6682b2](https://github.com/SAP/ui5-webcomponents/commit/f6682b2d076df747e74058b0b156b3cf0627952d))
+* **ui5-notification-list:** improve keyboard accessibility for the "More" button ([#10822](https://github.com/SAP/ui5-webcomponents/issues/10822)) ([b659fe2](https://github.com/SAP/ui5-webcomponents/commit/b659fe2faeb42eb052dafcc0c16215a3bf1f1926))
+* **ui5-popover, ui5-dialog:** fix finding keyboard focusable scroll containers ([#10891](https://github.com/SAP/ui5-webcomponents/issues/10891)) ([ed26b90](https://github.com/SAP/ui5-webcomponents/commit/ed26b9051ef02772d748de463b9b3084de12ebe8))
+* **ui5-popover, ui5-dialog:** fix preventDefault for before-open and before-close events ([#10883](https://github.com/SAP/ui5-webcomponents/issues/10883)) ([e32e7ba](https://github.com/SAP/ui5-webcomponents/commit/e32e7ba83e4a950a7ad4745c302cc34b57c4cb8e))
+* **ui5-text:** provide more optimal truncation for single line text ([#10794](https://github.com/SAP/ui5-webcomponents/issues/10794)) ([7e7b8ad](https://github.com/SAP/ui5-webcomponents/commit/7e7b8ad2dfa6bace21310697fac8c87f96689574))
+* **ui5-tokenizer:** fix overflow mechanism ([#10901](https://github.com/SAP/ui5-webcomponents/issues/10901)) ([febd3f9](https://github.com/SAP/ui5-webcomponents/commit/febd3f9f3dbc60e4776f19ee4003c4ec072c28b9))
+
+
+### Features
+
+* **ui5-search-field:** introduce base component ([#10922](https://github.com/SAP/ui5-webcomponents/issues/10922)) ([f4489c0](https://github.com/SAP/ui5-webcomponents/commit/f4489c0cecd8c0f2f7916b39e2183193f171f725))
+* **ui5-select:** introduced tooltip property ([#10944](https://github.com/SAP/ui5-webcomponents/issues/10944)) ([c365aa3](https://github.com/SAP/ui5-webcomponents/commit/c365aa30b5abab1fda5fc109d74ab27a676badae)), closes [#10855](https://github.com/SAP/ui5-webcomponents/issues/10855)
+* **ui5-table:** single and multi selection components added ([#10897](https://github.com/SAP/ui5-webcomponents/issues/10897)) ([f3b069c](https://github.com/SAP/ui5-webcomponents/commit/f3b069ce6931567f54e6671fb133c9a59318500b))
+* update sap/icons to v5.11 & 4.23 ([#10930](https://github.com/SAP/ui5-webcomponents/issues/10930)) ([47b5942](https://github.com/SAP/ui5-webcomponents/commit/47b59428abf9e9dbcfd6556143efe1e1046b4c3d))
+
+
+
+
+
 # [2.8.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.1...v2.8.0-rc.2) (2025-02-20)
 
 

package/cypress/specs/AvatarGroup.cy.tsx

@@ -0,0 +1,36 @@
+import Avatar from "../../src/Avatar.js";
+import AvatarGroup from "../../src/AvatarGroup.js";
+
+describe("Overflow", () => {
+	it("checks if overflow button is hiding properly", () => {
+		cy.mount(<AvatarGroup id="ag" style="width: 100px;">
+			<Avatar initials="II"></Avatar>
+			<Avatar initials="II"></Avatar>
+			<Avatar initials="II"></Avatar>
+		</AvatarGroup>);
+
+		// Store the expected hidden items to compare against
+		const expectedHiddenItems = 0;
+
+		// Check if the aria-label is correctly set
+		cy.get("#ag")
+			.as("ag")
+			.then($el => {
+				$el.get(0).innerHTML = "";
+				return $el;
+			});
+
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(200);
+
+		cy.get("@ag")
+			.then($el => {
+				const avatar = document.createElement("ui5-avatar");
+				avatar.setAttribute("initials", "II");
+				$el.get(0).appendChild(avatar);
+				const ag = document.querySelector("#ag") as AvatarGroup;
+				return ag._hiddenItems;
+			})
+			.should("equal", expectedHiddenItems);
+	});
+});

package/cypress/specs/Dialog.cy.tsx

@@ -42,3 +42,92 @@ describe("Keyboard", () => {
 			.should("be.focused");
 	});
 });
+
+describe("Events", () => {
+	it("before-open", () => {
+		cy.mount(
+			<>
+				<Dialog id="dialogId">
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="first">First group focusable</button>
+					</div>
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="second">Second group focusable</button>
+					</div>
+				</Dialog>
+			</>
+		);
+
+		cy.get("#dialogId")
+			.should("not.be.visible");
+
+		const preventDefault = (e : Event) => {
+			e.preventDefault();
+		};
+
+		cy.get("#dialogId").then($dialog => {
+			$dialog.get(0).addEventListener("before-open", preventDefault);
+		});
+
+		cy.get("#dialogId")
+			.invoke("prop", "open", true);
+
+		cy.get("#dialogId")
+			.should("not.be.visible");
+
+		cy.get("#dialogId").then($dialog => {
+			$dialog.get(0).removeEventListener("before-open", preventDefault);
+		});
+
+		cy.get("#dialogId")
+			.invoke("prop", "open", true);
+
+		cy.get("#dialogId")
+			.should("be.visible");
+	});
+
+	it("before-close", () => {
+		cy.mount(
+			<>
+				<Dialog id="dialogId">
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="first">First group focusable</button>
+					</div>
+					<div data-sap-ui-fastnavgroup="true">
+						<button id="second">Second group focusable</button>
+					</div>
+				</Dialog>
+			</>
+		);
+
+		cy.get("#dialogId")
+			.invoke("prop", "open", true);
+
+		cy.get("#dialogId")
+			.should("be.visible");
+
+		const preventDefault = (e : Event) => {
+			e.preventDefault();
+		};
+
+		cy.get("#dialogId").then($dialog => {
+			$dialog.get(0).addEventListener("before-close", preventDefault);
+		});
+
+		cy.get("#dialogId")
+			.invoke("prop", "open", false);
+
+		cy.get("#dialogId")
+			.should("be.visible");
+
+		cy.get("#dialogId").then($dialog => {
+			$dialog.get(0).removeEventListener("before-close", preventDefault);
+		});
+
+		cy.get("#dialogId")
+			.invoke("prop", "open", false);
+
+		cy.get("#dialogId")
+			.should("not.be.visible");
+	});
+});

package/cypress/specs/Input.cy.tsx

@@ -124,9 +124,178 @@ describe("Input Tests", () => {
 			.shadow()
 			.find("[ui5-li-group-header]")
 			.shadow()
-			.find("ul")
+			.find("div")
 			.should("not.have.attr", "tabindex", "0");
 	});
+
+	it("tests submit and change event order", () => {
+		cy.mount(
+			<form>
+				<Input></Input>
+			</form>
+		);
+
+		cy.get("form")
+			.as("form");
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		// spy change event
+		cy.get<Input>("@input")
+			.then($input => {
+				$input.get(0).addEventListener("change", cy.spy().as("change"));
+			});
+
+		// spy submit event and prevent it
+		cy.get("@form")
+			.then($form => {
+				$form.get(0).addEventListener("submit", e => e.preventDefault());
+				$form.get(0).addEventListener("submit", cy.spy().as("submit"));
+			});
+
+		// check if submit is triggered after change
+		cy.get<Input>("@input")
+			.shadow()
+			.find("input")
+			.type("test{enter}");
+
+		cy.get("@change").should("have.been.calledBefore", cy.get("@submit"));
+		cy.get("@submit").should("have.been.calledOnce");
+		cy.get("@change").should("have.been.calledOnce");
+	});
+
+	it("tests if pressing enter twice fires submit 2 times and change once", () => {
+		cy.mount(
+			<form>
+				<Input></Input>
+			</form>
+		);
+
+		cy.get("form")
+			.as("form");
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		// spy change event
+		cy.get<Input>("@input")
+			.then($input => {
+				$input.get(0).addEventListener("change", cy.spy().as("change"));
+			});
+
+		// spy submit event and prevent it
+		cy.get("@form")
+			.then($form => {
+				$form.get(0).addEventListener("submit", e => e.preventDefault());
+				$form.get(0).addEventListener("submit", cy.spy().as("submit"));
+			});
+
+		// check if submit is triggered after change
+		cy.get<Input>("@input")
+			.shadow()
+			.find("input")
+			.type("test{enter}{enter}");
+
+		cy.get("@change").should("have.been.calledBefore", cy.get("@submit"));
+		cy.get("@submit").should("have.been.calledTwice");
+		cy.get("@change").should("have.been.calledOnce");
+	});
+
+	it("tests if submit is fired in case of autocomplete", () => {
+		cy.mount(
+			<form>
+				<Input showSuggestions={true}>
+					<SuggestionItem text="Hello"></SuggestionItem>
+				</Input>
+			</form>
+		);
+
+		cy.get("form")
+			.as("form");
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		// spy change event
+		cy.get<Input>("@input")
+			.then($input => {
+				$input.get(0).addEventListener("change", cy.spy().as("change"));
+			});
+
+		// spy submit event and prevent it
+		cy.get("@form")
+			.then($form => {
+				$form.get(0).addEventListener("submit", e => e.preventDefault());
+				$form.get(0).addEventListener("submit", cy.spy().as("submit"));
+			});
+
+		// checks when the submit is triggered
+		cy.get<Input>("@input")
+			.shadow()
+			.find("input")
+			.as("inner");
+
+		cy.get("@inner").realClick();
+		cy.get("@inner").type("H{enter}");
+
+		cy.get("@submit").should("have.not.been.called");
+		cy.get("@change").should("have.been.calledOnce");
+
+		cy.get("@inner").realPress("Enter");
+
+		cy.get("@submit").should("have.been.calledOnce");
+		cy.get("@change").should("have.been.calledOnce");
+	});
+
+	it("tests if submit event is fired upon item selection", () => {
+		cy.mount(
+			<form>
+				<Input showSuggestions={true}>
+					<SuggestionItem text="Hello"></SuggestionItem>
+				</Input>
+			</form>
+		);
+
+		cy.get("form")
+			.as("form");
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		// spy change event
+		cy.get<Input>("@input")
+			.then($input => {
+				$input.get(0).addEventListener("change", cy.spy().as("change"));
+			});
+
+		// spy submit event and prevent it
+		cy.get("@form")
+			.then($form => {
+				$form.get(0).addEventListener("submit", e => e.preventDefault());
+				$form.get(0).addEventListener("submit", cy.spy().as("submit"));
+			});
+
+		// checks when the submit is triggered
+		cy.get<Input>("@input")
+			.shadow()
+			.find("input")
+			.as("inner");
+
+		cy.get("@inner").realClick();
+		cy.get("@inner").type("H{downArrow}{enter}");
+
+		cy.get("@submit").should("have.not.been.called");
+		cy.get("@change").should("have.been.calledOnce");
+
+		cy.get<Input>("@input")
+			.shadow()
+			.find("input")
+			.type("{enter}");
+
+		cy.get("@submit").should("have.been.calledOnce");
+		cy.get("@change").should("have.been.calledOnce");
+	});
 });
 
 describe("Input general interaction", () => {

package/cypress/specs/Link.cy.tsx

@@ -1,31 +1,216 @@
 import Link from "../../src/Link.js";
 
-describe("Main functionality", () => {
+describe("General API", () => {
+	it("render initially", () => {
+		cy.mount(<Link></Link>);
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find(".ui5-link-root")
+			.should("exist");
+	});
+
+	it("tests rel attribute", () => {
+		cy.mount(<Link href="https://www.sap.com" target="_blank"></Link>);
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find(".ui5-link-root")
+			.should("have.attr", "rel", "noreferrer noopener");
+	});
+
+	it("should wrap the text of the link", () => {
+		cy.mount(
+			<>
+				<Link style="width: 100px" id="wrapping-link">Eu enim consectetur do amet elit Lorem ipsum dolor, sit amet consectetur adipisicing elit.</Link>
+				<Link style="width: 100px" id="non-wrapping-link" wrapping-type="None">Eu enim consectetur do amet elit Lorem ipsum dolor, sit amet consectetur adipisicing elit.</Link>
+			</>
+		);
+
+		cy.get("#wrapping-link")
+			.shadow()
+			.find(".ui5-link-root")
+			.should($root => {
+				const clientHeight = $root[0].clientHeight;
+				expect(clientHeight).to.be.greaterThan(16);
+			});
+
+		cy.get("#non-wrapping-link")
+			.shadow()
+			.find(".ui5-link-root")
+			.should($root => {
+				const clientHeight = $root[0].clientHeight;
+				expect(clientHeight).to.be.eq(16);
+			});
+	});
+
 	it("clicking the link works", () => {
-		cy.mount(<Link href="#test">Click me</Link>);
+		cy.mount(<Link href="#testClick">Click me</Link>);
+
+		cy.url()
+			.should("not.include", "#testClick");
+
+		cy.get("[ui5-link]")
+			.realClick();
+
+		cy.url()
+			.should("include", "#testClick");
+	});
+
+	it("should prevent clicking on disabled link", () => {
+		cy.mount(<Link href="#testDisabled" disabled>Click me</Link>);
+
+		cy.url()
+			.should("not.include", "#testDisabled");
+
+		cy.get("[ui5-link]")
+			.realClick();
+
+		cy.url().should("not.include", "#testDisabled");
+	});
 
-		cy.url().should("not.include", "#test");
+	it("disabled link should not be enabled", () => {
+		cy.mount(<Link disabled>Click me</Link>);
 
 		cy.get("[ui5-link]")
 			.shadow()
-			.find("a")
-			.as("link")
+			.find(".ui5-link-root")
+			.should("have.attr", "aria-disabled", "true");
+	});
+
+	it("tests prevent default", () => {
+		cy.mount(<Link href="#testPreventDefault">Click me</Link>);
+
+		cy.url()
+			.should("not.include", "#testPreventDefault");
+
+		cy.get("[ui5-link]")
+			.then($link => {
+				$link.get(0).addEventListener("click", event => {
+					event.preventDefault();
+				});
+			});
+
+		cy.get("[ui5-link]")
 			.realClick();
 
-		cy.url().should("include", "#test");
+		cy.url()
+			.should("not.include", "#testPreventDefault");
 	});
-});
 
-describe("Accessibility", () => {
-	it("setting accessible-description is applied to button tag", () => {
-		cy.mount(<Link accessibleDescription="A long description."></Link>);
+	it("link renders aria-expanded attribute", () => {
+		cy.mount(<Link href="#">Click me</Link>);
 
 		cy.get("[ui5-link]")
 			.shadow()
-			.find("a")
-			.as("link");
+			.find(".ui5-link-root")
+			.as("innerLink");
+
+		cy.get<Link>("[ui5-link]")
+			.then($link => {
+				$link.get(0).accessibilityAttributes = {
+					"expanded": true,
+				};
+			});
 
-		cy.get("@link")
-			.should("have.attr", "aria-description", "A long description.");
+		cy.get("@innerLink")
+			.should("have.attr", "aria-expanded", "true");
+
+		cy.get<Link>("[ui5-link]")
+			.then($link => {
+				$link.get(0).accessibilityAttributes = {
+					"expanded": false,
+				};
+			});
+
+		cy.get("@innerLink")
+			.should("have.attr", "aria-expanded", "false");
+	});
+
+	it("link renders proper aria-haspopup attribute", () => {
+		cy.mount(<Link>Click me</Link>);
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find(".ui5-link-root")
+			.as("innerLink");
+
+		cy.get<Link>("[ui5-link]")
+			.then($link => {
+				$link.get(0).accessibilityAttributes = {
+					"hasPopup": "dialog",
+				};
+			});
+
+		cy.get("@innerLink")
+			.should("have.attr", "aria-haspopup", "dialog");
+	});
+
+	it("setting accessible-name applied on the host element is reflected on the anchor tag", () => {
+		cy.mount(<Link accessible-name="more info" tooltip="my tooltip">Click me</Link>);
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find(".ui5-link-root")
+			.should("have.attr", "aria-label", "more info");
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find(".ui5-link-root")
+			.should("have.attr", "title", "my tooltip");
+	});
+
+	it("passes special keys pressed while item clicked", () => {
+		cy.mount(<Link>Link</Link>);
+
+		cy.get("[ui5-link]")
+			.then($link => {
+				$link[0].addEventListener("click", cy.stub().as("clickHandler"));
+			});
+
+		// CTRL Key
+		cy.get("[ui5-link]")
+			.realClick({ ctrlKey: true });
+
+		cy.get("@clickHandler")
+			.should("be.calledWithMatch", { detail: { ctrlKey: true } });
+
+		// META Key
+		cy.get("[ui5-link]")
+			.realClick({ metaKey: true });
+
+		cy.get("@clickHandler")
+			.should("be.calledWithMatch", { detail: { metaKey: true } });
+
+		// ALT Key
+		cy.get("[ui5-link]")
+			.realClick({ altKey: true });
+
+		cy.get("@clickHandler")
+			.should("be.calledWithMatch", { detail: { altKey: true } });
+
+		// SHIFT Key
+		cy.get("[ui5-link]").realClick({ shiftKey: true });
+
+		cy.get("@clickHandler")
+			.should("be.calledWithMatch", { detail: { shiftKey: true } });
+	});
+
+	it("links have icons", () => {
+		cy.mount(
+			<>
+				<Link id="linkWithIcon" icon="employee">View employee profile</Link>
+				<Link id="linkWithEndIcon" end-icon="cloud">Weather today</Link>
+			</>
+		);
+		cy.get("#linkWithIcon")
+			.shadow()
+			.find("[ui5-icon]")
+			.should("exist");
+
+		cy.get("#linkWithEndIcon")
+			.shadow()
+			.find("[ui5-icon]")
+			.should("exist");
 	});
 });