Global patterns for query and filter bar #1137

cchaos · 2018-08-22T21:14:47Z

This PR is no longer a WIP, but it does still have some issues that need to be worked out.

~~Dependent on #1139 going in first~~
~~Dependent on #1173 going in first~~

The main focus of the work is on the filter bar. The query bar's auto-complete can be re-used from current implementation.

The components for this pattern are contained in the docs folder, but if need be, can be moved to EUI components.

I still need to:

Check IE (and other non-chrome browsers)

All that being said, this is VERY close to finished, so cc'ing @Bargs as well for initial feedback of feasibility in using this as a pattern to replace the current implementation.

ryankeairns

Some quick reactions:

do all the tags start with "@tags." and if so, is that detail necessary?
I prefer the strikethrough over the circle with dash icon. Another option that might be even more clear would be text like "keyword is value" , "keyword not value". Then you could potentially do without the strikethrough and the icon.
The full-height divider bar (and removal of the padding on pinned side of the bar) was still clearer in my personal opinion
One last highly subjective piece of feedback :) , I want to like the neon aqua blue, but it feels a bit rich. Perhaps a more cool tone would do the trick.

It's looking great!

cchaos · 2018-08-22T21:55:38Z

Thanks @ryankeairns

Not they don't all start with @tags, in fact I don't think any actually would. To see what we're re-designing you can go to this dashboard and start playing with the "Add a filter" button at the top.
The current one actually does change the wording but they do it like: key: value to NOT key:value... not sure what direction is best
Yeah I couldn't actually do the dividing border since all the filters are inline and the bar can grow in height.

ryankeairns · 2018-08-22T21:57:10Z

oh jeez, I now totally see that it was sample text :D

ryankeairns · 2018-08-22T22:02:22Z

Ok, took a peak at the current design.
The current text using key: value and NOT key:value was easier to read than the icons. Again, I'm the equivalent of a first time user here, but the icons (and strikethrough) are adding more noise to an already busy bar of text. I think in this case the text alone does the trick.

cchaos · 2018-08-22T22:11:42Z

Yeah, you're probably right. How about the disabled (invisible) ones?

ryankeairns · 2018-08-22T22:24:03Z

In this case, the icon and gray colors feel appropriate and effective.

Given the limitations of gray text and retaining accessible contrast, the icon feels like a good alternative. Additionally, limiting icon usage to this single (presumably less frequent) use case makes it stand out more without the aforementioned downside of creating too much noise.

snide · 2018-08-22T23:48:07Z

This is looking sweet. Agree on the icons / strikethrough feedback from @ryankeairns. I tried to take a stab at the pinning stuff. It's pretty difficult to solve. Here are some slants I went through.

Prolly is the most clear

Eh? Eh...? Ehhhh I know it's super spacious, but it should be clear and scale ok. I know this is gonna sound silly, but it might also give us some range if we wanted to do AND/OR style grouping in a UI format.

Oh, and I'd only show the actions and filter add on the row you were hovering on. Has the side benefit of letting you add stuff to the pinned set immediately.

Prolly has trouble scaling with lots of items

cchaos · 2018-08-23T02:50:18Z

Hmmm, I'd hate to give up that much vertical space for what could be just one filter. I also think the second options would end up basically like the first when the second box gets full. If we can, I'd like to try to keep them all in one area/maintain the pinned signifier as part of the filter itself.

I got some inspiration and played around with styling the badges differently from the default badge we have. Here are some ideas.

No form background

This one gets rid of the form input wrapping container and adds a little more shadow to the actual filters.

Slight hue colors

This one keeps that container but gets rid of the borders around the filters and inverts the pinned version.

cchaos · 2018-08-23T02:54:31Z

I also think we should keep the (x) remove button always on the filter otherwise it's really hard to quickly remove a bunch (without removing all at once).

snide · 2018-08-23T03:40:43Z

I like the one with no wrapping input a lot. 👍

ryankeairns · 2018-08-23T04:20:06Z

Oooo, really liking these options!

snide · 2018-08-23T04:55:55Z

Somewhat related, had to put something together for logging that allows for highlighting separate of the query bar (think "hosts: all" and then highlight the term "error"). Right now I have it as something that appears after the KQL bar since it's an operation that happens after the filtering. I don't think they'll ever have the secondary filter bar so i don't think the two will ever be seen at once. Space is at a premium in logging, which is why it's all done in a popover.

https://codesandbox.io/s/617mv4p62w

cchaos · 2018-08-23T23:09:20Z

No longer POC, but kinda WIP

and fixing some other layout stuff

This reverts commit 1c3ad3e.

instead of border because a border was causing the box-shadow to be off

chandlerprall · 2018-09-06T17:55:37Z

src/components/combo_box/combo_box.js

-      PropTypes.shape({
-        asPlainText: PropTypes.bool,
-      }),
+      PropTypes.object,


this looks like a bad merge with master? let's keep the shape

Fix global filters position on window resize

cchaos · 2018-09-11T16:41:38Z

Ok, this is ready for final (and code) review.

chandlerprall

LGTM (code review, pulled locally), added one small comment;
this looks beautiful

chandlerprall · 2018-09-11T17:41:37Z

src-docs/src/views/header/global_filter_form.js

+  }
+
+  componentDidMount() {
+    // Simulate initial load.


remove if not needed

cchaos · 2018-09-11T20:55:25Z

Thanks all! I'm going to merge this one in. It may develop further as @Bargs starts using it.

cchaos requested review from snide and ryankeairns August 22, 2018 21:14

ryankeairns reviewed Aug 22, 2018

View reviewed changes

cchaos mentioned this pull request Aug 23, 2018

EuiComboBox additions #1139

Merged

cchaos force-pushed the global-patterns branch from 73aad03 to f89f495 Compare August 23, 2018 22:53

cchaos requested a review from chandlerprall August 23, 2018 23:04

cchaos changed the title ~~[WIP] Global patterns fo query and filter bar~~ Global patterns fo query and filter bar Aug 23, 2018

cchaos changed the title ~~Global patterns fo query and filter bar~~ Global patterns for query and filter bar Aug 23, 2018

cchaos added 10 commits September 4, 2018 13:05

Quick element piecing

7de7820

Adding filter states

fa67bb4

Added menus

c4d711f

Added add filter menu

fc2f029

Using combobox for adding filters

769f5f9

Couple extras

51d03aa

Refactor

55150b1

Almost have it working with combobox

8a86fa9

Switching form to use multiple comboboxes

223f919

Changing buttons around

fd3df58

cchaos added 6 commits September 4, 2018 13:07

options menu wording

2a1c5f1

Animating in filter bar

490593e

updating doc

1850872

Better styling of filter items

65dd480

Forcing max-width on flex item in form

08156df

and fixing some other layout stuff

Revert "Address PR comments and Changelog"

144963f

This reverts commit 1c3ad3e.

cchaos force-pushed the global-patterns branch from 48dafb5 to 144963f Compare September 4, 2018 17:08

Using pseudo element for pinned indicator

ae6eed6

instead of border because a border was causing the box-shadow to be off

chandlerprall reviewed Sep 6, 2018

View reviewed changes

chandlerprall and others added 3 commits September 6, 2018 12:21

use resize observer instead of mutation observer

fa3f802

Merge pull request #14 from chandlerprall/feature/1137-global-patterns

b1083ff

Fix global filters position on window resize

Fixing popover width (separate PR for actual popover width fix)

e80a73d

cchaos mentioned this pull request Sep 11, 2018

Allowing context menu panels to have different widths #1173

Merged

8 tasks

cchaos added 2 commits September 11, 2018 12:13

Merge remote-tracking branch '2_upstream/master' into global-patterns

e1b78a2

Fix singleSelection propType from bad merge

6aaa29a

chandlerprall approved these changes Sep 11, 2018

View reviewed changes

cchaos added 2 commits September 11, 2018 14:35

Remove extra method

3c1f584

changelog

d1322e0

cchaos merged commit 18575e7 into elastic:master Sep 11, 2018

cchaos deleted the global-patterns branch September 11, 2018 20:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Global patterns for query and filter bar #1137

Global patterns for query and filter bar #1137

cchaos commented Aug 22, 2018 •

edited

Loading

ryankeairns left a comment •

edited

Loading

cchaos commented Aug 22, 2018 •

edited

Loading

ryankeairns commented Aug 22, 2018

ryankeairns commented Aug 22, 2018

cchaos commented Aug 22, 2018

ryankeairns commented Aug 22, 2018

snide commented Aug 22, 2018 •

edited

Loading

cchaos commented Aug 23, 2018 •

edited

Loading

cchaos commented Aug 23, 2018

snide commented Aug 23, 2018

ryankeairns commented Aug 23, 2018

snide commented Aug 23, 2018 •

edited

Loading

cchaos commented Aug 23, 2018

chandlerprall Sep 6, 2018

cchaos commented Sep 11, 2018

chandlerprall left a comment •

edited

Loading

chandlerprall Sep 11, 2018

cchaos commented Sep 11, 2018

Global patterns for query and filter bar #1137

Global patterns for query and filter bar #1137

Conversation

cchaos commented Aug 22, 2018 • edited Loading

ryankeairns left a comment • edited Loading

Choose a reason for hiding this comment

cchaos commented Aug 22, 2018 • edited Loading

ryankeairns commented Aug 22, 2018

ryankeairns commented Aug 22, 2018

cchaos commented Aug 22, 2018

ryankeairns commented Aug 22, 2018

snide commented Aug 22, 2018 • edited Loading

Prolly is the most clear

Prolly has trouble scaling with lots of items

cchaos commented Aug 23, 2018 • edited Loading

No form background

Slight hue colors

cchaos commented Aug 23, 2018

snide commented Aug 23, 2018

ryankeairns commented Aug 23, 2018

snide commented Aug 23, 2018 • edited Loading

cchaos commented Aug 23, 2018

chandlerprall Sep 6, 2018

Choose a reason for hiding this comment

cchaos commented Sep 11, 2018

chandlerprall left a comment • edited Loading

Choose a reason for hiding this comment

chandlerprall Sep 11, 2018

Choose a reason for hiding this comment

cchaos commented Sep 11, 2018

cchaos commented Aug 22, 2018 •

edited

Loading

ryankeairns left a comment •

edited

Loading

cchaos commented Aug 22, 2018 •

edited

Loading

snide commented Aug 22, 2018 •

edited

Loading

cchaos commented Aug 23, 2018 •

edited

Loading

snide commented Aug 23, 2018 •

edited

Loading

chandlerprall left a comment •

edited

Loading