From 99afac986f1ddf45cc6d0486306cdac246f8764a Mon Sep 17 00:00:00 2001
From: Jian Liao <jian.liao@gmail.com>
Date: Fri, 3 Mar 2023 10:46:53 -0800
Subject: [PATCH] feat: implement #2964 for sidenav component

---
 packages/sidenav/src/SidenavItem.ts         | 10 ---
 packages/sidenav/stories/sidenav.stories.ts |  4 +-
 packages/sidenav/test/sidenav-item.test.ts  | 92 ---------------------
 3 files changed, 2 insertions(+), 104 deletions(-)

diff --git a/packages/sidenav/src/SidenavItem.ts b/packages/sidenav/src/SidenavItem.ts
index d388d986c3..98ca5109d9 100644
--- a/packages/sidenav/src/SidenavItem.ts
+++ b/packages/sidenav/src/SidenavItem.ts
@@ -166,16 +166,6 @@ export class SideNavItem extends LikeAnchor(Focusable) {
             parentSideNav.startTrackingSelectionForItem(this);
             this.selected =
                 this.value != null && this.value === parentSideNav.value;
-            if (
-                this.selected === true &&
-                parentSideNav.variant === 'multilevel'
-            ) {
-                let element = this.parentElement;
-                while (element instanceof SideNavItem) {
-                    element.expanded = true;
-                    element = element.parentElement;
-                }
-            }
         }
     }
 
diff --git a/packages/sidenav/stories/sidenav.stories.ts b/packages/sidenav/stories/sidenav.stories.ts
index 43e324d1e9..fe6bc17b1b 100644
--- a/packages/sidenav/stories/sidenav.stories.ts
+++ b/packages/sidenav/stories/sidenav.stories.ts
@@ -61,10 +61,10 @@ export const Multilevel = ({
     return html`
         <sp-sidenav variant="multilevel" value="2.3.1" @change=${onChange}>
             <sp-sidenav-item value="foo" label="foo"></sp-sidenav-item>
-            <sp-sidenav-item value="baz" label="baz">
+            <sp-sidenav-item value="baz" label="baz" expanded>
                 <sp-sidenav-item value="2.1" label="2.1"></sp-sidenav-item>
                 <sp-sidenav-item value="2.2" label="2.2"></sp-sidenav-item>
-                <sp-sidenav-item value="2.3" label="2.3">
+                <sp-sidenav-item value="2.3" label="2.3" expanded>
                     <sp-sidenav-item
                         value="2.3.1"
                         label="2.3.1"
diff --git a/packages/sidenav/test/sidenav-item.test.ts b/packages/sidenav/test/sidenav-item.test.ts
index e53dd35852..5b8372ec6c 100644
--- a/packages/sidenav/test/sidenav-item.test.ts
+++ b/packages/sidenav/test/sidenav-item.test.ts
@@ -130,96 +130,4 @@ describe('Sidenav Item', () => {
         expect(otherItem.focusElement.hasAttribute('aria-current'), 'other').to
             .be.false;
     });
-
-    it('automatically expand parent items in multilevel mode', async () => {
-        const el = await fixture<SideNavItem>(
-            html`
-                <sp-sidenav variant="multilevel" value="2.3.1">
-                    <sp-sidenav-item value="foo" label="foo"></sp-sidenav-item>
-                    <sp-sidenav-item value="baz" label="baz">
-                        <sp-sidenav-item
-                            value="2.1"
-                            label="2.1"
-                        ></sp-sidenav-item>
-                        <sp-sidenav-item
-                            value="2.2"
-                            label="2.2"
-                        ></sp-sidenav-item>
-                        <sp-sidenav-item value="2.3" label="2.3">
-                            <sp-sidenav-item
-                                value="2.3.1"
-                                label="2.3.1"
-                            ></sp-sidenav-item>
-                            <sp-sidenav-item
-                                disabled
-                                value="2.3.2"
-                                label="2.3.2"
-                            ></sp-sidenav-item>
-                        </sp-sidenav-item>
-                    </sp-sidenav-item>
-                    <sp-sidenav-item
-                        value="test"
-                        label="test"
-                    ></sp-sidenav-item>
-                    <sp-sidenav-item value="hi" label="hi"></sp-sidenav-item>
-                </sp-sidenav>
-            `
-        );
-
-        await elementUpdated(el);
-
-        const sideNavItem_foo = el.querySelector(
-            'sp-sidenav-item[label="foo"]'
-        ) as SideNavItem;
-        const sideNavItem_baz = el.querySelector(
-            'sp-sidenav-item[label="baz"]'
-        ) as SideNavItem;
-        const sideNavItem_test = el.querySelector(
-            'sp-sidenav-item[label="test"]'
-        ) as SideNavItem;
-        const sideNavItem_hi = el.querySelector(
-            'sp-sidenav-item[label="hi"]'
-        ) as SideNavItem;
-
-        await elementUpdated(sideNavItem_foo);
-        await elementUpdated(sideNavItem_baz);
-        await elementUpdated(sideNavItem_test);
-        await elementUpdated(sideNavItem_hi);
-
-        expect(sideNavItem_foo.hasAttribute('expanded')).to.be.false;
-        expect(sideNavItem_baz.hasAttribute('expanded')).to.be.true;
-        expect(sideNavItem_test.hasAttribute('expanded')).to.be.false;
-        expect(sideNavItem_hi.hasAttribute('expanded')).to.be.false;
-
-        const sideNavItem_2_1 = sideNavItem_baz.querySelector(
-            'sp-sidenav-item[label="2.1"]'
-        ) as SideNavItem;
-        const sideNavItem_2_2 = sideNavItem_baz.querySelector(
-            'sp-sidenav-item[label="2.2"]'
-        ) as SideNavItem;
-        const sideNavItem_2_3 = sideNavItem_baz.querySelector(
-            'sp-sidenav-item[label="2.3"]'
-        ) as SideNavItem;
-
-        await elementUpdated(sideNavItem_2_1);
-        await elementUpdated(sideNavItem_2_2);
-        await elementUpdated(sideNavItem_2_3);
-
-        expect(sideNavItem_2_1.hasAttribute('expanded')).to.be.false;
-        expect(sideNavItem_2_2.hasAttribute('expanded')).to.be.false;
-        expect(sideNavItem_2_3.hasAttribute('expanded')).to.be.true;
-
-        const sideNavItem_2_3_1 = sideNavItem_2_3.querySelector(
-            'sp-sidenav-item[label="2.3.1"]'
-        ) as SideNavItem;
-        const sideNavItem_2_3_2 = sideNavItem_2_3.querySelector(
-            'sp-sidenav-item[label="2.3.2"]'
-        ) as SideNavItem;
-
-        await elementUpdated(sideNavItem_2_3_1);
-        await elementUpdated(sideNavItem_2_3_2);
-
-        expect(sideNavItem_2_3_1.hasAttribute('selected')).to.be.true;
-        expect(sideNavItem_2_3_2.hasAttribute('selected')).to.be.false;
-    });
 });