From c959dccc4d14a6ac9a461fe305979ecdffe37189 Mon Sep 17 00:00:00 2001
From: Andy BeeSee <ahollandmoritz@gmail.com>
Date: Thu, 5 May 2016 06:20:12 -0400
Subject: [PATCH] md-button class bindings (#365)

* Added fab and mini classname bindings to paper-button, defined  defaults for them and iconButton, raised properties

* style fix

* Added tests for paper-button to ensure that md-mini and md-fab classes when their respective properties are defined

* added fab and mini to docs

* Update md-button-test to check that when mini=true both md-fab and md-mini classes are present

* updated paper-button so that when mini=true it will set md-fab and md-mini

* updated dummy app to reflect mini=true changes to the paper-button
---
 addon/components/paper-button.js               |  8 +++++++-
 tests/dummy/app/templates/button.hbs           |  4 ++++
 .../components/paper-button-test.js            | 18 ++++++++++++++++++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/addon/components/paper-button.js b/addon/components/paper-button.js
index b8ec697d4..7dda9c9eb 100644
--- a/addon/components/paper-button.js
+++ b/addon/components/paper-button.js
@@ -11,9 +11,15 @@ export default BaseFocusable.extend(RippleMixin, ProxiableMixin, ColorMixin, {
   type: 'button',
   tagName: 'button',
   classNames: ['paper-button', 'md-default-theme', 'md-button'],
+  raised: false,
+  iconButton: false,
+  fab: computed.reads('mini'),  // circular button
+  mini: false,
   classNameBindings: [
     'raised:md-raised',
-    'iconButton:md-icon-button'
+    'iconButton:md-icon-button',
+    'fab:md-fab',
+    'mini:md-mini'
   ],
 
   // Ripple Overrides
diff --git a/tests/dummy/app/templates/button.hbs b/tests/dummy/app/templates/button.hbs
index 2d1b3d55f..ab96ba40c 100644
--- a/tests/dummy/app/templates/button.hbs
+++ b/tests/dummy/app/templates/button.hbs
@@ -27,6 +27,8 @@
     {{#paper-button raised=true primary=true onClick=(action "targetButton") bubbles=false}}Button no bubble{{/paper-button}}
   </p>
   <p>
+    {{#paper-button raised=true fab=true}}Fab{{/paper-button}}
+    {{#paper-button raised=true mini=true}}Mini{{/paper-button}}
     {{#paper-button iconButton=true}}{{paper-icon "accessibility"}}{{/paper-button}}
   </p>
   {{/custom-button}}
@@ -53,6 +55,8 @@
     \{{#paper-button raised=true primary=true onClick=(action "targetButton") bubbles=false}}Button no bubble\{{/paper-button}}
   &lt;/p&gt;
   &lt;p&gt;
+    \{{#paper-button raised=true fab=true}}Fab\{{/paper-button}}
+    \{{#paper-button raised=true mini=true}}Mini\{{/paper-button}}
     \{{#paper-button iconButton=true}}\{{paper-icon "more-vert"}}\{{/paper-button}}
   &lt;/p&gt;
   &lt;p&gt;
diff --git a/tests/integration/components/paper-button-test.js b/tests/integration/components/paper-button-test.js
index 1297209ef..b13f70393 100644
--- a/tests/integration/components/paper-button-test.js
+++ b/tests/integration/components/paper-button-test.js
@@ -70,3 +70,21 @@ test('uses md-icon-button class when iconButton=true', function(assert) {
   `);
   assert.ok(this.$('.md-button').hasClass('md-icon-button'));
 });
+
+test('uses md-fab class when fab=true', function(assert) {
+  this.render(hbs`
+    {{#paper-button fab=true}}
+      A label
+    {{/paper-button}}
+  `);
+  assert.ok(this.$('.md-button').hasClass('md-fab'));
+});
+
+test('uses md-mini and md-fab class when mini=true', function(assert) {
+  this.render(hbs`
+    {{#paper-button mini=true}}
+      A label
+    {{/paper-button}}
+  `);
+  assert.ok(this.$('.md-button').is('.md-fab', '.md-mini'));
+});