fix(iconbutton): rename selectedIcon slot to selected

BREAKING CHANGE: change `slot="selectedIcon"` to `slot="selected"` for toggle icon buttons. PiperOrigin-RevId: 561740365
material-components · Aug 31, 2023 · 9647f5e · 9647f5e
1 parent 17ddcd3
commit 9647f5e
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 29 deletions.
diff --git a/catalog/eleventy-helpers/shortcodes/playground-example.cjs b/catalog/eleventy-helpers/shortcodes/playground-example.cjs
@@ -49,7 +49,7 @@ function playgroundExample(eleventyConfig) {
         <summary>
           <md-outlined-icon-button toggle tabindex="-1" aria-hidden="true">
             <md-icon aria-hidden="true">expand_more</md-icon>
-            <md-icon aria-hidden="true" slot="selectedIcon">expand_less</md-icon>
+            <md-icon aria-hidden="true" slot="selected">expand_less</md-icon>
           </md-outlined-icon-button>
           Expand interactive demo.
         </summary>

diff --git a/catalog/src/components/top-app-bar.ts b/catalog/src/components/top-app-bar.ts
@@ -40,7 +40,7 @@ import {materialDesign} from '../svg/material-design-logo.js';
               @input=${this.onMenuIconToggle}
             >
               <span><md-icon>menu</md-icon></span>
-              <span slot="selectedIcon"><md-icon>menu_open</md-icon></span>
+              <span slot="selected"><md-icon>menu_open</md-icon></span>
             </md-icon-button>
             <md-icon-button href="/" class="home-button">
               ${materialDesign}

diff --git a/docs/components/figures/iconbutton/buttons.html b/docs/components/figures/iconbutton/buttons.html
@@ -41,7 +41,7 @@
             <md-icon>favorite</md-icon>
           </md-icon-button>
           <md-icon-button toggle selected>
-            <md-icon slot="selectedIcon" class="filled">bookmark</md-icon>
+            <md-icon slot="selected" class="filled">bookmark</md-icon>
             <md-icon class="filled">bookmark</md-icon>
           </md-icon-button>
         </div>

diff --git a/docs/components/figures/iconbutton/usage-toggle.html b/docs/components/figures/iconbutton/usage-toggle.html
@@ -5,37 +5,37 @@
     <div style="display:flex;gap:8px;">
       <md-icon-button toggle>
         <md-icon>close</md-icon>
-        <md-icon slot="selectedIcon">check</md-icon>
+        <md-icon slot="selected">check</md-icon>
       </md-icon-button>
       <md-filled-icon-button toggle>
         <md-icon>close</md-icon>
-        <md-icon slot="selectedIcon">check</md-icon>
+        <md-icon slot="selected">check</md-icon>
       </md-filled-icon-button>
       <md-filled-tonal-icon-button toggle>
         <md-icon>close</md-icon>
-        <md-icon slot="selectedIcon">check</md-icon>
+        <md-icon slot="selected">check</md-icon>
       </md-filled-tonal-icon-button>
       <md-outlined-icon-button toggle>
         <md-icon>close</md-icon>
-        <md-icon slot="selectedIcon">check</md-icon>
+        <md-icon slot="selected">check</md-icon>
       </md-outlined-icon-button>
     </div>
     <div style="display:flex;gap:8px;">
       <md-icon-button toggle selected>
         <md-icon>close</md-icon>
-        <md-icon slot="selectedIcon">check</md-icon>
+        <md-icon slot="selected">check</md-icon>
       </md-icon-button>
       <md-filled-icon-button toggle selected>
         <md-icon>close</md-icon>
-        <md-icon slot="selectedIcon">check</md-icon>
+        <md-icon slot="selected">check</md-icon>
       </md-filled-icon-button>
       <md-filled-tonal-icon-button toggle selected>
         <md-icon>close</md-icon>
-        <md-icon slot="selectedIcon">check</md-icon>
+        <md-icon slot="selected">check</md-icon>
       </md-filled-tonal-icon-button>
       <md-outlined-icon-button toggle selected>
         <md-icon>close</md-icon>
-        <md-icon slot="selectedIcon">check</md-icon>
+        <md-icon slot="selected">check</md-icon>
       </md-outlined-icon-button>
     </div>
   </figure>

diff --git a/docs/components/icon-button.md b/docs/components/icon-button.md
@@ -131,37 +131,37 @@ adding or removing something from favorites.
 <div>
   <md-icon-button toggle>
     <md-icon>close</md-icon>
-    <md-icon slot="selectedIcon">check</md-icon>
+    <md-icon slot="selected">check</md-icon>
   </md-icon-button>
   <md-filled-icon-button toggle>
     <md-icon>close</md-icon>
-    <md-icon slot="selectedIcon">check</md-icon>
+    <md-icon slot="selected">check</md-icon>
   </md-filled-icon-button>
   <md-filled-tonal-icon-button toggle>
     <md-icon>close</md-icon>
-    <md-icon slot="selectedIcon">check</md-icon>
+    <md-icon slot="selected">check</md-icon>
   </md-filled-tonal-icon-button>
   <md-outlined-icon-button toggle>
     <md-icon>close</md-icon>
-    <md-icon slot="selectedIcon">check</md-icon>
+    <md-icon slot="selected">check</md-icon>
   </md-outlined-icon-button>
 </div>
 <div>
   <md-icon-button toggle selected>
     <md-icon>close</md-icon>
-    <md-icon slot="selectedIcon">check</md-icon>
+    <md-icon slot="selected">check</md-icon>
   </md-icon-button>
   <md-filled-icon-button toggle selected>
     <md-icon>close</md-icon>
-    <md-icon slot="selectedIcon">check</md-icon>
+    <md-icon slot="selected">check</md-icon>
   </md-filled-icon-button>
   <md-filled-tonal-icon-button toggle selected>
     <md-icon>close</md-icon>
-    <md-icon slot="selectedIcon">check</md-icon>
+    <md-icon slot="selected">check</md-icon>
   </md-filled-tonal-icon-button>
   <md-outlined-icon-button toggle selected>
     <md-icon>close</md-icon>
-    <md-icon slot="selectedIcon">check</md-icon>
+    <md-icon slot="selected">check</md-icon>
   </md-outlined-icon-button>
 </div>
 ```
@@ -188,7 +188,7 @@ descriptive label when selected.
   aria-label="Unselected"
   aria-label-selected="Selected">
   <md-icon>close</md-icon>
-  <md-icon slot="selectedIcon">check</md-icon>
+  <md-icon slot="selected">check</md-icon>
 </md-icon-button>
 ```
 

diff --git a/docs/components/text-field.md b/docs/components/text-field.md
@@ -176,7 +176,7 @@ icon), or to express errors.
 <md-outlined-text-field label="Password" type="password">
   <md-icon-button toggle slot="trailingicon">
     <md-icon>visibility</md-icon>
-    <md-icon slot="selectedIcon">visibility_off</md-icon>
+    <md-icon slot="selected">visibility_off</md-icon>
   </md-icon-button>
 </md-outlined-text-field>
 

diff --git a/iconbutton/demo/stories.ts b/iconbutton/demo/stories.ts
@@ -84,7 +84,7 @@ const toggles: MaterialStoryInit<StoryKnobs> = {
             ?disabled=${disabled}
           >
             <md-icon>${icon}</md-icon>
-            <md-icon slot="selectedIcon">${selectedIcon}</md-icon>
+            <md-icon slot="selected">${selectedIcon}</md-icon>
           </md-icon-button>
 
           <md-outlined-icon-button
@@ -93,7 +93,7 @@ const toggles: MaterialStoryInit<StoryKnobs> = {
             ?disabled=${disabled}
           >
             <md-icon>${icon}</md-icon>
-            <md-icon slot="selectedIcon">${selectedIcon}</md-icon>
+            <md-icon slot="selected">${selectedIcon}</md-icon>
           </md-outlined-icon-button>
 
           <md-filled-icon-button
@@ -102,7 +102,7 @@ const toggles: MaterialStoryInit<StoryKnobs> = {
             ?disabled=${disabled}
           >
             <md-icon>${icon}</md-icon>
-            <md-icon slot="selectedIcon">${selectedIcon}</md-icon>
+            <md-icon slot="selected">${selectedIcon}</md-icon>
           </md-filled-icon-button>
 
           <md-filled-tonal-icon-button
@@ -111,7 +111,7 @@ const toggles: MaterialStoryInit<StoryKnobs> = {
             ?disabled=${disabled}
           >
             <md-icon>${icon}</md-icon>
-            <md-icon slot="selectedIcon">${selectedIcon}</md-icon>
+            <md-icon slot="selected">${selectedIcon}</md-icon>
           </md-filled-tonal-icon-button>
         </div>
       </div>

diff --git a/iconbutton/internal/icon-button.ts b/iconbutton/internal/icon-button.ts
@@ -68,8 +68,8 @@ export class IconButton extends LitElement implements FormSubmitter {
 
   /**
    * Sets the selected state. When false, displays the default icon. When true,
-   * displays the `selectedIcon`, or the default icon If no `selectedIcon` is
-   * provided.
+   * displays the selected icon, or the default icon If no `slot="selected"`
+   * icon is provided.
    */
   @property({type: Boolean, reflect: true}) selected = false;
 
@@ -169,7 +169,7 @@ export class IconButton extends LitElement implements FormSubmitter {
 
   private renderSelectedIcon() {
     // Use default slot as fallback to not require specifying multiple icons
-    return html`<span class="icon icon--selected"><slot name="selectedIcon"><slot></slot></slot></span>`;
+    return html`<span class="icon icon--selected"><slot name="selected"><slot></slot></slot></span>`;
   }
 
   private renderTouchTarget() {

diff --git a/progress/demo/stories.ts b/progress/demo/stories.ts
@@ -152,7 +152,7 @@ const components: MaterialStoryInit<StoryKnobs> = {
             @change=${toggleIndeterminate}
           >
             <md-icon>play_arrow</md-icon>
-            <md-icon slot="selectedIcon">pause</md-icon>
+            <md-icon slot="selected">pause</md-icon>
           </md-icon-button>
         </div>
       </div>