[EuiComboBox] Truncate long placeholder text with ellipsis #4210
Conversation
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_4210/ |
There was a problem hiding this comment.
Thanks for getting this one started @banderror !
We do actually have some SASS utility mixins to help with both adding the appropriate padding to accommodate for the arrow (instead of hard-coded px values) and truncation. I've pushed a commit for you.
We also needed to account for when the component was loading too, so I used the same mixin for those states.
Since this is style only, there's only a few checklist items to perform (I'll cross out the ones that don't apply). The main one is to add a Changelog entry. See the file for formatting. You can put this one under the Bug Fixes header and be sure to use past tense.
|
Another solution to your placeholder issue is to remove the "Please" intro in the placeholder. That'll make the text more succinct. |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_4210/ |
banderror
force-pushed
the
fix-combobox-placeholder
branch
from
f0cb248 to
b10650f
Compare
|
@cchaos I addressed all your suggestions, please take a look. Thank you for your help, super appreciate it! |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_4210/ |
banderror
force-pushed
the
fix-combobox-placeholder
branch
from
fb147b5 to
5a32d33
Compare
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_4210/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_4210/ |
Summary
Addresses the following issue in the
security_solutionplugin's UI: elastic/kibana#81284Basically there's a bunch of comboboxes which have long placeholders, and here's how it looks like:
I added a quick fix: truncation with CSS.
Screenshots
http://localhost:8030/#/forms/combo-box
Before:
After:
Checklist
[ ] Checked in mobile[ ] Props have proper autodocs[ ] Added documentation[ ] Checked Code Sandbox works for the any docs examples[ ] Added or updated jest tests[ ] Checked for breaking changes and labeled appropriately[ ] Checked for accessibility including keyboard-only and screenreader modes