Add iconType and disableLanguageSwitcher options to QueryStringInput
#83700
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jen-huang
added
Feature:Query Bar
|
Pinging @elastic/kibana-app-arch (Team:AppArch) |
Merged
snide
approved these changes
Nov 18, 2020
...ment/plugins/data/public/kibana-plugin-plugins-data-public.querystringinputprops.icontype.md
Show resolved
Hide resolved
...ta/public/kibana-plugin-plugins-data-public.querystringinputprops.disablelanguageswitcher.md
Show resolved
Hide resolved
|
@elasticmachine merge upstream |
lizozom
reviewed
Nov 22, 2020
|
@elasticmachine merge upstream |
💚 Build SucceededMetrics [docs]Async chunks
Page load bundle
History
To update your PR or re-run it, just comment with: |
I'd keep it off by default. There's already a lot of icons around in the default and the placeholder gives context. |
lizozom
approved these changes
Nov 23, 2020
jen-huang
added a commit
that referenced
this pull request
Nov 23, 2020
…nput` (#83700) (#84097) * Add iconType and disableLanguageSwitcher options to QueryStringInput * Remove unnecessary span, add tests * Update docs * Adjust suggestions offset * Add comment Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds new props to
QueryStringInputcomponent:iconType: stringto show an icon in front of the input fielddisableLanguageSwitcher: booleanto hide the language switcher at the end of the input fieldBoth new props are optional. Default behavior of the component is not changed (no icon, and visible language switcher).
I had to make some border styling adjustments to maintain the border when there is multiline input but not show a right-side border when language switcher is disabled. The previous styling had a
translateX(-1)on the input, so the right-side border was always visible. With these changes, that transform was removed, but the border styling differs minimally from the original implementation in #70140.The use case for these props came up in #83356, where we implemented a feature that requires a query bar with suggestions that is locked to KQL and design spec included a search icon be present.
HQ screenshots to compare styling: with icon and language switcher present to illustrate input boundaries
Low quality gifs showing behavior
With icon and language switcher disabled:
With only icon:
With only language switcher disabled:
Default behavior:
Checklist