Skip to content

Commit

Permalink
feat(button): Support icon in button (#1281)
Browse files Browse the repository at this point in the history
  • Loading branch information
yeelan0319 committed Sep 14, 2017
1 parent 7235135 commit b727c14
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 3 deletions.
34 changes: 33 additions & 1 deletion demos/button.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@
<title>Button - Material Components Catalog</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
<script src="/assets/button.css.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="/assets/button.css.js"></script>
<style>
.demo-wrapper {
padding-bottom: 100px;
Expand Down Expand Up @@ -144,6 +144,10 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
<button class="mdc-button secondary-text-button">
Secondary
</button>
<button class="mdc-button">
<i class="material-icons mdc-button__icon">favorite</i>
Icon
</button>
<a href="javascript:void(0)" class="mdc-button">
Link
</a>
Expand All @@ -165,6 +169,10 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
<button class="mdc-button mdc-button--raised secondary-filled-button">
Secondary
</button>
<button class="mdc-button mdc-button--raised">
<i class="material-icons mdc-button__icon">favorite</i>
Icon
</button>
<a href="javascript:void(0)" class="mdc-button mdc-button--raised">
Link
</a>
Expand All @@ -186,6 +194,10 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
<button class="mdc-button mdc-button--unelevated secondary-filled-button">
Secondary
</button>
<button class="mdc-button mdc-button--unelevated">
<i class="material-icons mdc-button__icon">favorite</i>
Icon
</button>
<a href="javascript:void(0)" class="mdc-button mdc-button--unelevated">
Link
</a>
Expand All @@ -207,6 +219,10 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
<button class="mdc-button mdc-button--stroked secondary-stroked-button">
Secondary
</button>
<button class="mdc-button mdc-button--stroked">
<i class="material-icons mdc-button__icon">favorite</i>
Icon
</button>
<a href="javascript:void(0)" class="mdc-button mdc-button--stroked">
Link
</a>
Expand All @@ -229,6 +245,10 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
<button class="mdc-button secondary-text-button" data-demo-no-js>
Secondary
</button>
<button class="mdc-button" data-demo-no-js>
<i class="material-icons mdc-button__icon">favorite</i>
Icon
</button>
<a href="javascript:void(0)" class="mdc-button" data-demo-no-js>
Link
</a>
Expand All @@ -250,6 +270,10 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
<button class="mdc-button mdc-button--raised secondary-filled-button" data-demo-no-js>
Secondary
</button>
<button class="mdc-button mdc-button--raised" data-demo-no-js>
<i class="material-icons mdc-button__icon">favorite</i>
Icon
</button>
<a href="javascript:void(0)" class="mdc-button mdc-button--raised" data-demo-no-js>
Link
</a>
Expand All @@ -271,6 +295,10 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
<button class="mdc-button mdc-button--unelevated secondary-filled-button" data-demo-no-js>
Secondary
</button>
<button class="mdc-button mdc-button--unelevated" data-demo-no-js>
<i class="material-icons mdc-button__icon">favorite</i>
Icon
</button>
<a href="javascript:void(0)" class="mdc-button mdc-button--unelevated" data-demo-no-js>
Link
</a>
Expand All @@ -292,6 +320,10 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
<button class="mdc-button mdc-button--stroked secondary-stroked-button" data-demo-no-js>
Secondary
</button>
<button class="mdc-button mdc-button--stroked" data-demo-no-js>
<i class="material-icons mdc-button__icon">favorite</i>
Icon
</button>
<a href="javascript:void(0)" class="mdc-button mdc-button--stroked" data-demo-no-js>
Link
</a>
Expand Down
3 changes: 1 addition & 2 deletions packages/mdc-button/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ semantically correct.
| Class | Description |
| --------------------- | ------------------------------------------------------- |
| `mdc-button` | Mandatory, defaults to a text button that is flush with the surface.|
| `mdc-button__icon` | Optional, for the icon element. |
| `mdc-button--raised` | Optional, a contained button that is elevated upon the surface. |
| `mdc-button--unelevated` | Optional, a contained button that is flush with the surface. |
| `mdc-button--stroked` | Optional, a contained button that is flush with the surface and has a visible border. |
Expand Down Expand Up @@ -117,5 +118,3 @@ container color to the given color, and updates the Button's ink and ripple colo
| `mdc-button-corner-radius` | Sets the corner radius to the given number (defaults to 4px) |
| `mdc-button-stroke-width` | Sets the stroke width to the given number (defaults to 2px) |
| `mdc-button-stroke-style` | Sets the stroke style to the given style (defaults to solid line) |


10 changes: 10 additions & 0 deletions packages/mdc-button/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,16 @@
}
}

@mixin mdc-button__icon_ {
display: inline-block;
width: 18px;
height: 18px;
margin-right: 8px;
font-size: 18px;
line-height: inherit;
vertical-align: top;
}

@mixin mdc-button--stroked_() {
&:disabled {
@include mdc-theme-prop(border-color, text-disabled-on-light);
Expand Down
4 changes: 4 additions & 0 deletions packages/mdc-button/mdc-button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -67,4 +67,8 @@
.mdc-button--dense {
@include mdc-button--dense_;
}

.mdc-button__icon {
@include mdc-button__icon_;
}
// postcss-bem-linter: end

0 comments on commit b727c14

Please sign in to comment.