feat(FormGroup): add hasMargin, add story back in

[tw15egan]

Refs #5367

After talking with @janhassel, FormGroup is still used but the default margin is problematic. This adds in a new prop hasMargin, which is true by default, that can be toggled off to remove the default bottom margin.

This also adds back in the FormGroup story, which showcases the new prop.

I also realized disabled can be set on the fieldset element itself, which disabled all form elements nested inside. This is a useful feature that should be showcased, so I've also added this to the playground.

Changelog

New

• FormGroup story added back in
• hasMargin prop to toggle margin-bottom on the fieldset element rendered by FormGroup
• Styles to disabled label, helper text nested inside FormGroup

Testing / Reviewing

Check out FormGroup story and ensure it looks good 👍🏻

[netlify]

Deploy preview for carbon-elements ready!

Built with commit a476f59

https://deploy-preview-7936--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit a476f59

https://deploy-preview-7936--carbon-components-react.netlify.app

[emyarod]

do we have any clarity on form spacing (and/or component spacing in general) from design? I think the hasMargin addition to the FormGroup API is kind of a band aid solution to a larger problem highlighted in #5367

[emyarod]

do we have any clarity on form spacing (and/or component spacing in general) from design? I think the hasMargin addition to the FormGroup API is kind of a band aid solution to a larger problem highlighted in #5367

[tw15egan]

Yeah, I agree it's definitely a band-aid and this needs to be addressed in our next major, but any changes to the current spacing would be considered a breaking change.

Toggling our default spacing via a prop could also be helpful in our next major on a case-by-case basis in the context of a form. Do you have any other recommendations?

[emyarod]

I don't think there's any immediate action to take until we know what the plan for FormGroup/component spacing in general is. for FormGroup specifically, if I understand correctly, consumers would be setting a hasMargin prop rather than adding a style rule, is that right?

[tw15egan]

Yes, instead of having to set style rules on a class-by-class basis (or have a global class they could add) this would just remove the margin via a prop.

This also adds the functionality of disabling an entire fieldset by passing down disabled to FormGroup instead of each individual component.

If the main issue is adding in the margin toggle, we can remove that, but in chatting with @janhassel it seems like it would be helpful as teams are currently using FormGroup

[emyarod]

my only concern is with the API change, especially if it can become obsolete as early as v11 launch pending a larger design decision (and in this case specifically workarounds are already possible via CSS as you mentioned). for this specific component, if we're not able to get design input about FormGroup, I would lean more towards just adding the fieldset--no-margin class over expanding the component API for the time being, curious to hear others' thoughts on this. aside from that the other changes are good to go

that being said, I'm not sure how soon we'd be reaching a decision about form spacing so maybe adding hasMargin to the form group API is a worthwhile quality of life enhancement, related #2549