feat(material/button): Switch button implementation to use MDC (#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.

.github/CODEOWNERS

@@ -4,7 +4,7 @@
 /src/material/badge/**                             @jelbourn
 /src/material/bottom-sheet/**                      @jelbourn @crisbeto
 /src/material/button-toggle/**                     @andrewseguin
-/src/material/button/**                            @andrewseguin
+/src/material/legacy-button/**                            @andrewseguin
 /src/material/legacy-card/**                              @andrewseguin
 /src/material/legacy-checkbox/**                          @andrewseguin @devversion
 /src/material/legacy-chips/**                      @andrewseguin
@@ -111,7 +111,7 @@
 /src/material-experimental/*                           @andrewseguin
 /src/material-experimental/column-resize/**            @andrewseguin
 /src/material/autocomplete/**                          @crisbeto
-/src/material-experimental/mdc-button/**               @andrewseguin
+/src/material/button/**               @andrewseguin
 /src/material/card/**                                  @mmalerba
 /src/material/checkbox/**             @mmalerba
 /src/material/chips/**                                 @mmalerba @crisbeto
@@ -319,7 +319,7 @@
 /tools/public_api_guard/material/badge**           @andrewseguin
 /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/legacy-button**          @andrewseguin
 /tools/public_api_guard/material/legacy-card**     @andrewseguin
 /tools/public_api_guard/material/legacy-checkbox** @andrewseguin @devversion
 /tools/public_api_guard/material/chips**           @andrewseguin

.ng-dev/commit-message.mts

@@ -40,7 +40,7 @@ export const commitMessage: CommitMessageConfig = {
     'cdk/tree',
     'google-maps',
     'material-experimental/column-resize',
-    'material-experimental/mdc-button',
+    'material/button',
     'material/card',
     'material/checkbox',
     'material-experimental/mdc-core',
@@ -65,7 +65,7 @@ export const commitMessage: CommitMessageConfig = {
     'material/legacy-autocomplete',
     'material/badge',
     'material/bottom-sheet',
-    'material/button',
+    'material/legacy-button',
     'material/button-toggle',
     'material/legacy-card',
     'material/legacy-checkbox',

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

@@ -1,13 +1,13 @@
 import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
-import {MatButtonModule} from '@angular/material/button';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
 
 import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, BrowserAnimationsModule, MatButtonModule],
+  imports: [BrowserModule, BrowserAnimationsModule, MatLegacyButtonModule],
   providers: [],
   bootstrap: [AppComponent],
 })

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

@@ -11,7 +11,7 @@ ng_module(
     ]),
     deps = [
         "//src/cdk/text-field",
-        "//src/material/button",
+        "//src/material/legacy-button",
         "//src/material/legacy-input",
         "//src/material/legacy-select",
     ],

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

@@ -1,7 +1,7 @@
 import {TextFieldModule} from '@angular/cdk/text-field';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatButtonModule} from '@angular/material/button';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {MatLegacySelectModule} from '@angular/material/legacy-select';
 import {TextFieldAutofillDirectiveExample} from './text-field-autofill-directive/text-field-autofill-directive-example';
@@ -24,7 +24,7 @@ const EXAMPLES = [
   imports: [
     CommonModule,
     TextFieldModule,
-    MatButtonModule,
+    MatLegacyButtonModule,
     MatLegacyInputModule,
     MatLegacySelectModule,
   ],

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

@@ -11,8 +11,8 @@ ng_module(
     ]),
     deps = [
         "//src/cdk/tree",
-        "//src/material/button",
         "//src/material/icon",
+        "//src/material/legacy-button",
     ],
 )
 

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

@@ -1,6 +1,6 @@
 import {CdkTreeModule} from '@angular/cdk/tree';
 import {NgModule} from '@angular/core';
-import {MatButtonModule} from '@angular/material/button';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
 import {MatIconModule} from '@angular/material/icon';
 import {CdkTreeFlatExample} from './cdk-tree-flat/cdk-tree-flat-example';
 import {CdkTreeNestedExample} from './cdk-tree-nested/cdk-tree-nested-example';
@@ -10,7 +10,7 @@ export {CdkTreeFlatExample, CdkTreeNestedExample};
 const EXAMPLES = [CdkTreeFlatExample, CdkTreeNestedExample];
 
 @NgModule({
-  imports: [CdkTreeModule, MatButtonModule, MatIconModule],
+  imports: [CdkTreeModule, MatLegacyButtonModule, MatIconModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

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

@@ -10,7 +10,7 @@ ng_module(
         "**/*.css",
     ]),
     deps = [
-        "//src/material-experimental/mdc-button",
+        "//src/material/button",
         "//src/material/card",
     ],
 )

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

@@ -1,5 +1,5 @@
 import {NgModule} from '@angular/core';
-import {MatButtonModule} from '@angular/material-experimental/mdc-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
 import {MdcCardFancyExample} from './mdc-card-fancy/mdc-card-fancy-example';
 

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

@@ -18,10 +18,10 @@ ng_module(
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
         "//src/material-experimental/mdc-table",
-        "//src/material/button",
         "//src/material/button-toggle",
         "//src/material/core",
         "//src/material/icon",
+        "//src/material/legacy-button",
         "//src/material/legacy-checkbox",
         "//src/material/legacy-input",
         "//src/material/paginator",

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

@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatRippleModule} from '@angular/material/core';
-import {MatButtonModule} from '@angular/material/button';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatIconModule} from '@angular/material/icon';
@@ -118,7 +118,7 @@ const EXAMPLES = [
 @NgModule({
   imports: [
     CommonModule,
-    MatButtonModule,
+    MatLegacyButtonModule,
     MatButtonToggleModule,
     MatLegacyCheckboxModule,
     MatIconModule,

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

@@ -11,8 +11,8 @@ ng_module(
     ]),
     deps = [
         "//src/material-experimental/popover-edit",
-        "//src/material/button",
         "//src/material/icon",
+        "//src/material/legacy-button",
         "//src/material/legacy-checkbox",
         "//src/material/legacy-input",
         "//src/material/legacy-list",

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

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {MatPopoverEditModule} from '@angular/material-experimental/popover-edit';
-import {MatButtonModule} from '@angular/material/button';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
 import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatIconModule} from '@angular/material/icon';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
@@ -31,7 +31,7 @@ const EXAMPLES = [
 @NgModule({
   imports: [
     CommonModule,
-    MatButtonModule,
+    MatLegacyButtonModule,
     MatLegacyCheckboxModule,
     MatIconModule,
     MatLegacyInputModule,

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

@@ -17,8 +17,8 @@ ng_module(
         "//src/cdk/testing/testbed",
         "//src/material/badge",
         "//src/material/badge/testing",
-        "//src/material/button",
         "//src/material/icon",
+        "//src/material/legacy-button",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
         "@npm//@types/jasmine",

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

@@ -1,6 +1,6 @@
 import {NgModule} from '@angular/core';
 import {MatBadgeModule} from '@angular/material/badge';
-import {MatButtonModule} from '@angular/material/button';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
 import {MatIconModule} from '@angular/material/icon';
 import {BadgeOverviewExample} from './badge-overview/badge-overview-example';
 import {BadgeHarnessExample} from './badge-harness/badge-harness-example';
@@ -10,7 +10,7 @@ export {BadgeOverviewExample, BadgeHarnessExample};
 const EXAMPLES = [BadgeOverviewExample, BadgeHarnessExample];
 
 @NgModule({
-  imports: [MatBadgeModule, MatButtonModule, MatIconModule],
+  imports: [MatBadgeModule, MatLegacyButtonModule, MatIconModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

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

@@ -18,7 +18,7 @@ ng_module(
         "//src/cdk/testing/testbed",
         "//src/material/bottom-sheet",
         "//src/material/bottom-sheet/testing",
-        "//src/material/button",
+        "//src/material/legacy-button",
         "//src/material/legacy-list",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",

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

@@ -1,6 +1,6 @@
 import {NgModule} from '@angular/core';
 import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
-import {MatButtonModule} from '@angular/material/button';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
 import {MatLegacyListModule} from '@angular/material/legacy-list';
 import {
   BottomSheetOverviewExample,
@@ -17,7 +17,7 @@ const EXAMPLES = [
 ];
 
 @NgModule({
-  imports: [MatBottomSheetModule, MatButtonModule, MatLegacyListModule],
+  imports: [MatBottomSheetModule, MatLegacyButtonModule, MatLegacyListModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

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

@@ -15,10 +15,10 @@ ng_module(
     deps = [
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/button",
-        "//src/material/button/testing",
         "//src/material/divider",
         "//src/material/icon",
+        "//src/material/legacy-button",
+        "//src/material/legacy-button/testing",
         "@npm//@angular/platform-browser",
         "@npm//@angular/platform-browser-dynamic",
         "@npm//@types/jasmine",
@@ -41,8 +41,8 @@ ng_test_library(
         ":button",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/button",
-        "//src/material/button/testing",
+        "//src/material/legacy-button",
+        "//src/material/legacy-button/testing",
         "@npm//@angular/platform-browser-dynamic",
     ],
 )

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

@@ -1,8 +1,8 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatButtonHarness} from '@angular/material/button/testing';
+import {MatLegacyButtonHarness} from '@angular/material/legacy-button/testing';
 import {HarnessLoader} from '@angular/cdk/testing';
-import {MatButtonModule} from '@angular/material/button';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
 import {ButtonHarnessExample} from './button-harness-example';
 
 describe('ButtonHarnessExample', () => {
@@ -11,7 +11,7 @@ describe('ButtonHarnessExample', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatButtonModule],
+      imports: [MatLegacyButtonModule],
       declarations: [ButtonHarnessExample],
     }).compileComponents();
     fixture = TestBed.createComponent(ButtonHarnessExample);
@@ -20,18 +20,20 @@ describe('ButtonHarnessExample', () => {
   });
 
   it('should load all button harnesses', async () => {
-    const buttons = await loader.getAllHarnesses(MatButtonHarness);
+    const buttons = await loader.getAllHarnesses(MatLegacyButtonHarness);
     expect(buttons.length).toBe(1);
   });
 
   it('should load button with exact text', async () => {
-    const buttons = await loader.getAllHarnesses(MatButtonHarness.with({text: 'Basic button'}));
+    const buttons = await loader.getAllHarnesses(
+      MatLegacyButtonHarness.with({text: 'Basic button'}),
+    );
     expect(buttons.length).toBe(1);
     expect(await buttons[0].getText()).toBe('Basic button');
   });
 
   it('should click a button', async () => {
-    const button = await loader.getHarness(MatButtonHarness.with({text: 'Basic button'}));
+    const button = await loader.getHarness(MatLegacyButtonHarness.with({text: 'Basic button'}));
     expect(fixture.componentInstance.clicked).toBe(false);
     await button.click();
     expect(fixture.componentInstance.clicked).toBe(true);

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

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 
 /**
- * @title Testing with MatButtonHarness
+ * @title Testing with MatLegacyButtonHarness
  */
 @Component({
   selector: 'button-harness-example',

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

@@ -1,5 +1,5 @@
 import {NgModule} from '@angular/core';
-import {MatButtonModule} from '@angular/material/button';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
 import {ButtonOverviewExample} from './button-overview/button-overview-example';
@@ -11,7 +11,7 @@ export {ButtonOverviewExample, ButtonTypesExample, ButtonHarnessExample};
 const EXAMPLES = [ButtonOverviewExample, ButtonTypesExample, ButtonHarnessExample];
 
 @NgModule({
-  imports: [MatButtonModule, MatDividerModule, MatIconModule],
+  imports: [MatLegacyButtonModule, MatDividerModule, MatIconModule],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })

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

@@ -15,9 +15,9 @@ ng_module(
     deps = [
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/button",
-        "//src/material/button/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",
@@ -43,7 +43,7 @@ ng_test_library(
         ":card",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
-        "//src/material/button/testing",
+        "//src/material/legacy-button/testing",
         "//src/material/legacy-card",
         "//src/material/legacy-card/testing",
         "@npm//@angular/platform-browser-dynamic",

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

@@ -1,6 +1,6 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
-import {MatButtonHarness} from '@angular/material/button/testing';
+import {MatLegacyButtonHarness} from '@angular/material/legacy-button/testing';
 import {MatLegacyCardHarness} from '@angular/material/legacy-card/testing';
 import {HarnessLoader, parallel} from '@angular/cdk/testing';
 import {MatLegacyCardModule} from '@angular/material/legacy-card';
@@ -36,7 +36,7 @@ describe('CardHarnessExample', () => {
 
   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(MatButtonHarness)) ?? [];
+    const footerSubcomponents = (await card.getAllHarnesses(MatLegacyButtonHarness)) ?? [];
     expect(footerSubcomponents.length).toBe(2);
   });
 });

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

@@ -1,5 +1,5 @@
 import {NgModule} from '@angular/core';
-import {MatButtonModule} from '@angular/material/button';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
 import {MatLegacyCardModule} from '@angular/material/legacy-card';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
@@ -32,7 +32,12 @@ const EXAMPLES = [
 ];
 
 @NgModule({
-  imports: [MatButtonModule, MatLegacyCardModule, MatDividerModule, MatLegacyProgressBarModule],
+  imports: [
+    MatLegacyButtonModule,
+    MatLegacyCardModule,
+    MatDividerModule,
+    MatLegacyProgressBarModule,
+  ],
   declarations: EXAMPLES,
   exports: EXAMPLES,
 })