[UI Framework] Add AssistedInput.

[cjcenizal]

Provides functionality required by #10928. Fixes bugs created by #11287.

[snide]

@cjcenizal Minor css feedback. You might want to use that lighter shade blue in the dark version (the one for "Discover") just so it doesn't stand out as much.

[snide]

Minor comments on css vars.

[snide]

this is a global i think, prolly want to prefix it $globalFormPadding

[snide]

If you need this level of definition... horizontalPadding is probably more specific then sides

[snide]

can use $globalBorderRadius for the 4px.

[cjcenizal]

@snide Great call on the contrast. I updated this in a separate PR:

[Bargs]

@cjcenizal maybe I applied the classes wrong, but it seems like the input's padding isn't adjusted to account for the link, which leads to the query string overrunning the link text:

Thoughts on how to accomplish that since the link could be different lengths depending on where this component is used?

Also, we should probably wait on merging this until @tbragin has a chance to weigh in on the current solution in #10928 since she filed the original issue.

[cjcenizal]

@Bargs Yeah, I noted in the UI Framework docs that you have to customize the padding (the components don't have it built-in):

You have to specify right-side padding using a custom class or inline style to keep the input text from overlapping with the assistance content. Use em units for this padding so that it scales appropriately if the user changes their root font-size.

So we just need to create a class in Kibana for each use-case, e.g. "discoverSearchHelpLink", and apply it where it's needed.

[Bargs]

Ah cool, totally glazed over that. Works for me!

[cjcenizal]

@Bargs Thanks man! These components are pretty usable in different scenarios, so I can see use-cases for them beyond the original PR. I'll merge it for now. We can always remove the components later if we want.