paper-radio-group and paper-radio-button should be more aligned

[kenmoore]

As documented, the 'selected' attribute of paper-radio-button keys off of the 'name' attribute of the child paper-radio-buttons. This design has issues:

• the model is inconsistent with paper-dropdown-menu which uses an arbitrary user-specified attribute to specify which item is selected
• HTML radio buttons have a 'name' attribute but it is used to define the name of the group itself (e.g. all radio buttons in the group for selecting a country will have name='country'). Employing a 'name' attribute for radio buttons that behaves contrary to HTML convention invites confusion and error
• this adds a redundant attribute for each radio button, when the model could use the label attribute to define which item is selected
• the 'name' attribute is not mentioned at all in documentation for paper-radio-button

But I see the argument for inconsistency: in a paper-dropdown-menu the items are not likely to be extremely long, whereas paper-radio-button items may be full sentences (or more), which would be cumbersome for setting the selection.

Looking at the elements side-by-side, I find it unsettling how structurally similar, but syntactically different they are:

<paper-dropdown-menu selected="Financier" valueattr="label">
    <paper-item label="Croissant"></paper-item>
    <paper-item label="Donut"></paper-item>
    <paper-item label="Financier"></paper-item>
    <paper-item label="Madeleine"></paper-item>
</paper-dropdown-menu>

<paper-radio-group selected="small">
  <paper-radio-button name="small" label="Small is good for baby bear”></paper-radio-button>
  <paper-radio-button name="medium" label="Medium is just right”></paper-radio-button>
  <paper-radio-button name="large" label="Large is good for papa bear”></paper-radio-button>
</paper-radio-group>

Here's how they might look:

<paper-dropdown-menu selected=“financier">
    <paper-item value=“croissant">Croissant</paper-item>
    <paper-item value=“donut">Donut</paper-item>
    <paper-item value=“financier">Financier</paper-item>
    <paper-item value=“madeleine">Madeline</paper-item>
</paper-dropdown-menu>

<paper-radio-group selected="small">
  <paper-radio-button value="small”>Small is good for baby bear</paper-radio-button>
  <paper-radio-button value="medium”>Medium is just right</paper-radio-button>
  <paper-radio-button value="large”>Large is good for papa bear</paper-radio-button>
</paper-radio-group>

In addition to providing high consistency, this proposal:

• relieves the user from having to declare which attribute 'selected' maps to in a paper-dropdown-menu
• separates the label text of the items from the value
• expresses the label text between the opening and closing tag, which is more terse and aligns with HTML
• avoids confusing the user with a different 'name' attribute

Thoughts?

[ssorallen]

I agree this feels inconsistent. Since the paper-radio-button is meant to mimic <input type="radio"> behavior, I would stay away from letting paper-radio-button have children. I would change the second half of your proposal to the following:

<paper-radio-group selected="small">
  <paper-radio-button value="small” label="Small is good for baby bear">
  <paper-radio-button value="medium” label="Medium is just right">
  <paper-radio-button value="large” label="Large is good for papa bear">
</paper-radio-group>