Skip to content

Commit 00f4abe

Browse files
amysortoamysorto
authored
feat(material/button): Switch button implementation to use MDC (angular#25381)
Switches the implementation of mat-button, mat-fab, and mat-icon-button to use MDC by default. BREAKING CHANGE: DOM and CSS classes for mat-button, mat-fab, and mat-icon-button have changed. Typescript API is largely the same but may have minor differences.
1 parent 4d723d7 commit 00f4abe

File tree

270 files changed

+2415
-2151
lines changed

Some content is hidden

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

270 files changed

+2415
-2151
lines changed

‎.github/CODEOWNERS

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
/src/material/badge/** @jelbourn
55
/src/material/bottom-sheet/** @jelbourn @crisbeto
66
/src/material/button-toggle/** @andrewseguin
7-
/src/material/button/** @andrewseguin
7+
/src/material/legacy-button/** @andrewseguin
88
/src/material/legacy-card/** @andrewseguin
99
/src/material/legacy-checkbox/** @andrewseguin @devversion
1010
/src/material/legacy-chips/** @andrewseguin
@@ -111,7 +111,7 @@
111111
/src/material-experimental/* @andrewseguin
112112
/src/material-experimental/column-resize/** @andrewseguin
113113
/src/material/autocomplete/** @crisbeto
114-
/src/material-experimental/mdc-button/** @andrewseguin
114+
/src/material/button/** @andrewseguin
115115
/src/material/card/** @mmalerba
116116
/src/material/checkbox/** @mmalerba
117117
/src/material/chips/** @mmalerba @crisbeto
@@ -319,7 +319,7 @@
319319
/tools/public_api_guard/material/badge** @andrewseguin
320320
/tools/public_api_guard/material/bottom-sheet** @andrewseguin @crisbeto
321321
/tools/public_api_guard/material/button-toggle** @andrewseguin
322-
/tools/public_api_guard/material/button** @andrewseguin
322+
/tools/public_api_guard/material/legacy-button** @andrewseguin
323323
/tools/public_api_guard/material/legacy-card** @andrewseguin
324324
/tools/public_api_guard/material/legacy-checkbox** @andrewseguin @devversion
325325
/tools/public_api_guard/material/chips** @andrewseguin

‎.ng-dev/commit-message.mts

+2-2
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const commitMessage: CommitMessageConfig = {
4040
'cdk/tree',
4141
'google-maps',
4242
'material-experimental/column-resize',
43-
'material-experimental/mdc-button',
43+
'material/button',
4444
'material/card',
4545
'material/checkbox',
4646
'material-experimental/mdc-core',
@@ -65,7 +65,7 @@ export const commitMessage: CommitMessageConfig = {
6565
'material/legacy-autocomplete',
6666
'material/badge',
6767
'material/bottom-sheet',
68-
'material/button',
68+
'material/legacy-button',
6969
'material/button-toggle',
7070
'material/legacy-card',
7171
'material/legacy-checkbox',

‎integration/yarn-pnp-compat/src/app/app.module.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import {NgModule} from '@angular/core';
22
import {BrowserModule} from '@angular/platform-browser';
3-
import {MatButtonModule} from '@angular/material/button';
3+
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
44

55
import {AppComponent} from './app.component';
66
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
77

88
@NgModule({
99
declarations: [AppComponent],
10-
imports: [BrowserModule, BrowserAnimationsModule, MatButtonModule],
10+
imports: [BrowserModule, BrowserAnimationsModule, MatLegacyButtonModule],
1111
providers: [],
1212
bootstrap: [AppComponent],
1313
})

‎src/components-examples/cdk/text-field/BUILD.bazel

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ ng_module(
1111
]),
1212
deps = [
1313
"//src/cdk/text-field",
14-
"//src/material/button",
14+
"//src/material/legacy-button",
1515
"//src/material/legacy-input",
1616
"//src/material/legacy-select",
1717
],

‎src/components-examples/cdk/text-field/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {TextFieldModule} from '@angular/cdk/text-field';
22
import {CommonModule} from '@angular/common';
33
import {NgModule} from '@angular/core';
4-
import {MatButtonModule} from '@angular/material/button';
4+
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
55
import {MatLegacyInputModule} from '@angular/material/legacy-input';
66
import {MatLegacySelectModule} from '@angular/material/legacy-select';
77
import {TextFieldAutofillDirectiveExample} from './text-field-autofill-directive/text-field-autofill-directive-example';
@@ -24,7 +24,7 @@ const EXAMPLES = [
2424
imports: [
2525
CommonModule,
2626
TextFieldModule,
27-
MatButtonModule,
27+
MatLegacyButtonModule,
2828
MatLegacyInputModule,
2929
MatLegacySelectModule,
3030
],

‎src/components-examples/cdk/tree/BUILD.bazel

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ ng_module(
1111
]),
1212
deps = [
1313
"//src/cdk/tree",
14-
"//src/material/button",
1514
"//src/material/icon",
15+
"//src/material/legacy-button",
1616
],
1717
)
1818

‎src/components-examples/cdk/tree/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {CdkTreeModule} from '@angular/cdk/tree';
22
import {NgModule} from '@angular/core';
3-
import {MatButtonModule} from '@angular/material/button';
3+
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
44
import {MatIconModule} from '@angular/material/icon';
55
import {CdkTreeFlatExample} from './cdk-tree-flat/cdk-tree-flat-example';
66
import {CdkTreeNestedExample} from './cdk-tree-nested/cdk-tree-nested-example';
@@ -10,7 +10,7 @@ export {CdkTreeFlatExample, CdkTreeNestedExample};
1010
const EXAMPLES = [CdkTreeFlatExample, CdkTreeNestedExample];
1111

1212
@NgModule({
13-
imports: [CdkTreeModule, MatButtonModule, MatIconModule],
13+
imports: [CdkTreeModule, MatLegacyButtonModule, MatIconModule],
1414
declarations: EXAMPLES,
1515
exports: EXAMPLES,
1616
})

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ ng_module(
1010
"**/*.css",
1111
]),
1212
deps = [
13-
"//src/material-experimental/mdc-button",
13+
"//src/material/button",
1414
"//src/material/card",
1515
],
1616
)

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {NgModule} from '@angular/core';
2-
import {MatButtonModule} from '@angular/material-experimental/mdc-button';
2+
import {MatButtonModule} from '@angular/material/button';
33
import {MatCardModule} from '@angular/material/card';
44
import {MdcCardFancyExample} from './mdc-card-fancy/mdc-card-fancy-example';
55

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ ng_module(
1818
"//src/cdk/testing",
1919
"//src/cdk/testing/testbed",
2020
"//src/material-experimental/mdc-table",
21-
"//src/material/button",
2221
"//src/material/button-toggle",
2322
"//src/material/core",
2423
"//src/material/icon",
24+
"//src/material/legacy-button",
2525
"//src/material/legacy-checkbox",
2626
"//src/material/legacy-input",
2727
"//src/material/paginator",

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

+2-2
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 {MatRippleModule} from '@angular/material/core';
4-
import {MatButtonModule} from '@angular/material/button';
4+
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
55
import {MatButtonToggleModule} from '@angular/material/button-toggle';
66
import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
77
import {MatIconModule} from '@angular/material/icon';
@@ -118,7 +118,7 @@ const EXAMPLES = [
118118
@NgModule({
119119
imports: [
120120
CommonModule,
121-
MatButtonModule,
121+
MatLegacyButtonModule,
122122
MatButtonToggleModule,
123123
MatLegacyCheckboxModule,
124124
MatIconModule,

‎src/components-examples/material-experimental/popover-edit/BUILD.bazel

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ ng_module(
1111
]),
1212
deps = [
1313
"//src/material-experimental/popover-edit",
14-
"//src/material/button",
1514
"//src/material/icon",
15+
"//src/material/legacy-button",
1616
"//src/material/legacy-checkbox",
1717
"//src/material/legacy-input",
1818
"//src/material/legacy-list",

‎src/components-examples/material-experimental/popover-edit/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
22
import {CommonModule} from '@angular/common';
33
import {FormsModule} from '@angular/forms';
44
import {MatPopoverEditModule} from '@angular/material-experimental/popover-edit';
5-
import {MatButtonModule} from '@angular/material/button';
5+
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
66
import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
77
import {MatIconModule} from '@angular/material/icon';
88
import {MatLegacyInputModule} from '@angular/material/legacy-input';
@@ -31,7 +31,7 @@ const EXAMPLES = [
3131
@NgModule({
3232
imports: [
3333
CommonModule,
34-
MatButtonModule,
34+
MatLegacyButtonModule,
3535
MatLegacyCheckboxModule,
3636
MatIconModule,
3737
MatLegacyInputModule,

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ ng_module(
1717
"//src/cdk/testing/testbed",
1818
"//src/material/badge",
1919
"//src/material/badge/testing",
20-
"//src/material/button",
2120
"//src/material/icon",
21+
"//src/material/legacy-button",
2222
"@npm//@angular/platform-browser",
2323
"@npm//@angular/platform-browser-dynamic",
2424
"@npm//@types/jasmine",

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {NgModule} from '@angular/core';
22
import {MatBadgeModule} from '@angular/material/badge';
3-
import {MatButtonModule} from '@angular/material/button';
3+
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
44
import {MatIconModule} from '@angular/material/icon';
55
import {BadgeOverviewExample} from './badge-overview/badge-overview-example';
66
import {BadgeHarnessExample} from './badge-harness/badge-harness-example';
@@ -10,7 +10,7 @@ export {BadgeOverviewExample, BadgeHarnessExample};
1010
const EXAMPLES = [BadgeOverviewExample, BadgeHarnessExample];
1111

1212
@NgModule({
13-
imports: [MatBadgeModule, MatButtonModule, MatIconModule],
13+
imports: [MatBadgeModule, MatLegacyButtonModule, MatIconModule],
1414
declarations: EXAMPLES,
1515
exports: EXAMPLES,
1616
})

‎src/components-examples/material/bottom-sheet/BUILD.bazel

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ ng_module(
1818
"//src/cdk/testing/testbed",
1919
"//src/material/bottom-sheet",
2020
"//src/material/bottom-sheet/testing",
21-
"//src/material/button",
21+
"//src/material/legacy-button",
2222
"//src/material/legacy-list",
2323
"@npm//@angular/platform-browser",
2424
"@npm//@angular/platform-browser-dynamic",

‎src/components-examples/material/bottom-sheet/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {NgModule} from '@angular/core';
22
import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
3-
import {MatButtonModule} from '@angular/material/button';
3+
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
44
import {MatLegacyListModule} from '@angular/material/legacy-list';
55
import {
66
BottomSheetOverviewExample,
@@ -17,7 +17,7 @@ const EXAMPLES = [
1717
];
1818

1919
@NgModule({
20-
imports: [MatBottomSheetModule, MatButtonModule, MatLegacyListModule],
20+
imports: [MatBottomSheetModule, MatLegacyButtonModule, MatLegacyListModule],
2121
declarations: EXAMPLES,
2222
exports: EXAMPLES,
2323
})

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ ng_module(
1515
deps = [
1616
"//src/cdk/testing",
1717
"//src/cdk/testing/testbed",
18-
"//src/material/button",
19-
"//src/material/button/testing",
2018
"//src/material/divider",
2119
"//src/material/icon",
20+
"//src/material/legacy-button",
21+
"//src/material/legacy-button/testing",
2222
"@npm//@angular/platform-browser",
2323
"@npm//@angular/platform-browser-dynamic",
2424
"@npm//@types/jasmine",
@@ -41,8 +41,8 @@ ng_test_library(
4141
":button",
4242
"//src/cdk/testing",
4343
"//src/cdk/testing/testbed",
44-
"//src/material/button",
45-
"//src/material/button/testing",
44+
"//src/material/legacy-button",
45+
"//src/material/legacy-button/testing",
4646
"@npm//@angular/platform-browser-dynamic",
4747
],
4848
)

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

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import {ComponentFixture, TestBed} from '@angular/core/testing';
22
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
3-
import {MatButtonHarness} from '@angular/material/button/testing';
3+
import {MatLegacyButtonHarness} from '@angular/material/legacy-button/testing';
44
import {HarnessLoader} from '@angular/cdk/testing';
5-
import {MatButtonModule} from '@angular/material/button';
5+
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
66
import {ButtonHarnessExample} from './button-harness-example';
77

88
describe('ButtonHarnessExample', () => {
@@ -11,7 +11,7 @@ describe('ButtonHarnessExample', () => {
1111

1212
beforeEach(async () => {
1313
await TestBed.configureTestingModule({
14-
imports: [MatButtonModule],
14+
imports: [MatLegacyButtonModule],
1515
declarations: [ButtonHarnessExample],
1616
}).compileComponents();
1717
fixture = TestBed.createComponent(ButtonHarnessExample);
@@ -20,18 +20,20 @@ describe('ButtonHarnessExample', () => {
2020
});
2121

2222
it('should load all button harnesses', async () => {
23-
const buttons = await loader.getAllHarnesses(MatButtonHarness);
23+
const buttons = await loader.getAllHarnesses(MatLegacyButtonHarness);
2424
expect(buttons.length).toBe(1);
2525
});
2626

2727
it('should load button with exact text', async () => {
28-
const buttons = await loader.getAllHarnesses(MatButtonHarness.with({text: 'Basic button'}));
28+
const buttons = await loader.getAllHarnesses(
29+
MatLegacyButtonHarness.with({text: 'Basic button'}),
30+
);
2931
expect(buttons.length).toBe(1);
3032
expect(await buttons[0].getText()).toBe('Basic button');
3133
});
3234

3335
it('should click a button', async () => {
34-
const button = await loader.getHarness(MatButtonHarness.with({text: 'Basic button'}));
36+
const button = await loader.getHarness(MatLegacyButtonHarness.with({text: 'Basic button'}));
3537
expect(fixture.componentInstance.clicked).toBe(false);
3638
await button.click();
3739
expect(fixture.componentInstance.clicked).toBe(true);

‎src/components-examples/material/button/button-harness/button-harness-example.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {Component} from '@angular/core';
22

33
/**
4-
* @title Testing with MatButtonHarness
4+
* @title Testing with MatLegacyButtonHarness
55
*/
66
@Component({
77
selector: 'button-harness-example',

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {NgModule} from '@angular/core';
2-
import {MatButtonModule} from '@angular/material/button';
2+
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
33
import {MatDividerModule} from '@angular/material/divider';
44
import {MatIconModule} from '@angular/material/icon';
55
import {ButtonOverviewExample} from './button-overview/button-overview-example';
@@ -11,7 +11,7 @@ export {ButtonOverviewExample, ButtonTypesExample, ButtonHarnessExample};
1111
const EXAMPLES = [ButtonOverviewExample, ButtonTypesExample, ButtonHarnessExample];
1212

1313
@NgModule({
14-
imports: [MatButtonModule, MatDividerModule, MatIconModule],
14+
imports: [MatLegacyButtonModule, MatDividerModule, MatIconModule],
1515
declarations: EXAMPLES,
1616
exports: EXAMPLES,
1717
})

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

+3-3
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/button",
19-
"//src/material/button/testing",
2018
"//src/material/divider",
19+
"//src/material/legacy-button",
20+
"//src/material/legacy-button/testing",
2121
"//src/material/legacy-card",
2222
"//src/material/legacy-card/testing",
2323
"//src/material/legacy-progress-bar",
@@ -43,7 +43,7 @@ ng_test_library(
4343
":card",
4444
"//src/cdk/testing",
4545
"//src/cdk/testing/testbed",
46-
"//src/material/button/testing",
46+
"//src/material/legacy-button/testing",
4747
"//src/material/legacy-card",
4848
"//src/material/legacy-card/testing",
4949
"@npm//@angular/platform-browser-dynamic",

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {ComponentFixture, TestBed} from '@angular/core/testing';
22
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
3-
import {MatButtonHarness} from '@angular/material/button/testing';
3+
import {MatLegacyButtonHarness} from '@angular/material/legacy-button/testing';
44
import {MatLegacyCardHarness} from '@angular/material/legacy-card/testing';
55
import {HarnessLoader, parallel} from '@angular/cdk/testing';
66
import {MatLegacyCardModule} from '@angular/material/legacy-card';
@@ -36,7 +36,7 @@ describe('CardHarnessExample', () => {
3636

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

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

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {NgModule} from '@angular/core';
2-
import {MatButtonModule} from '@angular/material/button';
2+
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
33
import {MatLegacyCardModule} from '@angular/material/legacy-card';
44
import {MatDividerModule} from '@angular/material/divider';
55
import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
@@ -32,7 +32,12 @@ const EXAMPLES = [
3232
];
3333

3434
@NgModule({
35-
imports: [MatButtonModule, MatLegacyCardModule, MatDividerModule, MatLegacyProgressBarModule],
35+
imports: [
36+
MatLegacyButtonModule,
37+
MatLegacyCardModule,
38+
MatDividerModule,
39+
MatLegacyProgressBarModule,
40+
],
3641
declarations: EXAMPLES,
3742
exports: EXAMPLES,
3843
})

0 commit comments

Comments
 (0)