This is a meta ticket to describe some basic timelines for merging compressed panels into EUI and Kibana. If you have questions ask @cchaos or @snide

Summary

One of the feedback points we've taken to heart in design is that a lot of EUI's form controls are too bulky for heavy interactive UI like those found in maps, cavas, viz and lens. As a team we decided to rework the compressed (so named for a prop that lives on all EUI form controls) forms to allow them to take up less space and be a little more on demand with their functionality. Below is a good example of how this works.

What specifically changed?

• Any form control with compressed got some tweaks to make them more minimal
• We added compressed stylings to several components that did not yet have them
• Compressed forms can now show in an inline format so labels show to the left
• We added some new functionality to troublesome components like range inputs so they weren't as visually bulky
• [BREAKING] 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. [Feature branch] Compressed form rows #2181
• [BREAKING] 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 which is invalid. [Feature branch] Compressed form rows #2181

PRs as part of this change

• Added the ability to have inline delimited forms [Feature branch] Added EuiFormControlLayoutDelimited component #2117
• Border colors were changed on the form controls [Feature branch] Updated form control border color #2114
• EuiSuperSelect now has a compressed style [Feature branch] Compressed EuiSuperSelect dropdown #2155
• Reworked the existing compressed controls [Feature Branch] Update compressed form control styles #2174
• [BREAKING] EuiFormRow was reworked to allow for inline forms [Feature branch] Compressed form rows #2181

Kibana follow up

9/11 - Merge event in EUI

• Set up TS tables EUI release before we merge this @thompsongl (Upgrade EUI to 13.8.1 kibana#45052)
• Merge main feature branch [Feature] Compressed editor controls #2167 @cchaos
  • Pull out compressed switches from EuiDataGrid Compressed switch styling #2327 @snide
  • Add support for EuiRange in dropdown [Feature Branch] Add support for EuiRange in a dropdown with input #2179 @cchaos @thompsongl

9/13 - Initial EUI merge into Kibana elastic/kibana#45475

• Update hard "breaks" in Kibana for EUI PR @cchaos

During 7.5 dev - Once merged into Kibana

• Overall sanity checking @snide / @cchaos
• Viz panels @snide
• Maps panels @cchaos / @miukimiu
• Canvas panels ([Canvas] Compressed form clean-up kibana#45904) @ryankeairns / @andreadelrio
• Lens panels @cchaos / @miukimiu
• Additional parts of Kibana UI to be added by the person who wants to take it on

Tentative deadlines

Friday, Sept 20: Cleanup PR's created. Cleanup entails just fixing the first 4 items in the checklist below.

Wednesday, Sept 25: Cleanup PR's merged

Friday, Oct 4: Enhancement PR's created. These should entail mostly quick/but substantial changes to compressed forms to make them more aligned to our end goal of the editor style controls. The enhancements section of the checklist below.

EUI Follow up

The following form controls are currently lacking support

The following are features that can be added in future releases

• EuiFormRow Ability for consumer to adjust horizontal label size
• Create a component specifically for selecting color spectrums/gradients
• A square version of EuiColorPicker that just shows the color chosen not the hex. Current one using the swatch is probably too big.