search

PolymerElements / paper-fab

A material design floating action button
https://www.webcomponents.org/element/PolymerElements/paper-fab
33 stars 25 forks source link

Ideogram support #56

Closed naoak closed 8 years ago

naoak commented 8 years ago

In our culture region, we use ideograms in writing. Sometimes, an ideogram represents its mean more explicitly and concisely than an icon.

We can show any characters on fab with deep selector. heart

But, it would be nice if paper-fab had the following custom properties.

iron-icon:before {
  @apply(--paper-fab-iron-icon-before);
}
iron-icon:after {
  @apply(--paper-fab-iron-icon-after);
}

If you would like it, I'll make the PR.

naoak commented 8 years ago

Sorry, --paper-fab-iron-icon is right in screenshot.

notwaldorf commented 8 years ago

The /deep/ combinator is getting deprecated (and it's not recommended in general), so that definitely won't work. However, we can pass in a String attribute that would be used instead of the icon:

<paper-fab label="foo"></paper-fab>

And in the implementation of paper-fab,

<span>{{label}}</span>

It would be nice if we could also truncate this label to max 2 characters (you can check out paper-badge, which has a similar feature)

Would you be interested in submitting a patch for this?

naoak commented 8 years ago

Sounds like a great idea! I know that paper-badge exists, but have never used it. I don't know whether I can create a good enough patch to be accepted, but anyway, I'll try it.:stuck_out_tongue:

Thank you for leading in the right direction!

notwaldorf commented 8 years ago

Don't worry! We'll work through the patch together and get it right! Let me know whenever you have any questions :)

naoak commented 8 years ago

Thanks :)

notwaldorf commented 8 years ago

Fixed in https://github.com/PolymerElements/paper-fab/pull/60