Skip to content

docs(material/card): update docs & examples for MDC-based card #25517

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Aug 24, 2022
Merged

docs(material/card): update docs & examples for MDC-based card #25517

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4cbd63f
docs(material/card): update docs & examples for MDC-based card
mmalerba Aug 23, 2022
c594dae
delete mdc example
mmalerba Aug 23, 2022
22e06b3
update dev-app
mmalerba Aug 23, 2022
6386f12
fix e2e tests
mmalerba Aug 23, 2022
ca6652c
update docs markdown
mmalerba Aug 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
676 changes: 337 additions & 339 deletions .github/CODEOWNERS
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion src/components-examples/config.bzl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ ALL_EXAMPLES = [
"//src/components-examples/material/autocomplete",
"//src/components-examples/material-experimental/column-resize",
"//src/components-examples/material-experimental/popover-edit",
"//src/components-examples/material-experimental/mdc-card",
"//src/components-examples/material-experimental/selection",
"//src/components-examples/cdk/tree",
"//src/components-examples/cdk/text-field",
Expand Down
25 changes: 0 additions & 25 deletions src/components-examples/material-experimental/mdc-card/BUILD.bazel
View file
Open in desktop

This file was deleted.

15 changes: 0 additions & 15 deletions src/components-examples/material-experimental/mdc-card/index.ts
View file
Open in desktop

This file was deleted.

8 changes: 0 additions & 8 deletions ...ponents-examples/material-experimental/mdc-card/mdc-card-fancy/mdc-card-fancy-example.css
View file
Open in desktop

This file was deleted.

19 changes: 0 additions & 19 deletions ...onents-examples/material-experimental/mdc-card/mdc-card-fancy/mdc-card-fancy-example.html
View file
Open in desktop

This file was deleted.

11 changes: 0 additions & 11 deletions ...mponents-examples/material-experimental/mdc-card/mdc-card-fancy/mdc-card-fancy-example.ts
View file
Open in desktop

This file was deleted.

16 changes: 8 additions & 8 deletions src/components-examples/material/card/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ ng_module(
deps = [
"//src/cdk/testing",
"//src/cdk/testing/testbed",
"//src/material/button",
"//src/material/button/testing",
"//src/material/card",
"//src/material/card/testing",
"//src/material/divider",
"//src/material/legacy-button",
"//src/material/legacy-button/testing",
"//src/material/legacy-card",
"//src/material/legacy-card/testing",
"//src/material/legacy-progress-bar",
"//src/material/progress-bar",
"@npm//@angular/platform-browser",
"@npm//@angular/platform-browser-dynamic",
"@npm//@types/jasmine",
Expand All @@ -43,9 +43,9 @@ ng_test_library(
":card",
"//src/cdk/testing",
"//src/cdk/testing/testbed",
"//src/material/legacy-button/testing",
"//src/material/legacy-card",
"//src/material/legacy-card/testing",
"//src/material/button/testing",
"//src/material/card",
"//src/material/card/testing",
"@npm//@angular/platform-browser-dynamic",
],
)
Expand Down
16 changes: 10 additions & 6 deletions src/components-examples/material/card/card-actions/card-actions-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
<mat-card>
<mat-card-title>Actions Buttons</mat-card-title>
<mat-card-subtitle>Start</mat-card-subtitle>
<mat-card-header>
<mat-card-title>Actions Buttons</mat-card-title>
<mat-card-subtitle>Start</mat-card-subtitle>
</mat-card-header>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
<br>
<mat-card>
<mat-card-title>Actions Buttons</mat-card-title>
<mat-card-subtitle>End</mat-card-subtitle>
<mat-card-header>
<mat-card-title>Actions Buttons</mat-card-title>
<mat-card-subtitle>End</mat-card-subtitle>
</mat-card-header>
<mat-card-actions align="end">
<button mat-button>Like</button>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
</mat-card>
10 changes: 6 additions & 4 deletions src/components-examples/material/card/card-footer/card-footer-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
<mat-card class="example-card">
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
<mat-card-title>Shiba Inu</mat-card-title>
<mat-card-header>
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
<mat-card-title>Shiba Inu</mat-card-title>
</mat-card-header>
<mat-card-content>
<p>This card has divider and indeterminate progress as footer</p>
<p>{{ longText }}</p>
<mat-divider></mat-divider>
</mat-card-content>
<mat-divider inset></mat-divider>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
<mat-card-footer>
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</mat-card-footer>
</mat-card>
</mat-card>
16 changes: 8 additions & 8 deletions src/components-examples/material/card/card-harness/card-harness-example.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {MatLegacyButtonHarness} from '@angular/material/legacy-button/testing';
import {MatLegacyCardHarness} from '@angular/material/legacy-card/testing';
import {MatButtonHarness} from '@angular/material/button/testing';
import {MatCardHarness} from '@angular/material/card/testing';
import {HarnessLoader, parallel} from '@angular/cdk/testing';
import {MatLegacyCardModule} from '@angular/material/legacy-card';
import {MatCardModule} from '@angular/material/card';
import {CardHarnessExample} from './card-harness-example';

describe('CardHarnessExample', () => {
Expand All @@ -12,7 +12,7 @@ describe('CardHarnessExample', () => {

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [MatLegacyCardModule],
imports: [MatCardModule],
declarations: [CardHarnessExample],
}).compileComponents();
fixture = TestBed.createComponent(CardHarnessExample);
Expand All @@ -21,22 +21,22 @@ describe('CardHarnessExample', () => {
});

it('should find card with text', async () => {
const cards = await loader.getAllHarnesses(MatLegacyCardHarness.with({text: /spitz breed/}));
const cards = await loader.getAllHarnesses(MatCardHarness.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(MatLegacyCardHarness);
const cards = await loader.getAllHarnesses(MatCardHarness);
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(MatLegacyCardHarness.with({title: 'Shiba Inu'}));
const footerSubcomponents = (await card.getAllHarnesses(MatLegacyButtonHarness)) ?? [];
const card = await loader.getHarness(MatCardHarness.with({title: 'Shiba Inu'}));
const footerSubcomponents = (await card.getAllHarnesses(MatButtonHarness)) ?? [];
expect(footerSubcomponents.length).toBe(2);
});
});
50 changes: 29 additions & 21 deletions src/components-examples/material/card/card-media-size/card-media-size-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,52 @@
<!-- Cards with media area -->
<mat-card class="example-card">
<mat-card-title-group>
<mat-card-title>Shiba Inu</mat-card-title>
<mat-card-subtitle>Small</mat-card-subtitle>
<img mat-card-sm-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
</mat-card-title-group>
<mat-card-header>
<mat-card-title-group>
<mat-card-title>Shiba Inu</mat-card-title>
<mat-card-subtitle>Small</mat-card-subtitle>
<img mat-card-sm-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
</mat-card-title-group>
</mat-card-header>
<mat-card-content>
{{longText}}
</mat-card-content>
</mat-card>

<mat-card class="example-card">
<mat-card-title-group>
<mat-card-title>Shiba Inu</mat-card-title>
<mat-card-subtitle>Medium</mat-card-subtitle>
<img mat-card-md-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
</mat-card-title-group>
<mat-card-header>
<mat-card-title-group>
<mat-card-title>Shiba Inu</mat-card-title>
<mat-card-subtitle>Medium</mat-card-subtitle>
<img mat-card-md-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
</mat-card-title-group>
</mat-card-header>
<mat-card-content>
{{longText}}
</mat-card-content>
</mat-card>

<mat-card class="example-card">
<mat-card-title-group>
<mat-card-title>Shiba Inu</mat-card-title>
<mat-card-subtitle>Large</mat-card-subtitle>
<img mat-card-lg-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
</mat-card-title-group>
<mat-card-header>
<mat-card-title-group>
<mat-card-title>Shiba Inu</mat-card-title>
<mat-card-subtitle>Large</mat-card-subtitle>
<img mat-card-lg-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
</mat-card-title-group>
</mat-card-header>
<mat-card-content>
{{longText}}
</mat-card-content>
</mat-card>

<mat-card class="example-card">
<mat-card-title-group>
<mat-card-title>Shiba Inu</mat-card-title>
<mat-card-subtitle>Extra large</mat-card-subtitle>
<img mat-card-xl-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
</mat-card-title-group>
<mat-card-header>
<mat-card-title-group>
<mat-card-title>Shiba Inu</mat-card-title>
<mat-card-subtitle>Extra large</mat-card-subtitle>
<img mat-card-xl-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
</mat-card-title-group>
</mat-card-header>
<mat-card-content>
{{longText}}
</mat-card-content>
</mat-card>
</mat-card>
4 changes: 3 additions & 1 deletion src/components-examples/material/card/card-overview/card-overview-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
<mat-card>Simple card</mat-card>
<mat-card>
<mat-card-content>Simple card</mat-card-content>
</mat-card>
8 changes: 5 additions & 3 deletions src/components-examples/material/card/card-subtitle/card-subtitle-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<mat-card class="example-card">
<mat-card-title>Shiba Inu</mat-card-title>
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
<mat-card-header>
<mat-card-title>Shiba Inu</mat-card-title>
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>This card indeterminates progress bar.</p>
<p>{{longText}}</p>
Expand All @@ -9,4 +11,4 @@
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
</mat-card>
13 changes: 4 additions & 9 deletions src/components-examples/material/card/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import {NgModule} from '@angular/core';
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
import {MatLegacyCardModule} from '@angular/material/legacy-card';
import {MatButtonModule} from '@angular/material/button';
import {MatCardModule} from '@angular/material/card';
import {MatDividerModule} from '@angular/material/divider';
import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
import {MatProgressBarModule} from '@angular/material/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';
Expand Down Expand Up @@ -32,12 +32,7 @@ const EXAMPLES = [
];

@NgModule({
imports: [
MatLegacyButtonModule,
MatLegacyCardModule,
MatDividerModule,
MatLegacyProgressBarModule,
],
imports: [MatButtonModule, MatCardModule, MatDividerModule, MatProgressBarModule],
declarations: EXAMPLES,
exports: EXAMPLES,
})
Expand Down
2 changes: 1 addition & 1 deletion src/dev-app/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ ng_module(
"//src/dev-app/input",
"//src/dev-app/input-modality",
"//src/dev-app/layout",
"//src/dev-app/legacy-card",
"//src/dev-app/legacy-input",
"//src/dev-app/legacy-paginator",
"//src/dev-app/legacy-select",
Expand All @@ -57,7 +58,6 @@ ng_module(
"//src/dev-app/live-announcer",
"//src/dev-app/mdc-autocomplete",
"//src/dev-app/mdc-button",
"//src/dev-app/mdc-card",
"//src/dev-app/mdc-checkbox",
"//src/dev-app/mdc-chips",
"//src/dev-app/mdc-dialog",
Expand Down
7 changes: 3 additions & 4 deletions src/dev-app/card/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,9 @@ ng_module(
":card_demo_scss",
],
deps = [
"//src/material/divider",
"//src/material/legacy-button",
"//src/material/legacy-card",
"//src/material/legacy-progress-bar",
"//src/material/button",
"//src/material/card",
"//src/material/checkbox",
],
)

Expand Down
Loading