Radio group error

[mollykreis]

Pull Request

🤨 Rationale

Includes nimble-component implementation for #2019

👩‍💻 Implementation

• Adds error-visible and error-text attributes to the nimble-radio-group
• Updates the radio group template to include an error icon and error text
  • Note: This required forking FAST's template
• Updated radio group styling to match visual design

🧪 Testing

• Manually tested in storybook
• Forked FAST's radio group tests since the template was forked
• Updated matrix tests

✅ Checklist

• I have updated the project documentation to reflect my changes or determined no changes are needed.

[mollykreis]

@m-akinc, will you buddy this PR for me?

[m-akinc]

Looks like this introduces some spacing even when there is no label. I'm not sure how much we care about the no-label use case, but would it be better to apply the margin-bottom to ::slotted([slot="label"]), .error-icon instead?

[mollykreis]

I debated this myself. The thing I didn't want to have happen, though, is for the control with no label to shift when error-visible was toggled, which is why I decide to leave the space there all the time.

I'll leave the conversation open for others to weigh in.

[m-akinc]

There might be something to document regarding setting the width of the radio group. For example, if you hadn't set min-width: 200px, turning on error-visible results in this:

I don't know if we should be setting the width to 100% by default, or if we should recommend setting a min-width (or just width) when the control may go into an error state.

[mollykreis]

My inclination is that we should leave the width styling up to the client and not try to set defaults here (such as width: 100% or min-width: <some-value>px). Otherwise, I think it tends to make a client's life harder because they not only need to set the values they want (such as min-width), but they also have to set values to override the styling we've set (such as width: auto).

I'll leave this conversation open so that others can weigh in with other thoughts of the best practice to follow here.