From 5fa8f6795ba77dd3ef0927b490afbe5f92923bfe Mon Sep 17 00:00:00 2001 From: Amy Sorto <8575252+amysorto@users.noreply.github.com> Date: Thu, 13 Jun 2024 12:43:22 -0700 Subject: [PATCH] docs(material/button): update button documentation and examples for M3 (#29252) --- .../button-overview-example.html | 62 ++++----- .../button-types/button-types-example.css | 8 -- .../button-types/button-types-example.html | 129 ------------------ .../button-types/button-types-example.ts | 16 --- .../material/button/index.ts | 1 - src/material/button/button-base.ts | 8 +- src/material/button/button.md | 26 ++-- 7 files changed, 40 insertions(+), 210 deletions(-) delete mode 100644 src/components-examples/material/button/button-types/button-types-example.css delete mode 100644 src/components-examples/material/button/button-types/button-types-example.html delete mode 100644 src/components-examples/material/button/button-types/button-types-example.ts diff --git a/src/components-examples/material/button/button-overview/button-overview-example.html b/src/components-examples/material/button/button-overview/button-overview-example.html index 67720f49024b..feb62a8caf2e 100644 --- a/src/components-examples/material/button/button-overview/button-overview-example.html +++ b/src/components-examples/material/button/button-overview/button-overview-example.html @@ -2,9 +2,6 @@
Basic
- - - Link
@@ -14,9 +11,6 @@
Raised
- - - Link
@@ -26,9 +20,6 @@
Stroked
- - - Link
@@ -38,9 +29,6 @@
Flat
- - - Link
@@ -53,15 +41,6 @@ - - - @@ -74,20 +53,10 @@
-
-
- -
-
- -
-
+
+
+ +
+
Extended Fab
+
+
-
-
+
+ + favorite + Link + +
diff --git a/src/components-examples/material/button/button-types/button-types-example.css b/src/components-examples/material/button/button-types/button-types-example.css deleted file mode 100644 index 74bc6ae390ab..000000000000 --- a/src/components-examples/material/button/button-types/button-types-example.css +++ /dev/null @@ -1,8 +0,0 @@ -.example-button-row button, -.example-button-row a { - margin-right: 8px; -} - -.example-disabled { - display: inline-block; -} diff --git a/src/components-examples/material/button/button-types/button-types-example.html b/src/components-examples/material/button/button-types/button-types-example.html deleted file mode 100644 index b04112865955..000000000000 --- a/src/components-examples/material/button/button-types/button-types-example.html +++ /dev/null @@ -1,129 +0,0 @@ -

Basic Buttons

-
- - - - - - Link -
- -

Raised Buttons

-
- - - - - - Link -
- -

Stroked Buttons

-
- - - - - - Link -
- -

Flat Buttons

-
- - - - - - Link -
- -

Icon Buttons

-
- - - - -
- -
- - favorite - -
- -

Fab Buttons

-
- - - -
- -
- - favorite - -
- -

Mini Fab Buttons

-
- - - -
- -
- - favorite - -
- -

Extended Fab

-
- - - - - - favorite - Link - -
diff --git a/src/components-examples/material/button/button-types/button-types-example.ts b/src/components-examples/material/button/button-types/button-types-example.ts deleted file mode 100644 index 3066cc45fa1e..000000000000 --- a/src/components-examples/material/button/button-types/button-types-example.ts +++ /dev/null @@ -1,16 +0,0 @@ -import {Component} from '@angular/core'; -import {MatIconModule} from '@angular/material/icon'; -import {MatTooltipModule} from '@angular/material/tooltip'; -import {MatButtonModule} from '@angular/material/button'; - -/** - * @title Button varieties - */ -@Component({ - selector: 'button-types-example', - templateUrl: 'button-types-example.html', - styleUrl: 'button-types-example.css', - standalone: true, - imports: [MatButtonModule, MatTooltipModule, MatIconModule], -}) -export class ButtonTypesExample {} diff --git a/src/components-examples/material/button/index.ts b/src/components-examples/material/button/index.ts index 73a5072bd973..4557e8edb62e 100644 --- a/src/components-examples/material/button/index.ts +++ b/src/components-examples/material/button/index.ts @@ -1,4 +1,3 @@ export {ButtonOverviewExample} from './button-overview/button-overview-example'; -export {ButtonTypesExample} from './button-types/button-types-example'; export {ButtonDisabledInteractiveExample} from './button-disabled-interactive/button-disabled-interactive-example'; export {ButtonHarnessExample} from './button-harness/button-harness-example'; diff --git a/src/material/button/button-base.ts b/src/material/button/button-base.ts index 33c80a167db1..56525b85fd31 100644 --- a/src/material/button/button-base.ts +++ b/src/material/button/button-base.ts @@ -107,7 +107,13 @@ export class MatButtonBase implements AfterViewInit, OnDestroy { this._rippleLoader?.attachRipple(this._elementRef.nativeElement, v); } - /** Theme color palette of the button */ + /** + * Theme color palette of the button. This API is supported in M2 themes + * only, it has no effect in M3 themes. + * + * For information on applying color variants in M3, see + * https://material.angular.io/guide/theming#using-component-color-variants + */ @Input() color?: string | null; /** Whether the ripple effect is disabled or not. */ diff --git a/src/material/button/button.md b/src/material/button/button.md index 9e2a135b96f8..6b51d9963fc0 100644 --- a/src/material/button/button.md +++ b/src/material/button/button.md @@ -12,26 +12,15 @@ There are several button variants, each applied as an attribute: | Attribute | Description | |----------------------|--------------------------------------------------------------------------| -| `mat-button` | Rectangular text button w/ no elevation | -| `mat-raised-button` | Rectangular contained button w/ elevation | -| `mat-flat-button` | Rectangular contained button w/ no elevation | -| `mat-stroked-button` | Rectangular outlined button w/ no elevation | +| `mat-button` | Rectangular text button w/ no elevation and rounded corners | +| `mat-raised-button` | Rectangular contained button w/ elevation and rounded corners | +| `mat-flat-button` | Rectangular contained button w/ no elevation and rounded corners | +| `mat-stroked-button` | Rectangular outlined button w/ no elevation and rounded corners | | `mat-icon-button` | Circular button with a transparent background, meant to contain an icon | -| `mat-fab` | Circular button w/ elevation, defaults to theme's accent color | +| `mat-fab` | Square button w/ elevation and rounded corners, meant to contain an icon. Can be [extended](https://material.angular.io/components/button/overview#extended-fab-buttons) to a rectangle to also fit a label | | `mat-mini-fab` | Same as `mat-fab` but smaller | -### Theming -Buttons can be colored in terms of the current theme using the `color` property to set the -background color to `primary`, `accent`, or `warn`. - -### Capitalization -According to the Material design spec button text has to be capitalized, however we have opted not -to capitalize buttons automatically via `text-transform: uppercase`, because it can cause issues in -certain locales. It is also worth noting that using ALL CAPS in the text itself causes issues for -screen-readers, which will read the text character-by-character. We leave the decision of how to -approach this to the consuming app. - ### Extended fab buttons Traditional fab buttons are circular and only have space for a single icon. However, you can add the `extended` attribute to allow the fab to expand into a rounded rectangle shape with space for a text @@ -64,6 +53,11 @@ default. A `