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

DanChadwick · 2016-05-12T20:46:15Z

Also Improve dummy app page with API documentation and button. Use a-link style button to link from 1.0 dummy app to v0.2.

…utes. Improve dummy app page. Use to link to v0.2.

miguelcobain · 2016-05-12T23:53:37Z

addon/components/paper-button.js

  type: 'button',
-  tagName: 'button',
+  tagName: computed('href', function() {


Last time I checked using a computed tagName raises a deprecation. Hence the twiddle I mentioned in the issue.

Right you are. In wonder if there is a less ugly alternative.

Check the twiddle. I think it is the right way to do it.

Also, I think we should encapsulate the logic of testing href in a isLinkButton computed. That way, if we ever want to change the test we do it in just one place.

Yeah, it's ugly, but maybe no alternative. When you reference a CP from init, are you guaranteed that all the parameters are already properly bound?

EDIT: I think that's fine. It's observers that don't fire from changes made in init.

I don't think it is that ugly. Init is the place to initialize variables after all.

tagName will not be bound. You can't change tagName after render. That's the reason it can't be a computed. Did I get your question right?

We're on the same page. Technically you should be able to use a CP without a dependent key. I'll try that, but I bet it still raises a deprecation. I just hate that init function, but it's an aesthetic thing, not a functional or technical objection.

Yes, it also raises a deprecation with a computed with no dependent keys.

But you're right. A computed without a dependent key should not raise a deprecation, I think. We should PR ember core. :)

Yak shaving.

And bike shedding. ;)

- 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

DanChadwick · 2016-05-13T00:49:27Z

Note: I did not create isLinkButton because this state is static, since the tagName can't change. Therefore I just set to type to null in init, along with the tagName to a. This is cleaner, simpler, smaller, and faster. If in the future we need a isLinkButton for some dynamic behavior, it too can be statically initialized in init to true.

miguelcobain · 2016-05-13T00:49:35Z

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 layout="row" class="flex">


Well, this uses the layout attribute and a flex class. There is a layout-row I think. I've used it in the toolbar page.

miguelcobain · 2016-05-13T00:54:53Z

tests/dummy/app/templates/button.hbs

+    <tr>
+      <td><strong>warn</strong></td>
+      <td>boolean</td>
+      <td>Display in the theme's warn color</td>


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.

miguelcobain · 2016-05-13T00:58:46Z

Looks good to me. You can squash and merge (I'm on mobile). Thanks for this. 👍

openhouse · 2016-05-17T19:02:17Z

So in 1.0.0-alpha.1 I can use
{{#paper-button href="/settings"}}Settings{{/paper-button}}
to get an HTML-friendly anchor tag (#371)
<a href="/settings">Settings</a>

But the raw HTML causes a hard reload which in the long run isn't ideal. It's a little slower, wouldn't allow for animations. A music player app for instance wouldn't be able to play across the transition.

I can keep the anchor tag for SEO and still use Ember's router to transition with the transition-to addon and bubbles=false. But this doesn't let me command click to open the link in a new tab.
{{#paper-button onClick=(transition-to "settings") href="/settings" bubbles=false}}Settings{{/paper-button}}

This is starting to get a little boggling compared to the {{link-to}} helper. Am I going about it wrong?

I look forward to a standard API for this that is consistent with with paper-item as well. (#207) It seems like mapping to {{link-to}} arguments would be the most Ember-intuitive way.

So grateful for this ambitious project and all your work. Thank you!

miguelcobain · 2016-05-17T19:31:51Z

@openhouse the idea was to have a link button that could link to external websites. I've never thought about different routes, but it should work. Hint: this addon renders url strings for a specific route: https://github.com/intercom/ember-href-to. Ideal to use with paper-button's new href= attribute.

openhouse · 2016-05-21T01:21:12Z

Cool!

With a minor change https://github.com/intercom/ember-href-to makes seamless transitions with cmd+click opening in a new tab.

To enable this you have to have the .href-to class

{{#paper-button href=(href-to "settings") class="href-to"}}Settings{{/paper-button}}

and this pull request.
intercom/ember-href-to#43

What this will be really great for is paper-items in the sidenav. #207

Thanks @miguelcobain for pointing me in the right direction!

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

0a10f89

…utes. Improve dummy app page. Use to link to v0.2.

miguelcobain reviewed May 12, 2016
View reviewed changes

DanChadwick added 2 commits May 12, 2016 20:44

Incorporate PR feedback

f06764b

- 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.

6db7f5c

DanChadwick mentioned this pull request May 13, 2016

add link buttons #371

Closed

miguelcobain reviewed May 13, 2016
View reviewed changes

Use class="layout-row" for a flex layout row.

011a805

miguelcobain reviewed May 13, 2016
View reviewed changes

Document default button type attribute is "button".

551acbe

DanChadwick merged commit 1d3b98e into adopted-ember-addons:master May 13, 2016

DanChadwick deleted the paper-button-a-link branch May 13, 2016 01:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

DanChadwick commented May 12, 2016

miguelcobain May 12, 2016

DanChadwick May 12, 2016

miguelcobain May 13, 2016

miguelcobain May 13, 2016 •

edited

Loading

DanChadwick May 13, 2016 •

edited

Loading

miguelcobain May 13, 2016 •

edited

Loading

DanChadwick May 13, 2016

miguelcobain May 13, 2016

miguelcobain May 13, 2016

DanChadwick May 13, 2016

DanChadwick commented May 13, 2016

miguelcobain May 13, 2016

miguelcobain May 13, 2016

miguelcobain commented May 13, 2016

openhouse commented May 17, 2016 •

edited

Loading

miguelcobain commented May 17, 2016

openhouse commented May 21, 2016 •

edited

Loading

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

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

Conversation

DanChadwick commented May 12, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

miguelcobain May 13, 2016 • edited Loading

Choose a reason for hiding this comment

DanChadwick May 13, 2016 • edited Loading

Choose a reason for hiding this comment

miguelcobain May 13, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DanChadwick commented May 13, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

miguelcobain commented May 13, 2016

openhouse commented May 17, 2016 • edited Loading

miguelcobain commented May 17, 2016

openhouse commented May 21, 2016 • edited Loading

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

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

miguelcobain May 13, 2016 •

edited

Loading

DanChadwick May 13, 2016 •

edited

Loading

miguelcobain May 13, 2016 •

edited

Loading

openhouse commented May 17, 2016 •

edited

Loading

openhouse commented May 21, 2016 •

edited

Loading