diff --git a/CHANGELOG.md b/CHANGELOG.md index a0f480b4a..ddf034d49 100644 --- 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 index 7dda9c9eb..3468b7f4e 100644 --- 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 index ab96ba40c..08a86f212 100644 --- 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"}}
-

+

{{#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}} -

+ {{#paper-button href="http://emberjs.com/images/tomsters/original.png" target="_blank"}}href link{{/paper-button}} +

{{#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 @@

Template

{{#code-block language='handlebars'}} - <p> + <div layout="row" flex> \{{#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}} @@ -63,4 +65,94 @@ \{{paper-button raised=true label="Blockless version"}} </p>{{/code-block}}
+ +

Usage

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
APITypeDescription
accentbooleanDisplay in the theme's accent color
bubblesbooleanDetermines whether the Ember click event handler bubbles. Default is {{#code-inline}}undefined{{/code-inline}}, which bubbles
disabledbooleanWhether the button is displayed as disabled and does not accept clicks
fabbooleanDisplay as a Floating Action Button
hrefstringDisplays the button as an {{#code-inline}}<a>{{/code-inline}} link to the specified destination URL
iconButtonbooleanSet when the contents contains an icon and adjusts CSS appropriately
labelstringSet the content of the button when used as a blockless component
minibooleanDisplay as a mini-sized button. Implies {{#code-inline}}fab{{/code-inline}}, unless {{#code-inline}}fab{{/code-inline}} is explicity set falsy.
noInkbooleanSuppresses the ripple effect when clicked
onClickclosureAction sent when the button is clicked
primarybooleanDisplay as the primary button, more prominent that other buttons
raisedbooleanDisplay button with a 3-D effect
targetstringSets the {{#code-inline}}<a>{{/code-inline}} link target attribute, such as {{#code-inline}}"_blank"{{/code-inline}}
typestringSets the html5 {{#code-inline}}type{{/code-inline}} attribute. Defaults to {{#code-inline}}"button"{{/code-inline}}
warnbooleanDisplay in the theme's warn color
+ {{/paper-content}} diff --git a/tests/dummy/app/templates/dialog.hbs b/tests/dummy/app/templates/dialog.hbs index 0da58ab46..38f5ea08e 100644 --- a/tests/dummy/app/templates/dialog.hbs +++ b/tests/dummy/app/templates/dialog.hbs @@ -14,7 +14,7 @@ {{#paper-toolbar}}

Basic Usage

- + {{#paper-button onClick=(action "toggleSourceCode") iconButton=true}} {{paper-icon icon="code"}} {{/paper-button}} @@ -209,7 +209,7 @@ {{#paper-toolbar}}

Mango (Fruit)

- + {{#paper-button iconButton=true onClick=(action "closeDialogWithParent" "cancel")}}{{paper-icon icon="close"}}{{/paper-button}}
{{/paper-toolbar}} @@ -223,7 +223,7 @@ {{/paper-dialog-content}} {{#paper-dialog-actions class="layout-row"}} - + {{#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}}

Mango (Fruit)

- + {{#paper-button iconButton=true onClick=(action "closeDialog" "cancel")}}{{paper-icon icon="close"}}{{/paper-button}}
{{/paper-toolbar}} @@ -251,7 +251,7 @@ {{/paper-dialog-content}} {{#paper-dialog-actions class="layout-row"}} - + {{#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"}} - + {{#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 index ec95d0180..e34c53ed1 100644 --- a/tests/dummy/app/templates/index.hbs +++ b/tests/dummy/app/templates/index.hbs @@ -11,11 +11,13 @@ {{#paper-toolbar warn=true}}

Pre-production Version

+ + {{#paper-button href="/ember-paper/release-0-2"}}Switch to version 0.2{{/paper-button}}
{{/paper-toolbar}} {{#paper-content}}

You are viewing the demonstration and documentation for a pre-production 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.

-

Wrong version? The currently-released version of ember-paper is Version 0.2, currently installed by
{{#code-inline language='bash'}}ember install ember-paper{{/code-inline}}. See README.md for advice on which version to use.

+

Wrong version? The currently-released version of ember-paper is version 0.2, currently installed by
{{#code-inline language='bash'}}ember install ember-paper{{/code-inline}}. See README.md for advice on which version to use. Switch to version 0.2.

{{/paper-content}}

Welcome to Ember Paper.

diff --git a/tests/dummy/app/templates/toolbar.hbs b/tests/dummy/app/templates/toolbar.hbs index d3be308e4..b7920c7b6 100644 --- a/tests/dummy/app/templates/toolbar.hbs +++ b/tests/dummy/app/templates/toolbar.hbs @@ -56,7 +56,7 @@
{{#paper-toolbar tall=true warn=true}} - + {{#paper-toolbar-tools}}

Toolbar: tall with actions pin to the bottom (tall=true warn=true)

{{/paper-toolbar-tools}} diff --git a/tests/integration/components/paper-button-test.js b/tests/integration/components/paper-button-test.js index b13f70393..45da2cb02 100644 --- 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'); +});