Form layout overhaul

[snowystinger]

🐛 Bug Report

We have some limitations with our Forms due to the various different layouts options they have. Not all combinations yield the expected result.

• Display table-cell causes some inputs that are defined with a grid to lose that grid, see malformed NumberField in a label position side Form.
• Label position side fields can't take the full available width, see https://codesandbox.io/s/old-flower-ky664?file=/src/Example2.js
• Forms don't limit the width of a field, so something like SearchWithin can cause the whole form to expand if the scope is changed.
• HelpText conditional rendering can cause focus to be lost, there's a current case of this with no visible label and only error text

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

We explored a possible alternative, though it involves a new prop at the least in order to avoid breaking changes.
https://github.com/adobe/react-spectrum/tree/explore-other-form-rendering-options
This takes advantage of CSS Grid and the auto-flow property not being dense.
Since we control rendering of all our input fields, we can omit the wrapping div and use auto-flow to place each part of an input field: label, helptext, and input.

🔦 Context

💻 Code Sample

🌍 Your Environment

Software	Version(s)
react-spectrum
Browser
Operating System

🧢 Your Company/Team

🕷 Tracking Issue (optional)

Followup from Design Review

Things to try

1. always render a wrapper

• use display: contents for immediate field children of Form in label position side
• this should allow us to leave the Wells/Flex alone
• We shouldn't need nested Forms/FieldGroup/FieldSection as a result
• Change assumption from label?, field, helptext? to [label?, [field, helptext?], contextual help?]

2. modify current branch CSS to handle contextual help depending on Design meeting (this bullet point will be updated once we solidify the position) in the way it was done here: https://codesandbox.io/s/distracted-sutherland-djobf?file=/src/App.js:142-220 making use of inferred tracks
3. Move props back to the outer-wrapper, which can stay visible when in vertical stacking. When in side label case, apply props to the new element that will wrap (field, helptext). This should solve our issue with something like height being applied to the entire field.

To make sure that display: contents works, it may be easier to implement these ideas in these codesandboxes:
https://codesandbox.io/s/distracted-sutherland-djobf?file=/src/App.js
https://codesandbox.io/s/strange-johnson-8dofo?file=/src/App.js