fix(iconbutton)!: rename <md-standard-icon-button> to <md-icon-button>

PiperOrigin-RevId: 552545415

all.ts

@@ -34,8 +34,8 @@ import './focus/md-focus-ring.js';
 import './icon/icon.js';
 import './iconbutton/filled-icon-button.js';
 import './iconbutton/filled-tonal-icon-button.js';
+import './iconbutton/icon-button.js';
 import './iconbutton/outlined-icon-button.js';
-import './iconbutton/standard-icon-button.js';
 import './list/list.js';
 import './list/list-item.js';
 import './list/list-item-link.js';
@@ -82,8 +82,8 @@ export * from './focus/md-focus-ring.js';
 export * from './icon/icon.js';
 export * from './iconbutton/filled-icon-button.js';
 export * from './iconbutton/filled-tonal-icon-button.js';
+export * from './iconbutton/icon-button.js';
 export * from './iconbutton/outlined-icon-button.js';
-export * from './iconbutton/standard-icon-button.js';
 export * from './list/list.js';
 export * from './list/list-item.js';
 export * from './list/list-item-link.js';

catalog/src/components/copy-code-button.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/iconbutton/standard-icon-button.js';
+import '@material/web/iconbutton/icon-button.js';
 import '@material/web/icon/icon.js';
 
 import {css, html, LitElement} from 'lit';
@@ -24,7 +24,7 @@ export class CopyCodeButton extends LitElement {
       --_border-radius: calc(var(--catalog-code-block-border-radius) / 4);
     }
 
-    md-standard-icon-button {
+    md-icon-button {
       color: red;
       position: absolute;
       inset: var(--catalog-copy-code-button-inset, var(--_border-radius) var(--_border-radius) auto auto);
@@ -60,11 +60,11 @@ export class CopyCodeButton extends LitElement {
     const icon = this.showCheckmark ? 'check' : 'content_copy';
     return html`
       <slot></slot>
-      <md-standard-icon-button @click=${this.onClick} title=${this.buttonTitle}>
+      <md-icon-button @click=${this.onClick} title=${this.buttonTitle}>
         <md-icon aria-live="polite" aria-label=${label}>
           <span aria-hidden="true">${icon}</span>
         </md-icon>
-      </md-standard-icon-button>
+      </md-icon-button>
     `;
   }
 

catalog/src/components/top-app-bar.ts

@@ -5,10 +5,10 @@
  */
 
 import '@material/web/focus/md-focus-ring.js';
-import '@material/web/iconbutton/standard-icon-button.js';
+import '@material/web/iconbutton/icon-button.js';
 import '@material/web/icon/icon.js';
 
-import type {MdStandardIconButton} from '@material/web/iconbutton/standard-icon-button.js';
+import type {MdIconButton} from '@material/web/iconbutton/icon-button.js';
 import {css, html, LitElement} from 'lit';
 import {customElement, query, state} from 'lit/decorators.js';
 import {live} from 'lit/directives/live.js';
@@ -28,26 +28,25 @@ import {materialDesign} from '../svg/material-design-logo.js';
    */
   @state() private menuOpen = false;
 
-  @query('.end md-standard-icon-button')
-  private paletteButton!: MdStandardIconButton;
+  @query('.end md-icon-button') private paletteButton!: MdIconButton;
 
   render() {
     return html`
       <header>
         <div class="default-content">
           <section class="start">
-            <md-standard-icon-button
+            <md-icon-button
               toggle
               class="menu-button"
               .selected=${live(drawerOpenSignal.value)}
               @input=${this.onMenuIconToggle}
             >
               <span><md-icon>menu</md-icon></span>
               <span slot="selectedIcon"><md-icon>menu_open</md-icon></span>
-            </md-standard-icon-button>
-            <md-standard-icon-button href="/" class="home-button">
+            </md-icon-button>
+            <md-icon-button href="/" class="home-button">
               ${materialDesign}
-            </md-standard-icon-button>
+            </md-icon-button>
           </section>
 
           <a href="/" id="home-link">
@@ -71,9 +70,9 @@ import {materialDesign} from '../svg/material-design-logo.js';
               >
                 <theme-changer></theme-changer>
               </md-menu>
-              <md-standard-icon-button @click="${this.onPaletteClick}">
+              <md-icon-button @click="${this.onPaletteClick}">
                 <md-icon>palette</md-icon>
-              </md-standard-icon-button>
+              </md-icon-button>
             </lit-island>
           </section>
         </div>
@@ -106,7 +105,7 @@ import {materialDesign} from '../svg/material-design-logo.js';
    * Toggles the sidebar's open state.
    */
   private onMenuIconToggle(e: InputEvent) {
-    drawerOpenSignal.value = (e.target as MdStandardIconButton).selected;
+    drawerOpenSignal.value = (e.target as MdIconButton).selected;
   }
 
   static styles = css`
@@ -135,14 +134,14 @@ import {materialDesign} from '../svg/material-design-logo.js';
       align-items: center;
     }
 
-    md-standard-icon-button:not(:defined) {
+    md-icon-button:not(:defined) {
       width: 40px;
       height: 40px;
       display: flex;
       visibility: hidden;
     }
 
-    md-standard-icon-button * {
+    md-icon-button * {
       display: block;
     }
 

catalog/src/hydration-entrypoints/components/icon-button.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/iconbutton/standard-icon-button.js';
+import '@material/web/iconbutton/icon-button.js';
 import '@material/web/iconbutton/filled-icon-button.js';
 import '@material/web/iconbutton/filled-tonal-icon-button.js';
-import '@material/web/iconbutton/outlined-icon-button.js';
+import '@material/web/iconbutton/outlined-icon-button.js';

catalog/src/ssr.ts

@@ -18,7 +18,7 @@ import '@material/web/list/list-item-link.js';
 import '@material/web/progress/circular-progress.js';
 import '@material/web/tabs/tabs.js';
 import '@material/web/tabs/tab.js';
-import '@material/web/iconbutton/standard-icon-button.js';
+import '@material/web/iconbutton/icon-button.js';
 import '@material/web/iconbutton/filled-icon-button.js';
 import '@material/web/iconbutton/filled-tonal-icon-button.js';
 import '@material/web/iconbutton/outlined-icon-button.js';

catalog/stories/components/story-knob-panel.ts

@@ -6,7 +6,7 @@
 
 /* Fork of Lit stories story-knob-renderer with m3 components and theming */
 
-import '@material/web/iconbutton/standard-icon-button.js';
+import '@material/web/iconbutton/icon-button.js';
 import '@material/web/icon/icon.js';
 import '@material/web/elevation/elevation.js';
 
@@ -72,9 +72,9 @@ export class StoryKnobPanel extends LitElement {
 
     if (this.showCloseIcon) {
       closeIcon = html`
-        <md-standard-icon-button aria-label="close" @click=${this.close}>
+        <md-icon-button aria-label="close" @click=${this.close}>
           <md-icon>close</md-icon>
-        </md-standard-icon-button>
+        </md-icon-button>
       `;
     }
 
@@ -96,13 +96,13 @@ export class StoryKnobPanel extends LitElement {
       const iconLabel = this.draggable ? 'dock' : 'pop out';
 
       dragIcon = html`
-        <md-standard-icon-button
+        <md-icon-button
           class="dragIconButton"
           aria-label=${iconLabel}
           @click=${this.onDragIconClick}
         >
           <md-icon>${iconSvg}</md-icon>
-        </md-standard-icon-button>
+        </md-icon-button>
       `;
     }
 

common.ts

@@ -23,7 +23,7 @@ import './chips/assist-chip.js';
 import './chips/filter-chip.js';
 import './dialog/dialog.js';
 import './icon/icon.js';
-import './iconbutton/standard-icon-button.js';
+import './iconbutton/icon-button.js';
 import './list/list.js';
 import './list/list-item.js';
 import './list/list-item-link.js';
@@ -52,7 +52,7 @@ export * from './chips/assist-chip.js';
 export * from './chips/filter-chip.js';
 export * from './dialog/dialog.js';
 export * from './icon/icon.js';
-export * from './iconbutton/standard-icon-button.js';
+export * from './iconbutton/icon-button.js';
 export * from './list/list.js';
 export * from './list/list-item.js';
 export * from './list/list-item-link.js';

dialog/demo/stories.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '@material/web/iconbutton/standard-icon-button.js';
+import '@material/web/iconbutton/icon-button.js';
 import '@material/web/textfield/filled-text-field.js';
 import '@material/web/radio/radio.js';
 import '@material/web/icon/icon.js';
@@ -208,7 +208,7 @@ const contacts: MaterialStoryInit<StoryKnobs> = {
           .stacked=${stacked}
       >
         <span slot="header">
-          <md-standard-icon-button dialog-action="close"><md-icon>close</md-icon></md-standard-icon-button>
+          <md-icon-button dialog-action="close"><md-icon>close</md-icon></md-icon-button>
           <span class="headline">Create new contact</span>
         </span>
         <div class="contact-content">
@@ -250,7 +250,7 @@ const floatingSheet: MaterialStoryInit<StoryKnobs> = {
       >
       <span slot="header">
         <span style="flex: 1;">Floating Sheet</span>
-        <md-standard-icon-button dialog-action="close"><md-icon>close</md-icon></md-standard-icon-button>
+        <md-icon-button dialog-action="close"><md-icon>close</md-icon></md-icon-button>
       </span>
       <div>This is a floating sheet with title.
         Floating sheets offer no action buttons at the bottom,

docs/components/figures/iconbutton/buttons.html

@@ -37,13 +37,13 @@
     <div class="wrapper">
       <div>
         <div>
-          <md-standard-icon-button>
+          <md-icon-button>
             <md-icon>favorite</md-icon>
-          </md-standard-icon-button>
-          <md-standard-icon-button toggle selected>
+          </md-icon-button>
+          <md-icon-button toggle selected>
             <md-icon slot="selectedIcon" class="filled">bookmark</md-icon>
             <md-icon class="filled">bookmark</md-icon>
-          </md-standard-icon-button>
+          </md-icon-button>
         </div>
         <span>1</span>
       </div>
@@ -63,4 +63,4 @@
       </div>
     </div>
   </figure>
-</div>
+</div>

docs/components/figures/iconbutton/theming-standard.html

@@ -15,8 +15,8 @@
         --md-sys-color-on-surface-variant: #dc362e;
       }
       </style>
-      <md-standard-icon-button>
+      <md-icon-button>
         <md-icon>check</md-icon>
-      </md-standard-icon-button>
+      </md-icon-button>
   </figure>
-</div>
+</div>

docs/components/figures/iconbutton/usage-standard.html

@@ -3,8 +3,8 @@
       style="justify-content:center;gap: 8px;"
       title="Standard Icon Button with Check icon"
       aria-label="A check icon">
-    <md-standard-icon-button>
+    <md-icon-button>
       <md-icon>check</md-icon>
-    </md-standard-icon-button>
+    </md-icon-button>
   </figure>
-</div>
+</div>

docs/components/figures/iconbutton/usage-toggle.html

@@ -3,10 +3,10 @@
       style="gap:8px;flex-direction:column;padding-block:8px;"
       aria-label="Two rows of toggling icon buttons, the top row is unselected and the bottom row is selected">
     <div style="display:flex;gap:8px;">
-      <md-standard-icon-button toggle>
+      <md-icon-button toggle>
         <md-icon>close</md-icon>
         <md-icon slot="selectedIcon">check</md-icon>
-      </md-standard-icon-button>
+      </md-icon-button>
       <md-filled-icon-button toggle>
         <md-icon>close</md-icon>
         <md-icon slot="selectedIcon">check</md-icon>
@@ -21,10 +21,10 @@
       </md-outlined-icon-button>
     </div>
     <div style="display:flex;gap:8px;">
-      <md-standard-icon-button toggle selected>
+      <md-icon-button toggle selected>
         <md-icon>close</md-icon>
         <md-icon slot="selectedIcon">check</md-icon>
-      </md-standard-icon-button>
+      </md-icon-button>
       <md-filled-icon-button toggle selected>
         <md-icon>close</md-icon>
         <md-icon slot="selectedIcon">check</md-icon>
@@ -39,4 +39,4 @@
       </md-outlined-icon-button>
     </div>
   </figure>
-</div>
+</div>

docs/components/figures/iconbutton/usage.html

@@ -3,9 +3,9 @@
       style="justify-content:center;gap: 8px;"
       title="Icon buttons can be used within other components, such as a bottom app bar"
       aria-label="A row of icon buttons">
-    <md-standard-icon-button>
+    <md-icon-button>
       <md-icon>check</md-icon>
-    </md-standard-icon-button>
+    </md-icon-button>
     <md-filled-icon-button>
       <md-icon>check</md-icon>
     </md-filled-icon-button>
@@ -16,4 +16,4 @@
       <md-icon>check</md-icon>
     </md-outlined-icon-button>
   </figure>
-</div>
+</div>