Bolder, smaller badges with onclick events and custom colors

[snide]

This changes the visuals of badges to be a little bolder with a smaller footprint.

TODO:

• Make prop switch between anchor, span or button tags.
• Add iconOnClick prop for onclicks on the icon itself (closing for tags / pills...etc).
• Allow custom hex to be passed as color.
• Document how to use EuiFlexGroup to prevent smooshed second line wrapping in tables.

[uboness]

Sorry to bring this up here... But why is this component named "badge".. The more common term for this is a "pill". A badge is usually a... well... a badge you attach/place on other components (like the little number that is places on the email icon indicating how many unread emails you have in your mailbox.... or a "fork me" badge on an open source web page)

[snide]

@uboness I try to stick to convention when I can and usually look at the "Big Two" when considering naming. While similar "Pills" normally describe input level or navigational elements (A "pill bar" for example). Both Bootstrap and Foundation use the badge terminology.

Our usage is definitely in the "badge" vein.

• https://getbootstrap.com/docs/4.0/components/badge/
• https://foundation.zurb.com/sites/docs/badge.html

Pills used for navigation terminology

• https://getbootstrap.com/docs/4.0/components/navs/#pills

[snide]

I'll admit the naming is murky out in the wild across all these systems. I think the terms are fairly synonymous in most cases.

[snide]

Hilariously, "pill" looks sometimes to be used to describe the border-radius. Circular borders are pills, and squared ones are badges.

Welcome to frontend?

In the world of Bootstrap, you can even have Badge-Pills! Which goes to show you that it must have been a heated topic 😄

[uboness]

naming is and will always be hard.. the way I look at it - search google images for these terms and get a feel of what's more common the not:

badge ui - https://images.google.com/?q=badge%20ui
pill ui - https://images.google.com/?q=pill%20ui
tag ui - https://images.google.com/?q=tag%20ui

from the above, as I expected, a badge more commonly serves as an attachment to another component or to the page. Interestingly enough though, pill is not really a thing, and tag seems to be the one things that most commonly represent what we're building here... so maybe the right term is simply tag?

[nreese]

lgtm

Thanks for making these improvements.

[cchaos]

LGTM, just a small typo in the docs.

[cchaos]

"...icon within the badge."

[cchaos]

Clever, I didn't realize that these comments were then translated into the Notes section of the props documentation.

[snide]

@uboness Merge, gonna keep named how they are mostly because they're already out in the wild in use in Cloud / Kibana and causes us less headache. We can always switch it around later, but people haven't had too much trouble finding them.