From f019ac37fe07da0a0a75821ce955dc6c6cbdc3c9 Mon Sep 17 00:00:00 2001
From: Andrew Jakubowicz <ajakubowicz@google.com>
Date: Thu, 7 Sep 2023 16:51:24 -0700
Subject: [PATCH] fix(navigationtab)!: change slot names activeIcon and
 inactiveIcon to active-icon and inactive-icon

PiperOrigin-RevId: 563583060
---
 labs/navigationbar/demo/stories.ts            | 16 ++++-----
 labs/navigationtab/internal/navigation-tab.ts |  4 +--
 labs/navigationtab/md-navigation-tab_test.ts  | 36 +++++++++----------
 3 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/labs/navigationbar/demo/stories.ts b/labs/navigationbar/demo/stories.ts
index b99514434..7c1f40210 100644
--- a/labs/navigationbar/demo/stories.ts
+++ b/labs/navigationbar/demo/stories.ts
@@ -39,32 +39,32 @@ const standard: MaterialStoryInit<StoryKnobs> = {
               .label=${label}
               .showBadge=${showBadge}
               .badgeValue=${badgeValue}>
-            <md-icon slot="activeIcon">${knobs['active icon']}</md-icon>
-            <md-icon slot="inactiveIcon">${knobs['inactive icon']}</md-icon>
+            <md-icon slot="active-icon">${knobs['active icon']}</md-icon>
+            <md-icon slot="inactive-icon">${knobs['inactive icon']}</md-icon>
           </md-navigation-tab>
 
           <md-navigation-tab
               .label=${label}
               .showBadge=${showBadge}
               .badgeValue=${badgeValue}>
-            <md-icon slot="activeIcon">${knobs['active icon']}</md-icon>
-            <md-icon slot="inactiveIcon">${knobs['inactive icon']}</md-icon>
+            <md-icon slot="active-icon">${knobs['active icon']}</md-icon>
+            <md-icon slot="inactive-icon">${knobs['inactive icon']}</md-icon>
           </md-navigation-tab>
 
           <md-navigation-tab
               .label=${label}
               .showBadge=${showBadge}
               .badgeValue=${badgeValue}>
-            <md-icon slot="activeIcon">${knobs['active icon']}</md-icon>
-            <md-icon slot="inactiveIcon">${knobs['inactive icon']}</md-icon>
+            <md-icon slot="active-icon">${knobs['active icon']}</md-icon>
+            <md-icon slot="inactive-icon">${knobs['inactive icon']}</md-icon>
           </md-navigation-tab>
 
           <md-navigation-tab
               .label=${label}
               .showBadge=${showBadge}
               .badgeValue=${badgeValue}>
-            <md-icon slot="activeIcon">${knobs['active icon']}</md-icon>
-            <md-icon slot="inactiveIcon">${knobs['inactive icon']}</md-icon>
+            <md-icon slot="active-icon">${knobs['active icon']}</md-icon>
+            <md-icon slot="inactive-icon">${knobs['inactive icon']}</md-icon>
           </md-navigation-tab>
         </md-navigation-bar>
       </div>`;
diff --git a/labs/navigationtab/internal/navigation-tab.ts b/labs/navigationtab/internal/navigation-tab.ts
index 2bd745762..9743070b2 100644
--- a/labs/navigationtab/internal/navigation-tab.ts
+++ b/labs/navigationtab/internal/navigation-tab.ts
@@ -53,10 +53,10 @@ export class NavigationTab extends LitElement implements NavigationTabState {
         <span aria-hidden="true" class="md3-navigation-tab__icon-content"
           ><span class="md3-navigation-tab__active-indicator"
             ></span><span class="md3-navigation-tab__icon"
-          ><slot name="inactiveIcon"></slot
+          ><slot name="inactive-icon"></slot
         ></span>
         <span class="md3-navigation-tab__icon md3-navigation-tab__icon--active"
-          ><slot name="activeIcon"></slot
+          ><slot name="active-icon"></slot
         ></span>${this.renderBadge()}</span
         >${this.renderLabel()}
       </button>`;
diff --git a/labs/navigationtab/md-navigation-tab_test.ts b/labs/navigationtab/md-navigation-tab_test.ts
index 85d73898a..98fe92f47 100644
--- a/labs/navigationtab/md-navigation-tab_test.ts
+++ b/labs/navigationtab/md-navigation-tab_test.ts
@@ -191,31 +191,31 @@ describe('mwc-navigation-tab', () => {
   });
 
   describe('icons', () => {
-    it('nodes with `slot=activeIcon` will serve as the active icon',
+    it('nodes with `slot=active-icon` will serve as the active icon',
        async () => {
          const {harness} = await setupTest();
          const icons = html`
-           <i slot="activeIcon" class="material-icons">star</i>
-           <i slot="inactiveIcon" class="material-icons">star_border</i>
-         `;
-         render(icons, harness.element);
-
-         const icon =
-             harness.element.querySelector<HTMLElement>('[slot="activeIcon"]')!;
-         expect(icon.textContent!.trim()).toEqual('star');
-       });
-
-    it('nodes with `slot=inactiveIcon` will serve as the inactive icon',
-       async () => {
-         const {harness} = await setupTest();
-         const icons = html`
-           <i slot="activeIcon" class="material-icons">star</i>
-           <i slot="inactiveIcon" class="material-icons">star_border</i>
+           <i slot="active-icon" class="material-icons">star</i>
+           <i slot="inactive-icon" class="material-icons">star_border</i>
          `;
          render(icons, harness.element);
 
          const icon = harness.element.querySelector<HTMLElement>(
-             '[slot="inactiveIcon"]')!;
+             '[slot="active-icon"]')!;
+         expect(icon.textContent!.trim()).toEqual('star');
+       });
+
+    it('nodes with `slot=inactive-icon` will serve as the inactive icon',
+       async () => {
+         const {harness} = await setupTest();
+         const icons = html`
+           <i slot="active-icon" class="material-icons">star</i>
+           <i slot="inactive-icon" class="material-icons">star_border</i>
+         `;
+         render(icons, harness.element);
+
+         const icon = harness.element.querySelector<HTMLElement>(
+             '[slot="inactive-icon"]')!;
          expect(icon.textContent!.trim()).toEqual('star_border');
        });
   });