Skip to content

Commit bd8259b

Browse files
crisbetocrisbeto
committed
main - fb81ab4 feat(material/button): add support for tonal button (#30638)
1 parent 0c5a650 commit bd8259b

File tree

11 files changed

+114
-132
lines changed

11 files changed

+114
-132
lines changed

‎docs-content/api-docs/material-button-testing.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -933,7 +933,7 @@ <h4 id="ButtonAppearance" class="docs-header-link docs-api-h4 docs-api-type-alia
933933
</h4><p class="docs-api-type-alias-description"><p>Possible button appearances.</p>
934934
</p><div class="docs-markdown">
935935
<pre class="docs-markdown-pre">
936-
<code class="docs-markdown-code"><span class="hljs-keyword">type</span> ButtonAppearance = <span class="hljs-string">&#x27;text&#x27;</span> | <span class="hljs-string">&#x27;filled&#x27;</span> | <span class="hljs-string">&#x27;elevated&#x27;</span> | <span class="hljs-string">&#x27;outlined&#x27;</span>;</code>
936+
<code class="docs-markdown-code"><span class="hljs-keyword">type</span> ButtonAppearance = <span class="hljs-string">&#x27;text&#x27;</span> | <span class="hljs-string">&#x27;filled&#x27;</span> | <span class="hljs-string">&#x27;elevated&#x27;</span> | <span class="hljs-string">&#x27;outlined&#x27;</span> | <span class="hljs-string">&#x27;tonal&#x27;</span>;</code>
937937
</pre>
938938
</div>
939939

‎docs-content/api-docs/material-button.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -884,7 +884,7 @@ <h4 id="MatButtonAppearance" class="docs-header-link docs-api-h4 docs-api-type-a
884884
See <a href="https://m3.material.io/components/buttons/overview">https://m3.material.io/components/buttons/overview</a></p>
885885
</p><div class="docs-markdown">
886886
<pre class="docs-markdown-pre">
887-
<code class="docs-markdown-code"><span class="hljs-keyword">type</span> MatButtonAppearance = <span class="hljs-string">&#x27;text&#x27;</span> | <span class="hljs-string">&#x27;filled&#x27;</span> | <span class="hljs-string">&#x27;elevated&#x27;</span> | <span class="hljs-string">&#x27;outlined&#x27;</span>;</code>
887+
<code class="docs-markdown-code"><span class="hljs-keyword">type</span> MatButtonAppearance = <span class="hljs-string">&#x27;text&#x27;</span> | <span class="hljs-string">&#x27;filled&#x27;</span> | <span class="hljs-string">&#x27;elevated&#x27;</span> | <span class="hljs-string">&#x27;outlined&#x27;</span> | <span class="hljs-string">&#x27;tonal&#x27;</span>;</code>
888888
</pre>
889889
</div>
890890

‎docs-content/examples-highlighted/material/button/button-overview/button-overview-example-css.html‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
<span class="hljs-selector-tag">section</span> {
2-
<span class="hljs-attribute">display</span>: table;
2+
<span class="hljs-attribute">display</span>: flex;
3+
<span class="hljs-attribute">align-items</span>: center;
34
}
45

56
<span class="hljs-selector-class">.example-label</span> {
6-
<span class="hljs-attribute">display</span>: table-cell;
77
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">14px</span>;
8-
<span class="hljs-attribute">margin-left</span>: <span class="hljs-number">8px</span>;
8+
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> <span class="hljs-number">16px</span> <span class="hljs-number">0</span> <span class="hljs-number">8px</span>;
99
<span class="hljs-attribute">min-width</span>: <span class="hljs-number">120px</span>;
1010
}
1111

1212
<span class="hljs-selector-class">.example-button-row</span> {
13-
<span class="hljs-attribute">display</span>: table-cell;
1413
<span class="hljs-attribute">max-width</span>: <span class="hljs-number">600px</span>;
1514
}
1615

@@ -23,9 +22,3 @@
2322
<span class="hljs-attribute">justify-content</span>: space-between;
2423
<span class="hljs-attribute">flex-wrap</span>: wrap;
2524
}
26-
27-
<span class="hljs-selector-class">.example-button-container</span> {
28-
<span class="hljs-attribute">display</span>: flex;
29-
<span class="hljs-attribute">justify-content</span>: center;
30-
<span class="hljs-attribute">width</span>: <span class="hljs-number">140px</span>;
31-
}

‎docs-content/examples-highlighted/material/button/button-overview/button-overview-example-html.html‎

Lines changed: 42 additions & 46 deletions
Large diffs are not rendered by default.

‎docs-content/examples-source/material/button/button-overview/button-overview-example.css‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
section {
2-
display: table;
2+
display: flex;
3+
align-items: center;
34
}
45

56
.example-label {
6-
display: table-cell;
77
font-size: 14px;
8-
margin-left: 8px;
8+
margin: 0 16px 0 8px;
99
min-width: 120px;
1010
}
1111

1212
.example-button-row {
13-
display: table-cell;
1413
max-width: 600px;
1514
}
1615

@@ -23,9 +22,3 @@ section {
2322
justify-content: space-between;
2423
flex-wrap: wrap;
2524
}
26-
27-
.example-button-container {
28-
display: flex;
29-
justify-content: center;
30-
width: 140px;
31-
}

‎docs-content/examples-source/material/button/button-overview/button-overview-example.html‎

Lines changed: 42 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<a matButton href="https://www.google.com/" target="_blank">Link</a>
77
</div>
88
</section>
9-
<mat-divider></mat-divider>
9+
<mat-divider/>
1010
<section>
1111
<div class="example-label">Elevated</div>
1212
<div class="example-button-row">
@@ -15,7 +15,7 @@
1515
<a matButton="elevated" href="https://www.google.com/" target="_blank">Link</a>
1616
</div>
1717
</section>
18-
<mat-divider></mat-divider>
18+
<mat-divider/>
1919
<section>
2020
<div class="example-label">Outlined</div>
2121
<div class="example-button-row">
@@ -24,16 +24,25 @@
2424
<a matButton="outlined" href="https://www.google.com/" target="_blank">Link</a>
2525
</div>
2626
</section>
27-
<mat-divider></mat-divider>
27+
<mat-divider/>
2828
<section>
2929
<div class="example-label">Filled</div>
3030
<div class="example-button-row">
31-
<button matButton="filled" >Basic</button>
32-
<button matButton="filled" disabled>Disabled</button>
31+
<button matButton="filled">Basic</button>
32+
<button matButton="filled" disabled>Disabled</button>
3333
<a matButton="filled" href="https://www.google.com/" target="_blank">Link</a>
3434
</div>
3535
</section>
36-
<mat-divider></mat-divider>
36+
<mat-divider/>
37+
<section>
38+
<div class="example-label">Tonal</div>
39+
<div class="example-button-row">
40+
<button matButton="tonal" >Basic</button>
41+
<button matButton="tonal" disabled>Disabled</button>
42+
<a matButton="tonal" href="https://www.google.com/" target="_blank">Link</a>
43+
</div>
44+
</section>
45+
<mat-divider/>
3746
<section>
3847
<div class="example-label">Icon</div>
3948
<div class="example-button-row">
@@ -47,64 +56,51 @@
4756
</div>
4857
</div>
4958
</section>
50-
<mat-divider></mat-divider>
59+
<mat-divider/>
5160
<section>
5261
<div class="example-label">Floating Action Button (FAB)</div>
5362
<div class="example-button-row">
5463
<div class="example-flex-container">
55-
<div class="example-button-container">
56-
<button matFab aria-label="Example icon button with a delete icon">
57-
<mat-icon>delete</mat-icon>
58-
</button>
59-
</div>
60-
<div class="example-button-container">
61-
<button matFab disabled aria-label="Example icon button with a heart icon">
62-
<mat-icon>favorite</mat-icon>
63-
</button>
64-
</div>
64+
<button matFab aria-label="Example icon button with a delete icon">
65+
<mat-icon>delete</mat-icon>
66+
</button>
67+
<button matFab disabled aria-label="Example icon button with a heart icon">
68+
<mat-icon>favorite</mat-icon>
69+
</button>
6570
</div>
6671
</div>
6772
</section>
68-
<mat-divider></mat-divider>
73+
<mat-divider/>
6974
<section>
7075
<div class="example-label">Mini FAB</div>
7176
<div class="example-button-row">
7277
<div class="example-flex-container">
73-
<div class="example-button-container">
74-
<button matMiniFab aria-label="Example icon button with a menu icon">
75-
<mat-icon>menu</mat-icon>
76-
</button>
77-
</div>
78-
<div class="example-button-container">
79-
<button matMiniFab disabled aria-label="Example icon button with a home icon">
80-
<mat-icon>home</mat-icon>
81-
</button>
82-
</div>
78+
<button matMiniFab aria-label="Example icon button with a menu icon">
79+
<mat-icon>menu</mat-icon>
80+
</button>
81+
<button matMiniFab disabled aria-label="Example icon button with a home icon">
82+
<mat-icon>home</mat-icon>
83+
</button>
8384
</div>
8485
</div>
8586
</section>
87+
<mat-divider/>
8688
<section>
8789
<div class="example-label">Extended FAB</div>
8890
<div class="example-button-row">
8991
<div class="example-flex-container">
90-
<div class="example-button-container">
91-
<button matFab extended>
92-
<mat-icon>favorite</mat-icon>
93-
Basic
94-
</button>
95-
</div>
96-
<div class="example-button-container">
97-
<button matFab extended disabled>
98-
<mat-icon>favorite</mat-icon>
99-
Disabled
100-
</button>
101-
</div>
102-
<div class="example-button-container">
103-
<a matFab extended routerLink=".">
104-
<mat-icon>favorite</mat-icon>
105-
Link
106-
</a>
107-
</div>
92+
<button matFab extended>
93+
<mat-icon>favorite</mat-icon>
94+
Basic
95+
</button>
96+
<button matFab extended disabled>
97+
<mat-icon>favorite</mat-icon>
98+
Disabled
99+
</button>
100+
<a matFab extended routerLink=".">
101+
<mat-icon>favorite</mat-icon>
102+
Link
103+
</a>
108104
</div>
109105
</div>
110106
</section>

‎docs-content/overviews/material/button/button.html‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,19 +23,23 @@
2323
</thead>
2424
<tbody><tr>
2525
<td><code>text</code></td>
26-
<td>Default appearance. Does not have a background until the user interacts with it.</td>
26+
<td>Default appearance. Text buttons are used for the lowest priority actions, especially when presenting multiple options.</td>
2727
</tr>
2828
<tr>
29-
<td><code>elevated</code></td>
30-
<td>Has a background color, elevation and rounded corners.</td>
29+
<td><code>filled</code></td>
30+
<td>High-emphasis buttons used for final or unblocking actions in a flow, such as saving or confirming.</td>
3131
</tr>
3232
<tr>
33-
<td><code>filled</code></td>
34-
<td>Has a flat appearance with rounded corners and no elevation.</td>
33+
<td><code>tonal</code></td>
34+
<td>Medium-emphasis buttons often used for final or unblocking actions in a flow, but with less visual emphasis than a filled button.</td>
3535
</tr>
3636
<tr>
3737
<td><code>outlined</code></td>
38-
<td>Has an outline, rounded corners and a transparent background.</td>
38+
<td>Medium-emphasis buttons often used for actions that need attention but aren&#39;t the primary action.</td>
39+
</tr>
40+
<tr>
41+
<td><code>elevated</code></td>
42+
<td>Medium-emphasis buttons often used when a button requires visual separation from a patterned background.</td>
3943
</tr>
4044
</tbody></table>
4145

‎docs-content/tokens/material/button/button.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)