Skip to content

Commit a928639

Browse files
authored
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)
1 parent 8cf2e99 commit a928639

File tree

139 files changed

+1523
-1249
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

139 files changed

+1523
-1249
lines changed

.github/CODEOWNERS

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
/src/material/bottom-sheet/** @jelbourn @crisbeto
66
/src/material/button-toggle/** @andrewseguin
77
/src/material/button/** @andrewseguin
8-
/src/material/card/** @andrewseguin
8+
/src/material/legacy-card/** @andrewseguin
99
/src/material/checkbox/** @andrewseguin @devversion
1010
/src/material/chips/** @andrewseguin
1111
/src/material/datepicker/** @mmalerba @crisbeto @zarend
@@ -107,7 +107,7 @@
107107
/src/material-experimental/column-resize/** @andrewseguin
108108
/src/material-experimental/mdc-autocomplete/** @crisbeto
109109
/src/material-experimental/mdc-button/** @andrewseguin
110-
/src/material-experimental/mdc-card/** @mmalerba
110+
/src/material/card/** @mmalerba
111111
/src/material-experimental/mdc-checkbox/** @mmalerba
112112
/src/material-experimental/mdc-chips/** @mmalerba
113113
/src/material-experimental/mdc-core/** @crisbeto
@@ -316,7 +316,7 @@
316316
/tools/public_api_guard/material/bottom-sheet** @andrewseguin @crisbeto
317317
/tools/public_api_guard/material/button-toggle** @andrewseguin
318318
/tools/public_api_guard/material/button** @andrewseguin
319-
/tools/public_api_guard/material/card** @andrewseguin
319+
/tools/public_api_guard/material/legacy-card** @andrewseguin
320320
/tools/public_api_guard/material/checkbox** @andrewseguin @devversion
321321
/tools/public_api_guard/material/chips** @andrewseguin
322322
/tools/public_api_guard/material/chips/testing** @andrewseguin

.ng-dev/commit-message.mts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const commitMessage: CommitMessageConfig = {
4242
'material-experimental/column-resize',
4343
'material-experimental/mdc-autocomplete',
4444
'material-experimental/mdc-button',
45-
'material-experimental/mdc-card',
45+
'material/card',
4646
'material-experimental/mdc-checkbox',
4747
'material-experimental/mdc-chips',
4848
'material-experimental/mdc-core',
@@ -73,7 +73,7 @@ export const commitMessage: CommitMessageConfig = {
7373
'material/bottom-sheet',
7474
'material/button',
7575
'material/button-toggle',
76-
'material/card',
76+
'material/legacy-card',
7777
'material/checkbox',
7878
'material/chips',
7979
'material/core',

src/components-examples/material-experimental/mdc-card/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ ng_module(
1111
]),
1212
deps = [
1313
"//src/material-experimental/mdc-button",
14-
"//src/material-experimental/mdc-card",
14+
"//src/material/card",
1515
],
1616
)
1717

src/components-examples/material-experimental/mdc-card/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {NgModule} from '@angular/core';
22
import {MatButtonModule} from '@angular/material-experimental/mdc-button';
3-
import {MatCardModule} from '@angular/material-experimental/mdc-card';
3+
import {MatCardModule} from '@angular/material/card';
44
import {MdcCardFancyExample} from './mdc-card-fancy/mdc-card-fancy-example';
55

66
export {MdcCardFancyExample};

src/components-examples/material/card/BUILD.bazel

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ ng_module(
1717
"//src/cdk/testing/testbed",
1818
"//src/material/button",
1919
"//src/material/button/testing",
20-
"//src/material/card",
21-
"//src/material/card/testing",
2220
"//src/material/divider",
21+
"//src/material/legacy-card",
22+
"//src/material/legacy-card/testing",
2323
"//src/material/progress-bar",
2424
"@npm//@angular/platform-browser",
2525
"@npm//@angular/platform-browser-dynamic",
@@ -44,8 +44,8 @@ ng_test_library(
4444
"//src/cdk/testing",
4545
"//src/cdk/testing/testbed",
4646
"//src/material/button/testing",
47-
"//src/material/card",
48-
"//src/material/card/testing",
47+
"//src/material/legacy-card",
48+
"//src/material/legacy-card/testing",
4949
"@npm//@angular/platform-browser-dynamic",
5050
],
5151
)

src/components-examples/material/card/card-harness/card-harness-example.spec.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import {ComponentFixture, TestBed} from '@angular/core/testing';
22
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
33
import {MatButtonHarness} from '@angular/material/button/testing';
4-
import {MatCardHarness} from '@angular/material/card/testing';
4+
import {MatLegacyCardHarness} from '@angular/material/legacy-card/testing';
55
import {HarnessLoader, parallel} from '@angular/cdk/testing';
6-
import {MatCardModule} from '@angular/material/card';
6+
import {MatLegacyCardModule} from '@angular/material/legacy-card';
77
import {CardHarnessExample} from './card-harness-example';
88

99
describe('CardHarnessExample', () => {
@@ -12,7 +12,7 @@ describe('CardHarnessExample', () => {
1212

1313
beforeEach(async () => {
1414
await TestBed.configureTestingModule({
15-
imports: [MatCardModule],
15+
imports: [MatLegacyCardModule],
1616
declarations: [CardHarnessExample],
1717
}).compileComponents();
1818
fixture = TestBed.createComponent(CardHarnessExample);
@@ -21,21 +21,21 @@ describe('CardHarnessExample', () => {
2121
});
2222

2323
it('should find card with text', async () => {
24-
const cards = await loader.getAllHarnesses(MatCardHarness.with({text: /spitz breed/}));
24+
const cards = await loader.getAllHarnesses(MatLegacyCardHarness.with({text: /spitz breed/}));
2525
expect(cards.length).toBe(1);
2626
expect(await cards[0].getTitleText()).toBe('Shiba Inu');
2727
});
2828

2929
it('should get subtitle text', async () => {
30-
const cards = await loader.getAllHarnesses(MatCardHarness);
30+
const cards = await loader.getAllHarnesses(MatLegacyCardHarness);
3131
expect(await parallel(() => cards.map(card => card.getSubtitleText()))).toEqual([
3232
'',
3333
'Dog Breed',
3434
]);
3535
});
3636

3737
it('should act as a harness loader for user content', async () => {
38-
const card = await loader.getHarness(MatCardHarness.with({title: 'Shiba Inu'}));
38+
const card = await loader.getHarness(MatLegacyCardHarness.with({title: 'Shiba Inu'}));
3939
const footerSubcomponents = (await card.getAllHarnesses(MatButtonHarness)) ?? [];
4040
expect(footerSubcomponents.length).toBe(2);
4141
});

src/components-examples/material/card/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {NgModule} from '@angular/core';
22
import {MatButtonModule} from '@angular/material/button';
3-
import {MatCardModule} from '@angular/material/card';
3+
import {MatLegacyCardModule} from '@angular/material/legacy-card';
44
import {MatDividerModule} from '@angular/material/divider';
55
import {MatProgressBarModule} from '@angular/material/progress-bar';
66
import {CardFancyExample} from './card-fancy/card-fancy-example';
@@ -32,7 +32,7 @@ const EXAMPLES = [
3232
];
3333

3434
@NgModule({
35-
imports: [MatButtonModule, MatCardModule, MatDividerModule, MatProgressBarModule],
35+
imports: [MatButtonModule, MatLegacyCardModule, MatDividerModule, MatProgressBarModule],
3636
declarations: EXAMPLES,
3737
exports: EXAMPLES,
3838
})

src/components-examples/material/checkbox/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ ng_module(
1515
deps = [
1616
"//src/cdk/testing",
1717
"//src/cdk/testing/testbed",
18-
"//src/material/card",
1918
"//src/material/checkbox",
2019
"//src/material/checkbox/testing",
20+
"//src/material/legacy-card",
2121
"//src/material/radio",
2222
"@npm//@angular/forms",
2323
"@npm//@angular/platform-browser",

src/components-examples/material/checkbox/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {CommonModule} from '@angular/common';
22
import {NgModule} from '@angular/core';
33
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
4-
import {MatCardModule} from '@angular/material/card';
4+
import {MatLegacyCardModule} from '@angular/material/legacy-card';
55
import {MatCheckboxModule} from '@angular/material/checkbox';
66
import {MatRadioModule} from '@angular/material/radio';
77
import {CheckboxConfigurableExample} from './checkbox-configurable/checkbox-configurable-example';
@@ -26,7 +26,7 @@ const EXAMPLES = [
2626
@NgModule({
2727
imports: [
2828
CommonModule,
29-
MatCardModule,
29+
MatLegacyCardModule,
3030
MatCheckboxModule,
3131
MatRadioModule,
3232
FormsModule,

src/components-examples/material/datepicker/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,12 @@ ng_module(
1717
"//src/cdk/testing/testbed",
1818
"//src/material-moment-adapter",
1919
"//src/material/button",
20-
"//src/material/card",
2120
"//src/material/core",
2221
"//src/material/datepicker",
2322
"//src/material/datepicker/testing",
2423
"//src/material/icon",
2524
"//src/material/input",
25+
"//src/material/legacy-card",
2626
"@npm//@angular/forms",
2727
"@npm//@angular/platform-browser",
2828
"@npm//@angular/platform-browser-dynamic",

0 commit comments

Comments
 (0)