fix(sidenav): reintroduce support for slotted label content

adobe · Aug 31, 2023 · 26c7e6e · 26c7e6e
1 parent 5f8725e
commit 26c7e6e
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/packages/sidenav/src/SidenavItem.ts b/packages/sidenav/src/SidenavItem.ts
@@ -138,8 +138,10 @@ export class SideNavItem extends LikeAnchor(Focusable) {
                 )}
             >
                 <slot name="icon"></slot>
-
-                <span id="link-text">${this.label}</span>
+                <span id="link-text">
+                    ${this.label}
+                    <slot></slot>
+                </span>
             </a>
             ${this.expanded
                 ? html`

diff --git a/packages/sidenav/stories/sidenav.stories.ts b/packages/sidenav/stories/sidenav.stories.ts
@@ -84,6 +84,34 @@ export const Multilevel = ({
 
 Multilevel.storyName = 'Multi-level';
 
+export const MultilevelSlotted = ({
+    onChange,
+}: {
+    onChange: () => void;
+}): TemplateResult => {
+    return html`
+        <sp-sidenav variant="multilevel" value="2.3.1" @change=${onChange}>
+            <sp-sidenav-item value="foo">foo</sp-sidenav-item>
+            <sp-sidenav-item value="baz">
+                baz
+                <sp-sidenav-item value="2.1">2.1</sp-sidenav-item>
+                <sp-sidenav-item value="2.2">2.2</sp-sidenav-item>
+                <sp-sidenav-item value="2.3">
+                    2.3
+                    <sp-sidenav-item value="2.3.1">2.3.1</sp-sidenav-item>
+                    <sp-sidenav-item disabled value="2.3.2">
+                        2.3.2
+                    </sp-sidenav-item>
+                </sp-sidenav-item>
+            </sp-sidenav-item>
+            <sp-sidenav-item value="test">test</sp-sidenav-item>
+            <sp-sidenav-item value="hi">hi</sp-sidenav-item>
+        </sp-sidenav>
+    `;
+};
+
+MultilevelSlotted.storyName = 'Multi-level Slotted';
+
 export const levelsAndDisabled = (): TemplateResult => {
     return html`
         <sp-sidenav>