Use EuiBadge for combobox pilling #2
Conversation
|
Also did some minor cleanup of the grouping to make it pop a bit more.
|
|
Added the colors to the dropdown too.
|
|
Thanks for doing this @snide! Looks great. I'll review the code and merge this in today. |
There was a problem hiding this comment.
This is awesome. I think everything looks great, but I think we should either revert the commit that added colors to the options (c35553c), or adjust it so that we have a EuiSwatch component or something similar which can support the different colors you want to show. Then we can merge this and I'll add a renderOption prop to EuiComboBox so that consumers can specify how each option renders. I'll update the example you've added to use this prop with EuiSwatch, to result in the same thing you have here. Wdyt?
|
@cjcenizal I can do that. I won't get to it till the afternoon though if that's ok. |
|
Meaning I can make the swatch its own component. Where do you think that should live though? One option I could also do it just make Lemme know and I'll set it up. |
|
Adding this functionality to EuiIcon sounds great, then we can just use EuiHealth in the |
|
OK @cjcenizal, I removed the object_list stuff and made Let me know if there's more you need. |
|
Looks good! Ready for me to merge this? |
|
@cjcenizal yeah, it's all done now. |
…#670) * use react-virtualized to virtualize combo box options list * use smaller width and height * include group label in matching options list * add better text for example description * dynamically set width and height * Massage group title padding. Truncate text instead of wrapping it. Add title attribute to options for usability. (#1) * remove console.log and fix spelling * fix problems with settig focus on active option * more keyboard accessiblity work * Combo box focus state and text overflow (#2) * Call setState instead of setting activeOptionIndex directly. * Clear activeOptionIndex when you click the input. * Prevent a lot of input from overflowing the container. * Allow disabled options to be focused but not selected. * add throttle to incrementActiveOptionIndex to avoid keypresses getting UI out of sync * rowHeight prop * remove unneeded const * fix spacing in example text, fix lodash import * skip disabled options when using keyboard * Revert "skip disabled options when using keyboard" This reverts commit 47fa3ef.
* fixed errors * updated changelog * Update CHANGELOG.md * added preview in docs-section * Update CHANGELOG.md * added example file * Fixing anchor and disabled styles, updating example (#2) Thanks @cchaos * added tests * Update CHANGELOG.md Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
Hey @cjcenizal. Didn't want to slow you down since you're on a tear. I went ahead and made the combo box pills utilize the badge component. That was the original idea when I rebuilt badges, and i just never updated my original prototype.
Should have the following benefits
I'll probably pass something similar to the actual list options as well, so the colors show there in the dropdown, but that part can always come in later. I just figured I'd work through the big piece before we went down a specific road.Did this too.Nice work with the styling btw. It's hard to get all the pixels to line up with all the wrapping / truncating and what not. Definitely one of the more pixel pushy components we have.