feat(button): add md-icon-button styling.

* Added md-icon-button component * Showcased the md-icon-button in the button demos. Fixes #188 Closes #206
angular · Mar 22, 2016 · 208cd65 · 208cd65
1 parent e7beecd
commit 208cd65
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 2 deletions.
diff --git a/src/components/button/_button-base.scss b/src/components/button/_button-base.scss
@@ -13,6 +13,11 @@ $md-button-margin: 0 !default;
 $md-button-line-height: 36px !default;
 $md-button-border-radius: 3px !default;
 
+// Icon Button standards
+$md-icon-button-size: 40px !default;
+$md-icon-button-border-radius: 50px !default;
+$md-icon-button-line-height: 24px !default;
+
 // Fab standards
 $md-fab-border-radius: 50% !default;
 $md-fab-size: 56px !default;

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -31,6 +31,28 @@
   @include md-fab($md-mini-fab-size, $md-mini-fab-padding)
 }
 
+[md-icon-button] {
+  @extend %md-button-base;
+
+  min-width: 0;
+  padding: 0;
+
+  width: $md-icon-button-size;
+  height: $md-icon-button-size;
+
+  line-height: $md-icon-button-line-height;
+  border-radius: $md-icon-button-border-radius;
+
+  &.md-button-focus {
+    background-color: md-color($md-foreground, base, 0.12);
+    @include md-button-theme('background-color', 0.12);
+  }
+
+  .md-button-wrapper > * {
+    vertical-align: middle;
+  }
+}
+
 // Applies a clearer border for high-contrast mode (a11y)
 @media screen and (-ms-high-contrast: active) {
   .md-raised-button, .md-fab, .md-mini-fab {

diff --git a/src/components/button/button.ts b/src/components/button/button.ts
@@ -16,7 +16,8 @@ import {TimerWrapper} from 'angular2/src/facade/async';
 
 
 @Component({
-  selector: '[md-button]:not(a), [md-raised-button]:not(a), [md-fab]:not(a), [md-mini-fab]:not(a)',
+  selector: '[md-button]:not(a), [md-raised-button]:not(a), [md-icon-button]:not(a), ' +
+            '[md-fab]:not(a), [md-mini-fab]:not(a)',
   inputs: ['color'],
   host: {
     '[class.md-button-focus]': 'isKeyboardFocused',
@@ -79,7 +80,7 @@ export class MdButton {
 }
 
 @Component({
-  selector: 'a[md-button], a[md-raised-button], a[md-fab], a[md-mini-fab]',
+  selector: 'a[md-button], a[md-raised-button], a[md-icon-button], a[md-fab], a[md-mini-fab]',
   inputs: ['color'],
   host: {
     '[class.md-button-focus]': 'isKeyboardFocused',

diff --git a/src/demo-app/button/button-demo.html b/src/demo-app/button/button-demo.html
@@ -45,6 +45,20 @@
     </button>
   </section>
 
+  <section>
+    <button md-icon-button color="primary">
+      <i class="material-icons md-24">menu</i>
+    </button>
+
+    <button md-icon-button color="accent">
+      <i class="material-icons md-24">favorite</i>
+    </button>
+
+    <button md-icon-button>
+      <i class="material-icons md-24">more_vert</i>
+    </button>
+  </section>
+
   <section>
     <div>
       <span>isDisabled: {{isDisabled}}</span>
@@ -57,5 +71,9 @@
     <button md-mini-fab [disabled]="isDisabled">
       <i class="material-icons md-24">check</i>
     </button>
+
+    <button md-icon-button color="accent" [disabled]="isDisabled">
+      <i class="material-icons md-24">favorite</i>
+    </button>
   </section>
 </div>