[UI Framework] Add AssistedInput. #11343
Conversation
cjcenizal
added
Team:Platform-Design
|
@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. |
|
|
||
| // Form | ||
| $formControlPaddingSides: 12px; | ||
| $formControlPadding: 3px $formControlPaddingSides 4px; |
There was a problem hiding this comment.
this is a global i think, prolly want to prefix it $globalFormPadding
| @@ -63,3 +63,7 @@ $toolBarHeight: 50px; | |||
| $toolBarPadding: 10px; | |||
| $toolBarSectionSpacing: 50px; | |||
| $toolBarItsemSpacing: 10px; | |||
|
|
|||
| // Form | |||
| $formControlPaddingSides: 12px; | |||
There was a problem hiding this comment.
If you need this level of definition... horizontalPadding is probably more specific then sides
| border-color: $localSearchBackgroundColor; | ||
| border-top-color: $localSearchBackgroundColor; | ||
| border-bottom-color: $localSearchBackgroundColor; | ||
| border-radius: 4px 0 0 4px; |
There was a problem hiding this comment.
can use $globalBorderRadius for the 4px.
|
@snide Great call on the contrast. I updated this in a separate PR:
|
cjcenizal
force-pushed
the
feature/assisted-field
branch
from
6a16c82
to
e1ab269
Compare
There was a problem hiding this comment.
@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.
|
@Bargs Yeah, I noted in the UI Framework docs that you have to customize the padding (the components don't have it built-in):
So we just need to create a class in Kibana for each use-case, e.g. "discoverSearchHelpLink", and apply it where it's needed. |
|
Ah cool, totally glazed over that. Works for me! |
|
@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. |
* Add AssistedInput component. * Add missing .kuiLocalSearchSelect class. Add AssistedInput to LocalNav example.
Provides functionality required by #10928. Fixes bugs created by #11287.