Skip to content

paper-button: Support <a> tags with href and optional target attributes. #372

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DanChadwick merged 5 commits into from
May 13, 2016
Merged

paper-button: Support <a> tags with href and optional target attributes. #372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0a10f89
paper-button: support `<a>` tags with href and optional target attrib…
DanChadwick May 12, 2016
f06764b
Incorporate PR feedback
DanChadwick May 13, 2016
6db7f5c
Update changelog with actual PR number.
DanChadwick May 13, 2016
011a805
Use class="layout-row" for a flex layout row.
DanChadwick May 13, 2016
551acbe
Document default button type attribute is "button".
DanChadwick May 13, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
20 changes: 18 additions & 2 deletions addon/components/paper-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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.
Expand Down
100 changes: 96 additions & 4 deletions tests/dummy/app/templates/button.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand All @@ -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}}
Expand All @@ -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>
Copy link
Copy Markdown
Collaborator

@miguelcobain miguelcobain May 13, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

accent, primary and warn are part of a mixin and are present in many other components. We may need to find a better way to show common attributes to avoid repeating ourselves over and over, but for now listing them here seems the best thing to do.

</tr>
</tbody>
</table>

{{/paper-content}}
12 changes: 6 additions & 6 deletions tests/dummy/app/templates/dialog.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down Expand Up @@ -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}}
Expand All @@ -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}}
Expand All @@ -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}}
Expand All @@ -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}}
Expand All @@ -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}}
Expand Down
4 changes: 3 additions & 1 deletion tests/dummy/app/templates/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion tests/dummy/app/templates/toolbar.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
20 changes: 20 additions & 0 deletions tests/integration/components/paper-button-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});