From 783963d63245a804acad078b96a21613ff932164 Mon Sep 17 00:00:00 2001 From: Siyana Todorova Date: Thu, 24 Apr 2025 10:54:52 +0300 Subject: [PATCH 1/4] fix(ui5-side-navigation): disabled groups no longer interactive fixes: #11384 --- .../specs/SideNavigationWithGroups.cy.tsx | 24 ++- packages/fiori/src/SideNavigationGroup.ts | 4 +- packages/fiori/test/pages/SideNavigation.html | 146 +++--------------- 3 files changed, 43 insertions(+), 131 deletions(-) diff --git a/packages/fiori/cypress/specs/SideNavigationWithGroups.cy.tsx b/packages/fiori/cypress/specs/SideNavigationWithGroups.cy.tsx index e318ff969993..e54c4283e911 100644 --- a/packages/fiori/cypress/specs/SideNavigationWithGroups.cy.tsx +++ b/packages/fiori/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( + { .should("not.exist"); }); - it("collapse/expand", async () => { + it("collapse/expand", () => { cy.mount( + + + + + ); cy.get("#group1").should("have.prop", "expanded", true); @@ -45,13 +54,20 @@ 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("not.have.prop", "expanded"); }); + }); }); diff --git a/packages/fiori/src/SideNavigationGroup.ts b/packages/fiori/src/SideNavigationGroup.ts index 14331cde27de..8c82190b2791 100644 --- a/packages/fiori/src/SideNavigationGroup.ts +++ b/packages/fiori/src/SideNavigationGroup.ts @@ -161,7 +161,9 @@ class SideNavigationGroup extends SideNavigationItemBase { } _toggle() { - this.expanded = !this.expanded; + if (!this.disabled) { + this.expanded = !this.expanded; + } } get isSideNavigationGroup() { diff --git a/packages/fiori/test/pages/SideNavigation.html b/packages/fiori/test/pages/SideNavigation.html index 3cd42eb583b5..88669792a88e 100644 --- a/packages/fiori/test/pages/SideNavigation.html +++ b/packages/fiori/test/pages/SideNavigation.html @@ -14,138 +14,32 @@ - - - - - -
- - - -
- - - - -
- William Brown - UX expert -
- - - - - - + + + + + + + + - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- selection-change event - -
-
- click event - -
-
- prevent selection-change event - -
-
- ensure overflow - -
-
- Compact Density - -
-
-
+ + + + + + + + From 5263b63abc2233401b007c75d6866d5a76031988 Mon Sep 17 00:00:00 2001 From: Siyana Todorova Date: Thu, 24 Apr 2025 10:59:18 +0300 Subject: [PATCH 2/4] chore: restore test page --- packages/fiori/test/pages/SideNavigation.html | 146 +++++++++++++++--- 1 file changed, 126 insertions(+), 20 deletions(-) diff --git a/packages/fiori/test/pages/SideNavigation.html b/packages/fiori/test/pages/SideNavigation.html index 88669792a88e..3cd42eb583b5 100644 --- a/packages/fiori/test/pages/SideNavigation.html +++ b/packages/fiori/test/pages/SideNavigation.html @@ -14,32 +14,138 @@ - - - - - - + + + + + +
+ + + +
+ + + + +
+ William Brown + UX expert +
+ + + + + + - - - - - + + - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ selection-change event + +
+
+ click event + +
+
+ prevent selection-change event + +
+
+ ensure overflow + +
+
+ Compact Density + +
+
+
From 780283c3e9f30a2818405b35c0c55c88a6cf2cbc Mon Sep 17 00:00:00 2001 From: Siyana Todorova Date: Thu, 24 Apr 2025 12:38:06 +0300 Subject: [PATCH 3/4] chore: fix test assertion --- packages/fiori/cypress/specs/SideNavigationWithGroups.cy.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fiori/cypress/specs/SideNavigationWithGroups.cy.tsx b/packages/fiori/cypress/specs/SideNavigationWithGroups.cy.tsx index e54c4283e911..2b5220cff236 100644 --- a/packages/fiori/cypress/specs/SideNavigationWithGroups.cy.tsx +++ b/packages/fiori/cypress/specs/SideNavigationWithGroups.cy.tsx @@ -66,7 +66,7 @@ describe("Component Behavior", () => { .shadow() .find(".ui5-sn-item") .realClick(); - cy.get("#group2").should("not.have.prop", "expanded"); + cy.get("#group2").should("have.prop", "expanded", false); }); }); From a4ee1de57ff6b1ef1a5505cd0fc332c122ba95e4 Mon Sep 17 00:00:00 2001 From: Siyana Todorova Date: Mon, 28 Apr 2025 12:32:45 +0300 Subject: [PATCH 4/4] chore: ensure child items are also disabled --- .../specs/SideNavigationWithGroups.cy.tsx | 22 +++++++++++++++++++ packages/fiori/src/SideNavigationGroup.ts | 22 +++++++++++++++++++ .../test/pages/SideNavigationWithGroups.html | 5 +++++ 3 files changed, 49 insertions(+) diff --git a/packages/fiori/cypress/specs/SideNavigationWithGroups.cy.tsx b/packages/fiori/cypress/specs/SideNavigationWithGroups.cy.tsx index 2b5220cff236..c6582e0cb8c6 100644 --- a/packages/fiori/cypress/specs/SideNavigationWithGroups.cy.tsx +++ b/packages/fiori/cypress/specs/SideNavigationWithGroups.cy.tsx @@ -68,6 +68,28 @@ describe("Component Behavior", () => { .realClick(); cy.get("#group2").should("have.prop", "expanded", false); }); + + it("disabled", () => { + cy.mount( + + + + + + + ); + + 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); + }); + }); + }); }); }); diff --git a/packages/fiori/src/SideNavigationGroup.ts b/packages/fiori/src/SideNavigationGroup.ts index 8c82190b2791..45da0c71c325 100644 --- a/packages/fiori/src/SideNavigationGroup.ts +++ b/packages/fiori/src/SideNavigationGroup.ts @@ -69,6 +69,28 @@ class SideNavigationGroup extends SideNavigationItemBase { @i18n("@ui5/webcomponents-fiori") static i18nBundle: I18nBundle; + _initialChildDisabledStates: Map = new Map(); + + onBeforeRendering() { + this.allItems.forEach(item => { + if (!this._initialChildDisabledStates.has(item)) { + this._initialChildDisabledStates.set(item, item.disabled); + } + }); + + this._updateChildItemsDisabledState(); + } + + _updateChildItemsDisabledState() { + this.allItems.forEach(item => { + if (this.disabled) { + item.disabled = true; + } else { + item.disabled = this._initialChildDisabledStates.get(item)!; + } + }); + } + get overflowItems() : Array { const separator1 = this.shadowRoot!.querySelector(".ui5-sn-item-separator:first-child")!; const separator2 = this.shadowRoot!.querySelector(".ui5-sn-item-separator:last-child")!; diff --git a/packages/fiori/test/pages/SideNavigationWithGroups.html b/packages/fiori/test/pages/SideNavigationWithGroups.html index 6dcf3c80f912..5606ff0708cd 100644 --- a/packages/fiori/test/pages/SideNavigationWithGroups.html +++ b/packages/fiori/test/pages/SideNavigationWithGroups.html @@ -104,6 +104,7 @@
+
Change width @@ -124,6 +125,10 @@ document.body.classList.toggle("ui5-content-density-compact", e.target.checked); }); + document.getElementById("disable").addEventListener("change", e => { + document.getElementById("group1").toggleAttribute("disabled", e.target.checked); + }); + slider.addEventListener("ui5-input", function (event) { sn1.style.width = event.target.value + 'px'; });