fix(navigationtab)!: change slot names activeIcon and inactiveIcon to…

… active-icon and inactive-icon PiperOrigin-RevId: 563583060
material-components · Sep 7, 2023 · f019ac3 · f019ac3
1 parent 8e79da6
commit f019ac3
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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>
+           <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="activeIcon"]')!;
+         const icon = harness.element.querySelector<HTMLElement>(
+             '[slot="active-icon"]')!;
          expect(icon.textContent!.trim()).toEqual('star');
        });
 
-    it('nodes with `slot=inactiveIcon` will serve as the inactive icon',
+    it('nodes with `slot=inactive-icon` 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="inactive-icon"]')!;
          expect(icon.textContent!.trim()).toEqual('star_border');
        });
   });