Add Suggest component #2270

andreadelrio · 2019-08-28T21:44:41Z

Fixes #1938
Fixes #2270

Summary

This PR adds the EuiSuggest component and the corresponding docs.

This component provides a way to display suggestions using a text field. Behind the scenes it uses EuiSuggestItem to display each suggestion following a very similar format to the one currently present in Kibana.

The consumer is to handle what the current status of EuiSuggest is. The supported status are notYetSaved, saved, noNewChanges and isLoading. Custom tooltip content is supported for these.

EuiSuggest can also have elements prefixed and/or appended to it. For this, there's the prefix and append props which are both PropTypes.node.

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

EuiSuggestItems tests pass

…to suggest-item

andreadelrio · 2019-09-04T17:23:18Z

@cchaos I think I've addressed most of your comments. Still not 100% happy with the behavior of the input on the Saved Queries example (it's a bit jumpy). Additionally, I added a handler for a click on a suggestion.

cchaos

Still not 100% happy with the behavior of the input on the Saved Queries example (it's a bit jumpy).

I think we can continue to tackle that in a separate PR. For now, I'm concentrating on the actual EuiSuggest and it's components.

Sorry still finding a few things since this is such a large PR.

When the status is unchanged it feels odd that the focus state doesn't extend the full length of the input .

src-docs/src/views/suggest/saved_queries.js

src/components/suggest/suggest_input.js

src/components/suggest/suggest.js

src-docs/src/views/suggest/saved_queries.js

src-docs/src/views/suggest/suggest_example.js

src/components/suggest/_suggest_input.scss

src-docs/src/views/suggest/suggest.js

src/components/suggest/suggest_item.js

cchaos · 2019-09-04T20:50:46Z

src/components/suggest/suggest_input.js

+    const statusElement = status !== 'isLoading' && (
+      <EuiToolTip
+        position="left"
+        content={tooltipContent}


I think you can still supply some good defaults in the component itself for the tooltip instead of forcing that on the consumer. Probably just add a few to the statusMap but allow tooltipContent to override.

Suggested change

content={tooltipContent}

content={tooltipContent || statusMap[status].tooltip}

The || will evaluate the first option first and if it is false, move to the next option.

andreadelrio · 2019-09-06T16:44:44Z

@cchaos managed to fix the styling when using button and made the other changes too. Component feels a bit cleaner now.

cchaos

This is really starting to come together nicely! My comments now are super nit picky.

src-docs/src/views/suggest/saved_queries.js

src/components/suggest/suggest.js

src/components/suggest/_suggest_item.scss

src/components/suggest/suggest_input.js

cchaos

Great! LGTM, but we should get an engineer to do a pass as well. @chandlerprall can you review this one?

src-docs/src/views/suggest/suggest.js

src/components/suggest/suggest.js

chandlerprall · 2019-09-11T14:44:16Z

src/components/suggest/suggest_input.js

+  constructor(props) {
+    super(props);
+
+    this.state = {


Similarly this state initialization can move out of the constructor.

src/components/suggest/suggest_input.js

src/components/suggest/suggest_item.js

andreadelrio · 2019-09-11T18:07:16Z

@chandlerprall thanks for your review. I've made changes following your suggestions.

chandlerprall

LGTM! Pulled locally and tested in docs

cchaos · 2019-09-11T20:18:45Z

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

-      customLabel: '',
-    };
-  }
+  state = {


@chandlerprall Should all the states have been pulled out of the constructor?

Yep! This change is great to see

snide · 2019-09-11T20:59:07Z

This will need a changelog update, but is now safe to merge. Congrats 🎉

snide · 2019-09-13T15:01:03Z

@andreadelrio let's get this in 🚀

flaviolivolsi · 2019-11-20T09:27:37Z

src/components/suggest/suggest.js

+
+    const suggestionList = suggestions.map((item, index) => (
+      <EuiSuggestItem
+        type={item.type}


className is not mapped here. Shall I submit a PR? @andreadelrio

andreadelrio and others added 30 commits June 21, 2019 10:18

basic version works

64b2e95

props descriptions

1e5d2c9

added first basic version

259573e

added expandLongLabel

6f9bad3

removed some quotes

fe5f173

added some basic docs

fa19024

added layout to replace expandLongLabel

3185d9b

tests passing

e23f429

Merge pull request #1 from thompsongl/suggest-item

147487e

EuiSuggestItems tests pass

placed suggestItem import and export in correct order

4a2860f

some css fixes

0ab76c6

changed the way 'status' is handled'

9b4fdfa

fixed typo and renamed variables

1c39ecb

considering vis colors

091a19f

changes based on feedback

3e87f51

updated colors and added minor css changes

08197bd

basic version works

eb8e5e8

props descriptions

7ccf026

added expandLongLabel

c21843b

removed some quotes

b68f805

tests passing

b582011

added layout to replace expandLongLabel

418cba6

Merge pull request #1 from thompsongl/suggest-item

ac69d10

EuiSuggestItems tests pass

placed suggestItem import and export in correct order

7a0555b

some css fixes

d850644

considering vis colors

c0b57c7

changes based on feedback

e6cabe4

updated colors and added minor css changes

93f1e9b

Merge branch 'master' into suggest-item

56e3751

Merge branch 'suggest-item' of https://github.com/andreadelrio/eui in…

0a6f7c9

…to suggest-item

renamed props and added snippet

746e0e8

cchaos suggested changes Sep 4, 2019

View reviewed changes

andreadelrio added 3 commits September 5, 2019 14:48

suggest item now uses the button tag

c81b702

renamed class

1b5ec1b

fixed conflicts

0c59ec3

andreadelrio requested a review from cchaos September 5, 2019 23:32

cchaos reviewed Sep 6, 2019

View reviewed changes

andreadelrio added 2 commits September 6, 2019 15:26

small fixes

62f6b0f

fixed conflicts

fd7c070

andreadelrio requested a review from cchaos September 9, 2019 16:04

cchaos approved these changes Sep 9, 2019

View reviewed changes

andreadelrio requested a review from chandlerprall September 9, 2019 16:25

chandlerprall suggested changes Sep 11, 2019

View reviewed changes

andreadelrio added 2 commits September 11, 2019 10:41

cleaned up onstructors and binding at definition

de184ea

cl

a5a5cf9

andreadelrio requested a review from chandlerprall September 11, 2019 18:07

chandlerprall approved these changes Sep 11, 2019

View reviewed changes

cchaos reviewed Sep 11, 2019

View reviewed changes

snide mentioned this pull request Sep 12, 2019

Build Customized Search Box upon EUI #1126

Closed

cl

e04a84d

andreadelrio merged commit f5d0aa5 into elastic:master Sep 13, 2019

spong mentioned this pull request Sep 16, 2019

[SIEM] Migrate to new platform elastic/kibana#45831

Closed

26 tasks

thompsongl mentioned this pull request Sep 17, 2019

Put charts theme files back #2348

Merged

cchaos mentioned this pull request Sep 18, 2019

Upgrade EUI to 14.2.0 elastic/kibana#46075

Merged

1 task

flaviolivolsi reviewed Nov 20, 2019

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Suggest component #2270

Add Suggest component #2270

andreadelrio commented Aug 28, 2019 •

edited by snide

Loading

andreadelrio commented Sep 4, 2019

cchaos left a comment

cchaos Sep 4, 2019

andreadelrio commented Sep 6, 2019

cchaos left a comment

cchaos left a comment

chandlerprall Sep 11, 2019

andreadelrio commented Sep 11, 2019

chandlerprall left a comment

cchaos Sep 11, 2019

chandlerprall Sep 11, 2019

cchaos Sep 11, 2019

snide commented Sep 11, 2019

snide commented Sep 13, 2019

flaviolivolsi Nov 20, 2019

	content={tooltipContent}
	content={tooltipContent \|\| statusMap[status].tooltip}

Add Suggest component #2270

Add Suggest component #2270

Conversation

andreadelrio commented Aug 28, 2019 • edited by snide Loading

Summary

Checklist

andreadelrio commented Sep 4, 2019

cchaos left a comment

Choose a reason for hiding this comment

cchaos Sep 4, 2019

Choose a reason for hiding this comment

andreadelrio commented Sep 6, 2019

cchaos left a comment

Choose a reason for hiding this comment

cchaos left a comment

Choose a reason for hiding this comment

chandlerprall Sep 11, 2019

Choose a reason for hiding this comment

andreadelrio commented Sep 11, 2019

chandlerprall left a comment

Choose a reason for hiding this comment

cchaos Sep 11, 2019

Choose a reason for hiding this comment

chandlerprall Sep 11, 2019

Choose a reason for hiding this comment

cchaos Sep 11, 2019

Choose a reason for hiding this comment

snide commented Sep 11, 2019

snide commented Sep 13, 2019

flaviolivolsi Nov 20, 2019

Choose a reason for hiding this comment

andreadelrio commented Aug 28, 2019 •

edited by snide

Loading