[Feature branch] Compressed form rows

[cchaos]

feature/compressed-editor-controls

Better spacing and alignment for EuiFormRow

1. Reduces padding, margins, etc when EuiFormRow is compressed

For both compressed and non-compressed, I reduced the spacing between the form control and the help text below to be the same amount used for the form label. This condenses that space a bit but creates a clearer connection between the elements.

2. Adds display="compressedHorizontal" option for EuiFormRow

To allow laying out the label and control on the same line.

I applied this as an option to the compressed prop because it should really only be used in conjunction with compressed controls. And while we can't know for sure if they're also passing a compressed control as the child, making this an option under the prop name "compressed" may deter people from using it outside of a compressed form.

3. Removed EuiFlexGroup dependency for label appends

And instead just writing out the flex styles directly. This also allowed for better calculation of spacing.

Breaking

There are several "breaks" in this PR:

1. EuiFormRow no longer has bottom padding, nor does it add margin to any + * siblings. Instead, it only adds top margin to siblings of the same type .euiFormRow + .euiFormRow This means if layouts relied on margin being added to non-form row children, they'll need spacers added.

So you'll see a lot of <EuiSpacer /> additions to files. I think this is a better approach as you never truly know what that universal selector will be attaching margins to. However, if someone feels strongly that we should not introduce a break like this, I should be able to easily revert.

2. EuiFormRow no longer passes compressed down to its children. This was not correct anyway but React wasn't complaining because the prop was fully lowercase. If the child didn't have a prop called compressed it was being passed down as an html attribute like <input compressed /> which is invalid.

I finally removed this because it was causing an error when I added the third option of horizontal.

3. Removed bottom margin from EuiFormLabel, but added it back to the wrapping element inside of the EuiFormRow so there's still margin but just not on the plain element.

This means if anyone used EuiFormLabel by itself and relied on that margin, they'd need to add a spacer.

Deprecations

1. EuiFormRow's compressed prop is now set for deprecation in favor of display = "compressed".
2. EuiFormRow's displayOnly prop is now set for deprecation in favor of display = "center".

Docs

I'll be reverting all but the Compressed and horizontal section of the form layout docs

Checklist

• Checked in dark mode
• Checked in mobile
• Checked in IE11 and Firefox
• Props have proper autodocs
• Added documentation examples
• Added or updated jest tests
• Checked for breaking changes and labeled appropriately
• [ ] Checked for accessibility including keyboard-only and screenreader modes
• [ ] A changelog entry exists and is marked appropriately Will be adde via the feature branch

[snide]

These are my big questions. I haven't done a full code review yet but wanted to get you something to chew on since I'm tardy on this. Perfectly OK to do some pair / idea shaking on this over zoom or something too.

[snide]

Small comments at this point. I'll leave it to you to figure out the naming you think is best. Also assume you'll revert the doc layer.

I'm a little worried about the Spacer solution, but I think when we finally release this, we should probably assign each other apps and make everyone hand check a lot of the forms. My guess is we'll need to spot fix some of those usages.

I ran through the code and did a pretty thorough docs scan.

[thompsongl]

I'm good with the sibling spacing and EuiSpacer decisions. The prop enums you landed on make sense, also.

[ryankeairns]

👍 Looks and works as designed (and as tested in Sketch test). Can't wait to use it!