Form spacing inconsistencies

[elizabethsjudd]

Detailed description

Describe in detail the issue you're having.

Fieldsets and form items should have consistent spacing within a form. Currently Fieldsets have a margin-bottom of $carbon--spacing-07 (https://github.com/IBM/carbon-components/blob/master/src/components/form/_form.scss#L20) but form-item doesn't have any margin-bottom meaning we have to manually add it. The demos on the Carbon site have a manual 2rem margin-bottom added to form-item.

Secondly according to the guidelines, the spacing should be 24px/1.5rem which would be $carbon--spacing-06.

Is this issue related to a specific component?

Form

What did you expect to happen? What happened instead? What would you like to see changed?

Form items and fieldsets have consistent spacing (either they both have it or neither have it) and follow the recommended guidelines outlined on the Carbon site. https://www.carbondesignsystem.com/components/form/style#recommended

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

v10.1.0

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Watson Health Design Pattern & Asset Library (PAL)

Steps to reproduce the issue

1. Inspect the form demo on the carbon site.
2. note the margin bottom is not part of the component styles
3. note the margin bottom value does not align with the recommended values

[asudoh]

@emyarod Would you be able to look into this? Thanks!

[emyarod]

hi @elizabethsjudd thanks for reporting this! IIRC the v9 .bx--form-item class had a 2rem bottom margin applied to it, but this rule was never brought to v10.

I believe this is also related to https://github.com/IBM/carbon-components-react/issues/1681. I found that many of our React components which contained nested inputs would have the 2rem bottom margins incorrectly applied. For example, <Slider>, which contains a text input, would use React <TextInput> rather than just <input type="text"> with Carbon classes added. Since our <TextInput> has been wrapped in the .bx--form-item class since v7 (or earlier), this was causing visual bugs in components which contained nested input controls (refs: carbon-design-system/carbon-components-react#1683 (comment) carbon-design-system/carbon-components-react#2085)

I am on board with adding the bottom margin back into the form styles, but I think this change should go hand in hand with requiring explicit usage of <FormItem> (and fieldset) instead of hard coding that wrapper into our components so that we don't introduce some visual bugs (and so we can go back to directly importing our React components within compound components instead of tracking changes manually). what are your thoughts on this @asudoh?

[asudoh]

I have an impression that form components in v9 used to work regardless of .bx--form-item wrapping. I'd suggest careful research on how v9 used to work. CC @tw15egan

[emyarod]

that might be true, but somewhere along the way something caused breakage because I remember components like the Slider being broken for quite some time. will need to take a look at the form/component history to see why that might have happened as well

[tay1orjones]

Closed via carbon-design-system/carbon-website#2796