feat(material/progress-bar): Switch progress-bar implementation to us…

…e MDC (#25234) * feat(material/legacy-progress-bar): step 1. rename directory * feat(material/legacy-progress-bar): step 2. rename ts symbols * feat(material/legacy-progress-bar): step 3. rename sass mixins * feat(material/legacy-progress-bar): step 4. move mdc folder * feat(material/legacy-progress-bar): step 5. update the all-theme mixins
angular · Jul 21, 2022 · f384c24 · f384c24
1 parent 8ad2ef6
commit f384c24
Show file tree

Hide file tree

Showing 88 changed files with 1,700 additions and 1,556 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
diff --git a/.ng-dev/commit-message.mts b/.ng-dev/commit-message.mts
@@ -52,7 +52,7 @@ export const commitMessage: CommitMessageConfig = {
     'material-experimental/mdc-list',
     'material-experimental/mdc-menu',
     'material-experimental/mdc-paginator',
-    'material-experimental/mdc-progress-bar',
+    'material/progress-bar',
     'material-experimental/mdc-progress-spinner',
     'material-experimental/mdc-radio',
     'material-experimental/mdc-select',
@@ -91,7 +91,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/paginator',
     'material/prebuilt-themes',
     'material/legacy-prebuilt-themes',
-    'material/progress-bar',
+    'material/legacy-progress-bar',
     'material/progress-spinner',
     'material/radio',
     'material/schematics',

diff --git a/src/components-examples/material/card/BUILD.bazel b/src/components-examples/material/card/BUILD.bazel
@@ -20,7 +20,7 @@ ng_module(
         "//src/material/divider",
         "//src/material/legacy-card",
         "//src/material/legacy-card/testing",
-        "//src/material/progress-bar",
+        "//src/material/legacy-progress-bar",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
         "@npm//@types/jasmine",

diff --git a/src/components-examples/material/card/index.ts b/src/components-examples/material/card/index.ts
@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatDividerModule} from '@angular/material/divider';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
 import {CardFancyExample} from './card-fancy/card-fancy-example';
 import {CardOverviewExample} from './card-overview/card-overview-example';
 import {CardHarnessExample} from './card-harness/card-harness-example';
@@ -32,7 +32,7 @@ const EXAMPLES = [
 ];
 
 @NgModule({
-  imports: [MatButtonModule, MatLegacyCardModule, MatDividerModule, MatProgressBarModule],
+  imports: [MatButtonModule, MatLegacyCardModule, MatDividerModule, MatLegacyProgressBarModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

diff --git a/src/components-examples/material/progress-bar/BUILD.bazel b/src/components-examples/material/progress-bar/BUILD.bazel
@@ -16,8 +16,8 @@ ng_module(
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material/legacy-card",
-        "//src/material/progress-bar",
-        "//src/material/progress-bar/testing",
+        "//src/material/legacy-progress-bar",
+        "//src/material/legacy-progress-bar/testing",
         "//src/material/radio",
         "//src/material/slider",
         "@npm//@angular/forms",
@@ -43,8 +43,8 @@ ng_test_library(
         ":progress-bar",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/progress-bar",
-        "//src/material/progress-bar/testing",
+        "//src/material/legacy-progress-bar",
+        "//src/material/legacy-progress-bar/testing",
         "@npm//@angular/platform-browser-dynamic",
     ],
 )

diff --git a/src/components-examples/material/progress-bar/index.ts b/src/components-examples/material/progress-bar/index.ts
@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatLegacyCardModule} from '@angular/material/legacy-card';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
 import {MatRadioModule} from '@angular/material/radio';
 import {MatSliderModule} from '@angular/material/slider';
 import {ProgressBarBufferExample} from './progress-bar-buffer/progress-bar-buffer-example';
@@ -34,7 +34,7 @@ const EXAMPLES = [
   imports: [
     CommonModule,
     MatLegacyCardModule,
-    MatProgressBarModule,
+    MatLegacyProgressBarModule,
     MatRadioModule,
     MatSliderModule,
     FormsModule,

diff --git a/...ples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.ts b/...ples/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 {ProgressBarMode} from '@angular/material/progress-bar';
+import {LegacyProgressBarMode} from '@angular/material/legacy-progress-bar';
 
 /**
  * @title Configurable progress-bar
@@ -12,7 +12,7 @@ import {ProgressBarMode} from '@angular/material/progress-bar';
 })
 export class ProgressBarConfigurableExample {
   color: ThemePalette = 'primary';
-  mode: ProgressBarMode = 'determinate';
+  mode: LegacyProgressBarMode = 'determinate';
   value = 50;
   bufferValue = 75;
 }
diff --git a/...-examples/material/progress-bar/progress-bar-harness/progress-bar-harness-example.spec.ts b/...-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 {MatProgressBarHarness} from '@angular/material/progress-bar/testing';
+import {MatLegacyProgressBarHarness} from '@angular/material/legacy-progress-bar/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
 import {ProgressBarHarnessExample} from './progress-bar-harness-example';
 
 describe('ProgressBarHarnessExample', () => {
@@ -11,7 +11,7 @@ describe('ProgressBarHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatProgressBarModule],
+      imports: [MatLegacyProgressBarModule],
       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(MatProgressBarHarness);
+    const progressBars = await loader.getAllHarnesses(MatLegacyProgressBarHarness);
     expect(progressBars.length).toBe(2);
   });
 
   it('should get the value', async () => {
     fixture.componentInstance.value = 50;
-    const [determinate, indeterminate] = await loader.getAllHarnesses(MatProgressBarHarness);
+    const [determinate, indeterminate] = await loader.getAllHarnesses(MatLegacyProgressBarHarness);
     expect(await determinate.getValue()).toBe(50);
     expect(await indeterminate.getValue()).toBe(null);
   });
 
   it('should get the mode', async () => {
-    const [determinate, indeterminate] = await loader.getAllHarnesses(MatProgressBarHarness);
+    const [determinate, indeterminate] = await loader.getAllHarnesses(MatLegacyProgressBarHarness);
     expect(await determinate.getMode()).toBe('determinate');
     expect(await indeterminate.getMode()).toBe('indeterminate');
   });

diff --git a/src/components-examples/material/tree/BUILD.bazel b/src/components-examples/material/tree/BUILD.bazel
@@ -19,7 +19,7 @@ ng_module(
         "//src/material/checkbox",
         "//src/material/icon",
         "//src/material/input",
-        "//src/material/progress-bar",
+        "//src/material/legacy-progress-bar",
         "//src/material/tree",
         "//src/material/tree/testing",
         "@npm//@angular/platform-browser",

diff --git a/src/components-examples/material/tree/index.ts b/src/components-examples/material/tree/index.ts
@@ -4,7 +4,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
 import {MatTreeModule} from '@angular/material/tree';
 import {TreeChecklistExample} from './tree-checklist/tree-checklist-example';
 import {TreeDynamicExample} from './tree-dynamic/tree-dynamic-example';
@@ -38,7 +38,7 @@ const EXAMPLES = [
     MatCheckboxModule,
     MatIconModule,
     MatInputModule,
-    MatProgressBarModule,
+    MatLegacyProgressBarModule,
     MatTreeModule,
   ],
   declarations: EXAMPLES,

diff --git a/src/dev-app/card/BUILD.bazel b/src/dev-app/card/BUILD.bazel
@@ -13,7 +13,7 @@ ng_module(
         "//src/material/button",
         "//src/material/divider",
         "//src/material/legacy-card",
-        "//src/material/progress-bar",
+        "//src/material/legacy-progress-bar",
     ],
 )
 

diff --git a/src/dev-app/card/card-demo.ts b/src/dev-app/card/card-demo.ts
@@ -10,14 +10,14 @@ import {Component} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatDividerModule} from '@angular/material/divider';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
 
 @Component({
   selector: 'card-demo',
   templateUrl: 'card-demo.html',
   styleUrls: ['card-demo.css'],
   standalone: true,
-  imports: [MatButtonModule, MatLegacyCardModule, MatDividerModule, MatProgressBarModule],
+  imports: [MatButtonModule, MatLegacyCardModule, MatDividerModule, MatLegacyProgressBarModule],
 })
 export class CardDemo {
   longText =

diff --git a/src/dev-app/mdc-progress-bar/BUILD.bazel b/src/dev-app/mdc-progress-bar/BUILD.bazel
@@ -11,8 +11,8 @@ ng_module(
     ],
     deps = [
         "//src/material-experimental/mdc-button",
-        "//src/material-experimental/mdc-progress-bar",
         "//src/material/button-toggle",
+        "//src/material/progress-bar",
         "@npm//@angular/forms",
     ],
 )

diff --git a/src/dev-app/mdc-progress-bar/mdc-progress-bar-demo.ts b/src/dev-app/mdc-progress-bar/mdc-progress-bar-demo.ts
@@ -10,7 +10,7 @@ import {Component} from '@angular/core';
 import {ThemePalette} from '@angular/material-experimental/mdc-core';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
-import {MatProgressBarModule} from '@angular/material-experimental/mdc-progress-bar';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatButtonModule} from '@angular/material-experimental/mdc-button';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 

diff --git a/src/dev-app/progress-bar/BUILD.bazel b/src/dev-app/progress-bar/BUILD.bazel
@@ -12,7 +12,7 @@ ng_module(
     deps = [
         "//src/material/button",
         "//src/material/button-toggle",
-        "//src/material/progress-bar",
+        "//src/material/legacy-progress-bar",
         "@npm//@angular/forms",
     ],
 )

diff --git a/src/dev-app/progress-bar/progress-bar-demo.ts b/src/dev-app/progress-bar/progress-bar-demo.ts
@@ -11,7 +11,7 @@ import {ThemePalette} from '@angular/material/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
 
 // TODO(josephperrott): Add an automatically filling example progress bar.
 
@@ -20,7 +20,7 @@ import {MatProgressBarModule} from '@angular/material/progress-bar';
   templateUrl: 'progress-bar-demo.html',
   styleUrls: ['progress-bar-demo.css'],
   standalone: true,
-  imports: [FormsModule, MatButtonModule, MatButtonToggleModule, MatProgressBarModule],
+  imports: [FormsModule, MatButtonModule, MatButtonToggleModule, MatLegacyProgressBarModule],
 })
 export class ProgressBarDemo {
   color: ThemePalette = 'primary';

diff --git a/src/dev-app/tree/BUILD.bazel b/src/dev-app/tree/BUILD.bazel
@@ -20,7 +20,7 @@ ng_module(
         "//src/material/form-field",
         "//src/material/icon",
         "//src/material/input",
-        "//src/material/progress-bar",
+        "//src/material/legacy-progress-bar",
         "//src/material/tree",
     ],
 )

diff --git a/src/dev-app/tree/tree-demo.ts b/src/dev-app/tree/tree-demo.ts
@@ -17,7 +17,7 @@ import {MatExpansionModule} from '@angular/material/expansion';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
 import {MatTreeModule} from '@angular/material/tree';
 
 @Component({
@@ -38,7 +38,7 @@ import {MatTreeModule} from '@angular/material/tree';
     MatIconModule,
     MatInputModule,
     MatTreeModule,
-    MatProgressBarModule,
+    MatLegacyProgressBarModule,
   ],
 })
 export class TreeDemo {}
diff --git a/src/e2e-app/BUILD.bazel b/src/e2e-app/BUILD.bazel
@@ -48,7 +48,6 @@ ng_module(
         "//src/material-experimental/mdc-dialog",
         "//src/material-experimental/mdc-input",
         "//src/material-experimental/mdc-menu",
-        "//src/material-experimental/mdc-progress-bar",
         "//src/material-experimental/mdc-progress-spinner",
         "//src/material-experimental/mdc-radio",
         "//src/material-experimental/mdc-slide-toggle",
@@ -64,6 +63,7 @@ ng_module(
         "//src/material/grid-list",
         "//src/material/icon",
         "//src/material/input",
+        "//src/material/legacy-progress-bar",
         "//src/material/list",
         "//src/material/menu",
         "//src/material/progress-bar",

diff --git a/src/e2e-app/mdc-progress-bar/mdc-progress-bar-e2e-module.ts b/src/e2e-app/mdc-progress-bar/mdc-progress-bar-e2e-module.ts
@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatProgressBarModule} from '@angular/material-experimental/mdc-progress-bar';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MdcProgressBarE2E} from './mdc-progress-bar-e2e';
 
 @NgModule({

diff --git a/src/e2e-app/progress-bar/progress-bar-e2e-module.ts b/src/e2e-app/progress-bar/progress-bar-e2e-module.ts
@@ -7,11 +7,11 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
 import {ProgressBarE2E} from './progress-bar-e2e';
 
 @NgModule({
-  imports: [MatProgressBarModule],
+  imports: [MatLegacyProgressBarModule],
   declarations: [ProgressBarE2E],
 })
 export class ProgressBarE2eModule {}
diff --git a/src/material-experimental/_index.scss b/src/material-experimental/_index.scss
@@ -45,8 +45,6 @@
   mdc-menu-density, mdc-menu-theme;
 @forward './mdc-paginator/paginator-theme' as mdc-paginator-* show mdc-paginator-color,
   mdc-paginator-typography, mdc-paginator-density, mdc-paginator-theme;
-@forward './mdc-progress-bar/progress-bar-theme' as mdc-progress-bar-* show mdc-progress-bar-color,
-  mdc-progress-bar-typography, mdc-progress-bar-density, mdc-progress-bar-theme;
 @forward './mdc-progress-spinner/progress-spinner-theme' as mdc-progress-spinner-* show
   mdc-progress-spinner-color, mdc-progress-spinner-typography, mdc-progress-spinner-density,
   mdc-progress-spinner-theme;

diff --git a/src/material-experimental/config.bzl b/src/material-experimental/config.bzl
@@ -22,8 +22,6 @@ entryPoints = [
     "mdc-menu/testing",
     "mdc-paginator",
     "mdc-paginator/testing",
-    "mdc-progress-bar",
-    "mdc-progress-bar/testing",
     "mdc-progress-spinner",
     "mdc-progress-spinner/testing",
     "mdc-radio",

diff --git a/src/material-experimental/mdc-core/color/_all-color.import.scss b/src/material-experimental/mdc-core/color/_all-color.import.scss
@@ -75,7 +75,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
 @forward '../../mdc-list/list-theme' as mat-mdc-list-*;
 @forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
 @forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
-@forward '../../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*;
 @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
 @forward '../../mdc-input/input-theme' as mat-mdc-input-*;
 @forward '../../mdc-form-field/form-field-density' as mat-mdc-*;

diff --git a/src/material-experimental/mdc-core/density/_all-density.import.scss b/src/material-experimental/mdc-core/density/_all-density.import.scss
@@ -75,7 +75,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
 @forward '../../mdc-list/list-theme' as mat-mdc-list-*;
 @forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
 @forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
-@forward '../../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*;
 @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
 @forward '../../mdc-input/input-theme' as mat-mdc-input-*;
 @forward '../../mdc-form-field/form-field-density' as mat-mdc-*;

diff --git a/src/material-experimental/mdc-core/theming/BUILD.bazel b/src/material-experimental/mdc-core/theming/BUILD.bazel
@@ -31,7 +31,6 @@ sass_library(
         "//src/material-experimental/mdc-list:mdc_list_scss_lib",
         "//src/material-experimental/mdc-menu:mdc_menu_scss_lib",
         "//src/material-experimental/mdc-paginator:mdc_paginator_scss_lib",
-        "//src/material-experimental/mdc-progress-bar:mdc_progress_bar_scss_lib",
         "//src/material-experimental/mdc-progress-spinner:mdc_progress_spinner_scss_lib",
         "//src/material-experimental/mdc-radio:mdc_radio_scss_lib",
         "//src/material-experimental/mdc-select:mdc_select_scss_lib",
@@ -41,6 +40,7 @@ sass_library(
         "//src/material-experimental/mdc-table:mdc_table_scss_lib",
         "//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib",
         "//src/material/card:card_scss_lib",
+        "//src/material/progress-bar:progress_bar_scss_lib",
         "//src/material/tooltip:tooltip_scss_lib",
     ],
 )

diff --git a/src/material-experimental/mdc-core/theming/_all-theme.import.scss b/src/material-experimental/mdc-core/theming/_all-theme.import.scss
@@ -75,7 +75,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
 @forward '../../mdc-list/list-theme' as mat-mdc-list-*;
 @forward '../../mdc-menu/menu-theme' as mat-mdc-menu-*;
 @forward '../../mdc-paginator/paginator-theme' as mat-mdc-paginator-*;
-@forward '../../mdc-progress-bar/progress-bar-theme' as mat-mdc-progress-bar-*;
 @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*;
 @forward '../../mdc-input/input-theme' as mat-mdc-input-*;
 @forward '../../mdc-form-field/form-field-density' as mat-mdc-*;
@@ -99,7 +98,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
 @import '../../mdc-tabs/tabs-theme';
 @import '../../mdc-table/table-theme';
 @import '../../mdc-paginator/paginator-theme';
-@import '../../mdc-progress-bar/progress-bar-theme';
 @import '../../mdc-progress-spinner/progress-spinner-theme';
 @import '../../mdc-input/input-theme';
 @import '../../mdc-form-field/form-field-theme';

diff --git a/src/material-experimental/mdc-core/theming/_all-theme.scss b/src/material-experimental/mdc-core/theming/_all-theme.scss
@@ -18,7 +18,6 @@
 @use '../../mdc-tabs/tabs-theme';
 @use '../../mdc-table/table-theme';
 @use '../../mdc-paginator/paginator-theme';
-@use '../../mdc-progress-bar/progress-bar-theme';
 @use '../../mdc-progress-spinner/progress-spinner-theme';
 @use '../../mdc-input/input-theme';
 @use '../../mdc-form-field/form-field-theme';
@@ -38,7 +37,7 @@
     @include list-theme.theme($theme-or-color-config);
     @include menu-theme.theme($theme-or-color-config);
     @include paginator-theme.theme($theme-or-color-config);
-    @include progress-bar-theme.theme($theme-or-color-config);
+    @include mat.progress-bar-theme($theme-or-color-config);
     @include progress-spinner-theme.theme($theme-or-color-config);
     @include radio-theme.theme($theme-or-color-config);
     @include select-theme.theme($theme-or-color-config);