refactor(ui5-side-navigation-item): remove wholeItemToggleable proper…

…ty (#9164) refactor(ui5-side-navigation-item): delete wholeItemToggleAble poperty BREAKING CHANGE: the `wholeItemToggleAble` poperty of `ui5-side-navigation-item` is now remomoved. The functionality of clicking the whole item to show/hide the sub items (if present) will be introduced soon with new property name and enhanced accessibility and keyboard handling. Related to #9057
SAP · Jun 12, 2024 · 37b2181 · 37b2181
1 parent dc3dfe0
commit 37b2181
Show file tree

Hide file tree

Showing 5 changed files with 4 additions and 38 deletions.
diff --git a/packages/fiori/src/SideNavigationItem.ts b/packages/fiori/src/SideNavigationItem.ts
@@ -72,18 +72,6 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
 	@slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
 	items!: Array<SideNavigationSubItem>;
 
-	/**
-	 * Defines whether clicking the whole item or only pressing the icon will show/hide the sub items (if present).
-	 * If set to true, clicking the whole item will toggle the sub items, and it won't fire the `click` event.
-	 * By default, only clicking the arrow icon will toggle the sub items.
-	 *
-	 * @public
-	 * @default false
-	 * @since 1.0.0-rc.11
-	 */
-	@property({ type: Boolean })
-	wholeItemToggleable!: boolean;
-
 	get overflowItems() : Array<HTMLElement> {
 		return [this];
 	}
@@ -195,15 +183,6 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
 	}
 
 	_onclick = (e: PointerEvent) => {
-		if (!this.sideNavCollapsed
-			&& this.wholeItemToggleable
-			&& e.pointerType === "mouse") {
-			e.preventDefault();
-			e.stopPropagation();
-			this.expanded = !this.expanded;
-			return;
-		}
-
 		super._onclick(e);
 	}
 

diff --git a/packages/fiori/test/pages/SideNavigation.html b/packages/fiori/test/pages/SideNavigation.html
@@ -43,7 +43,7 @@
 				<ui5-side-navigation-sub-item id="item22" text="From Other Teams" icon="employee-rejections"></ui5-side-navigation-sub-item>
 			</ui5-side-navigation-item>
 			<ui5-side-navigation-item text="Locations" icon="locate-me" selected></ui5-side-navigation-item>
-			<ui5-side-navigation-item id="item3" text="Events.............................................................." icon="calendar" whole-item-toggleable>
+			<ui5-side-navigation-item id="item3" text="Events.............................................................." icon="calendar">
 				<ui5-side-navigation-sub-item text="Local" href="https://sap.com" target="_blank"></ui5-side-navigation-sub-item>
 				<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
 			</ui5-side-navigation-item>

diff --git a/packages/fiori/test/pages/SideNavigationOnly.html b/packages/fiori/test/pages/SideNavigationOnly.html
@@ -19,7 +19,7 @@
 			<ui5-side-navigation-sub-item text="From Other Teams" icon="employee-rejections"></ui5-side-navigation-sub-item>
 		</ui5-side-navigation-item>
 		<ui5-side-navigation-item href="#locations" text="Locations" icon="locate-me" selected></ui5-side-navigation-item>
-		<ui5-side-navigation-item href="#events" expanded text="Events.............................................................." icon="calendar" whole-item-toggleable>
+		<ui5-side-navigation-item href="#events" expanded text="Events.............................................................." icon="calendar">
 			<ui5-side-navigation-sub-item href="#page1" target="_self" text="Local.............................................................."></ui5-side-navigation-sub-item>
 			<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
 		</ui5-side-navigation-item>

diff --git a/packages/fiori/test/pages/SideNavigationWithGroups.html b/packages/fiori/test/pages/SideNavigationWithGroups.html
@@ -25,7 +25,7 @@
 			</ui5-side-navigation-item>
 		</ui5-side-navigation-group>
 		<ui5-side-navigation-item href="#locations" text="Locations" icon="locate-me" ></ui5-side-navigation-item>
-		<ui5-side-navigation-item href="#events" expanded text="Events.............................................................." icon="calendar" whole-item-toggleable>
+		<ui5-side-navigation-item href="#events" expanded text="Events.............................................................." icon="calendar">
 			<ui5-side-navigation-sub-item href="#page1" target="_self" text="Local.............................................................."></ui5-side-navigation-sub-item>
 			<ui5-side-navigation-sub-item text="Others" selected></ui5-side-navigation-sub-item>
 		</ui5-side-navigation-item>

diff --git a/packages/fiori/test/specs/SideNavigation.spec.js b/packages/fiori/test/specs/SideNavigation.spec.js
@@ -6,12 +6,6 @@ async function getTreeItemsInPopover() {
 	return items;
 }
 
-async function getRenderedTreeItemsInPopover() {
-	const items = await browser.$$(`>>>#sn1 .ui5-sn-item`);
-
-	return items;
-}
-
 async function getRootItemInPopover() {
 	const rootItem = await browser.$(`>>>#sn1 ui5-responsive-popover .ui5-sn-root`);
 
@@ -63,17 +57,10 @@ describe("Component Behavior", () => {
 
 			assert.strictEqual(await input.getProperty("value"), "6", "Event is fired");
 
-			const item = await browser.$("#item3");
+			const item = await browser.$("#item2");
 			await item.scrollIntoView();
 			await item.click();
 
-			const itemRef = await item.shadow$(".ui5-sn-item");
-
-			assert.strictEqual(await input.getProperty("value"), "6", "Event is not fired");
-			assert.strictEqual(await itemRef.getAttribute("aria-expanded"), "true" ,"Expanded is toggled");
-
-			await browser.$("#item2").scrollIntoView();
-			await browser.$("#item2").click();
 			assert.strictEqual(await input.getProperty("value"), "7", "Event is fired");
 		});