@ui5/webcomponents-fiori 2.10.0 → 2.11.0-rc.1

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.11.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.11.0-rc.0...v2.11.0-rc.1) (2025-05-15)
+
+
+### Bug Fixes
+
+* **ui5-side-navigation:** disabled groups no longer interactive ([#11404](https://github.com/SAP/ui5-webcomponents/issues/11404)) ([8ec71e3](https://github.com/SAP/ui5-webcomponents/commit/8ec71e372f5397a585068b83d652491ec5746243)), closes [#11384](https://github.com/SAP/ui5-webcomponents/issues/11384)
+* **ui5-side-navigation:** group as first item works without error ([#11406](https://github.com/SAP/ui5-webcomponents/issues/11406)) ([0ffbede](https://github.com/SAP/ui5-webcomponents/commit/0ffbedecf962d319e5fb1a9fb495676dbe7a1c47)), closes [#11383](https://github.com/SAP/ui5-webcomponents/issues/11383)
+* **ui5-upload-collection:** fix file name width ([#11484](https://github.com/SAP/ui5-webcomponents/issues/11484)) ([62a4094](https://github.com/SAP/ui5-webcomponents/commit/62a4094e4842a7687bb17bd92b820dcc4a930023)), closes [#11463](https://github.com/SAP/ui5-webcomponents/issues/11463)
+
+
+
+
+
+# [2.11.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.10.0...v2.11.0-rc.0) (2025-05-08)
+
+**Note:** Version bump only for package @ui5/webcomponents-fiori
+
+
+
+
+
 # [2.10.0](https://github.com/SAP/ui5-webcomponents/compare/v2.10.0-rc.3...v2.10.0) (2025-05-07)
 
 

package/cypress/specs/ShellBar.cy.tsx

@@ -11,7 +11,7 @@ import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
 import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
 import Avatar from "@ui5/webcomponents/dist/Avatar.js";
 import Switch from "@ui5/webcomponents/dist/Switch.js";
-import Search from "../../src/Search.js";
+import ShellBarSearch from "../../src/ShellBarSearch.js";
 
 const RESIZE_THROTTLE_RATE = 300; // ms
 
@@ -454,7 +454,7 @@ describe("Slots", () => {
 		it("Test search button is not visible when a self-collapsible search field slot is empty", () => {
 			cy.mount(
 				<ShellBar id="shellbar">
-					<Search slot="searchField"></Search>
+					<ShellBarSearch slot="searchField"></ShellBarSearch>
 				</ShellBar>
 			);
 			cy.get("#shellbar")
@@ -466,7 +466,7 @@ describe("Slots", () => {
 		it("Test self-collapsible search is expanded and collapsed by the show-search-field property", () => {
 			cy.mount(
 				<ShellBar id="shellbar" showSearchField={true}>
-					<Search id="search" slot="searchField"></Search>
+					<ShellBarSearch id="search" slot="searchField"></ShellBarSearch>
 				</ShellBar>
 			);
 			cy.get("#search").should("have.prop", "collapsed", false);
@@ -474,24 +474,28 @@ describe("Slots", () => {
 			cy.get("#search").should("have.prop", "collapsed", true);
 		});
 
-
-		it("Test showSearchField property is true when using expanded search field", () => {
+		it("Test showSearchField property is false when using collapsed search field", () => {
 			cy.mount(
 				<ShellBar id="shellbar">
-					<Search id="search" slot="searchField"></Search>
+					<ShellBarSearch id="search" slot="searchField" collapsed></ShellBarSearch>
 				</ShellBar>
 			);
-			cy.get("#search").should("have.prop", "collapsed", false);
-			cy.get("#shellbar").invoke("prop", "showSearchField").should("equal", true);
+			cy.get("#search").should("have.prop", "collapsed", true);
+			cy.get("#shellbar").invoke("prop", "showSearchField").should("equal", false);
 		});
 
-		it("Test showSearchField property is false when using collapsed search field", () => {
+		it("Test search field is collapsed initially instead of being displayed in full width mode", () => {
+			cy.viewport(500, 1080);
 			cy.mount(
-				<ShellBar id="shellbar">
-					<Search id="search" slot="searchField" collapsed></Search>
+				// needs some content to trigger the full width mode
+				<ShellBar id="shellbar" showSearchField={true} showNotifications={true} showProductSwitch={true}>
+					<Button icon={navBack} slot="startButton"></Button>
+					<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
+					<Button slot="content">Start Button 1</Button>
+
+					<Input id="search" slot="searchField"></Input>
 				</ShellBar>
 			);
-			cy.get("#search").should("have.prop", "collapsed", true);
 			cy.get("#shellbar").invoke("prop", "showSearchField").should("equal", false);
 		});
 	});

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

@@ -0,0 +1,28 @@
+import ShellBar from "../../src/ShellBar.js";
+import ShellBarSearch from "../../src/ShellBarSearch.js";
+
+describe("Mobile Behaviour", () => {
+	beforeEach(() => {
+		cy.ui5SimulateDevice();
+	});
+
+	it("Test self-collapsible search is expanded and collapsed by the show-search-field property", () => {
+		cy.mount(
+			<ShellBar id="shellbar" showSearchField={true}>
+				<ShellBarSearch id="search" slot="searchField"></ShellBarSearch>
+			</ShellBar>
+		);
+
+		cy.get("#search").should("have.prop", "open", true);
+	});
+
+	it("Test shellbar should have show-search-field when search is open", () => {
+		cy.mount(
+			<ShellBar id="shellbar">
+				<ShellBarSearch id="search" slot="searchField" open={true}></ShellBarSearch>
+			</ShellBar>
+		);
+
+		cy.get("#shellbar").should("have.prop", "showSearchField", true);
+	});
+});

package/cypress/specs/SideNavigation.cy.tsx

@@ -866,6 +866,28 @@ describe("Side Navigation Accessibility", () => {
 			.find(".ui5-sn-item-ul")
 			.should("have.attr", "role", "group");
 	});
+
+	it("Tests Primary and Footer Navigation Lists accessibility", () => {
+		cy.mount(
+			<SideNavigation id="sn">
+				<SideNavigationItem text="Home"></SideNavigationItem>
+				<SideNavigationItem text="1" />
+				<SideNavigationItem slot="fixedItems" text="2" />
+				<SideNavigationItem slot="fixedItems" text="3" />
+			</SideNavigation>
+		);
+
+		// assert
+		cy.get("#sn")
+			.shadow()
+			.find(".ui5-sn-flexible")
+			.should("have.attr", "aria-label", "Primary Navigation Menu");
+
+			cy.get("#sn")
+			.shadow()
+			.find(".ui5-sn-fixed")
+			.should("have.attr", "aria-label", "Footer Navigation Menu");
+	});
 });
 
 describe("Focusable items", () => {

package/cypress/specs/SideNavigationWithGroups.cy.tsx

@@ -3,10 +3,11 @@ import SideNavigationGroup from "../../src/SideNavigationGroup.js";
 import SideNavigationItem from "../../src/SideNavigationItem.js";
 
 describe("Component Behavior", () => {
-	describe("Main functionality", async () => {
-		it("rendering", async () => {
+	describe("Main functionality", () => {
+		it("rendering", () => {
 			cy.mount(
 				<SideNavigation style="height: 90vh; " id="sn1" collapsed={false}>
+					<SideNavigationItem text="Item" />
 					<SideNavigationGroup id="group1" expanded text="Group">
 						<SideNavigationItem text="Home 1"
 							icon="home"
@@ -28,15 +29,56 @@ describe("Component Behavior", () => {
 				.should("not.exist");
 		});
 
-		it("collapse/expand", async () => {
+		it("Tests that visualization is correct when two groups are next to each other", async () => {
+			cy.mount(
+				<SideNavigation id="sn1" collapsed={false}>
+					<SideNavigationGroup id="group1" text="Group 1">
+						<SideNavigationItem text="Item 1.1" icon="group"></SideNavigationItem>
+					</SideNavigationGroup>
+					<SideNavigationGroup id="group2" text="Group 2">
+						<SideNavigationItem text="Item 2.1" icon="locate-me" selected></SideNavigationItem>
+					</SideNavigationGroup>
+					<SideNavigationItem text="Item" icon="locate-me"></SideNavigationItem>
+					<SideNavigationGroup id="group3" text="Group 3">
+						<SideNavigationItem text="Item 3.1" icon="locate-me"></SideNavigationItem>
+					</SideNavigationGroup>
+				</SideNavigation>	
+			);
+		
+			cy.get("#group2")
+				.should("have.prop", "belowGroup", true);
+
+			cy.get("#group2")
+				.shadow()
+				.find(".ui5-sn-item-separator").eq(0)
+				.should("not.be.visible");
+
+			cy.get("#group3")
+				.should("have.prop", "belowGroup", false);
+			
+			cy.get("#group3")
+				.shadow()
+				.find(".ui5-sn-item-separator").eq(0)
+				.should("be.visible");
+		});
+
+		it("collapse/expand", () => {
 			cy.mount(
 				<SideNavigation style="height: 90vh; " id="sn1">
+					<SideNavigationItem text="Item" />
 					<SideNavigationGroup id="group1" expanded text="Group">
 						<SideNavigationItem text="Home 1"
 							icon="home"
 							href="#home"
 							title="Home tooltip" />
 					</SideNavigationGroup>
+					<SideNavigationItem text="Item" />
+					<SideNavigationGroup id="group2" disabled text="Group">
+						<SideNavigationItem text="Home 2"
+							icon="home"
+							href="#home"
+							title="Home tooltip" />
+					</SideNavigationGroup>
 				</SideNavigation>);
 
 			cy.get("#group1").should("have.prop", "expanded", true);
@@ -45,13 +87,42 @@ describe("Component Behavior", () => {
 				.shadow()
 				.find(".ui5-sn-item")
 				.realClick();
-			cy.get("#group1").should("not.have.prop", "expanded");
+			cy.get("#group1").should("have.prop", "expanded", false);
 
 			cy.get("#group1")
 				.shadow()
 				.find(".ui5-sn-item")
 				.realClick();
 			cy.get("#group1").should("have.prop", "expanded", true);
+
+			cy.get("#group2")
+				.shadow()
+				.find(".ui5-sn-item")
+				.realClick();
+			cy.get("#group2").should("have.prop", "expanded", false);
+		});
+
+		it("disabled", () => {
+			cy.mount(
+				<SideNavigation style="height: 90vh; " id="sn1">
+					<SideNavigationItem text="Item" />
+					<SideNavigationGroup id="group1" expanded text="Group 1">
+						<SideNavigationItem text="Home 1" />
+						<SideNavigationItem disabled text="Home 1" />
+					</SideNavigationGroup>
+				</SideNavigation>);
+
+			cy.get("#group1").should("not.have.attr", "disabled");
+			cy.get("#group1").invoke("prop", "disabled", true);
+			cy.get("#group1").should("have.attr", "disabled");
+			
+			cy.get("#group1").then(($group) => {
+				const group = $group[0] as SideNavigationGroup;
+				cy.wrap(group.items).each((item: SideNavigationItem) => {
+					cy.wrap(item).should("have.prop", "disabled", true);
+				});
+			});
 		});
+		
 	});
 });