How do I add data attributes to radio-button ? about ember-radio-button HOT 6 OPEN

Hello @raycohen 😃
I am also running into the same issue in my applications, and I find it more less than ideal and, more like a workaround to be adding data-* attributes to the parent and referring the child element(i.e. radio-button).

I'll be happy to send a PR for adding this enhancement. I was thinking of adding a new property, say dataAttributes which accepts an hash of data-* key/value pairs, which gets added to the radio buttons' dom - just like the other attributes that is being done currently, like ariaLabelledby, tabindex, etc

from ember-radio-button.

What would really be nice is if the components supported attribute forwarding (AKA splattributes, ...attributes in the template).

Depending on the Ember version support matrix and the tolerance for either providing or requiring a polyfill, that would allow you to add whatever attribute you want to a <RadioButton /> component and have the attributes passed along to the underlying input.

from ember-radio-button.

We don't currently have a good way to support data-test attributes directly on the input element. I would recommend putting a data-test attribute on an ancestor and then using something like [data-test-my-ancestor] input[type=radio]

from ember-radio-button.

I would love to see support for data-* attributes on this!

from ember-radio-button.

What would really be nice is if the components supported attribute forwarding (AKA splattributes, ...attributes in the template).

Depending on the Ember version support matrix and the tolerance for either providing or requiring a polyfill, that would allow you to add whatever attribute you want to a <RadioButton /> component and have the attributes passed along to the underlying input.

Hmm know any addons that use this kind of polyfill? I'm running into this and would like to submit a PR.

I'd try out a local workaround, but it doesn't sound like this is extensible.

Never mind — if you're using modern Ember (support splattributes), you can generate a component override for radio-button.js/.hbs. You'll need to copy over the template from the addon and insert the attribute spread in the label:

  <label
    class="ember-radio-button {{if checked checkedClass}} {{joinedClassNames}}"
    for={{radioId}}
    ...attributes
  >

Nevertheless, we should build out support :)

from ember-radio-button.

Any progress on this? Seems it's not possible to apply a modifier to the radio button

from ember-radio-button.