Skip to content

[New] EuiBadgeGroup component#2942

Merged
cchaos merged 12 commits intoelastic:masterfrom
cchaos:badge_group
Mar 5, 2020
Merged

[New] EuiBadgeGroup component#2942
cchaos merged 12 commits intoelastic:masterfrom
cchaos:badge_group

Conversation

@cchaos
Copy link
Contributor

@cchaos cchaos commented Feb 27, 2020

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.

Screen Shot 2020-02-27 at 17 05 36 PM

Screen Shot 2020-02-27 at 17 06 10 PM

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.

Screen Shot 2020-02-27 at 16 57 11 PM

Fixes : #2871

Checklist

  • Check against all themes for compatibility in both light and dark modes
  • Checked in mobile
  • Checked in IE11 and Firefox
  • Props have proper autodocs
  • Added documentation examples
  • Added or updated jest tests
  • [ ] Checked for breaking changes and labeled appropriately
  • [ ] Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately

@cchaos cchaos mentioned this pull request Feb 27, 2020
9 tasks
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_2942/

Copy link
Contributor

@elizabetdev elizabetdev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@cchaos
Copy link
Contributor Author

cchaos commented Feb 28, 2020

@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.

@cchaos cchaos requested a review from elizabetdev February 28, 2020 14:44
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_2942/

Copy link
Contributor

@elizabetdev elizabetdev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I looked again at the docs and LGTM! 🎉

Copy link
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need to export the new props definition as well, otherwise this looks good

anishagg17 and others added 10 commits March 4, 2020 16:58
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.
@cchaos cchaos requested a review from chandlerprall March 4, 2020 22:06
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_2942/

Copy link
Contributor

@snide snide left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@cchaos cchaos merged commit c954597 into elastic:master Mar 5, 2020
@cchaos cchaos deleted the badge_group branch March 5, 2020 15:58
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_2942/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create a EuiBadgeGroup component

6 participants