Skip to content
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.

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

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

Merged
merged 1 commit into from Jun 27, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions .github/CODEOWNERS
Validating CODEOWNERS rules …
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions .ng-dev/commit-message.mts
Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand Down
Expand Up @@ -11,7 +11,7 @@ ng_module(
]),
deps = [
"//src/material-experimental/mdc-button",
"//src/material-experimental/mdc-card",
"//src/material/card",
],
)

Expand Down
@@ -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};
Expand Down
8 changes: 4 additions & 4 deletions src/components-examples/material/card/BUILD.bazel
Expand Up @@ -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",
Expand All @@ -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",
],
)
Expand Down
@@ -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', () => {
Expand All @@ -12,7 +12,7 @@ describe('CardHarnessExample', () => {

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [MatCardModule],
imports: [MatLegacyCardModule],
declarations: [CardHarnessExample],
}).compileComponents();
fixture = TestBed.createComponent(CardHarnessExample);
Expand All @@ -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);
});
Expand Down
4 changes: 2 additions & 2 deletions 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';
Expand Down Expand Up @@ -32,7 +32,7 @@ const EXAMPLES = [
];

@NgModule({
imports: [MatButtonModule, MatCardModule, MatDividerModule, MatProgressBarModule],
imports: [MatButtonModule, MatLegacyCardModule, MatDividerModule, MatProgressBarModule],
declarations: EXAMPLES,
exports: EXAMPLES,
})
Expand Down
2 changes: 1 addition & 1 deletion src/components-examples/material/checkbox/BUILD.bazel
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions 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';
Expand All @@ -26,7 +26,7 @@ const EXAMPLES = [
@NgModule({
imports: [
CommonModule,
MatCardModule,
MatLegacyCardModule,
MatCheckboxModule,
MatRadioModule,
FormsModule,
Expand Down
2 changes: 1 addition & 1 deletion src/components-examples/material/datepicker/BUILD.bazel
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions src/components-examples/material/datepicker/index.ts
Expand Up @@ -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';
Expand Down Expand Up @@ -96,7 +96,7 @@ const EXAMPLES = [
imports: [
CommonModule,
MatButtonModule,
MatCardModule,
MatLegacyCardModule,
MatDatepickerModule,
MatInputModule,
MatIconModule,
Expand Down
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions 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';
Expand Down Expand Up @@ -33,7 +33,7 @@ const EXAMPLES = [
@NgModule({
imports: [
CommonModule,
MatCardModule,
MatLegacyCardModule,
MatProgressBarModule,
MatRadioModule,
MatSliderModule,
Expand Down
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions 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';
Expand All @@ -24,7 +24,7 @@ const EXAMPLES = [
@NgModule({
imports: [
CommonModule,
MatCardModule,
MatLegacyCardModule,
MatProgressSpinnerModule,
MatRadioModule,
MatSliderModule,
Expand Down
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions 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';
Expand All @@ -28,7 +28,7 @@ const EXAMPLES = [
imports: [
FormsModule,
MatButtonModule,
MatCardModule,
MatLegacyCardModule,
MatCheckboxModule,
MatRadioModule,
MatSlideToggleModule,
Expand Down
2 changes: 1 addition & 1 deletion src/components-examples/material/slider/BUILD.bazel
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions 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';
Expand All @@ -28,7 +28,7 @@ const EXAMPLES = [
imports: [
CommonModule,
FormsModule,
MatCardModule,
MatLegacyCardModule,
MatCheckboxModule,
MatInputModule,
MatSliderModule,
Expand Down
2 changes: 1 addition & 1 deletion src/dev-app/autocomplete/BUILD.bazel
Expand Up @@ -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",
],
)
Expand Down
4 changes: 2 additions & 2 deletions src/dev-app/autocomplete/autocomplete-demo.ts
Expand Up @@ -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';
Expand All @@ -37,7 +37,7 @@ export interface StateGroup {
FormsModule,
MatAutocompleteModule,
MatButtonModule,
MatCardModule,
MatLegacyCardModule,
MatFormFieldModule,
MatInputModule,
ReactiveFormsModule,
Expand Down
2 changes: 1 addition & 1 deletion src/dev-app/baseline/BUILD.bazel
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions src/dev-app/baseline/baseline-demo.ts
Expand Up @@ -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';
Expand All @@ -23,7 +23,7 @@ import {MatToolbarModule} from '@angular/material/toolbar';
standalone: true,
imports: [
CommonModule,
MatCardModule,
MatLegacyCardModule,
MatCheckboxModule,
MatFormFieldModule,
MatInputModule,
Expand Down
2 changes: 1 addition & 1 deletion src/dev-app/bottom-sheet/BUILD.bazel
Expand Up @@ -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",
Expand Down