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.

Author: amysorto

.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",