diff --git a/CHANGELOG.md b/CHANGELOG.md index 11bf2b1a7b9d..5163febe956b 100644 --- a/CHANGELOG.md +++ b/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` diff --git a/CHANGELOG_ARCHIVE.md b/CHANGELOG_ARCHIVE.md index 19ab29f157a7..543b9c6cd179 100644 --- a/CHANGELOG_ARCHIVE.md +++ b/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)) diff --git a/CODING_STANDARDS.md b/CODING_STANDARDS.md index 002dc7640d86..44f62e966c76 100644 --- a/CODING_STANDARDS.md +++ b/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 -Basic button -FAB -pony +Basic button +FAB +pony ``` do this: ```html -Basic button +Basic button FAB -pony +pony ``` #### Prefer small, focused modules diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7ed36d1bed61..529507f7a328 100644 --- a/CONTRIBUTING.md +++ b/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 ``` diff --git a/docs/scenes/src/app/scenes/button-toggle/button-toggle-scene.html b/docs/scenes/src/app/scenes/button-toggle/button-toggle-scene.html index 4e0865ae4570..f173f79a964f 100644 --- a/docs/scenes/src/app/scenes/button-toggle/button-toggle-scene.html +++ b/docs/scenes/src/app/scenes/button-toggle/button-toggle-scene.html @@ -1,11 +1,11 @@ - - + + format_align_left - - + + format_align_justify - - + + format_align_right - - + + diff --git a/docs/scenes/src/app/scenes/button/button-scene.html b/docs/scenes/src/app/scenes/button/button-scene.html index 9b7449200945..3cda69468ad2 100644 --- a/docs/scenes/src/app/scenes/button/button-scene.html +++ b/docs/scenes/src/app/scenes/button/button-scene.html @@ -1,11 +1,11 @@
- - - + + +
- + - +
diff --git a/docs/scenes/src/app/scenes/dialog/dialog-scene.ts b/docs/scenes/src/app/scenes/dialog/dialog-scene.ts index e784aee7bf69..3ee95748250c 100644 --- a/docs/scenes/src/app/scenes/dialog/dialog-scene.ts +++ b/docs/scenes/src/app/scenes/dialog/dialog-scene.ts @@ -32,8 +32,8 @@ export class DialogScene { template: `
Discard draft?
- - + +
`, imports: [MatDialogModule, MatButtonModule], }) diff --git a/docs/scenes/src/app/scenes/menu/menu-scene.html b/docs/scenes/src/app/scenes/menu/menu-scene.html index 01c4b9d31d96..fe37b3bd7dea 100644 --- a/docs/scenes/src/app/scenes/menu/menu-scene.html +++ b/docs/scenes/src/app/scenes/menu/menu-scene.html @@ -1,4 +1,4 @@ - diff --git a/docs/scenes/src/app/scenes/ripples/ripples-scene.html b/docs/scenes/src/app/scenes/ripples/ripples-scene.html index 659fd9e60b1a..3f7ffeaa2e30 100644 --- a/docs/scenes/src/app/scenes/ripples/ripples-scene.html +++ b/docs/scenes/src/app/scenes/ripples/ripples-scene.html @@ -2,6 +2,6 @@ matRipple [matRippleDisabled]="true"> - diff --git a/docs/scenes/src/app/scenes/ripples/ripples-scene.scss b/docs/scenes/src/app/scenes/ripples/ripples-scene.scss index e3f3157cdf98..59db44bfe63d 100644 --- a/docs/scenes/src/app/scenes/ripples/ripples-scene.scss +++ b/docs/scenes/src/app/scenes/ripples/ripples-scene.scss @@ -7,7 +7,7 @@ button { overflow: hidden; } -.mat-button-wrapper { +.matButton-wrapper { font-size: 18px; } diff --git a/docs/scenes/src/app/scenes/tooltip/tooltip-scene.html b/docs/scenes/src/app/scenes/tooltip/tooltip-scene.html index 86925432db1c..d6d15a37afd0 100644 --- a/docs/scenes/src/app/scenes/tooltip/tooltip-scene.html +++ b/docs/scenes/src/app/scenes/tooltip/tooltip-scene.html @@ -2,7 +2,7 @@ diff --git a/docs/src/app/pages/component-viewer/token-name.ts b/docs/src/app/pages/component-viewer/token-name.ts index 89aa7da345de..a26c6ef8e0e9 100644 --- a/docs/src/app/pages/component-viewer/token-name.ts +++ b/docs/src/app/pages/component-viewer/token-name.ts @@ -18,7 +18,7 @@ import {MatTooltip} from '@angular/material/tooltip'; template: ` {{name()}} +
diff --git a/docs/src/app/pages/homepage/homepage.html b/docs/src/app/pages/homepage/homepage.html index 7ee05b4d7944..f532b3e7fa7c 100644 --- a/docs/src/app/pages/homepage/homepage.html +++ b/docs/src/app/pages/homepage/homepage.html @@ -6,7 +6,7 @@

Angular Material

Material Design components for Angular

- Get started + Get started