docs(material/button): Clean up progressIndicator docs (#32934)

These changes were intended in #32698 but a bad merge caused them to be dropped.

Author: jermowery

src/components-examples/material/button/button-overview/button-overview-example.html

@@ -4,16 +4,6 @@
     <button matButton>Basic</button>
     <button matButton disabled>Disabled</button>
     <a matButton href="https://www.google.com/" target="_blank">Link</a>
-    <button matButton showProgress="true">
-      Progress
-      <mat-progress-spinner
-        progressIndicator
-        mode="indeterminate"
-        diameter="20"
-        aria-label="Loading"
-        tabindex=""
-      />
-    </button>
   </div>
 </section>
 <mat-divider/>
@@ -23,16 +13,6 @@
     <button matButton="elevated">Basic</button>
     <button matButton="elevated" disabled>Disabled</button>
     <a matButton="elevated" href="https://www.google.com/" target="_blank">Link</a>
-    <button matButton="elevated" showProgress="true">
-      Progress
-      <mat-progress-spinner
-        progressIndicator
-        mode="indeterminate"
-        diameter="20"
-        aria-label="Loading"
-        tabindex=""
-      />
-    </button>
   </div>
 </section>
 <mat-divider/>
@@ -42,16 +22,6 @@
     <button matButton="outlined">Basic</button>
     <button matButton="outlined" disabled>Disabled</button>
     <a matButton="outlined" href="https://www.google.com/" target="_blank">Link</a>
-    <button matButton="outlined" showProgress="true">
-      Progress
-      <mat-progress-spinner
-        progressIndicator
-        mode="indeterminate"
-        diameter="20"
-        aria-label="Loading"
-        tabindex=""
-      />
-    </button>
   </div>
 </section>
 <mat-divider/>
@@ -61,16 +31,6 @@
     <button matButton="filled">Basic</button>
     <button matButton="filled" disabled>Disabled</button>
     <a matButton="filled" href="https://www.google.com/" target="_blank">Link</a>
-    <button matButton="filled" showProgress="true">
-      Progress
-      <mat-progress-spinner
-        progressIndicator
-        mode="indeterminate"
-        diameter="20"
-        aria-label="Loading"
-        tabindex=""
-      />
-    </button>
   </div>
 </section>
 <mat-divider/>
@@ -80,16 +40,6 @@
     <button matButton="tonal" >Basic</button>
     <button matButton="tonal"  disabled>Disabled</button>
     <a matButton="tonal" href="https://www.google.com/" target="_blank">Link</a>
-    <button matButton="tonal" showProgress="true">
-      Progress
-      <mat-progress-spinner
-        progressIndicator
-        mode="indeterminate"
-        diameter="20"
-        aria-label="Loading"
-        tabindex=""
-      />
-    </button>
   </div>
 </section>
 <mat-divider/>
@@ -103,16 +53,6 @@
       <button matIconButton disabled aria-label="Example icon button with a open in new tab icon">
         <mat-icon>open_in_new</mat-icon>
       </button>
-      <button matIconButton showProgress="true" aria-label="Example icon button with a download icon">
-        <mat-icon>download</mat-icon>
-        <mat-progress-spinner
-          progressIndicator
-          mode="indeterminate"
-          diameter="20"
-          aria-label="Loading"
-          tabindex=""
-        />
-      </button>
     </div>
   </div>
 </section>
@@ -127,16 +67,6 @@
       <button matFab disabled aria-label="Example icon button with a heart icon">
         <mat-icon>favorite</mat-icon>
       </button>
-      <button matFab showProgress="true" aria-label="Example icon button with a skull icon">
-        <mat-icon>skull</mat-icon>
-        <mat-progress-spinner
-          progressIndicator
-          mode="indeterminate"
-          diameter="20"
-          aria-label="Loading"
-          tabindex=""
-        />
-      </button>
     </div>
   </div>
 </section>
@@ -151,16 +81,6 @@
       <button matMiniFab disabled aria-label="Example icon button with a home icon">
         <mat-icon>home</mat-icon>
       </button>
-      <button matMiniFab showProgress="true" aria-label="Example icon button with a wifi icon">
-        <mat-icon>wifi</mat-icon>
-        <mat-progress-spinner
-          progressIndicator
-          mode="indeterminate"
-          diameter="20"
-          aria-label="Loading"
-          tabindex=""
-        />
-      </button>
     </div>
   </div>
 </section>
@@ -181,17 +101,6 @@
         <mat-icon>favorite</mat-icon>
         Link
       </a>
-      <button matFab extended showProgress="true">
-        <mat-icon>favorite</mat-icon>
-        Progress
-        <mat-progress-spinner
-          progressIndicator
-          mode="indeterminate"
-          diameter="20"
-          aria-label="Loading"
-          tabindex=""
-        />
-      </button>
     </div>
   </div>
 </section>

src/components-examples/material/button/button-overview/button-overview-example.ts

@@ -2,7 +2,6 @@ import {Component} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatButtonModule} from '@angular/material/button';
-import {MatProgressSpinner} from '@angular/material/progress-spinner';
 
 /**
  * @title Button overview
@@ -11,6 +10,6 @@ import {MatProgressSpinner} from '@angular/material/progress-spinner';
   selector: 'button-overview-example',
   templateUrl: 'button-overview-example.html',
   styleUrl: 'button-overview-example.css',
-  imports: [MatButtonModule, MatDividerModule, MatIconModule, MatProgressSpinner],
+  imports: [MatButtonModule, MatDividerModule, MatIconModule],
 })
 export class ButtonOverviewExample {}

src/components-examples/material/button/button-progress-indicator/button-progress-indicator-example.html

@@ -1,14 +1,7 @@
-<section>
-  <mat-checkbox
-    (change)="toggleShowProgress()"
-  >
-    Show the progress indicator
-  </mat-checkbox>
-</section>
 <section>
     <h3>Button with a MatProgressSpinner</h3>
-    <button matButton="outlined" [showProgress]="showProgress()">
-      Download
+    <button matButton="outlined" [showProgress]="showProgress()" (click)="toggleShowProgress()">
+      Click to toggle progress
       <mat-progress-spinner
         progressIndicator
         mode="indeterminate"
@@ -20,10 +13,10 @@ <h3>Button with a MatProgressSpinner</h3>
 </section>
 <section>
     <h3>Button with a custom progress indicator</h3>
-    <button matButton="outlined" [showProgress]="showProgress()">
-      Download
-    <div progressIndicator role="progressbar" aria-valuemin="0" aria-valuemax="100">
-        Loading...
-    </div>
+    <button matButton="outlined" [showProgress]="showProgress()" (click)="toggleShowProgress()">
+      Click to toggle progress
+      <div progressIndicator role="progressbar" aria-valuemin="0" aria-valuemax="100">
+          Loading...
+      </div>
     </button>
 </section>

src/components-examples/material/button/button-progress-indicator/button-progress-indicator-example.ts

@@ -1,6 +1,5 @@
 import {Component, signal} from '@angular/core';
 import {MatButton} from '@angular/material/button';
-import {MatCheckbox} from '@angular/material/checkbox';
 import {MatProgressSpinner} from '@angular/material/progress-spinner';
 
 /**
@@ -9,7 +8,7 @@ import {MatProgressSpinner} from '@angular/material/progress-spinner';
 @Component({
   selector: 'button-progress-indicator-example',
   templateUrl: 'button-progress-indicator-example.html',
-  imports: [MatButton, MatCheckbox, MatProgressSpinner],
+  imports: [MatButton, MatProgressSpinner],
 })
 export class ButtonProgressIndicatorExample {
   protected readonly showProgress = signal(false);