Skip to content

Commit 045838c

Browse files
mmalerbammalerba
committed
doc(material/button): improve button docs & examples (#26170)
* docs(material/button): improve button docs & examples - Remove stale README that describes the component as experimental - Add docs describing the extended fab variant - Add aria-labels to button examples that don't have text - Remove "basic" color fabs from example, since fab doesn't support an un-colored style (It probably should as its shown in the spec, but that's outside the scope of this docs fix). - Add extended fab row to example * fixup! docs(material/button): improve button docs & examples (cherry picked from commit 2629047)
1 parent 31a3af0 commit 045838c

File tree

6 files changed

+85
-101
lines changed

6 files changed

+85
-101
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ ng_module(
1919
"//src/material/button/testing",
2020
"//src/material/divider",
2121
"//src/material/icon",
22+
"//src/material/tooltip",
2223
"@npm//@angular/platform-browser",
2324
"@npm//@angular/platform-browser-dynamic",
2425
"@npm//@types/jasmine",

‎src/components-examples/material/button/button-types/button-types-example.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,7 @@
22
.example-button-row a {
33
margin-right: 8px;
44
}
5+
6+
.example-disabled {
7+
display: inline-block;
8+
}

‎src/components-examples/material/button/button-types/button-types-example.html‎

Lines changed: 65 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -40,45 +40,90 @@ <h3>Flat Buttons</h3>
4040

4141
<h3>Icon Buttons</h3>
4242
<div class="example-button-row">
43-
<button mat-icon-button aria-label="Example icon-button with a heart icon">
43+
<button mat-icon-button matTooltip="Basic" aria-label="Example icon-button with a heart icon">
4444
<mat-icon>favorite</mat-icon>
4545
</button>
46-
<button mat-icon-button color="primary" aria-label="Example icon-button with a heart icon">
46+
<button mat-icon-button matTooltip="Primary" color="primary" aria-label="Example icon-button with a heart icon">
4747
<mat-icon>favorite</mat-icon>
4848
</button>
49-
<button mat-icon-button color="accent" aria-label="Example icon-button with a heart icon">
49+
<button mat-icon-button matTooltip="Accent" color="accent" aria-label="Example icon-button with a heart icon">
5050
<mat-icon>favorite</mat-icon>
5151
</button>
52-
<button mat-icon-button color="warn" aria-label="Example icon-button with a heart icon">
52+
<button mat-icon-button matTooltip="Warn" color="warn" aria-label="Example icon-button with a heart icon">
5353
<mat-icon>favorite</mat-icon>
5454
</button>
55-
<button mat-icon-button disabled aria-label="Example icon-button with a heart icon">
55+
<div matTooltip="Disabled" class="example-disabled">
56+
<button mat-icon-button disabled aria-label="Example icon-button with a heart icon">
57+
<mat-icon>favorite</mat-icon>
58+
</button>
59+
</div>
60+
<a mat-icon-button matTooltip="Lik" routerLink="." aria-label="Example icon-button with a heart icon">
5661
<mat-icon>favorite</mat-icon>
57-
</button>
62+
</a>
5863
</div>
5964

6065
<h3>Fab Buttons</h3>
6166
<div class="example-button-row">
62-
<button mat-fab>Basic</button>
63-
<button mat-fab color="primary">Primary</button>
64-
<button mat-fab color="accent">Accent</button>
65-
<button mat-fab color="warn">Warn</button>
66-
<button mat-fab disabled>Disabled</button>
67-
<button mat-fab aria-label="Example icon-button with a heart icon">
67+
<button mat-fab matTooltip="Primary" color="primary" aria-label="Example fab with a heart icon">
68+
<mat-icon>favorite</mat-icon>
69+
</button>
70+
<button mat-fab matTooltip="Accent" color="accent" aria-label="Example fab with a heart icon">
6871
<mat-icon>favorite</mat-icon>
6972
</button>
70-
<a mat-fab routerLink=".">Link</a>
73+
<button mat-fab matTooltip="Warn" color="warn" aria-label="Example fab with a heart icon">
74+
<mat-icon>favorite</mat-icon>
75+
</button>
76+
<div matTooltip="Disabled" class="example-disabled">
77+
<button mat-fab disabled aria-label="Example fab with a heart icon">
78+
<mat-icon>favorite</mat-icon>
79+
</button>
80+
</div>
81+
<a mat-fab matTooltip="Link" routerLink="." aria-label="Example fab with a heart icon">
82+
<mat-icon>favorite</mat-icon>
83+
</a>
7184
</div>
7285

7386
<h3>Mini Fab Buttons</h3>
7487
<div class="example-button-row">
75-
<button mat-mini-fab>Basic</button>
76-
<button mat-mini-fab color="primary">Primary</button>
77-
<button mat-mini-fab color="accent">Accent</button>
78-
<button mat-mini-fab color="warn">Warn</button>
79-
<button mat-mini-fab disabled>Disabled</button>
80-
<button mat-mini-fab aria-label="Example icon-button with a heart icon">
88+
<button mat-mini-fab matTooltip="Primary" color="primary" aria-label="Example mini fab with a heart icon">
8189
<mat-icon>favorite</mat-icon>
8290
</button>
83-
<a mat-mini-fab routerLink=".">Link</a>
91+
<button mat-mini-fab matTooltip="Accent" color="accent" aria-label="Example mini fab with a heart icon">
92+
<mat-icon>favorite</mat-icon>
93+
</button>
94+
<button mat-mini-fab matTooltip="Warn" color="warn" aria-label="Example mini fab with a heart icon">
95+
<mat-icon>favorite</mat-icon>
96+
</button>
97+
<div matTooltip="Disabled" class="example-disabled">
98+
<button mat-mini-fab disabled aria-label="Example mini fab with a heart icon">
99+
<mat-icon>favorite</mat-icon>
100+
</button>
101+
</div>
102+
<a mat-mini-fab matTooltip="Link" routerLink="." aria-label="Example mini fab with a heart icon">
103+
<mat-icon>favorite</mat-icon>
104+
</a>
105+
</div>
106+
107+
<h3>Extended Fab</h3>
108+
<div class="example-button-row">
109+
<button mat-fab extended color="primary">
110+
<mat-icon>favorite</mat-icon>
111+
Primary
112+
</button>
113+
<button mat-fab extended color="accent">
114+
<mat-icon>favorite</mat-icon>
115+
Accent
116+
</button>
117+
<button mat-fab extended color="warn">
118+
<mat-icon>favorite</mat-icon>
119+
Warn
120+
</button>
121+
<button mat-fab extended disabled>
122+
<mat-icon>favorite</mat-icon>
123+
Disabled
124+
</button>
125+
<a mat-fab extended routerLink=".">
126+
<mat-icon>favorite</mat-icon>
127+
Link
128+
</a>
84129
</div>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {NgModule} from '@angular/core';
22
import {MatButtonModule} from '@angular/material/button';
33
import {MatDividerModule} from '@angular/material/divider';
44
import {MatIconModule} from '@angular/material/icon';
5+
import {MatTooltipModule} from '@angular/material/tooltip';
56
import {ButtonOverviewExample} from './button-overview/button-overview-example';
67
import {ButtonTypesExample} from './button-types/button-types-example';
78
import {ButtonHarnessExample} from './button-harness/button-harness-example';
@@ -11,7 +12,7 @@ export {ButtonOverviewExample, ButtonTypesExample, ButtonHarnessExample};
1112
const EXAMPLES = [ButtonOverviewExample, ButtonTypesExample, ButtonHarnessExample];
1213

1314
@NgModule({
14-
imports: [MatButtonModule, MatDividerModule, MatIconModule],
15+
imports: [MatButtonModule, MatDividerModule, MatIconModule, MatTooltipModule],
1516
declarations: EXAMPLES,
1617
exports: EXAMPLES,
1718
})

‎src/material/button/README.md‎

Lines changed: 0 additions & 80 deletions
This file was deleted.

‎src/material/button/button.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,19 @@ certain locales. It is also worth noting that using ALL CAPS in the text itself
3232
screen-readers, which will read the text character-by-character. We leave the decision of how to
3333
approach this to the consuming app.
3434

35+
### Extended fab buttons
36+
Traditional fab buttons are circular and only have space for a single icon. However, you can add the
37+
`extended` attribute to allow the fab to expand into a rounded rectangle shape with space for a text
38+
label in addition to the icon. Only full sized fabs support the `extended` attribute, mini fabs do
39+
not.
40+
41+
```html
42+
<button mat-fab extended>
43+
<mat-icon>home</mat-icon>
44+
Home
45+
</button>
46+
```
47+
3548
### Accessibility
3649
Angular Material uses native `<button>` and `<a>` elements to ensure an accessible experience by
3750
default. A `<button>` element should be used for any interaction that _performs an action on the

0 commit comments

Comments
 (0)