Enhance `EuiBadge` and deprecate `EuiBetaBadge`

[ek-so]

Problem

• Badges that we typically use now in Kibana tend to be too prominent, and do not allow more nuanced accents, which makes the pages and other interface elements look more cluttered
• They are quite close to the buttons (same squared form), which is not a problem per se, but it would be nice to be bale to distinguish those 2 elements more clearly
• Beta badges look outdated. because of the all-caps text, especially since it's used sometimes with long labels (like tech preview), and because it can't really be properly visually aligned. Those badges are also missing certain color variants we need ("New" badge that should be primary color), and can't be used together with regular badges because of inconsistency.

Proposed solution:

1. Enrich the number of variants offered by EuiBadge with "light" color combination (lighter background, darker text)
2. Change the form of the badge (radii) to be circled
3. Change the layout to look more balanced in case when there's only text and/or icons:

Figma with proposed changes

---

4. Find and replace EuiBetaBadge usages with the new unified component, and deprecate EuiBetaBadge.
   A note regarding beta and tech preview badges change: yes, they become similar to regular badges, but they have unique text labels and icons, and they are used in a standalone fashion in designated areas, not typically occupied by other badges. This change allows not only to preserve their original function, but also to consider more flexible and visually appealing color combination for "new" badge, that will be used alongside these badges.

5. When the code change is done, merge Figma branch into master too (either @ek-so or @JoseLuisGJ).

Open questions

• Should we make a light badge default version to make interface lighter and cleaner overall? (if so, we'll need to ask teams that are responsible for that to review their pages specifically for alerts and warning badges; although it won't break things per se, it might reduce a visual sense of urgency and impact UX therefore) — perhaps, make a test deployment for teams to check the change.

  Example of changing defaults

  

• Should we create an opinionated Kibana badge that will be used for tech preview, beta and new cases, but would be built on top of the universal badge?

[ryankeairns]

Let's consider the impact of that deprecation and whether it is worth the find-and-replace effort.
Conversely, we could simply update EuiBetaBadge to use new styles, correct?

I am reluctant to remove the opinionated 'API' that EUI beta badge provides. We could change what it produces, stylistically.

[ek-so]

@ryankeairns, as we discussed before, we could also create a higher level component on top of the new badge variations, that would be more opinionated (like AI button on top of EUI button), but without a need to rewrite all the same styles again. I'd be more in favour of the 2nd approach, but I guess we'll need an input from EUI folks on this. This also might mean that we have a kibana specific badge component built on top of simple EUI badge.

ps. I don't quite like the name "eui beta badge" tbh... maybe "version badge" would be better? In case we build a new one

[JasonStoltz]

Let's add the new light variants and make the sizing and style changes to badges and beta badges as a first step.

Let's consider the impact of that deprecation and whether it is worth the find-and-replace effort.

Let's leave the beta badge in place, just update the styles, avoid deprecation, renaming, or anything complicated, just focus on solving the immediate problem at hand.

Once that's in place, decide if we want to change the default

Once that's done and released, we can consider whether or not to make the light variant the default. I think we can defer that decision for now.

[JasonStoltz]

We could possibly deprecate beta badge for future removal, assuming that the same affect is achievable via the new variants.

[ek-so]

Hey @JasonStoltz! I'm not sure what your priorities are currently, but we talked with @yanwalton today, and overall, it would be nice if we could prioritize EUI badge work some time soon. Not super urgent still, but since it affects all the parts of the platform, including Agent Builder and New badge in the nav (it was blocked for now and not released, but it will get back to it in the NY), so it would be nice to have variants in place. THis is perhaps to add a little bit more weight to this task :)

[JasonStoltz]

@ek-so Created an issue in EUI's private repo for planning: https://github.com/elastic/eui-private/issues/493

Tentative plan it to tackle this first thing in January and target an EUI release of 1/19.