Skip to content

Commit 189a9b7

Browse files
mmalerbammalerba
authored
docs(material/card): update docs & examples for MDC-based card (#25517)
* docs(material/card): update docs & examples for MDC-based card * delete mdc example * update dev-app * fix e2e tests * update docs markdown
1 parent 9acb7b2 commit 189a9b7

Some content is hidden

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

42 files changed

+742
-914
lines changed

‎.github/CODEOWNERS

Lines changed: 337 additions & 339 deletions
Large diffs are not rendered by default.

‎src/components-examples/config.bzl

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ ALL_EXAMPLES = [
3939
"//src/components-examples/material/autocomplete",
4040
"//src/components-examples/material-experimental/column-resize",
4141
"//src/components-examples/material-experimental/popover-edit",
42-
"//src/components-examples/material-experimental/mdc-card",
4342
"//src/components-examples/material-experimental/selection",
4443
"//src/components-examples/cdk/tree",
4544
"//src/components-examples/cdk/text-field",

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

Lines changed: 0 additions & 25 deletions
This file was deleted.

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

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎src/components-examples/material-experimental/mdc-card/mdc-card-fancy/mdc-card-fancy-example.css

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/components-examples/material-experimental/mdc-card/mdc-card-fancy/mdc-card-fancy-example.html

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎src/components-examples/material-experimental/mdc-card/mdc-card-fancy/mdc-card-fancy-example.ts

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎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
})

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ ng_module(
4747
"//src/dev-app/input",
4848
"//src/dev-app/input-modality",
4949
"//src/dev-app/layout",
50+
"//src/dev-app/legacy-card",
5051
"//src/dev-app/legacy-input",
5152
"//src/dev-app/legacy-paginator",
5253
"//src/dev-app/legacy-select",
@@ -57,7 +58,6 @@ ng_module(
5758
"//src/dev-app/live-announcer",
5859
"//src/dev-app/mdc-autocomplete",
5960
"//src/dev-app/mdc-button",
60-
"//src/dev-app/mdc-card",
6161
"//src/dev-app/mdc-checkbox",
6262
"//src/dev-app/mdc-chips",
6363
"//src/dev-app/mdc-dialog",

‎src/dev-app/card/BUILD.bazel

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,9 @@ ng_module(
1010
":card_demo_scss",
1111
],
1212
deps = [
13-
"//src/material/divider",
14-
"//src/material/legacy-button",
15-
"//src/material/legacy-card",
16-
"//src/material/legacy-progress-bar",
13+
"//src/material/button",
14+
"//src/material/card",
15+
"//src/material/checkbox",
1716
],
1817
)
1918

0 commit comments

Comments
 (0)