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