paper-button: Support <a> tags with href and optional target attrib…

…utes. (#372) * paper-button: support `<a>` tags with href and optional target attributes. Improve dummy app page. Use to link to v0.2. * Incorporate PR feedback - Don't set type=button for a-link buttons - Use flex class rather than attribute throughout the dummy app - Don't use a computed property for tagName * Update changelog with actual PR number. * Use class="layout-row" for a flex layout row. * Document default button type attribute is "button".
adopted-ember-addons · May 13, 2016 · 1d3b98e · miguelcobain · May 13, 2016 · 1d3b98e
1 parent 5e994e1
commit 1d3b98e
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,7 @@ Contributions and pull requests are always welcome. Contributors may often be fo
 - [#364](https://github.com/miguelcobain/ember-paper/pull/364) Support installation via both npm versions 2 and 3.
 - [#367](https://github.com/miguelcobain/ember-paper/pull/367) You should now use `paper-toolbar-tools` component (or respective contextual component) instead of the `md-toolbar-tools` class.
 - [#370](https://github.com/miguelcobain/ember-paper/pull/370) `paper-icon` now once again supports kebab cased icon names, and a `size` in pixels.
+- [#372](https://github.com/miguelcobain/ember-paper/pull/372) `paper-button` can generate `a` link elements, with an href and optional target attribute.
 
 #### 1.0.0-alpha.0
 - [1a9b641](https://github.com/miguelcobain/ember-paper/commit/1a9b6411a8ca30f3e9440d8585dc0f1ff4ff7649) paper-progress-circular now uses `diameter` instead of `md-diameter`

diff --git a/addon/components/paper-button.js b/addon/components/paper-button.js
@@ -7,14 +7,20 @@ import ColorMixin from 'ember-paper/mixins/color-mixin';
 const { computed } = Ember;
 
 export default BaseFocusable.extend(RippleMixin, ProxiableMixin, ColorMixin, {
-  attributeBindings: ['type'],
-  type: 'button',
   tagName: 'button',
   classNames: ['paper-button', 'md-default-theme', 'md-button'],
   raised: false,
   iconButton: false,
   fab: computed.reads('mini'),  // circular button
   mini: false,
+  type: 'button',
+  href: null,
+  target: null,
+  attributeBindings: [
+    'type',
+    'href',
+    'target'
+  ],
   classNameBindings: [
     'raised:md-raised',
     'iconButton:md-icon-button',
@@ -28,6 +34,16 @@ export default BaseFocusable.extend(RippleMixin, ProxiableMixin, ColorMixin, {
   center: computed.readOnly('iconButton'),
   dimBackground: computed.not('iconButton'),
 
+  init() {
+    this._super(...arguments);
+    if (this.get('href')) {
+      this.setProperties({
+        tagName: 'a',
+        type: null
+      });
+    }
+  },
+
   click(event) {
     this.sendAction('onClick', event);
     // Prevent bubbling, if specified. If undefined, the event will bubble.

diff --git a/tests/dummy/app/templates/button.hbs b/tests/dummy/app/templates/button.hbs
@@ -8,12 +8,13 @@
 {{/paper-toolbar}}
 {{#paper-content class="md-padding demo-buttons"}}
 <div class="doc-content">
-  <p>
+  <div class="layout-row">
     {{#paper-button onClick=(action "flatButton")}}Button with action{{/paper-button}}
     {{#paper-button noink=true primary=true}}Primary (noink){{/paper-button}}
     {{#paper-button disabled=true}}disabled{{/paper-button}}
     {{#paper-button warn=true}}warn{{/paper-button}}
-  </p>
+    {{#paper-button href="http://emberjs.com/images/tomsters/original.png" target="_blank"}}href link{{/paper-button}}
+  </div>
   <p>
     {{#paper-button raised=true onClick=(action "raisedButton")}}Button with action{{/paper-button}}
     {{#paper-button raised=true primary=true}}Primary{{/paper-button}}
@@ -37,12 +38,13 @@
   </p>
   <h3>Template</h3>
   {{#code-block language='handlebars'}}
-  &lt;p&gt;
+  &lt;div layout="row" flex&gt;
     \{{#paper-button onClick=(action "flatButton")}}Button with action\{{/paper-button}}
     \{{#paper-button noink=true primary=true}}Primary (noink)\{{/paper-button}}
     \{{#paper-button disabled=true}}disabled\{{/paper-button}}
     \{{#paper-button warn=true}}warn\{{/paper-button}}
-  &lt;/p&gt;
+    \{{#paper-button href="http://emberjs.com/images/tomsters/original.png" target="_blank"}}href link\{{/paper-button}}
+  &lt;/div&gt;
   &lt;p&gt;
     \{{#paper-button raised=true onClick=(action "raisedButton")}}Button with action\{{/paper-button}}
     \{{#paper-button raised=true primary=true}}Primary\{{/paper-button}}
@@ -63,4 +65,94 @@
     \{{paper-button raised=true label="Blockless version"}}
   &lt;/p&gt;{{/code-block}}
 </div>
+
+<h2>Usage</h2>
+
+<table>
+  <thead>
+    <tr>
+      <th>API</th>
+      <th>Type</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><strong>accent</strong></td>
+      <td>boolean</td>
+      <td>Display in the theme's accent color</td>
+    </tr>
+    <tr>
+      <td><strong>bubbles</strong></td>
+      <td>boolean</td>
+      <td>Determines whether the Ember click event handler bubbles. Default is {{#code-inline}}undefined{{/code-inline}}, which bubbles</td>
+    </tr>
+    <tr>
+      <td><strong>disabled</strong></td>
+      <td>boolean</td>
+      <td>Whether the button is displayed as disabled and does not accept clicks</td>
+    </tr>
+    <tr>
+      <td><strong>fab</strong></td>
+      <td>boolean</td>
+      <td>Display as a Floating Action Button</td>
+    </tr>
+    <tr>
+      <td><strong>href</strong></td>
+      <td>string</td>
+      <td>Displays the button as an {{#code-inline}}&lt;a&gt;{{/code-inline}} link to the specified destination URL</td>
+    </tr>
+    <tr>
+      <td><strong>iconButton</strong></td>
+      <td>boolean</td>
+      <td>Set when the contents contains an icon and adjusts CSS appropriately</td>
+    </tr>
+    <tr>
+      <td><strong>label</strong></td>
+      <td>string</td>
+      <td>Set the content of the button when used as a blockless component</td>
+    </tr>
+    <tr>
+      <td><strong>mini</strong></td>
+      <td>boolean</td>
+      <td>Display as a mini-sized button. Implies {{#code-inline}}fab{{/code-inline}}, unless {{#code-inline}}fab{{/code-inline}} is explicity set falsy.</td>
+    </tr>
+    <tr>
+      <td><strong>noInk</strong></td>
+      <td>boolean</td>
+      <td>Suppresses the ripple effect when clicked</td>
+    </tr>
+    <tr>
+      <td><strong>onClick</strong></td>
+      <td>closure</td>
+      <td>Action sent when the button is clicked</td>
+    </tr>
+    <tr>
+      <td><strong>primary</strong></td>
+      <td>boolean</td>
+      <td>Display as the primary button, more prominent that other buttons</td>
+    </tr>
+    <tr>
+      <td><strong>raised</strong></td>
+      <td>boolean</td>
+      <td>Display button with a 3-D effect</td>
+    </tr>
+    <tr>
+      <td><strong>target</strong></td>
+      <td>string</td>
+      <td>Sets the {{#code-inline}}&lt;a&gt;{{/code-inline}} link target attribute, such as {{#code-inline}}"_blank"{{/code-inline}}</td>
+    </tr>
+    <tr>
+      <td><strong>type</strong></td>
+      <td>string</td>
+      <td>Sets the html5 {{#code-inline}}type{{/code-inline}} attribute. Defaults to {{#code-inline}}"button"{{/code-inline}}</td>
+    </tr>
+    <tr>
+      <td><strong>warn</strong></td>
+      <td>boolean</td>
+      <td>Display in the theme's warn color</td>
+    </tr>
+  </tbody>
+</table>
+
 {{/paper-content}}
diff --git a/tests/dummy/app/templates/dialog.hbs b/tests/dummy/app/templates/dialog.hbs
@@ -14,7 +14,7 @@
       {{#paper-toolbar}}
         <div class="md-toolbar-tools">
           <h2>Basic Usage</h2>
-          <span flex></span>
+          <span class="flex"></span>
           {{#paper-button onClick=(action "toggleSourceCode") iconButton=true}}
             {{paper-icon icon="code"}}
           {{/paper-button}}
@@ -209,7 +209,7 @@
       {{#paper-toolbar}}
         <div class="md-toolbar-tools">
           <h2>Mango (Fruit)</h2>
-          <span flex></span>
+          <span class="flex"></span>
           {{#paper-button iconButton=true onClick=(action "closeDialogWithParent" "cancel")}}{{paper-icon icon="close"}}{{/paper-button}}
         </div>
       {{/paper-toolbar}}
@@ -223,7 +223,7 @@
       {{/paper-dialog-content}}
 
       {{#paper-dialog-actions class="layout-row"}}
-        <span flex></span>
+        <span class="flex"></span>
         {{#paper-button onClick=(action "closeDialogWithParent" "cancel")}}Cancel{{/paper-button}}
         {{#paper-button onClick=(action "closeDialogWithParent" "ok")}}OK{{/paper-button}}
       {{/paper-dialog-actions}}
@@ -236,7 +236,7 @@
     {{#paper-toolbar}}
       <div class="md-toolbar-tools">
         <h2>Mango (Fruit)</h2>
-        <span flex></span>
+        <span class="flex"></span>
         {{#paper-button iconButton=true onClick=(action "closeDialog" "cancel")}}{{paper-icon icon="close"}}{{/paper-button}}
       </div>
     {{/paper-toolbar}}
@@ -251,7 +251,7 @@
     {{/paper-dialog-content}}
 
     {{#paper-dialog-actions class="layout-row"}}
-      <span flex></span>
+      <span class="flex"></span>
       {{#paper-button onClick=(action "closeDialog" "cancel")}}Cancel{{/paper-button}}
       {{#paper-button onClick=(action "closeDialog" "ok")}}OK{{/paper-button}}
     {{/paper-dialog-actions}}
@@ -271,7 +271,7 @@
     {{/paper-dialog-content}}
 
     {{#paper-dialog-actions class="layout-row"}}
-      <span flex></span>
+      <span class="flex"></span>
       {{#paper-button primary=true onClick=(action "closePromptDialog" "cancel")}}I'm a cat person{{/paper-button}}
       {{#paper-button primary=true onClick=(action "closePromptDialog" "ok" dogName)}}Okay!{{/paper-button}}
     {{/paper-dialog-actions}}

diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs
@@ -11,11 +11,13 @@
   {{#paper-toolbar warn=true}}
     <div class="md-toolbar-tools">
       <h2>Pre-production Version</h2>
+      <span class="flex"></span>
+      {{#paper-button href="/ember-paper/release-0-2"}}Switch to version 0.2{{/paper-button}}
     </div>
   {{/paper-toolbar}}
   {{#paper-content}}
     <p>You are viewing the demonstration and documentation for a <strong>pre-production</strong> built of {{#code-inline}}ember-paper{{/code-inline}}. This version is in flux. For version 1.0, all components are being updated to reflect the latest Ember coding practices and Angular Material stylesheets. Components which have not yet been updated are shown with a {{paper-icon "warning"}} and are subject to API changes. Be sure to read CHANGELOG.md when updating.</p>
-    <p><strong>Wrong version?</strong> The currently-released version of ember-paper is <a href="/ember-paper/release-0-2">Version 0.2</a>, currently installed by <br>{{#code-inline language='bash'}}ember install ember-paper{{/code-inline}}. See README.md for advice on which version to use.</p>
+    <p><strong>Wrong version?</strong> The currently-released version of ember-paper is version 0.2, currently installed by <br>{{#code-inline language='bash'}}ember install ember-paper{{/code-inline}}. See README.md for advice on which version to use. <a href="/ember-paper/release-0-2">Switch to version 0.2.</a></p>
   {{/paper-content}}
 
   <h2 class="md-headline" style="margin-top: 0;">Welcome to Ember Paper.</h2>

diff --git a/tests/dummy/app/templates/toolbar.hbs b/tests/dummy/app/templates/toolbar.hbs
@@ -56,7 +56,7 @@
   <br>
 
   {{#paper-toolbar tall=true warn=true}}
-    <span flex></span>
+    <span class="flex"></span>
     {{#paper-toolbar-tools}}
       <h2>Toolbar: tall with actions pin to the bottom (tall=true warn=true)</h2>
     {{/paper-toolbar-tools}}

diff --git a/tests/integration/components/paper-button-test.js b/tests/integration/components/paper-button-test.js
@@ -88,3 +88,23 @@ test('uses md-mini and md-fab class when mini=true', function(assert) {
   `);
   assert.ok(this.$('.md-button').is('.md-fab', '.md-mini'));
 });
+
+test('uses a tag when href is specified', function(assert) {
+  this.render(hbs`
+    {{#paper-button href="http://example.com"}}
+      A label
+    {{/paper-button}}
+  `);
+  assert.ok(this.$('.md-button').is('a'));
+  assert.ok(this.$('.md-button').attr('href') === 'http://example.com');
+});
+
+test('renders target', function(assert) {
+  this.render(hbs`
+    {{#paper-button href="http://example.com" target="_blank"}}
+      A label
+    {{/paper-button}}
+  `);
+  assert.ok(this.$('.md-button').is('a'));
+  assert.ok(this.$('.md-button').attr('target') === '_blank');
+});