feat(material/card): Switch card implementation to use MDC (#25082)

Old implementation is still available under @angular/material/legacy-card BREAKING CHANGE: - DOM and CSS classes for mat-card have changes - Typescript API is largely the same but may have minor differences - See the MDC migration guide for more information about the changes and how to migrate your app (TODO: link when available)
angular · Jun 27, 2022 · a928639 · a928639
1 parent 8cf2e99
commit a928639
Show file tree

Hide file tree

Showing 139 changed files with 1,523 additions and 1,249 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -5,7 +5,7 @@
 /src/material/bottom-sheet/**                      @jelbourn @crisbeto
 /src/material/button-toggle/**                     @andrewseguin
 /src/material/button/**                            @andrewseguin
-/src/material/card/**                              @andrewseguin
+/src/material/legacy-card/**                              @andrewseguin
 /src/material/checkbox/**                          @andrewseguin @devversion
 /src/material/chips/**                             @andrewseguin
 /src/material/datepicker/**                        @mmalerba @crisbeto @zarend
@@ -107,7 +107,7 @@
 /src/material-experimental/column-resize/**        @andrewseguin
 /src/material-experimental/mdc-autocomplete/**     @crisbeto
 /src/material-experimental/mdc-button/**           @andrewseguin
-/src/material-experimental/mdc-card/**             @mmalerba
+/src/material/card/**             @mmalerba
 /src/material-experimental/mdc-checkbox/**         @mmalerba
 /src/material-experimental/mdc-chips/**            @mmalerba
 /src/material-experimental/mdc-core/**             @crisbeto
@@ -316,7 +316,7 @@
 /tools/public_api_guard/material/bottom-sheet**    @andrewseguin @crisbeto
 /tools/public_api_guard/material/button-toggle**   @andrewseguin
 /tools/public_api_guard/material/button**          @andrewseguin
-/tools/public_api_guard/material/card**            @andrewseguin
+/tools/public_api_guard/material/legacy-card**     @andrewseguin
 /tools/public_api_guard/material/checkbox**        @andrewseguin @devversion
 /tools/public_api_guard/material/chips**           @andrewseguin
 /tools/public_api_guard/material/chips/testing**   @andrewseguin

diff --git a/.ng-dev/commit-message.mts b/.ng-dev/commit-message.mts
@@ -42,7 +42,7 @@ export const commitMessage: CommitMessageConfig = {
     'material-experimental/column-resize',
     'material-experimental/mdc-autocomplete',
     'material-experimental/mdc-button',
-    'material-experimental/mdc-card',
+    'material/card',
     'material-experimental/mdc-checkbox',
     'material-experimental/mdc-chips',
     'material-experimental/mdc-core',
@@ -73,7 +73,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/bottom-sheet',
     'material/button',
     'material/button-toggle',
-    'material/card',
+    'material/legacy-card',
     'material/checkbox',
     'material/chips',
     'material/core',

diff --git a/src/components-examples/material-experimental/mdc-card/BUILD.bazel b/src/components-examples/material-experimental/mdc-card/BUILD.bazel
@@ -11,7 +11,7 @@ ng_module(
     ]),
     deps = [
         "//src/material-experimental/mdc-button",
-        "//src/material-experimental/mdc-card",
+        "//src/material/card",
     ],
 )
 

diff --git a/src/components-examples/material-experimental/mdc-card/index.ts b/src/components-examples/material-experimental/mdc-card/index.ts
@@ -1,6 +1,6 @@
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material-experimental/mdc-button';
-import {MatCardModule} from '@angular/material-experimental/mdc-card';
+import {MatCardModule} from '@angular/material/card';
 import {MdcCardFancyExample} from './mdc-card-fancy/mdc-card-fancy-example';
 
 export {MdcCardFancyExample};

diff --git a/src/components-examples/material/card/BUILD.bazel b/src/components-examples/material/card/BUILD.bazel
@@ -17,9 +17,9 @@ ng_module(
         "//src/cdk/testing/testbed",
         "//src/material/button",
         "//src/material/button/testing",
-        "//src/material/card",
-        "//src/material/card/testing",
         "//src/material/divider",
+        "//src/material/legacy-card",
+        "//src/material/legacy-card/testing",
         "//src/material/progress-bar",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
@@ -44,8 +44,8 @@ ng_test_library(
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material/button/testing",
-        "//src/material/card",
-        "//src/material/card/testing",
+        "//src/material/legacy-card",
+        "//src/material/legacy-card/testing",
         "@npm//@angular/platform-browser-dynamic",
     ],
 )

diff --git a/src/components-examples/material/card/card-harness/card-harness-example.spec.ts b/src/components-examples/material/card/card-harness/card-harness-example.spec.ts
@@ -1,9 +1,9 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {MatButtonHarness} from '@angular/material/button/testing';
-import {MatCardHarness} from '@angular/material/card/testing';
+import {MatLegacyCardHarness} from '@angular/material/legacy-card/testing';
 import {HarnessLoader, parallel} from '@angular/cdk/testing';
-import {MatCardModule} from '@angular/material/card';
+import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {CardHarnessExample} from './card-harness-example';
 
 describe('CardHarnessExample', () => {
@@ -12,7 +12,7 @@ describe('CardHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatCardModule],
+      imports: [MatLegacyCardModule],
       declarations: [CardHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(CardHarnessExample);
@@ -21,21 +21,21 @@ describe('CardHarnessExample', () => {
   });
 
   it('should find card with text', async () => {
-    const cards = await loader.getAllHarnesses(MatCardHarness.with({text: /spitz breed/}));
+    const cards = await loader.getAllHarnesses(MatLegacyCardHarness.with({text: /spitz breed/}));
     expect(cards.length).toBe(1);
     expect(await cards[0].getTitleText()).toBe('Shiba Inu');
   });
 
   it('should get subtitle text', async () => {
-    const cards = await loader.getAllHarnesses(MatCardHarness);
+    const cards = await loader.getAllHarnesses(MatLegacyCardHarness);
     expect(await parallel(() => cards.map(card => card.getSubtitleText()))).toEqual([
       '',
       'Dog Breed',
     ]);
   });
 
   it('should act as a harness loader for user content', async () => {
-    const card = await loader.getHarness(MatCardHarness.with({title: 'Shiba Inu'}));
+    const card = await loader.getHarness(MatLegacyCardHarness.with({title: 'Shiba Inu'}));
     const footerSubcomponents = (await card.getAllHarnesses(MatButtonHarness)) ?? [];
     expect(footerSubcomponents.length).toBe(2);
   });

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

diff --git a/src/components-examples/material/checkbox/BUILD.bazel b/src/components-examples/material/checkbox/BUILD.bazel
@@ -15,9 +15,9 @@ ng_module(
     deps = [
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/card",
         "//src/material/checkbox",
         "//src/material/checkbox/testing",
+        "//src/material/legacy-card",
         "//src/material/radio",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",

diff --git a/src/components-examples/material/checkbox/index.ts b/src/components-examples/material/checkbox/index.ts
@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatCardModule} from '@angular/material/card';
+import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatRadioModule} from '@angular/material/radio';
 import {CheckboxConfigurableExample} from './checkbox-configurable/checkbox-configurable-example';
@@ -26,7 +26,7 @@ const EXAMPLES = [
 @NgModule({
   imports: [
     CommonModule,
-    MatCardModule,
+    MatLegacyCardModule,
     MatCheckboxModule,
     MatRadioModule,
     FormsModule,

diff --git a/src/components-examples/material/datepicker/BUILD.bazel b/src/components-examples/material/datepicker/BUILD.bazel
@@ -17,12 +17,12 @@ ng_module(
         "//src/cdk/testing/testbed",
         "//src/material-moment-adapter",
         "//src/material/button",
-        "//src/material/card",
         "//src/material/core",
         "//src/material/datepicker",
         "//src/material/datepicker/testing",
         "//src/material/icon",
         "//src/material/input",
+        "//src/material/legacy-card",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",

diff --git a/src/components-examples/material/datepicker/index.ts b/src/components-examples/material/datepicker/index.ts
@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
-import {MatCardModule} from '@angular/material/card';
+import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatNativeDateModule, MAT_DATE_LOCALE} from '@angular/material/core';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatIconModule} from '@angular/material/icon';
@@ -96,7 +96,7 @@ const EXAMPLES = [
   imports: [
     CommonModule,
     MatButtonModule,
-    MatCardModule,
+    MatLegacyCardModule,
     MatDatepickerModule,
     MatInputModule,
     MatIconModule,

diff --git a/src/components-examples/material/progress-bar/BUILD.bazel b/src/components-examples/material/progress-bar/BUILD.bazel
@@ -15,7 +15,7 @@ ng_module(
     deps = [
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/card",
+        "//src/material/legacy-card",
         "//src/material/progress-bar",
         "//src/material/progress-bar/testing",
         "//src/material/radio",

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

diff --git a/src/components-examples/material/progress-spinner/BUILD.bazel b/src/components-examples/material/progress-spinner/BUILD.bazel
@@ -15,7 +15,7 @@ ng_module(
     deps = [
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/card",
+        "//src/material/legacy-card",
         "//src/material/progress-spinner",
         "//src/material/progress-spinner/testing",
         "//src/material/radio",

diff --git a/src/components-examples/material/progress-spinner/index.ts b/src/components-examples/material/progress-spinner/index.ts
@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MatCardModule} from '@angular/material/card';
+import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatRadioModule} from '@angular/material/radio';
 import {MatSliderModule} from '@angular/material/slider';
@@ -24,7 +24,7 @@ const EXAMPLES = [
 @NgModule({
   imports: [
     CommonModule,
-    MatCardModule,
+    MatLegacyCardModule,
     MatProgressSpinnerModule,
     MatRadioModule,
     MatSliderModule,

diff --git a/src/components-examples/material/slide-toggle/BUILD.bazel b/src/components-examples/material/slide-toggle/BUILD.bazel
@@ -16,8 +16,8 @@ ng_module(
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material/button",
-        "//src/material/card",
         "//src/material/checkbox",
+        "//src/material/legacy-card",
         "//src/material/radio",
         "//src/material/slide-toggle",
         "//src/material/slide-toggle/testing",

diff --git a/src/components-examples/material/slide-toggle/index.ts b/src/components-examples/material/slide-toggle/index.ts
@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
-import {MatCardModule} from '@angular/material/card';
+import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatRadioModule} from '@angular/material/radio';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
@@ -28,7 +28,7 @@ const EXAMPLES = [
   imports: [
     FormsModule,
     MatButtonModule,
-    MatCardModule,
+    MatLegacyCardModule,
     MatCheckboxModule,
     MatRadioModule,
     MatSlideToggleModule,

diff --git a/src/components-examples/material/slider/BUILD.bazel b/src/components-examples/material/slider/BUILD.bazel
@@ -15,9 +15,9 @@ ng_module(
     deps = [
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/card",
         "//src/material/checkbox",
         "//src/material/input",
+        "//src/material/legacy-card",
         "//src/material/slider",
         "//src/material/slider/testing",
         "@npm//@angular/forms",

diff --git a/src/components-examples/material/slider/index.ts b/src/components-examples/material/slider/index.ts
@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MatCardModule} from '@angular/material/card';
+import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatInputModule} from '@angular/material/input';
 import {MatSliderModule} from '@angular/material/slider';
@@ -28,7 +28,7 @@ const EXAMPLES = [
   imports: [
     CommonModule,
     FormsModule,
-    MatCardModule,
+    MatLegacyCardModule,
     MatCheckboxModule,
     MatInputModule,
     MatSliderModule,

diff --git a/src/dev-app/autocomplete/BUILD.bazel b/src/dev-app/autocomplete/BUILD.bazel
@@ -12,9 +12,9 @@ ng_module(
     deps = [
         "//src/material/autocomplete",
         "//src/material/button",
-        "//src/material/card",
         "//src/material/form-field",
         "//src/material/input",
+        "//src/material/legacy-card",
         "@npm//@angular/forms",
     ],
 )

diff --git a/src/dev-app/autocomplete/autocomplete-demo.ts b/src/dev-app/autocomplete/autocomplete-demo.ts
@@ -11,7 +11,7 @@ import {CommonModule} from '@angular/common';
 import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatButtonModule} from '@angular/material/button';
-import {MatCardModule} from '@angular/material/card';
+import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
 import {Observable} from 'rxjs';
@@ -37,7 +37,7 @@ export interface StateGroup {
     FormsModule,
     MatAutocompleteModule,
     MatButtonModule,
-    MatCardModule,
+    MatLegacyCardModule,
     MatFormFieldModule,
     MatInputModule,
     ReactiveFormsModule,

diff --git a/src/dev-app/baseline/BUILD.bazel b/src/dev-app/baseline/BUILD.bazel
@@ -10,10 +10,10 @@ ng_module(
         ":baseline_demo_scss",
     ],
     deps = [
-        "//src/material/card",
         "//src/material/checkbox",
         "//src/material/form-field",
         "//src/material/input",
+        "//src/material/legacy-card",
         "//src/material/radio",
         "//src/material/select",
         "//src/material/toolbar",

diff --git a/src/dev-app/baseline/baseline-demo.ts b/src/dev-app/baseline/baseline-demo.ts
@@ -8,7 +8,7 @@
 
 import {Component} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {MatCardModule} from '@angular/material/card';
+import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
@@ -23,7 +23,7 @@ import {MatToolbarModule} from '@angular/material/toolbar';
   standalone: true,
   imports: [
     CommonModule,
-    MatCardModule,
+    MatLegacyCardModule,
     MatCheckboxModule,
     MatFormFieldModule,
     MatInputModule,

diff --git a/src/dev-app/bottom-sheet/BUILD.bazel b/src/dev-app/bottom-sheet/BUILD.bazel
@@ -12,11 +12,11 @@ ng_module(
     deps = [
         "//src/material/bottom-sheet",
         "//src/material/button",
-        "//src/material/card",
         "//src/material/checkbox",
         "//src/material/form-field",
         "//src/material/icon",
         "//src/material/input",
+        "//src/material/legacy-card",
         "//src/material/list",
         "//src/material/select",
         "@npm//@angular/forms",