Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit fa41579

Browse files
kfranqueirokfranqueiro
authored
feat(button): Add trailing icon support via label element (#4159)
BREAKING CHANGE: We recommend placing each button's text label within a mdc-button__label element. This does not immediately break existing MDC Button usage, but updating is recommended to future-proof against potential upcoming changes.
1 parent 2d35220 commit fa41579

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1111
-253
lines changed

‎packages/mdc-button/README.md

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ npm install @material/button
4141

4242
```html
4343
<button class="mdc-button">
44-
Button
44+
<span class="mdc-button__label">Button</span>
4545
</button>
4646
```
4747

@@ -92,7 +92,7 @@ To add an icon, add an element with the `mdc-button__icon` class inside the butt
9292
```html
9393
<button class="mdc-button">
9494
<i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
95-
Button
95+
<span class="mdc-button__label">Button</span>
9696
</button>
9797
```
9898

@@ -103,18 +103,32 @@ It's also possible to use an SVG icon:
103103
<svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="...">
104104
...
105105
</svg>
106-
Button
106+
<span class="mdc-button__label">Button</span>
107107
</button>
108108
```
109109

110+
#### Trailing Icon
111+
112+
Certain icons make more sense to appear after the button's text label rather than before. This can be accomplished by
113+
putting the icon markup _after_ the `mdc-button__label` element.
114+
115+
```html
116+
<button class="mdc-button">
117+
<span class="mdc-button__label">Button</span>
118+
<i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
119+
</button>
120+
```
121+
122+
> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.
123+
110124
### Disabled
111125

112126
To disable a button, add the `disabled` attribute directly to the `<button>`, or set the `disabled` attribute on the `<fieldset>` containing the button.
113127
Disabled buttons cannot be interacted with and have no visual interaction effect.
114128

115129
```html
116130
<button class="mdc-button" disabled>
117-
Button
131+
<span class="mdc-button__label">Button</span>
118132
</button>
119133
```
120134

@@ -129,7 +143,14 @@ CSS Class | Description
129143
`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.
130144
`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.
131145
`mdc-button--dense` | Optional. Makes the button text and container slightly smaller.
132-
`mdc-button__icon` | Optional. Indicates an icon element.
146+
`mdc-button__label` | Recommended.\* Indicates the element containing the button's text label.
147+
`mdc-button__icon` | Optional. Indicates the element containing the button's icon.
148+
149+
> \*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for
150+
> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist
151+
> directly within the `mdc-button` element.
152+
> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to
153+
> always include it to be future-proof.
133154
134155
### Sass Mixins
135156

‎packages/mdc-button/_mixins.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,10 @@
147147
vertical-align: top;
148148
}
149149

150+
@mixin mdc-button__icon-trailing_ {
151+
@include mdc-rtl-reflexive-box(margin, left, 8px);
152+
}
153+
150154
@mixin mdc-button__icon-svg_ {
151155
fill: currentColor;
152156
}
@@ -155,6 +159,10 @@
155159
@include mdc-rtl-reflexive-property(margin, -4px, 8px);
156160
}
157161

162+
@mixin mdc-button__icon-contained-trailing_ {
163+
@include mdc-rtl-reflexive-property(margin, 8px, -4px);
164+
}
165+
158166
@mixin mdc-button--outlined_() {
159167
border-style: solid;
160168

‎packages/mdc-button/mdc-button.scss

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,15 @@
4040
.mdc-button__icon {
4141
@include mdc-button__icon_;
4242
}
43+
}
4344

44-
// stylelint-disable-next-line selector-no-qualifying-type
45-
svg.mdc-button__icon {
46-
@include mdc-button__icon-svg_;
47-
}
45+
.mdc-button__label + .mdc-button__icon {
46+
@include mdc-button__icon-trailing_;
47+
}
48+
49+
// stylelint-disable-next-line selector-no-qualifying-type
50+
svg.mdc-button__icon {
51+
@include mdc-button__icon-svg_;
4852
}
4953

5054
.mdc-button--raised,
@@ -54,6 +58,10 @@
5458
// Icons inside contained buttons have different styles due to increased button padding
5559
@include mdc-button__icon-contained_;
5660
}
61+
62+
.mdc-button__label + .mdc-button__icon {
63+
@include mdc-button__icon-contained-trailing_;
64+
}
5765
}
5866

5967
.mdc-button--raised,

‎packages/mdc-card/README.md

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,12 @@ Fully-featured:
5757
<!-- ... content ... -->
5858
<div class="mdc-card__actions">
5959
<div class="mdc-card__action-buttons">
60-
<button class="mdc-button mdc-card__action mdc-card__action--button">Action 1</button>
61-
<button class="mdc-button mdc-card__action mdc-card__action--button">Action 2</button>
60+
<button class="mdc-button mdc-card__action mdc-card__action--button">
61+
<span class="mdc-button__label">Action 1</span>
62+
</button>
63+
<button class="mdc-button mdc-card__action mdc-card__action--button">
64+
<span class="mdc-button__label">Action 2</span>
65+
</button>
6266
</div>
6367
<div class="mdc-card__action-icons">
6468
<button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="Share">share</button>
@@ -123,8 +127,12 @@ and the [optional modifier classes](#css-classes).
123127

124128
```html
125129
<div class="mdc-card__actions">
126-
<button class="mdc-button mdc-card__action mdc-card__action--button">Action 1</button>
127-
<button class="mdc-button mdc-card__action mdc-card__action--button">Action 2</button>
130+
<button class="mdc-button mdc-card__action mdc-card__action--button">
131+
<span class="mdc-button__label">Action 1</span>
132+
</button>
133+
<button class="mdc-button mdc-card__action mdc-card__action--button">
134+
<span class="mdc-button__label">Action 2</span>
135+
</button>
128136
</div>
129137
```
130138

@@ -153,7 +161,7 @@ To have a single action button take up the entire width of the action row, use t
153161
```html
154162
<div class="mdc-card__actions mdc-card__actions--full-bleed">
155163
<a class="mdc-button mdc-card__action mdc-card__action--button" href="#">
156-
All Business Headlines
164+
<span class="mdc-button__label">All Business Headlines</span>
157165
<i class="material-icons" aria-hidden="true">arrow_forward</i>
158166
</a>
159167
</div>
@@ -165,8 +173,12 @@ elements:
165173
```html
166174
<div class="mdc-card__actions">
167175
<div class="mdc-card__action-buttons">
168-
<button class="mdc-button mdc-card__action mdc-card__action--button">Read</button>
169-
<button class="mdc-button mdc-card__action mdc-card__action--button">Bookmark</button>
176+
<button class="mdc-button mdc-card__action mdc-card__action--button">
177+
<span class="mdc-button__label">Read</span>
178+
</button>
179+
<button class="mdc-button mdc-card__action mdc-card__action--button">
180+
<span class="mdc-button__label">Bookmark</span>
181+
</button>
170182
</div>
171183
<div class="mdc-card__action-icons">
172184
<button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="Share">share</button>

‎packages/mdc-dialog/README.md

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,12 @@ npm install @material/dialog
5555
Dialog body text goes here.
5656
</div>
5757
<footer class="mdc-dialog__actions">
58-
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="no">No</button>
59-
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">Yes</button>
58+
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="no">
59+
<span class="mdc-button__label">No</span>
60+
</button>
61+
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
62+
<span class="mdc-button__label">Yes</span>
63+
</button>
6064
</footer>
6165
</div>
6266
</div>
@@ -177,8 +181,12 @@ radio buttons (indicating single selection) or checkboxes (indicating multiple s
177181
</ul>
178182
</div>
179183
<footer class="mdc-dialog__actions">
180-
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">Cancel</button>
181-
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="accept">OK</button>
184+
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">
185+
<span class="mdc-button__label">Cancel</span>
186+
</button>
187+
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="accept">
188+
<span class="mdc-button__label">OK</span>
189+
</button>
182190
</footer>
183191
</div>
184192
</div>
@@ -245,8 +253,12 @@ For example:
245253
```html
246254
...
247255
<footer class="mdc-dialog__actions">
248-
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">Cancel</button>
249-
<button type="button" class="mdc-button mdc-dialog__button mdc-dialog__button--default" data-mdc-dialog-action="accept">OK</button>
256+
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">
257+
<span class="mdc-button__label">Cancel</span>
258+
</button>
259+
<button type="button" class="mdc-button mdc-dialog__button mdc-dialog__button--default" data-mdc-dialog-action="accept">
260+
<span class="mdc-button__label">OK</span>
261+
</button>
250262
</footer>
251263
...
252264
```

0 commit comments

Comments
 (0)