Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(button): Add trailing icon support via label element #4159

Merged
merged 6 commits into from
Dec 12, 2018
Merged

feat(button): Add trailing icon support via label element #4159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
15a52e5
feat(button): Add trailing icon support via optional label element
Dec 7, 2018
9d4102d
WIP More screenshot test updates
Dec 10, 2018
2da59e0
WIP Update goldens
Dec 10, 2018
9c21b59
WIP Update READMEs
Dec 10, 2018
bcb6723
WIP Update button DOM in more tests
Dec 10, 2018
43e454a
WIP Fix lint
Dec 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 26 additions & 5 deletions packages/mdc-button/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ npm install @material/button

```html
<button class="mdc-button">
Button
<span class="mdc-button__label">Button</span>
</button>
```

Expand Down Expand Up @@ -92,7 +92,7 @@ To add an icon, add an element with the `mdc-button__icon` class inside the butt
```html
<button class="mdc-button">
<i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
Button
<span class="mdc-button__label">Button</span>
</button>
```

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

#### Trailing Icon

Certain icons make more sense to appear after the button's text label rather than before. This can be accomplished by
putting the icon markup _after_ the `mdc-button__label` element.

```html
<button class="mdc-button">
<span class="mdc-button__label">Button</span>
<i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
</button>
```

> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately.

### Disabled

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

```html
<button class="mdc-button" disabled>
Button
<span class="mdc-button__label">Button</span>
</button>
```

Expand All @@ -129,7 +143,14 @@ CSS Class | Description
`mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface.
`mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface.
`mdc-button--dense` | Optional. Makes the button text and container slightly smaller.
`mdc-button__icon` | Optional. Indicates an icon element.
`mdc-button__label` | Recommended.\* Indicates the element containing the button's text label.
`mdc-button__icon` | Optional. Indicates the element containing the button's icon.

> \*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for
> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist
> directly within the `mdc-button` element.
> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to
> always include it to be future-proof.

### Sass Mixins

Expand Down
8 changes: 8 additions & 0 deletions packages/mdc-button/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,10 @@
vertical-align: top;
}

@mixin mdc-button__icon-trailing_ {
@include mdc-rtl-reflexive-box(margin, left, 8px);
}

@mixin mdc-button__icon-svg_ {
fill: currentColor;
}
Expand All @@ -155,6 +159,10 @@
@include mdc-rtl-reflexive-property(margin, -4px, 8px);
}

@mixin mdc-button__icon-contained-trailing_ {
@include mdc-rtl-reflexive-property(margin, 8px, -4px);
}

@mixin mdc-button--outlined_() {
border-style: solid;

Expand Down
16 changes: 12 additions & 4 deletions packages/mdc-button/mdc-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,15 @@
.mdc-button__icon {
@include mdc-button__icon_;
}
}

// stylelint-disable-next-line selector-no-qualifying-type
svg.mdc-button__icon {
@include mdc-button__icon-svg_;
}
.mdc-button__label + .mdc-button__icon {
@include mdc-button__icon-trailing_;
}

// stylelint-disable-next-line selector-no-qualifying-type
svg.mdc-button__icon {
@include mdc-button__icon-svg_;
}

.mdc-button--raised,
Expand All @@ -54,6 +58,10 @@
// Icons inside contained buttons have different styles due to increased button padding
@include mdc-button__icon-contained_;
}

.mdc-button__label + .mdc-button__icon {
@include mdc-button__icon-contained-trailing_;
}
}

.mdc-button--raised,
Expand Down
26 changes: 19 additions & 7 deletions packages/mdc-card/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,12 @@ Fully-featured:
<!-- ... content ... -->
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button">Action 1</button>
<button class="mdc-button mdc-card__action mdc-card__action--button">Action 2</button>
<button class="mdc-button mdc-card__action mdc-card__action--button">
<span class="mdc-button__label">Action 1</span>
</button>
<button class="mdc-button mdc-card__action mdc-card__action--button">
<span class="mdc-button__label">Action 2</span>
</button>
</div>
<div class="mdc-card__action-icons">
<button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="Share">share</button>
Expand Down Expand Up @@ -123,8 +127,12 @@ and the [optional modifier classes](#css-classes).

```html
<div class="mdc-card__actions">
<button class="mdc-button mdc-card__action mdc-card__action--button">Action 1</button>
<button class="mdc-button mdc-card__action mdc-card__action--button">Action 2</button>
<button class="mdc-button mdc-card__action mdc-card__action--button">
<span class="mdc-button__label">Action 1</span>
</button>
<button class="mdc-button mdc-card__action mdc-card__action--button">
<span class="mdc-button__label">Action 2</span>
</button>
</div>
```

Expand Down Expand Up @@ -153,7 +161,7 @@ To have a single action button take up the entire width of the action row, use t
```html
<div class="mdc-card__actions mdc-card__actions--full-bleed">
<a class="mdc-button mdc-card__action mdc-card__action--button" href="#">
All Business Headlines
<span class="mdc-button__label">All Business Headlines</span>
<i class="material-icons" aria-hidden="true">arrow_forward</i>
</a>
</div>
Expand All @@ -165,8 +173,12 @@ elements:
```html
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button">Read</button>
<button class="mdc-button mdc-card__action mdc-card__action--button">Bookmark</button>
<button class="mdc-button mdc-card__action mdc-card__action--button">
<span class="mdc-button__label">Read</span>
</button>
<button class="mdc-button mdc-card__action mdc-card__action--button">
<span class="mdc-button__label">Bookmark</span>
</button>
</div>
<div class="mdc-card__action-icons">
<button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="Share">share</button>
Expand Down
24 changes: 18 additions & 6 deletions packages/mdc-dialog/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,12 @@ npm install @material/dialog
Dialog body text goes here.
</div>
<footer class="mdc-dialog__actions">
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="no">No</button>
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">Yes</button>
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="no">
<span class="mdc-button__label">No</span>
</button>
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="yes">
<span class="mdc-button__label">Yes</span>
</button>
</footer>
</div>
</div>
Expand Down Expand Up @@ -177,8 +181,12 @@ radio buttons (indicating single selection) or checkboxes (indicating multiple s
</ul>
</div>
<footer class="mdc-dialog__actions">
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">Cancel</button>
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="accept">OK</button>
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">
<span class="mdc-button__label">Cancel</span>
</button>
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="accept">
<span class="mdc-button__label">OK</span>
</button>
</footer>
</div>
</div>
Expand Down Expand Up @@ -245,8 +253,12 @@ For example:
```html
...
<footer class="mdc-dialog__actions">
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">Cancel</button>
<button type="button" class="mdc-button mdc-dialog__button mdc-dialog__button--default" data-mdc-dialog-action="accept">OK</button>
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">
<span class="mdc-button__label">Cancel</span>
</button>
<button type="button" class="mdc-button mdc-dialog__button mdc-dialog__button--default" data-mdc-dialog-action="accept">
<span class="mdc-button__label">OK</span>
</button>
</footer>
...
```
Expand Down
Loading