@ui5/webcomponents-fiori 2.7.3 → 2.8.0-rc.1

package/CHANGELOG.md

@@ -3,17 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [2.7.3](https://github.com/SAP/ui5-webcomponents/compare/v2.7.1...v2.7.3) (2025-02-13)
+# [2.8.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.0...v2.8.0-rc.1) (2025-02-13)
 
-**Note:** Version bump only for package @ui5/webcomponents-fiori
 
+### Bug Fixes
+
+* **ui5-side-navigation:** "Space" key triggers links ([#10767](https://github.com/SAP/ui5-webcomponents/issues/10767)) ([b2ab592](https://github.com/SAP/ui5-webcomponents/commit/b2ab592418f85533fe0ce05687775c8391aa2449)), closes [#10654](https://github.com/SAP/ui5-webcomponents/issues/10654)
+* **ui5-side-navigation:** remove inappropriate exclamation mark usage ([#10769](https://github.com/SAP/ui5-webcomponents/issues/10769)) ([469cc9d](https://github.com/SAP/ui5-webcomponents/commit/469cc9d6238ce4bbc3c593f93ae7fe92bbe804df)), closes [#10714](https://github.com/SAP/ui5-webcomponents/issues/10714)
+* **ui5-upload-collection-item:** properly display deleteButton slot ([#10797](https://github.com/SAP/ui5-webcomponents/issues/10797)) ([be5ce0b](https://github.com/SAP/ui5-webcomponents/commit/be5ce0bd27839dc0fe213ff568ebd9c17d0a3cef))
 
 
 
 
-## [2.7.1](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0...v2.7.1) (2025-02-07)
 
-**Note:** Version bump only for package @ui5/webcomponents-fiori
+# [2.8.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0...v2.8.0-rc.0) (2025-02-06)
+
+
+### Bug Fixes
+
+* **ui5-flexible-column-layout:** adjust grip minimum target size ([#10743](https://github.com/SAP/ui5-webcomponents/issues/10743)) ([aa58291](https://github.com/SAP/ui5-webcomponents/commit/aa58291abd89c20c00822c2d78bed16dc32251ee)), closes [#10669](https://github.com/SAP/ui5-webcomponents/issues/10669)
+* **ui5-timeline:** enhance keyboard navigation ([#10746](https://github.com/SAP/ui5-webcomponents/issues/10746)) ([0ebc0f4](https://github.com/SAP/ui5-webcomponents/commit/0ebc0f42d3e8ed5dec44bc4a56601718f22840e3))
 
 
 

package/README.md

@@ -2,10 +2,10 @@
 
 [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents)
 
-Provides essential building blocks, necessary to implement the Fiori UX concept, 
+Provides essential building blocks, necessary to implement the Fiori UX concept,
 such as a common header (ShellBar).
 
-## Provided components 
+## Provided components
 
 | Web Component                             | Tag name                       | Module import                                                         |
 |-------------------------------------------|--------------------------------|-----------------------------------------------------------------------|
@@ -30,6 +30,7 @@ such as a common header (ShellBar).
 | Side Navigation Group                     | `ui5-side-navigation-group`    | `import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js";`      |
 | Timeline                                  | `ui5-timeline`                 | `import "@ui5/webcomponents-fiori/dist/Timeline.js";`                 |
 | Timeline Item                             | `ui5-timeline-item`            | comes with `ui5-timeline`                                             |
+| Timeline Group Item                       | `ui5-timeline-group-item`      | `import "@ui5/webcomponents-fiori/dist/TimelineGroupItem.js";`        |
 | Upload Collection                         | `ui5-upload-collection`        | `import "@ui5/webcomponents-fiori/dist/UploadCollection.js";`         |
 | Upload Collection Item                    | `ui5-upload-collection-item`   | `import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js";`     |
 | User Menu                                 | `ui5-user-menu`                | `import "@ui5/webcomponents-fiori/dist/UserMenu.js";`                 |

package/cypress/specs/SideNavigation.cy.tsx

@@ -308,6 +308,94 @@ describe("Side Navigation interaction", () => {
 		});
 	});
 
+	it("Tests link opening with mouse click", () => {
+		cy.mount(
+			<SideNavigation id="sideNav">
+				<SideNavigationItem id="item" text="1" />
+				<SideNavigationItem id="unselectableItemWithLink" text="external link" unselectable={true} href="#test"/>
+			</SideNavigation>
+		);
+
+		cy.url().should("not.include", "#test");
+
+		cy.get("#unselectableItemWithLink").realClick();
+
+		cy.url().should("include", "#test");
+
+		// Remove #test from the URL
+		cy.window().then(win => {
+			win.history.back();
+		});
+
+		cy.url().should("not.include", "#test");
+	});
+
+	it("Tests link opening with Enter", () => {
+		cy.mount(
+			<SideNavigation>
+				<SideNavigationItem id="focusStart" text="focus start" />
+				<SideNavigationItem text="external link" unselectable={true} href="#test"/>
+			</SideNavigation>
+		);
+
+		cy.url().should("not.include", "#test");
+
+		cy.get("#focusStart").realClick();
+		cy.realPress("ArrowDown");
+		cy.realPress("Enter");
+
+		cy.url().should("include", "#test");
+
+		// Remove #test from the URL
+		cy.window().then(win => {
+			win.history.back();
+		});
+
+		cy.url().should("not.include", "#test");
+	});
+
+	it("Tests link opening with Space", () => {
+		cy.mount(
+			<SideNavigation>
+				<SideNavigationItem id="focusStart" text="focus start" />
+				<SideNavigationItem id="linkItem" text="external link" unselectable={true} href="#test"/>
+			</SideNavigation>
+		);
+
+		cy.url().should("not.include", "#test");
+
+		cy.get("#focusStart").realClick();
+		cy.realPress("ArrowDown");
+		cy.realPress("Space");
+
+		cy.url().should("include", "#test");
+
+		// Remove #test from the URL
+		cy.window().then(win => {
+			win.history.back();
+		});
+
+		cy.url().should("not.include", "#test");
+
+		cy.get("#focusStart").realClick();
+		cy.realPress("ArrowDown");
+		cy.get("#linkItem").should("be.focused");
+
+		// act
+		cy.focused().trigger("keyup", {
+			key: " ",
+		});
+
+		cy.url().should("include", "#test");
+
+		// Remove #test from the URL
+		cy.window().then(win => {
+			win.history.back();
+		});
+
+		cy.url().should("not.include", "#test");
+	});
+
 	it("Tests 'selection-change' event", () => {
 		cy.mount(
 			<SideNavigation id="sideNav">

package/cypress/specs/Timeline.cy.tsx

@@ -246,18 +246,18 @@ describe("Timeline with growing mode", () => {
 			.last()
 			.should("be.focused");
 
-		cy.realPress("Tab");
+		cy.realPress("ArrowDown");
 
 		cy.get("@timeline")
 			.shadow()
 			.find("[id$='growing-btn']")
 			.should("be.focused");
 
-		cy.realPress("Tab");
+		cy.realPress("ArrowUp");
 
 		cy.get("@timeline")
 			.find("ui5-timeline-item")
-			.first()
+			.last()
 			.should("be.focused");
 	});
 });

package/cypress/specs/UploadCollection.cy.tsx

@@ -251,6 +251,19 @@ describe("UploadCollection Rendering", () => {
 		cy.get("#uc3-uploading-hidden-terminate").shadow().find("ui5-button[icon=stop]").should("not.exist");
 	});
 
+	it("Tests rendering of 'deleteButton' slot", () => {
+		cy.mount(
+			<UploadCollection id="uploadCollection">
+				<UploadCollectionItem id="item" fileName="File name">
+					<button slot="deleteButton" id="deleteButton">custom delete button</button>
+				</UploadCollectionItem>
+			</UploadCollection>
+		);
+
+		cy.get("#deleteButton").should("be.visible");
+		cy.get("#item").shadow().find(".ui5-upload-collection-deletebtn").should("not.exist");
+	});
+
 	it("Tests that 'header' and 'accessible-name' get forwarded to the inner list", () => {
 		const EXPECTED_ACC_NAME = "Uploaded (4)";
 

package/cypress/specs/UserMenu.cy.tsx

@@ -62,9 +62,10 @@ describe("Initial rendering", () => {
 					</UserMenuAccount>
 					<UserMenuAccount
 						slot="accounts"
-						avatarInitials="AC"
+						avatarSrc="./../../test/pages/img/man_avatar_1.png"
 						titleText="Alain Chevalier 2"
-						subtitleText="test.alian.chevalier@sap.com">
+						subtitleText="test.alian.chevalier@sap.com"
+						description="Delivery Manager, SAP SE">
 					</UserMenuAccount>
 				</UserMenu>
 			</>
@@ -397,6 +398,45 @@ describe("Events", () => {
 		cy.get("@changedAccount").its("args.0.0.detail.selectedAccount").should("have.property", "titleText", "Alain Chevalier 2");
 	});
 
+	it("tests change-account event prevented", () => {
+		cy.mount(
+			<>
+				<Button id="openUserMenuBtn">Open User Menu</Button>
+				<UserMenu open={true} opener="openUserMenuBtn" showOtherAccounts={true}>
+					<UserMenuAccount slot="accounts" titleText="Alain Chevalier 1" avatarSrc="./../../test/pages/img/man_avatar_1.png"></UserMenuAccount>
+					<UserMenuAccount slot="accounts" titleText="Alain Chevalier 2"></UserMenuAccount>
+				</UserMenu>
+			</>
+		);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu")
+			.shadow()
+			.find("[ui5-panel]")
+			.as("otherAccounts");
+
+		cy.get("@userMenu").then($userMenu => {
+			$userMenu.get(0).addEventListener("change-account", e => e.preventDefault());
+			$userMenu.get(0).addEventListener("change-account", cy.stub().as("changedAccount"));
+		});
+
+		cy.get("@otherAccounts")
+			.shadow()
+			.find("[ui5-button]")
+			.click();
+
+		cy.get("@otherAccounts")
+			.find("[ui5-li-custom]")
+			.realClick();
+
+		cy.get("@userMenu").shadow().find("[ui5-avatar]").first()
+			.as("avatar");
+		cy.get("@avatar").should("exist");
+		cy.get("@avatar").find("img").as("image");
+		cy.get("@image").should("have.length", 1);
+		cy.get("@image").should("have.attr", "src", "./../../test/pages/img/man_avatar_1.png");
+		cy.get("@avatar").should("have.class", "ui5-pm--selected-account-avatar");
+	});
+
 	it("tests item-click event", () => {
 		cy.mount(
 			<>
@@ -422,6 +462,59 @@ describe("Events", () => {
 		cy.get("@clicked").its("args.0.0.detail.item").should("have.property", "text", "Setting");
 	});
 
+	it("tests item-click sub menu event", () => {
+		cy.mount(
+			<>
+				<Button id="openUserMenuBtn">Open User Menu</Button>
+				<UserMenu open={true} opener="openUserMenuBtn">
+					<UserMenuItem text="Setting" data-id="setting">
+						<UserMenuItem text="Sub-Setting" data-id="sub-setting"></UserMenuItem>
+					</UserMenuItem>
+				</UserMenu>
+			</>
+		);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu")
+			.find("[ui5-user-menu-item]")
+			.as("userMenuItem");
+
+		cy.get("@userMenu")
+			.then($userMenu => {
+				$userMenu.get(0).addEventListener("item-click", cy.stub().as("clicked"));
+			});
+
+		cy.get("@userMenuItem").first().click();
+
+		cy.get("@clicked").should("have.not.been.called");
+	});
+
+	it("tests item-click sub menu event", () => {
+		cy.mount(
+			<>
+				<Button id="openUserMenuBtn">Open User Menu</Button>
+				<UserMenu open={true} opener="openUserMenuBtn">
+					<UserMenuItem text="Setting" data-id="setting">
+						<UserMenuItem text="Sub-Setting" data-id="sub-setting"></UserMenuItem>
+					</UserMenuItem>
+				</UserMenu>
+			</>
+		);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu")
+			.find("[ui5-user-menu-item]")
+			.as("userMenuItem");
+
+		cy.get("@userMenu")
+			.then($userMenu => {
+				$userMenu.get(0).addEventListener("item-click", cy.stub().as("clicked"));
+			});
+
+		cy.get("@userMenuItem").first().click();
+		cy.get("@userMenuItem").first().click();
+
+		cy.get("@clicked").should("have.not.been.called");
+	});
+
 	it("tests sign-out-click event", () => {
 		cy.mount(
 			<>
@@ -442,6 +535,27 @@ describe("Events", () => {
 		cy.get("@clicked").should("have.been.calledOnce");
 	});
 
+	it("tests sign-out-click event prevented", () => {
+		cy.mount(
+			<>
+				<Button id="openUserMenuBtn">Open User Menu</Button>
+				<UserMenu open={true} opener="openUserMenuBtn"></UserMenu>
+			</>
+		);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu").shadow().find("[ui5-button]").as("signOutBtn");
+
+		cy.get("@userMenu")
+			.then($userMenu => {
+				$userMenu.get(0).addEventListener("sign-out-click", e => e.preventDefault());
+				$userMenu.get(0).addEventListener("sign-out-click", cy.stub().as("clicked"));
+			});
+
+		cy.get("@signOutBtn").click();
+
+		cy.get("@userMenu").should("have.attr", "open");
+	});
+
 	it("tests open event", () => {
 		cy.mount(
 			<>
@@ -497,7 +611,10 @@ describe("Responsiveness", () => {
 		cy.mount(
 			<>
 				<Button id="openUserMenuBtn">Open User Menu</Button>
-				<UserMenu id="userMenuShellBar" open={true} opener="openUserMenuBtn">
+				<UserMenu id="userMenuShellBar" open={true}
+					opener="openUserMenuBtn"
+					showManageAccount={true}
+					showAddAccount={true}>
 					<UserMenuAccount slot="accounts" titleText="Alain Chevalier 1"></UserMenuAccount>
 					<UserMenuItem text="Setting1" data-id="setting1"></UserMenuItem>
 				</UserMenu>

package/cypress/specs/ViewSettingsDialog.cy.tsx

@@ -12,9 +12,6 @@ describe("View settings dialog - selection", () => {
 			</ViewSettingsDialog>
 		);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(100); // Wait after mounting the component temporarily, until the component is fully rendered TODO: remove this after the issue is fixed
-
 		// Open the dialog and wait until it's visible
 		cy.get("[ui5-view-settings-dialog]")
 			.as("vsd")
@@ -105,9 +102,6 @@ describe("View settings dialog - selection", () => {
 			</ViewSettingsDialog>
 		);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(100); // Wait after mounting the component temporarily, until the component is fully rendered TODO: remove this after the issue is fixed
-
 		// Open the dialog and wait until it's visible
 		cy.get("[ui5-view-settings-dialog]")
 			.as("vsd")