Switch progress bar and progress spinner docs to MDC (#25659)

* docs(material/progress-bar): switch progress bar docs to use MDC

Switches the progress bar docs to use the MDC components.

* docs(material/progress-spinner): switch progress spinner docs to use MDC

Switches the progress spinner docs to use the MDC components.

Author: crisbeto

src/components-examples/material/progress-bar/BUILD.bazel

@@ -15,11 +15,11 @@ ng_module(
     deps = [
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-card",
-        "//src/material/legacy-progress-bar",
-        "//src/material/legacy-progress-bar/testing",
-        "//src/material/legacy-radio",
-        "//src/material/legacy-slider",
+        "//src/material/card",
+        "//src/material/progress-bar",
+        "//src/material/progress-bar/testing",
+        "//src/material/radio",
+        "//src/material/slider",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
@@ -43,8 +43,8 @@ ng_test_library(
         ":progress-bar",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-progress-bar",
-        "//src/material/legacy-progress-bar/testing",
+        "//src/material/progress-bar",
+        "//src/material/progress-bar/testing",
         "@npm//@angular/platform-browser-dynamic",
     ],
 )

src/components-examples/material/progress-bar/index.ts

@@ -1,10 +1,10 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
-import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
-import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
-import {MatLegacySliderModule} from '@angular/material/legacy-slider';
+import {MatCardModule} from '@angular/material/card';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatSliderModule} from '@angular/material/slider';
 import {ProgressBarBufferExample} from './progress-bar-buffer/progress-bar-buffer-example';
 import {ProgressBarConfigurableExample} from './progress-bar-configurable/progress-bar-configurable-example';
 import {ProgressBarDeterminateExample} from './progress-bar-determinate/progress-bar-determinate-example';
@@ -33,10 +33,10 @@ const EXAMPLES = [
 @NgModule({
   imports: [
     CommonModule,
-    MatLegacyCardModule,
-    MatLegacyProgressBarModule,
-    MatLegacyRadioModule,
-    MatLegacySliderModule,
+    MatCardModule,
+    MatProgressBarModule,
+    MatRadioModule,
+    MatSliderModule,
     FormsModule,
   ],
   declarations: EXAMPLES,

src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.css

@@ -12,3 +12,7 @@
 .example-margin {
   margin: 0 10px;
 }
+
+.example-card {
+  margin-bottom: 10px;
+}

src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.html

@@ -1,4 +1,4 @@
-<mat-card>
+<mat-card class="example-card">
   <mat-card-content>
     <h2 class="example-h2">Progress bar configuration</h2>
 
@@ -37,16 +37,20 @@ <h2 class="example-h2">Progress bar configuration</h2>
 
     <section class="example-section" *ngIf="mode === 'determinate' || mode === 'buffer'">
       <label class="example-margin">Progress:</label>
-      <mat-slider class="example-margin" [(ngModel)]="value"></mat-slider>
+      <mat-slider class="example-margin">
+        <input type="range" [(ngModel)]="value" matSliderThumb>
+      </mat-slider>
     </section>
     <section class="example-section" *ngIf="mode === 'buffer'">
       <label class="example-margin">Buffer:</label>
-      <mat-slider class="example-margin" [(ngModel)]="bufferValue"></mat-slider>
+      <mat-slider class="example-margin">
+        <input type="range" [(ngModel)]="bufferValue" matSliderThumb>
+      </mat-slider>
     </section>
   </mat-card-content>
 </mat-card>
 
-<mat-card>
+<mat-card class="example-card">
   <mat-card-content>
     <h2 class="example-h2">Result</h2>
 

src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {ThemePalette} from '@angular/material/core';
-import {LegacyProgressBarMode} from '@angular/material/legacy-progress-bar';
+import {ProgressBarMode} from '@angular/material/progress-bar';
 
 /**
  * @title Configurable progress-bar
@@ -12,7 +12,7 @@ import {LegacyProgressBarMode} from '@angular/material/legacy-progress-bar';
 })
 export class ProgressBarConfigurableExample {
   color: ThemePalette = 'primary';
-  mode: LegacyProgressBarMode = 'determinate';
+  mode: ProgressBarMode = 'determinate';
   value = 50;
   bufferValue = 75;
 }

src/components-examples/material/progress-bar/progress-bar-harness/progress-bar-harness-example.spec.ts

@@ -1,8 +1,8 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatLegacyProgressBarHarness} from '@angular/material/legacy-progress-bar/testing';
+import {MatProgressBarHarness} from '@angular/material/progress-bar/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {ProgressBarHarnessExample} from './progress-bar-harness-example';
 
 describe('ProgressBarHarnessExample', () => {
@@ -11,7 +11,7 @@ describe('ProgressBarHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatLegacyProgressBarModule],
+      imports: [MatProgressBarModule],
       declarations: [ProgressBarHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(ProgressBarHarnessExample);
@@ -20,19 +20,19 @@ describe('ProgressBarHarnessExample', () => {
   });
 
   it('should load all progress bar harnesses', async () => {
-    const progressBars = await loader.getAllHarnesses(MatLegacyProgressBarHarness);
+    const progressBars = await loader.getAllHarnesses(MatProgressBarHarness);
     expect(progressBars.length).toBe(2);
   });
 
   it('should get the value', async () => {
     fixture.componentInstance.value = 50;
-    const [determinate, indeterminate] = await loader.getAllHarnesses(MatLegacyProgressBarHarness);
+    const [determinate, indeterminate] = await loader.getAllHarnesses(MatProgressBarHarness);
     expect(await determinate.getValue()).toBe(50);
     expect(await indeterminate.getValue()).toBe(null);
   });
 
   it('should get the mode', async () => {
-    const [determinate, indeterminate] = await loader.getAllHarnesses(MatLegacyProgressBarHarness);
+    const [determinate, indeterminate] = await loader.getAllHarnesses(MatProgressBarHarness);
     expect(await determinate.getMode()).toBe('determinate');
     expect(await indeterminate.getMode()).toBe('indeterminate');
   });

src/components-examples/material/progress-spinner/BUILD.bazel

@@ -15,11 +15,11 @@ ng_module(
     deps = [
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-card",
-        "//src/material/legacy-progress-spinner",
-        "//src/material/legacy-progress-spinner/testing",
-        "//src/material/legacy-radio",
-        "//src/material/legacy-slider",
+        "//src/material/card",
+        "//src/material/progress-spinner",
+        "//src/material/progress-spinner/testing",
+        "//src/material/radio",
+        "//src/material/slider",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
@@ -43,8 +43,8 @@ ng_test_library(
         ":progress-spinner",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/legacy-progress-spinner",
-        "//src/material/legacy-progress-spinner/testing",
+        "//src/material/progress-spinner",
+        "//src/material/progress-spinner/testing",
         "@npm//@angular/platform-browser-dynamic",
     ],
 )

src/components-examples/material/progress-spinner/index.ts

@@ -1,10 +1,10 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
-import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
-import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
-import {MatLegacySliderModule} from '@angular/material/legacy-slider';
+import {MatCardModule} from '@angular/material/card';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatSliderModule} from '@angular/material/slider';
 import {ProgressSpinnerConfigurableExample} from './progress-spinner-configurable/progress-spinner-configurable-example';
 import {ProgressSpinnerOverviewExample} from './progress-spinner-overview/progress-spinner-overview-example';
 import {ProgressSpinnerHarnessExample} from './progress-spinner-harness/progress-spinner-harness-example';
@@ -24,10 +24,10 @@ const EXAMPLES = [
 @NgModule({
   imports: [
     CommonModule,
-    MatLegacyCardModule,
-    MatLegacyProgressSpinnerModule,
-    MatLegacyRadioModule,
-    MatLegacySliderModule,
+    MatCardModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatSliderModule,
     FormsModule,
   ],
   declarations: EXAMPLES,

src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.css

@@ -12,3 +12,7 @@
 .example-margin {
   margin: 0 10px;
 }
+
+.example-card {
+  margin-bottom: 10px;
+}

src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.html

@@ -1,4 +1,4 @@
-<mat-card>
+<mat-card class="example-card">
   <mat-card-content>
     <h2 class="example-h2">Progress spinner configuration</h2>
 
@@ -31,11 +31,14 @@ <h2 class="example-h2">Progress spinner configuration</h2>
 
     <section class="example-section" *ngIf="mode === 'determinate'">
       <label class="example-margin">Progress:</label>
-      <mat-slider class="example-margin" [(ngModel)]="value"></mat-slider>
+      <mat-slider class="example-margin">
+        <input type="range" [(ngModel)]="value" matSliderThumb>
+      </mat-slider>
     </section>
   </mat-card-content>
 </mat-card>
-<mat-card>
+
+<mat-card class="example-card">
   <mat-card-content>
     <h2 class="example-h2">Result</h2>
 

src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {ThemePalette} from '@angular/material/core';
-import {LegacyProgressSpinnerMode} from '@angular/material/legacy-progress-spinner';
+import {ProgressSpinnerMode} from '@angular/material/progress-spinner';
 
 /**
  * @title Configurable progress spinner
@@ -12,6 +12,6 @@ import {LegacyProgressSpinnerMode} from '@angular/material/legacy-progress-spinn
 })
 export class ProgressSpinnerConfigurableExample {
   color: ThemePalette = 'primary';
-  mode: LegacyProgressSpinnerMode = 'determinate';
+  mode: ProgressSpinnerMode = 'determinate';
   value = 50;
 }

src/components-examples/material/progress-spinner/progress-spinner-harness/progress-spinner-harness-example.spec.ts

@@ -1,8 +1,8 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatLegacyProgressSpinnerHarness} from '@angular/material/legacy-progress-spinner/testing';
+import {MatProgressSpinnerHarness} from '@angular/material/progress-spinner/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {ProgressSpinnerHarnessExample} from './progress-spinner-harness-example';
 
 describe('ProgressSpinnerHarnessExample', () => {
@@ -11,7 +11,7 @@ describe('ProgressSpinnerHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatLegacyProgressSpinnerModule],
+      imports: [MatProgressSpinnerModule],
       declarations: [ProgressSpinnerHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(ProgressSpinnerHarnessExample);
@@ -20,22 +20,22 @@ describe('ProgressSpinnerHarnessExample', () => {
   });
 
   it('should load all progress spinner harnesses', async () => {
-    const progressSpinners = await loader.getAllHarnesses(MatLegacyProgressSpinnerHarness);
+    const progressSpinners = await loader.getAllHarnesses(MatProgressSpinnerHarness);
     expect(progressSpinners.length).toBe(2);
   });
 
   it('should get the value', async () => {
     fixture.componentInstance.value = 50;
     const [determinate, impliedIndeterminate] = await loader.getAllHarnesses(
-      MatLegacyProgressSpinnerHarness,
+      MatProgressSpinnerHarness,
     );
     expect(await determinate.getValue()).toBe(50);
     expect(await impliedIndeterminate.getValue()).toBe(null);
   });
 
   it('should get the mode', async () => {
     const [determinate, impliedIndeterminate] = await loader.getAllHarnesses(
-      MatLegacyProgressSpinnerHarness,
+      MatProgressSpinnerHarness,
     );
     expect(await determinate.getMode()).toBe('determinate');
     expect(await impliedIndeterminate.getMode()).toBe('indeterminate');