Skip to content

Commit 4cbd63f

Browse files
mmalerbammalerba
committed
docs(material/card): update docs & examples for MDC-based card
1 parent 49792f4 commit 4cbd63f

File tree

8 files changed

+73
-60
lines changed

8 files changed

+73
-60
lines changed

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@ ng_module(
1515
deps = [
1616
"//src/cdk/testing",
1717
"//src/cdk/testing/testbed",
18+
"//src/material/button",
19+
"//src/material/button/testing",
20+
"//src/material/card",
21+
"//src/material/card/testing",
1822
"//src/material/divider",
19-
"//src/material/legacy-button",
20-
"//src/material/legacy-button/testing",
21-
"//src/material/legacy-card",
22-
"//src/material/legacy-card/testing",
23-
"//src/material/legacy-progress-bar",
23+
"//src/material/progress-bar",
2424
"@npm//@angular/platform-browser",
2525
"@npm//@angular/platform-browser-dynamic",
2626
"@npm//@types/jasmine",
@@ -43,9 +43,9 @@ ng_test_library(
4343
":card",
4444
"//src/cdk/testing",
4545
"//src/cdk/testing/testbed",
46-
"//src/material/legacy-button/testing",
47-
"//src/material/legacy-card",
48-
"//src/material/legacy-card/testing",
46+
"//src/material/button/testing",
47+
"//src/material/card",
48+
"//src/material/card/testing",
4949
"@npm//@angular/platform-browser-dynamic",
5050
],
5151
)

‎src/components-examples/material/card/card-actions/card-actions-example.html

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
<mat-card>
2-
<mat-card-title>Actions Buttons</mat-card-title>
3-
<mat-card-subtitle>Start</mat-card-subtitle>
2+
<mat-card-header>
3+
<mat-card-title>Actions Buttons</mat-card-title>
4+
<mat-card-subtitle>Start</mat-card-subtitle>
5+
</mat-card-header>
46
<mat-card-actions>
57
<button mat-button>LIKE</button>
68
<button mat-button>SHARE</button>
79
</mat-card-actions>
810
</mat-card>
911
<br>
1012
<mat-card>
11-
<mat-card-title>Actions Buttons</mat-card-title>
12-
<mat-card-subtitle>End</mat-card-subtitle>
13+
<mat-card-header>
14+
<mat-card-title>Actions Buttons</mat-card-title>
15+
<mat-card-subtitle>End</mat-card-subtitle>
16+
</mat-card-header>
1317
<mat-card-actions align="end">
14-
<button mat-button>Like</button>
18+
<button mat-button>LIKE</button>
1519
<button mat-button>SHARE</button>
1620
</mat-card-actions>
17-
</mat-card>
21+
</mat-card>

‎src/components-examples/material/card/card-footer/card-footer-example.html

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
<mat-card class="example-card">
2-
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
3-
<mat-card-title>Shiba Inu</mat-card-title>
2+
<mat-card-header>
3+
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
4+
<mat-card-title>Shiba Inu</mat-card-title>
5+
</mat-card-header>
46
<mat-card-content>
57
<p>This card has divider and indeterminate progress as footer</p>
68
<p>{{ longText }}</p>
9+
<mat-divider></mat-divider>
710
</mat-card-content>
8-
<mat-divider inset></mat-divider>
911
<mat-card-actions>
1012
<button mat-button>LIKE</button>
1113
<button mat-button>SHARE</button>
1214
</mat-card-actions>
1315
<mat-card-footer>
1416
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
1517
</mat-card-footer>
16-
</mat-card>
18+
</mat-card>

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

Lines changed: 8 additions & 8 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';
3-
import {MatLegacyButtonHarness} from '@angular/material/legacy-button/testing';
4-
import {MatLegacyCardHarness} from '@angular/material/legacy-card/testing';
3+
import {MatButtonHarness} from '@angular/material/button/testing';
4+
import {MatCardHarness} from '@angular/material/card/testing';
55
import {HarnessLoader, parallel} from '@angular/cdk/testing';
6-
import {MatLegacyCardModule} from '@angular/material/legacy-card';
6+
import {MatCardModule} from '@angular/material/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: [MatLegacyCardModule],
15+
imports: [MatCardModule],
1616
declarations: [CardHarnessExample],
1717
}).compileComponents();
1818
fixture = TestBed.createComponent(CardHarnessExample);
@@ -21,22 +21,22 @@ describe('CardHarnessExample', () => {
2121
});
2222

2323
it('should find card with text', async () => {
24-
const cards = await loader.getAllHarnesses(MatLegacyCardHarness.with({text: /spitz breed/}));
24+
const cards = await loader.getAllHarnesses(MatCardHarness.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(MatLegacyCardHarness);
30+
const cards = await loader.getAllHarnesses(MatCardHarness);
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(MatLegacyCardHarness.with({title: 'Shiba Inu'}));
39-
const footerSubcomponents = (await card.getAllHarnesses(MatLegacyButtonHarness)) ?? [];
38+
const card = await loader.getHarness(MatCardHarness.with({title: 'Shiba Inu'}));
39+
const footerSubcomponents = (await card.getAllHarnesses(MatButtonHarness)) ?? [];
4040
expect(footerSubcomponents.length).toBe(2);
4141
});
4242
});

‎src/components-examples/material/card/card-media-size/card-media-size-example.html

Lines changed: 29 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,52 @@
11
<!-- Cards with media area -->
22
<mat-card class="example-card">
3-
<mat-card-title-group>
4-
<mat-card-title>Shiba Inu</mat-card-title>
5-
<mat-card-subtitle>Small</mat-card-subtitle>
6-
<img mat-card-sm-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
7-
</mat-card-title-group>
3+
<mat-card-header>
4+
<mat-card-title-group>
5+
<mat-card-title>Shiba Inu</mat-card-title>
6+
<mat-card-subtitle>Small</mat-card-subtitle>
7+
<img mat-card-sm-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
8+
</mat-card-title-group>
9+
</mat-card-header>
810
<mat-card-content>
911
{{longText}}
1012
</mat-card-content>
1113
</mat-card>
1214

1315
<mat-card class="example-card">
14-
<mat-card-title-group>
15-
<mat-card-title>Shiba Inu</mat-card-title>
16-
<mat-card-subtitle>Medium</mat-card-subtitle>
17-
<img mat-card-md-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
18-
</mat-card-title-group>
16+
<mat-card-header>
17+
<mat-card-title-group>
18+
<mat-card-title>Shiba Inu</mat-card-title>
19+
<mat-card-subtitle>Medium</mat-card-subtitle>
20+
<img mat-card-md-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
21+
</mat-card-title-group>
22+
</mat-card-header>
1923
<mat-card-content>
2024
{{longText}}
2125
</mat-card-content>
2226
</mat-card>
2327

2428
<mat-card class="example-card">
25-
<mat-card-title-group>
26-
<mat-card-title>Shiba Inu</mat-card-title>
27-
<mat-card-subtitle>Large</mat-card-subtitle>
28-
<img mat-card-lg-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
29-
</mat-card-title-group>
29+
<mat-card-header>
30+
<mat-card-title-group>
31+
<mat-card-title>Shiba Inu</mat-card-title>
32+
<mat-card-subtitle>Large</mat-card-subtitle>
33+
<img mat-card-lg-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
34+
</mat-card-title-group>
35+
</mat-card-header>
3036
<mat-card-content>
3137
{{longText}}
3238
</mat-card-content>
3339
</mat-card>
3440

3541
<mat-card class="example-card">
36-
<mat-card-title-group>
37-
<mat-card-title>Shiba Inu</mat-card-title>
38-
<mat-card-subtitle>Extra large</mat-card-subtitle>
39-
<img mat-card-xl-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
40-
</mat-card-title-group>
42+
<mat-card-header>
43+
<mat-card-title-group>
44+
<mat-card-title>Shiba Inu</mat-card-title>
45+
<mat-card-subtitle>Extra large</mat-card-subtitle>
46+
<img mat-card-xl-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
47+
</mat-card-title-group>
48+
</mat-card-header>
4149
<mat-card-content>
4250
{{longText}}
4351
</mat-card-content>
44-
</mat-card>
52+
</mat-card>

‎src/components-examples/material/card/card-overview/card-overview-example.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
<mat-card>Simple card</mat-card>
1+
<mat-card>
2+
<mat-card-content>Simple card</mat-card-content>
3+
</mat-card>

‎src/components-examples/material/card/card-subtitle/card-subtitle-example.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<mat-card class="example-card">
2-
<mat-card-title>Shiba Inu</mat-card-title>
3-
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
2+
<mat-card-header>
3+
<mat-card-title>Shiba Inu</mat-card-title>
4+
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
5+
</mat-card-header>
46
<mat-card-content>
57
<p>This card indeterminates progress bar.</p>
68
<p>{{longText}}</p>
@@ -9,4 +11,4 @@
911
<button mat-button>LIKE</button>
1012
<button mat-button>SHARE</button>
1113
</mat-card-actions>
12-
</mat-card>
14+
</mat-card>

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

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import {NgModule} from '@angular/core';
2-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
3-
import {MatLegacyCardModule} from '@angular/material/legacy-card';
2+
import {MatButtonModule} from '@angular/material/button';
3+
import {MatCardModule} from '@angular/material/card';
44
import {MatDividerModule} from '@angular/material/divider';
5-
import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
5+
import {MatProgressBarModule} from '@angular/material/progress-bar';
66
import {CardFancyExample} from './card-fancy/card-fancy-example';
77
import {CardOverviewExample} from './card-overview/card-overview-example';
88
import {CardHarnessExample} from './card-harness/card-harness-example';
@@ -32,12 +32,7 @@ const EXAMPLES = [
3232
];
3333

3434
@NgModule({
35-
imports: [
36-
MatLegacyButtonModule,
37-
MatLegacyCardModule,
38-
MatDividerModule,
39-
MatLegacyProgressBarModule,
40-
],
35+
imports: [MatButtonModule, MatCardModule, MatDividerModule, MatProgressBarModule],
4136
declarations: EXAMPLES,
4237
exports: EXAMPLES,
4338
})

0 commit comments

Comments
 (0)