[Feature] Compressed editor controls #2167

cchaos · 2019-07-25T18:41:09Z

Created better compressed form controls

This PR has accumulated in the creation of:

💝 Highlights

Completely new look for the compressed style form controls
More options for prepend and append props on form controls
Added an EuiFormControlLayoutDelimited component
Fixed some styles of EuiSuperSelect (including a max-height)
Added small version of EuiFilePicker
Form rows can also now be compressed (less spacing) and horizontal (if compressed)
EuiRange and EuiDualRange can show just the inputs inline with the range in a popover.

🔜 Todos

What's still left to do has been added to this meta ticket #2286

💔 Breaks

EuiFormRow #2181

No longer passes compressed to it's children
No longer has bottom padding, nor does it add margin to any + * siblings.

EuiFormLabel #2181

Removed bottom margin

Removed SCSS mixin euiTextOverflowWrap() and created euiTextBreakWord() instead as the latter works more appropriately.

⚠️ Deprecations

EuiFormRow #2181

compressed prop is now set for deprecation in favor of display = "compressed"
displayOnly prop is now set for deprecation in favor of display = "center"

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

* Updated form control border color * Slighly more transparent * change sass var name to $euiFormBorderOpaqueColor

As a layout helper component to create date and number ranges * Added Sass var for `$euiFormControlLayoutGroupInputHeight` and compressed version

- Added truncation example - Added max-height

* Updated compressed visual style in mixin * Compressed updates to from control groups * Fix compressed state overrides * Reduce horizontal padding for compressed * Icons and button icons in input groups * Added a compressed option for from` euiFormControlLayoutPadding` * Added compressed padding for inputs with icons * Fix readonly & compressed input groups * Fix group heights * Update file picker with new compressed styles * Fix delimited compressed and fullwidth styles * Fixed EuiComboBox * Added reduced padding for EuiColorPicker * Fixed date pickers * Variables for border-radius

* Removed padding from compressed form row * Create mixin for `euiTextBreakWord` * Added option for horizontal compressed style Breaking: `compressed` is no longer passed to children * [Docs] Final compressed doc example changes * Fix combobox height * Fixed usages where spacers were needed * Deprecated `displayOnly` for `display: center`

* Adding a shared component for the different states of each form control * New docs section for compressed * Added `columnCompressedSwitch` to display type of EuiFormRow for better alignment of switch style controls * Account for tooltips as pre/appends * Allow passing a string as the pre/appends and it automatically wraps it in a form label * Made all EuiSuperDatePicker form controls compressed (in popover) * Connection prepend/appends with input via `htmlFor` * Allowing passing of `style` to EuiColorPickerSwatch * Allow an array of strings a pre/append

…2179) * Compressed EuiRange step 1: Decrease overall height of the range when compressed * Compressed EuiRange step 2: - Attempt at single range compressed input with popover - Fixes z-indexes being too high - Fix up widths * Compressed EuiRange step 3: Dual range now supports dropdown style * Fix for delimited * Fix full-width delimited * Added `controlOnly` prop to EuiFieldNumber * Finalize styles of input only ranges - Needed some fixes to EuiFormControlLayoutDelimited * Open popover on focus * dual range respond to resize events when in showInputOnly mode * use callback instead of resizeObserver * ie11 focus fix * use focusout instead of blur

…e complex example Has issues

- Ranges use div spacers between slider and input instead of margin - Pre/Appends are restrictred to 50% width and truncated

* focus management * add euiformrow to some examples * use prevention flag * Revert "add euiformrow to some examples" This reverts commit f93ef4e. * clean up

…om/elastic/eui into feature/compressed-editor-controls # Conflicts: # src/components/form/range/dual_range.js

cchaos · 2019-09-11T03:02:40Z

This PR is now ready for review. I just have to do the final checklist including a long changelog entry. For those tagged as reviewers, these changes have all been "reviewed" already via the earlier PR's so feel free to do as much review as you think necessary. I did a once over on all the files and the docs - fixed a few issues found. I'd just like a final 👍 from each of you before we deem it mergeable.

🙇‍♀ Thank you!!

snide

I reviewed most of this stuff first time around so I'm just concentrating on the docs. One thing I noticed for accessibility is that the range controls / steppers don't seem to properly announce the aria-labels used. This looks unchanged from master, so I don't think it's a blocker, but is easy to replicate if you want to give it a check. Just tab into any of the range controls on your compressed form examples (the big panel ones).

I did a visual scan of every EUI page. Here are some small breaks I noticed

Modals

Combo box loading state

Invalid states on readonly / disabled

I think this makes sense, but just calling it out, that readonly / disabled negates the invalid state. Again, I think this makes sense, just making sure.

Expressions

Might want to update these examples to use compressed controls.

cchaos · 2019-09-11T15:29:32Z

Thanks @snide !

Combo box loading state

Apparently the loading state only affects the options dropdown.

Invalid states on readonly / disabled

I don't think I changed this from before but I too think it makes sense since you wouldn't be able to "fix" the error state.

The others have been done.

I'll look into the screen reader issue for ranges.

By moving the id to the input if it exists

cchaos · 2019-09-11T15:54:04Z

Ok, I was able to fix the EuiRange screen reader a11y, but the EuiDualRange will need a lot of work that I'd like to push off to another PR. I'll start an issue.

snide

We reviewed everything in here, so there should be no surprises. I think we just need to anticipate there will be some patches needed post merge / attempting to get this into Kibana.

Once merged, let's send an email out to dev and give some guidance. Before we do that, let's get some signoff from @chandlerprall and @thompsongl that we don't have anything time sensitive to get into EUI before this lands (to minimize a need for a backport).

thompsongl

@snide I'm not aware of anything important that needs to get in before this.

Do we still want to cut a release before this gets in? There could be a couple bugfixes that merge today (along with one already on master)

cchaos · 2019-09-11T17:14:43Z

I think we just need to anticipate there will be some patches needed post merge / attempting to get this into Kibana.

Absolutely, there will be bugs found and features needed. But this is a good start.

Do we still want to cut a release before this gets in?

Yes. Right before this is ready to merge, we should do a release then merge, then release again.

ryankeairns

This is looking quite solid and seems ready to merge. Let's get it out in the wild and work out any other kinks. Thanks Caroline!

snide added the breaking change label Jul 25, 2019

cchaos force-pushed the feature/compressed-editor-controls branch from 836497d to 880ea3f Compare July 29, 2019 19:20

cchaos force-pushed the feature/compressed-editor-controls branch from 62dc3aa to 689d79b Compare August 13, 2019 13:30

shaunmcgough mentioned this pull request Aug 22, 2019

[Canvas] Compress Canvas side panel inputs elastic/kibana#43807

Closed

cchaos force-pushed the feature/compressed-editor-controls branch 2 times, most recently from 8d3ae71 to eb61262 Compare August 30, 2019 17:15

cchaos mentioned this pull request Sep 4, 2019

FormControlLayout: Error if append prop is a string #2283

Closed

snide mentioned this pull request Sep 5, 2019

[META] Compressed panels release plan #2286

Closed

13 tasks

cchaos added the deprecations Contains deprecations. Add them to the deprecations meta ticket after merge. label Sep 6, 2019

cchaos and others added 8 commits September 9, 2019 18:42

[Feature branch] Updated form control border color (#2114)

3e9f9ef

* Updated form control border color * Slighly more transparent * change sass var name to $euiFormBorderOpaqueColor

[Feature branch] Added EuiFormControlLayoutDelimited component (#2117)

6ba098b

As a layout helper component to create date and number ranges * Added Sass var for `$euiFormControlLayoutGroupInputHeight` and compressed version

[Feature branch] Compressed EuiSuperSelect dropdown (#2155)

9280bed

- Added truncation example - Added max-height

Fix snap

fe02121

cchaos force-pushed the feature/compressed-editor-controls branch from 7f88db7 to 9ee5620 Compare September 9, 2019 22:42

cchaos and others added 8 commits September 10, 2019 15:47

Added some display toggles for ranges and ranges with dropdowns to th…

60a5362

…e complex example Has issues

Fix console errors

cfb4a36

Some fixes

21fa2c6

- Ranges use div spacers between slider and input instead of margin - Pre/Appends are restrictred to 50% width and truncated

[feature/compressed-editor-controls] EuiRange + EuiFormRow (#2321)

c96f483

* focus management * add euiformrow to some examples * use prevention flag * Revert "add euiformrow to some examples" This reverts commit f93ef4e. * clean up

Merge branch 'feature/compressed-editor-controls' of https://github.c…

28aea3f

…om/elastic/eui into feature/compressed-editor-controls # Conflicts: # src/components/form/range/dual_range.js

Cleanup

a494d35

Add controlOnly prop to EuiFieldText

5e07c70

Update TS defs

15694a9

cchaos marked this pull request as ready for review September 11, 2019 02:59

cchaos requested review from chandlerprall, snide and ryankeairns September 11, 2019 02:59

cchaos requested a review from thompsongl September 11, 2019 02:59

snide reviewed Sep 11, 2019

View reviewed changes

Some docs fixes

8ba88c0

Fix inherit screen reader ability of EuiRange

69beef7

By moving the id to the input if it exists

Add dual range to complex example

3f672f8

snide approved these changes Sep 11, 2019

View reviewed changes

thompsongl approved these changes Sep 11, 2019

View reviewed changes

Quick fix for IE

b3d6631

ryankeairns approved these changes Sep 11, 2019

View reviewed changes

cchaos and others added 2 commits September 11, 2019 14:05

cl

6c83a7c

Merge branch 'master' into feature/compressed-editor-controls

baed150

cchaos merged commit ab29a11 into master Sep 11, 2019

cchaos mentioned this pull request Sep 11, 2019

Update EUI to 14.0.0 elastic/kibana#45475

Merged

5 tasks

cchaos deleted the feature/compressed-editor-controls branch October 22, 2019 20:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature] Compressed editor controls #2167

[Feature] Compressed editor controls #2167

cchaos commented Jul 25, 2019 •

edited

Loading

cchaos commented Sep 11, 2019

snide left a comment •

edited

Loading

cchaos commented Sep 11, 2019

cchaos commented Sep 11, 2019

snide left a comment

thompsongl left a comment

cchaos commented Sep 11, 2019

ryankeairns left a comment

[Feature] Compressed editor controls #2167

[Feature] Compressed editor controls #2167

Conversation

cchaos commented Jul 25, 2019 • edited Loading

Created better compressed form controls

💝 Highlights

🔜 Todos

💔 Breaks

⚠️ Deprecations

Checklist

cchaos commented Sep 11, 2019

snide left a comment • edited Loading

Choose a reason for hiding this comment

Modals

Combo box loading state

Invalid states on readonly / disabled

Expressions

cchaos commented Sep 11, 2019

cchaos commented Sep 11, 2019

snide left a comment

Choose a reason for hiding this comment

thompsongl left a comment

Choose a reason for hiding this comment

cchaos commented Sep 11, 2019

ryankeairns left a comment

Choose a reason for hiding this comment

cchaos commented Jul 25, 2019 •

edited

Loading

snide left a comment •

edited

Loading