[Feature Branch] Add support for EuiRange in a dropdown with input #2179

cchaos · 2019-07-29T19:47:49Z

feature/compressed-editor-controls

Adds another option to the `showInput` prop for EuiRange and EuiDualRange

If you now pass showInput="only", then only the input will show like a normal form control but focusing on the form control will open a dropdown that contains the range slider. This will help compressed forms use the space better without the need for the slider to be inline.

Other additions in this PR to get the above working

1. Fixes heights for compressed ranges
Before, the height would stay at 40px, now it compresses down.

2. Fixed z-indexing of range innards
By removing them altogether and relying on DOM order.

3. Added controlOnly prop to EuiFieldNumber
I'm tired of fighting with nested EuiFormControlLayout components. This was super easy to do and quickly got me to the state I needed without nested overrides.

4. Some fixes to EuiFormControLayoutDelimeter
For disabled state.

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 make one in Feature PR

cchaos · 2019-07-29T19:49:32Z

@thompsongl Could I get your help with this one?

I had brought up the idea of creating a service for the pattern of form inputs using custom popovers (to look like dropdowns not popovers). This is one of those use cases. Could we either go ahead and create that service (not that any other component needs to be updated to use it just yet) or could you help me fix the usage here to coincide with the others?

thompsongl · 2019-07-29T20:11:14Z

@cchaos Yep, I can take a real look at it. I'd like to create the service now if the use cases are starting to arrive, but we'll see what's realistic.

thompsongl · 2019-07-31T21:20:33Z

@cchaos I have a Draft PR (cchaos#20) that you can take a look at. Still working on the correct way to do focus management, but it'll give you a good feel for direction now.

cchaos · 2019-08-14T20:51:13Z

This PR is now ready for review, though I do still have to go through the full checklist. Just figured I'd give ya'll a head start.

@thompsongl I do need your help working on EuiInputPopover and the focus state handling and readOnly state. I'll get with you next week on that.

ryankeairns

👍 Looks and works as expected. The red/green level indicators are less clear without any associated text. Perhaps it's just a simple docs addition to place the Recommended size is 20kb and above. help text below the input as has been done in other examples.

thompsongl

The only other point of feedback is that you could add onFocus handlers to the inputs to have them open the popover. As I mentioned in cchaos#20 (comment), though, I don't think it's necessary for this particular use of EuiInputPopover.

src/components/form/range/_range.scss

src/components/form/range/_range_tooltip.scss

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

…ic#2117) 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`

Decrease overall height of the range when compressed # Conflicts: # src/components/form/range/range_highlight.tsx # src/components/form/range/range_levels.tsx # src/components/form/range/range_slider.tsx # src/components/form/range/range_ticks.tsx # src/components/form/range/range_tooltip.tsx # src/components/form/range/range_track.tsx # src/components/form/range/range_wrapper.js

- Attempt at single range compressed input with popover - Fixes z-indexes being too high

- Fix up widths

Dual range now supports dropdown style

- Needed some fixes to EuiFormControlLayoutDelimited

Can’t use mixin, too many overrides/differences

cchaos · 2019-09-04T18:14:44Z

@thompsongl I'm good with that approach. It really is mainly just for quick slides at that point and sliders aren't good for accessibility when trying to get to a specific value.

thompsongl · 2019-09-04T18:22:40Z

I'll open a PR to this branch and let you try it out.

thompsongl · 2019-09-04T19:17:53Z

Keyboard management: cchaos#25

Still trying to figure out how to get the dual range thumbs to be correctly positioned on initial render

Focus direction

thompsongl · 2019-09-05T17:05:14Z

cchaos#26 will get the dual range thumbs correctly positioned. See what you think.

`EuiDualRange` thumb position on resize

cchaos · 2019-09-05T17:31:18Z

@thompsongl Can you actually checkout Firefox? I keep running into this long running script issue

thompsongl · 2019-09-05T17:50:31Z

Ugh I forgot ResizeObserver uses a fallback in Firefox that won't work for this case. I'll have to find another solution.

thompsongl · 2019-09-05T18:23:00Z

cchaos#27 removes EuiResizeObserver in favor of using a callback that plugs into the originating change event.

snide

Small stuff. Approved on changes. Nice work.

src/components/form/range/dual_range.js

src/components/form/form_control_layout/_form_control_layout_delimited.scss

src/components/form/range/_index.scss

src/components/form/range/_range_highlight.scss

…aos/eui into into-feature/range-dropdowns

…ange-dropdowns

use callback instead of resizeObserver

cchaos · 2019-09-09T19:28:34Z

Ok, all the focus stuff should be fixed across browsers now and PR comments addressed. @thompsongl can you do a final review?

…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

…lastic#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

* [Feature branch] Updated form control border color (#2114) * Updated form control border color * Slighly more transparent * change sass var name to $euiFormBorderOpaqueColor * [Feature branch] Added EuiFormControlLayoutDelimited component (#2117) 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) - Added truncation example - Added max-height * [Feature Branch] Update compressed form control styles (#2174) * 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 * [Feature branch] Compressed form rows (#2181) * 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` * Fix snap * Into feature/compressed editor docs (#2295) * 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 * [Feature Branch] Add support for EuiRange in a dropdown with input (#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 * Added some display toggles for ranges and ranges with dropdowns to the complex example Has issues * Fix console errors * Some fixes - 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) * focus management * add euiformrow to some examples * use prevention flag * Add `controlOnly` prop to EuiFieldText * Update TS defs * Some docs fixes * Fix inherit screen reader ability of EuiRange By moving the id to the input if it exists * Add dual range to complex example

thompsongl mentioned this pull request Jul 29, 2019

Create a service for joining inputs with popovers #2104

Closed

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

cchaos force-pushed the into-feature/range-dropdowns branch from 1ee7727 to 9895abf Compare August 13, 2019 13:47

cchaos marked this pull request as ready for review August 14, 2019 20:49

cchaos requested review from thompsongl, snide and ryankeairns August 14, 2019 20:51

ryankeairns approved these changes Aug 16, 2019

View reviewed changes

thompsongl suggested changes Aug 28, 2019

View reviewed changes

src/components/form/range/_range.scss Outdated Show resolved Hide resolved

src/components/form/range/_range_tooltip.scss Outdated Show resolved Hide resolved

cchaos added 5 commits August 29, 2019 12:01

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

66b3378

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

[Feature branch] Added EuiFormControlLayoutDelimited component (elast…

eb5297a

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

[Feature branch] Compressed EuiSuperSelect dropdown (elastic#2155)

89c9966

- Added truncation example - Added max-height

cchaos force-pushed the feature/compressed-editor-controls branch from 689d79b to f917029 Compare August 29, 2019 16:02

cchaos added 11 commits August 29, 2019 12:03

Fix snap

8d3ae71

Compressed EuiRange step 2

dd80c95

- Attempt at single range compressed input with popover - Fixes z-indexes being too high

Compressed EuiRange step 2 (cont)

d1dc24b

- Fix up widths

Compressed EuiRange step 3

a791585

Dual range now supports dropdown style

Fix for delimited

732ffc6

Fix full-width delimited

db0e016

Added controlOnly prop to EuiFieldNumber

b29fe1d

Finalize styles of input only ranges

e8a6d82

- Needed some fixes to EuiFormControlLayoutDelimited

Some cleanup

7e73d80

Use tooltip background variable

8ded06a

Can’t use mixin, too many overrides/differences

focus direction

536b9b9

Merge pull request #25 from thompsongl/into-feature/range-dropdowns

d1bf98a

Focus direction

snide mentioned this pull request Sep 5, 2019

[META] Compressed panels release plan #2286

Closed

13 tasks

thompsongl added 2 commits September 5, 2019 11:56

dual range respond to resize events when in showInputOnly mode

ac95317

clean up

1b58cdf

Merge pull request #26 from thompsongl/into-feature/range-dropdowns

9a6d9de

`EuiDualRange` thumb position on resize

cchaos requested a review from thompsongl September 5, 2019 17:25

cchaos mentioned this pull request Sep 6, 2019

Into feature/compressed editor docs #2295

Merged

7 tasks

snide approved these changes Sep 6, 2019

View reviewed changes

cchaos and others added 7 commits September 6, 2019 16:02

PR Feedback

e132f7e

Merge branch 'into-feature/range-dropdowns' of https://github.com/cch…

019e139

…aos/eui into into-feature/range-dropdowns

Merge branch 'feature/compressed-editor-controls' into into-feature/r…

161ae26

…ange-dropdowns

use callback instead of resizeObserver

2fd14f4

ie11 focus fix

657e3d8

use focusout instead of blur

418e4e1

Merge pull request #27 from thompsongl/into-feature/range-dropdowns

5d169d0

use callback instead of resizeObserver

thompsongl approved these changes Sep 9, 2019

View reviewed changes

cchaos merged commit 7f88db7 into elastic:feature/compressed-editor-controls Sep 9, 2019

cchaos deleted the into-feature/range-dropdowns branch October 22, 2019 20:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature Branch] Add support for EuiRange in a dropdown with input #2179

[Feature Branch] Add support for EuiRange in a dropdown with input #2179

cchaos commented Jul 29, 2019 •

edited

Loading

cchaos commented Jul 29, 2019

thompsongl commented Jul 29, 2019

thompsongl commented Jul 31, 2019

cchaos commented Aug 14, 2019

ryankeairns left a comment

thompsongl left a comment

cchaos commented Sep 4, 2019

thompsongl commented Sep 4, 2019

thompsongl commented Sep 4, 2019

thompsongl commented Sep 5, 2019

cchaos commented Sep 5, 2019

thompsongl commented Sep 5, 2019

thompsongl commented Sep 5, 2019

snide left a comment

cchaos commented Sep 9, 2019

[Feature Branch] Add support for EuiRange in a dropdown with input #2179

[Feature Branch] Add support for EuiRange in a dropdown with input #2179

Conversation

cchaos commented Jul 29, 2019 • edited Loading

feature/compressed-editor-controls

Adds another option to the showInput prop for EuiRange and EuiDualRange

Other additions in this PR to get the above working

Checklist

cchaos commented Jul 29, 2019

thompsongl commented Jul 29, 2019

thompsongl commented Jul 31, 2019

cchaos commented Aug 14, 2019

ryankeairns left a comment

Choose a reason for hiding this comment

thompsongl left a comment

Choose a reason for hiding this comment

cchaos commented Sep 4, 2019

thompsongl commented Sep 4, 2019

thompsongl commented Sep 4, 2019

thompsongl commented Sep 5, 2019

cchaos commented Sep 5, 2019

thompsongl commented Sep 5, 2019

thompsongl commented Sep 5, 2019

snide left a comment

Choose a reason for hiding this comment

cchaos commented Sep 9, 2019

cchaos commented Jul 29, 2019 •

edited

Loading

Adds another option to the `showInput` prop for EuiRange and EuiDualRange