Increase the default space between form elements

[HDinger]

What are you trying to accomplish?

Currently, long forms are very hard to grasp. The elements are all very close together making it hard to recognize which text belongs to which input field. In this PR, I slightly increased the space between individual elements in a form to create a clearer visual differentiation.

Screenshots

Before	After

Integration

No

List the issues that this change affects.

Closes #3042

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.

What approach did you choose and why?

Increase the space between form elements by using the --stack-gap-normal variable for the .FormControl-spacingWrapper instead of a custom space.

In the linked issue it was discussed whether we should touch the spacings on the form groups instead. I decided to not touch the groups here, as imho the framework should be able to render a good looking form without needing to wrap every element into an individual group.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Lookbook)
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 1b98497

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[mperrotti]

@camertron - is this class used for spacing between form control children (e.g.: label, input, caption) or is this class intended to add spacing between a set of form controls?

[camertron]

It adds spacing between individual form controls, not between constituent form control items like label, input, etc.

[HDinger]

Hi everyone :) Are there any news on this? /cc @mperrotti @langermank @camertron

[camertron]

Hey @HDinger, let me spot-check a few forms on github.com with this. If everything looks good, I'd be happy to merge it 😄

[camertron]

Ok, I spot-checked several forms on github.com and everything looks good. I actually prefer the increased spacing 😄 Here's an example of the difference:

Before	After

Unsurprisingly, these look very similar to @HDinger's screenshots 😄

[camertron]

@HDinger could you add a changeset?

Never mind, carry on.

[camertron]

Merged in #3159