[New] EuiBadgeGroup component #2942
Conversation
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_2942/ |
There was a problem hiding this comment.
This PR looks great! 🎉
Tested on https://eui.elastic.co/pr_2942/#/display/badge and everything seems working fine. Tried with different screen sizes and the badge with the long title truncates properly.
I also reviewed all the code and I only suggest a minor change on the changelog.md file.
|
@miukimiu So I also just realized that the tracking on this branch got messed up somehow. My changes to the docs never got pushed. So the docs examples/code are different now, if you wouldn't mind having another look just at the docs portion. |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_2942/ |
Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>
Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>
Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>
and got rid of wrap and responsive options.
Updated the filter bar example
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_2942/ |
There was a problem hiding this comment.
Ran through this to double check the changes @chandlerprall asked for were made. Also checked over the code and ran locally. Looks safe to merge.
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_2942/ |
Piggy backing off of #2921
I moved the component into a sub-folder of
badge/, fixed up the CSS and removed a few props.As approached this I thought we'd want to enable options like optional wrapping and responsive behavior like EuiFlexGroup. But when I started laying these out I realized it didn't make sense for either of those to be turned off. No wrapping didn't make much sense and was proving difficult to display each badge.
Therefore, the component just adds some proper margins via
gutterSize.I modified the truncation example to use the EuiBadgeGroup for the docs portion and also updated the Filter Bar pattern (Saved queries & filters example) which is similar to the patterns where this functionality is needed.
Fixes : #2871
Checklist
[ ] Checked for breaking changes and labeled appropriately[ ] Checked for accessibility including keyboard-only and screenreader modes