Eui: [META] Compressed panels release plan

[snide]

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. https://github.com/elastic/eui/pull/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. https://github.com/elastic/eui/pull/2181

PRs as part of this change

• Added the ability to have inline delimited forms https://github.com/elastic/eui/pull/2117
• Border colors were changed on the form controls https://github.com/elastic/eui/pull/2114
• EuiSuperSelect now has a compressed style https://github.com/elastic/eui/pull/2155
• Reworked the existing compressed controls https://github.com/elastic/eui/pull/2174
• [BREAKING] EuiFormRow was reworked to allow for inline forms https://github.com/elastic/eui/pull/2181

Kibana follow up

9/11 - Merge event in EUI

• [x] Set up TS tables EUI release before we merge this @thompsongl (elastic/kibana#45052)
• [x] Merge main feature branch https://github.com/elastic/eui/pull/2167 @cchaos
  
  
  
  • [x] Pull out compressed switches from EuiDataGrid https://github.com/elastic/eui/pull/2327 @snide
  
  
  • [x] Add support for EuiRange in dropdown https://github.com/elastic/eui/pull/2179 @cchaos @thompsongl
  
  

9/13 - Initial EUI merge into Kibana https://github.com/elastic/kibana/pull/45475/

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

During 7.5 dev - Once merged into Kibana

• [x] Overall sanity checking @snide / @cchaos
• [ ] Viz panels @snide
• [x] Maps panels @cchaos / @miukimiu
• [x] Canvas panels (https://github.com/elastic/kibana/issues/45904) @ryankeairns / @andreadelrio
• [x] 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

| control | compressed | prepend | append | other |
|---|---|---|---|---|
| EuiFieldSearch | ✔️ | ✔️ | ✔️ | |
| EuiFieldPassword | ✔️ | ❌ | ❌ | |
| EuiSelect | ✔️ | ✔️ | ✔️ | id does not seem to get passed to the actual select tag |
| EuiSuperSelect | ✔️ | ❌ | ❌ | |
| EuiComboBox | ✔️ | ✔️for singleSelect only | ✔️for singleSelect only | uses isDisabled instead of disabled |
| EuiColorPicker | ✔️ | ✔️ | ✔️ | no isLoading |
| EuiRange | ✔️ | ✔️ | ✔️ | |
| EuiDualRange | ✔️ | 🚫 | 🚫 | |
| EuiButtonGroup | ❌ | 🚫 | 🚫 | |
| EuiFilterButtonGroup | ❌ | ? as labels maybe | ? | |

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.

[thompsongl]

Set up TS tables EUI release before we merge this

The work is pretty much done for this. Just waiting on one EUI PR to clear, and I have a Kibana branch locally that resolves new TS issues.

[cchaos]

Consuming application checklist

Based on the outline above, here is some concrete instructions on how to best update consuming applications.

1. Check for compressed usages

Does this control live within a confined space and is not your typical fill and submit style form? If yes, keep it as compressed. Otherwise, consider removing the compressed property.

⚠️Never mix compressed and non-compressed form controls in the same form.

2. Fix breaks and deprecations on EuiFormRow usages

💔 Break: EuiFormRow no longer has bottom padding, nor does it add margin to any + * siblings. It only adds spacing if it'sEuiFormRow + EuiFormRow`.

Look for: Any siblings of (components that come directly after) EuiFormRow that now look too close to the form row.

Fix: Insert an EuiSpacer component between the EuiFormRow and following sibling.

---

💔 Break: EuiFormRow longer passes compressed to its children (form controls).

Look for: Places where EuiFormRow has compressed but the form control does not.

Fix: Add compressed prop to the form control itself as well.

---

⚠️ Deprecation: The compressed prop should become display="compressed"
⚠️ Deprecation: The displayOnly prop should become display="center" or display="centerCompressed" if it should ale be compressed.

3. Fix breaks with EuiFormLabel usages

💔 Break: EuiFormLabel no longer has bottom margin

Look for: Places where EuiFormLabel is used directly and now looks too close to the component that comes after it.

Fix: insert an EuiSpacer probably with size="s" after the EuiFormLabel.

---

4. Fix breaks with EuiFilePicker usages

💔 Break: EuiFilepicker now has additional props for display that go hand in hand with compressed prop.

Look for: Places when EuiFilePicker also had compressed.

Fix: Add display="default" onto the component when compressed is used.

Enhancements

Prepend and Appends

Does your control's value have an explicit measurement like "pixels" or "minutes"? Consider adding an append prop to the form control with this measurement like:

<EuiFieldNumber append="px" />

---

The checklist

• [ ] Form control and row properly uses the compressed property.
• [ ] Fixed any EuiFormRow sibling spacing issues.
• [ ] Fixed any compressed EuiFormRow children that didn't also have the compressed prop.
• [ ] Changed EuiFormRow compressed to display="compressed"
• [ ] Changed EuiFormRow displayOnly to display="center" or display="centerCompressed"
• [ ] Fixed any EuiFormLabel sibling spacing issues
• [ ] Fixed any EuiFilePicker compressed issues

[ryankeairns]

A community member contributed a nice new custom avatar feature here: https://github.com/elastic/kibana/pull/45148

It needs some design touchup and would also benefit from the compressed styles.

[hbharding]

Adding prepend / append props for inline labels to EuiFilterGroup came up recently in the Infrastructure Metrics app in this PR https://github.com/elastic/kibana/pull/47083

[cchaos]

This is all done, closing in favor of follow up issue #3121