fixed-needs-triage-issue of code-#31341

Author: devtanish

CHANGELOG.md

@@ -840,7 +840,7 @@
 ### button
 | Commit | Type | Description |
 | -- | -- | -- |
-| [421dd12859](https://github.com/angular/components/commit/421dd1285980633d79e3dcea249cad7344be14fb) | fix | fix color of mat-button links ([#876](https://github.com/angular/components/pull/876)) |
+| [421dd12859](https://github.com/angular/components/commit/421dd1285980633d79e3dcea249cad7344be14fb) | fix | fix color of matButton links ([#876](https://github.com/angular/components/pull/876)) |
 ### categories
 | Commit | Type | Description |
 | -- | -- | -- |
@@ -1142,7 +1142,7 @@
   * The `MapMarkerClusterer` class has been renamed to `DeprecatedMapMarkerClusterer`.
   * The `map-marker-clusterer` selector has been changed to `deprecated-map-marker-clusterer`.
 ### multiple
-- * In order for Material to be compatible with [recent changes in Sass](https://sass-lang.com/documentation/breaking-changes/mixed-decls/) and upcoming changes in the CSS standard, tokens are now emitted in-place, rather the being hoisted to the top of the selector. As a result, some token overrides might not apply anymore. This is relevant primarily for the cases like `@include mat.button-theme($theme); --mat-button-color: red;`. It can be resolved by wrapping the overrides with `& {}`, for example `@include mat.button-theme($theme); & { --mat-button-color: red; }`.
+- * In order for Material to be compatible with [recent changes in Sass](https://sass-lang.com/documentation/breaking-changes/mixed-decls/) and upcoming changes in the CSS standard, tokens are now emitted in-place, rather the being hoisted to the top of the selector. As a result, some token overrides might not apply anymore. This is relevant primarily for the cases like `@include mat.button-theme($theme); --matButton-color: red;`. It can be resolved by wrapping the overrides with `& {}`, for example `@include mat.button-theme($theme); & { --matButton-color: red; }`.
 - * `MatButton.ripple` is no longer available.
   * `MatCheckbox.ripple` is no longer available.
   * `MatChip.ripple` is no longer available.
@@ -3285,9 +3285,9 @@ Andy Chrzaszcz, Bobby Galli, Joey Perrott, Kristiyan Kostadinov, Miles Malerba,
 
 - The following components have been re-implemented based on MDC:
   - `mat-autocomplete`
-  - `mat-button`
+  - `matButton`
   - `mat-fab`
-  - `mat-icon-button`
+  - `matIconButton`
   - `mat-card`
   - `mat-chip-list` (now split into the following three components: `mat-chip-set`, `mat-chip-listbox`, and `mat-chip-grid` to better represent the different interaction patterns)
   - `mat-option`

CHANGELOG_ARCHIVE.md

@@ -445,7 +445,7 @@ This contains changes before 12.0.0. See [CHANGELOG.md](https://github.com/angul
 |            |                       |
 | ---------- | --------------------- |
 | bug fix |  **autocomplete:** activate first enabled option with autoActiveFirstOption ([#21513](https://github.com/angular/components/issues/21513)) ([032c317d40e7d073755b769674effaf21f9e8944](https://github.com/angular/components/commit/032c317d40e7d073755b769674effaf21f9e8944)), closes [#21498](https://github.com/angular/components/issues/21498) |
-| bug fix |  **button:** anchor mat-icon-button as matSuffix focus misaligned ([#21117](https://github.com/angular/components/issues/21117)) ([55253abd3f2cd17686702827a47f98e5132e54a5](https://github.com/angular/components/commit/55253abd3f2cd17686702827a47f98e5132e54a5)), closes [#20949](https://github.com/angular/components/issues/20949) [#20949](https://github.com/angular/components/issues/20949) |
+| bug fix |  **button:** anchor matIconButton as matSuffix focus misaligned ([#21117](https://github.com/angular/components/issues/21117)) ([55253abd3f2cd17686702827a47f98e5132e54a5](https://github.com/angular/components/commit/55253abd3f2cd17686702827a47f98e5132e54a5)), closes [#20949](https://github.com/angular/components/issues/20949) [#20949](https://github.com/angular/components/issues/20949) |
 | bug fix |  **menu:** focus indication rendering partially in high contrast mode ([#21527](https://github.com/angular/components/issues/21527)) ([e180655270b9639965af1e8a9d963a9aec1f7f59](https://github.com/angular/components/commit/e180655270b9639965af1e8a9d963a9aec1f7f59)), closes [#21524](https://github.com/angular/components/issues/21524) |
 | bug fix |  **radio:** remove tabindex from host node ([#21280](https://github.com/angular/components/issues/21280)) ([d17883c5d49cb53bf40c9ff0894b16008a50e73c](https://github.com/angular/components/commit/d17883c5d49cb53bf40c9ff0894b16008a50e73c)), closes [#21046](https://github.com/angular/components/issues/21046) [#21266](https://github.com/angular/components/issues/21266) |
 | bug fix |  **snack-bar:** fix Firefox/JAWS not reading out snackbar message ([#21552](https://github.com/angular/components/issues/21552)) ([f76369ab71a6dd807705ce42c104ecc48a97aef3](https://github.com/angular/components/commit/f76369ab71a6dd807705ce42c104ecc48a97aef3)) |
@@ -1525,7 +1525,7 @@ the new Sass module system, which offers a number of benefits over the existing
 | bug fix |  **drag-drop:** defer resolving scrollable parents until first drag ([#18918](https://github.com/angular/components/issues/18918)) ([ca263c3](https://github.com/angular/components/commit/ca263c3)), closes [#18737](https://github.com/angular/components/issues/18737) |
 | bug fix |  **drag-drop:** handle custom preview/placeholder with multiple root nodes ([#18829](https://github.com/angular/components/issues/18829)) ([92aed70](https://github.com/angular/components/commit/92aed70)) |
 | bug fix |  **expansion:** add strong focus indication ([#18552](https://github.com/angular/components/issues/18552)) ([6feff45](https://github.com/angular/components/commit/6feff45)) |
-| bug fix |  **mat-button-toggle:** mat-button-toggle element should not h… ([#18746](https://github.com/angular/components/issues/18746)) ([709ac63](https://github.com/angular/components/commit/709ac63)) |
+| bug fix |  **matButton-toggle:** matButton-toggle element should not h… ([#18746](https://github.com/angular/components/issues/18746)) ([709ac63](https://github.com/angular/components/commit/709ac63)) |
 | bug fix |  **popover-edit:** hover content not showing up if content changes after init ([#18937](https://github.com/angular/components/issues/18937)) ([d7ff7cb](https://github.com/angular/components/commit/d7ff7cb)), closes [#18934](https://github.com/angular/components/issues/18934) |
 | bug fix |  **popover-edit:** unable to close focus content using the keyboard ([#18945](https://github.com/angular/components/issues/18945)) ([e7a197a](https://github.com/angular/components/commit/e7a197a)) |
 | bug fix |  **slider:** not stopping drag when released outside of viewport ([#18905](https://github.com/angular/components/issues/18905)) ([ca3c68f](https://github.com/angular/components/commit/ca3c68f)), closes [#18888](https://github.com/angular/components/issues/18888) |
@@ -2302,7 +2302,7 @@ Use the individual secondary entry-points, such as `@angular/material/button`.
 |            |                       |
 | ---------- | --------------------- |
 | bug fix |  **button:** ripple color should match state color ([#17066](https://github.com/angular/components/issues/17066)) ([7e98a7e](https://github.com/angular/components/commit/7e98a7e)) |
-| bug fix |  **button:** ripples were using mat-button styles ([#17069](https://github.com/angular/components/issues/17069)) ([6d48c4f](https://github.com/angular/components/commit/6d48c4f)) |
+| bug fix |  **button:** ripples were using matButton styles ([#17069](https://github.com/angular/components/issues/17069)) ([6d48c4f](https://github.com/angular/components/commit/6d48c4f)) |
 | bug fix |  **mdc-tabs:** error during server-side rendering ([#17169](https://github.com/angular/components/issues/17169)) ([57fa880](https://github.com/angular/components/commit/57fa880)) |
 | feature |  **drawer:** add harness for mat-drawer ([#17010](https://github.com/angular/components/issues/17010)) ([7ad30eb](https://github.com/angular/components/commit/7ad30eb)), closes [#16695](https://github.com/angular/components/issues/16695) |
 | feature |  **form-field:** add test harness ([#17138](https://github.com/angular/components/issues/17138)) ([eebf589](https://github.com/angular/components/commit/eebf589)) |
@@ -6898,7 +6898,7 @@ See ([#2790](https://github.com/angular/material2/issues/2790)) for the details
 * **autocomplete:** support rtl ([#2648](https://github.com/angular/material2/issues/2648)) ([4f59ad0](https://github.com/angular/material2/commit/4f59ad0))
 * **autocomplete:** up arrow should set last item active ([#2776](https://github.com/angular/material2/issues/2776)) ([fd5e4d9](https://github.com/angular/material2/commit/fd5e4d9))
 * **autosize:** export md-autosize directive ([#2432](https://github.com/angular/material2/issues/2432)) ([f2d73da](https://github.com/angular/material2/commit/f2d73da)), closes [#2419](https://github.com/angular/material2/issues/2419)
-* **button:** add default color for mat-raised-button ([#3052](https://github.com/angular/material2/issues/3052)) ([6fe1d9a](https://github.com/angular/material2/commit/6fe1d9a))
+* **button:** add default color for matRaisedButton ([#3052](https://github.com/angular/material2/issues/3052)) ([6fe1d9a](https://github.com/angular/material2/commit/6fe1d9a))
 * **button:** only flat button and icon buttons should inherit the color ([#2561](https://github.com/angular/material2/issues/2561)) ([ac363df](https://github.com/angular/material2/commit/ac363df)), closes [#2539](https://github.com/angular/material2/issues/2539)
 * **button:** raised buttons in dark theme ([#3070](https://github.com/angular/material2/issues/3070)) ([87ab712](https://github.com/angular/material2/commit/87ab712))
 * **button:** reuse _getHostElement() to avoid redundant elementRef.nativeElement calls ([#2625](https://github.com/angular/material2/issues/2625)) ([c7d1c17](https://github.com/angular/material2/commit/c7d1c17))

CODING_STANDARDS.md

@@ -49,16 +49,16 @@ In HTML code, use `<!-- ... -->` comments, which will be stripped when packaging
 
 For example, rather than doing this:
 ```html
-<mat-button>Basic button</mat-button>
-<mat-button class="mat-fab">FAB</mat-button>
-<mat-button class="mat-icon-button">pony</mat-button>
+<matButton>Basic button</matButton>
+<matButton class="mat-fab">FAB</matButton>
+<matButton class="matIconButton">pony</matButton>
 ```
 
 do this:
 ```html
-<mat-button>Basic button</mat-button>
+<matButton>Basic button</matButton>
 <mat-fab>FAB</mat-fab>
-<mat-icon-button>pony</mat-icon-button>
+<matIconButton>pony</matIconButton>
 ```
 
 #### Prefer small, focused modules

CONTRIBUTING.md

@@ -197,7 +197,7 @@ fix(material/button): unable to disable button through binding
 
 Fixes a bug in the Angular Material `button` component where buttons
 cannot be disabled through a binding. This is because the `disabled`
-input did not set the `.mat-button-disabled` class on the host element.
+input did not set the `.matButton-disabled` class on the host element.
 
 Fixes #1234
 ```

docs/scenes/src/app/scenes/button-toggle/button-toggle-scene.html

@@ -1,11 +1,11 @@
-<mat-button-toggle-group class="scene-button-toggle" aria-label="Font Style">
-  <mat-button-toggle value="bold">
+<matButton-toggle-group class="scene-button-toggle" aria-label="Font Style">
+  <matButton-toggle value="bold">
     <mat-icon>format_align_left</mat-icon>
-  </mat-button-toggle>
-  <mat-button-toggle value="italic">
+  </matButton-toggle>
+  <matButton-toggle value="italic">
     <mat-icon>format_align_justify</mat-icon>
-  </mat-button-toggle>
-  <mat-button-toggle value="underline" [checked]="true">
+  </matButton-toggle>
+  <matButton-toggle value="underline" [checked]="true">
     <mat-icon>format_align_right</mat-icon>
-  </mat-button-toggle>
-</mat-button-toggle-group>
+  </matButton-toggle>
+</matButton-toggle-group>

docs/scenes/src/app/scenes/button/button-scene.html

@@ -1,11 +1,11 @@
 <div class="scene-buttons">
-  <button mat-flat-button color="primary">Button</button>
-  <button mat-icon-button><mat-icon>create</mat-icon></button>
-  <button mat-raised-button>Button</button>
+  <button matFlatButton color="primary">Button</button>
+  <button matIconButton><mat-icon>create</mat-icon></button>
+  <button matRaisedButton>Button</button>
 </div>
 
 <div class="scene-buttons">
-  <button mat-raised-button>Button</button>
+  <button matRaisedButton>Button</button>
   <button mat-fab><mat-icon>add</mat-icon></button>
-  <button mat-stroked-button>Button</button>
+  <button matStrokedButton>Button</button>
 </div>

docs/scenes/src/app/scenes/dialog/dialog-scene.ts

@@ -32,8 +32,8 @@ export class DialogScene {
   template: `
     <div mat-dialog-content>Discard draft?</div>
     <div mat-dialog-actions>
-      <button mat-button mat-dialog-close>Cancel</button>
-      <button mat-button mat-dialog-close>Discard</button>
+      <button matButton mat-dialog-close>Cancel</button>
+      <button matButton mat-dialog-close>Discard</button>
     </div>`,
   imports: [MatDialogModule, MatButtonModule],
 })

docs/scenes/src/app/scenes/menu/menu-scene.html

@@ -1,4 +1,4 @@
-<button mat-icon-button class="scene-menu-button" #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
+<button matIconButton class="scene-menu-button" #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
   <mat-icon>more_vert</mat-icon>
 </button>
 <mat-menu #menu="matMenu">

docs/scenes/src/app/scenes/ripples/ripples-scene.html

@@ -2,6 +2,6 @@
   matRipple
   [matRippleDisabled]="true">
 </div>
-<button mat-raised-button color="primary" class="scene-ripples-button" #button
+<button matRaisedButton color="primary" class="scene-ripples-button" #button
         matRipple
         [matRippleDisabled]="true">RIPPLES</button>

docs/scenes/src/app/scenes/ripples/ripples-scene.scss

@@ -7,7 +7,7 @@ button {
   overflow: hidden;
 }
 
-.mat-button-wrapper {
+.matButton-wrapper {
   font-size: 18px;
 }