[Emotion] Convert EuiBadgeGroup, EuiBetaBadge, and EuiNotificationBadge

[cee-chen]

Summary

Follow up to #6224 - converts all remaining Sass in badge-adjacent components to Emotion. I recommend following along by commit and peeking at commit messages for more context.

Checklist

• Checked in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Checked Code Sandbox works for any docs examples
• Added or updated jest and cypress tests
• A changelog entry exists and is marked appropriately

- [ ] Props have proper autodocs and playground toggles
- [ ] Added documentation
- [ ] Checked for breaking changes and labeled appropriately
- [ ] Checked for accessibility including keyboard-only and screenreader modes
- [ ] Updated the Figma library counterpart

Things to look out for when moving styles

• Convert side specific padding, margin, and position to -inline and -block (Logical properties)
• Reduce specificity where possible (usually by reducing class name chaining)
• All animations or transitions are wrapped in euiCanAnimate
• Use gap property to add margin between items if using flex
• Delete any className maps if not being used in Kibana. If used in Kibana, consider converting to a data attribute instead
• Delete any Amsterdam override .scss files
• Can any still existing .js files be converted to TS? (e.g., docs files)

- [ ] Anything in the backlog that could be a quick fix for that component?
- [ ] Convert component-specific Sass vars to exported JS versions
- [ ] Convert global Sass vars to JS version like sizing

QA

• Does the output CSS match the previous CSS / as expected
• Does the rendered class read as expected
• shouldRenderCustomStyles() passes with parent component and any nested childProps (e.g. tooltipProps, buttonProps)

[cee-chen]

CCing @daveyholler in on this once, since he was pairing/following along as I worked on some of these - figured he might be curious to see the end result :)

[kibanamachine]

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

[elizabetdev]

This looks great @constancecchen! 🎉

I tested in Chrome, Safari, and, Firefox. I also looked into the code and I couldn't find any blocker.

But I have a few code suggestions. 👩🏽‍💻

[elizabetdev]

Instead of having the horizontal spaces between each EuiBetaBadge with a   what do you think of wrapping the colors.map() with a div with a gap: 0.5rem;?

<div
  css={css`
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  `}
>
  {colors.map((item, index) => (
    <div key={index}>
      <EuiBetaBadge />
      <EuiBetaBadge />
      <EuiBetaBadge />
      <EuiSpacer size="s" />
    </div>
  ))}
</div>;

[cee-chen]

I don't think this will work quite the way you expect because the gap will only apply to the immediate child divs and not to the grandchild EuiBetaBadges (meaning there will no longer be a slight horizontal gap).

To get this working with gap and without the  s I think we should use a grid (which I'm happy to play around with!)

[cee-chen]

9f81e53

[elizabetdev]

I noticed in CodeSandbox that still has the .scss this example doesn't get a circular EuiBetaBadge:

If I copy the new styles and add them in Chrome developer tool the beta badge doesn't get circular. So not sure if this issue keeps persisting with the new styles.

[cee-chen]

CodeSandbox doesn't update until our releases, so I can't say for sure. If the staging/local example works, I think this should work.

[elizabetdev]

If you look at the current version (https://elastic.github.io/eui/#/display/badge#beta-badge-type) it works in staging/local but it looks different in CodeSandbox. The beta badge with the lens icon doesn't get circular.

So I'm not sure this problem will persist. But we can take a look after this PR is merged and there's a new release.

[cee-chen]

let's wait until the release, it's a little too hard for me to debug right now with the different styles. If it persists after release I think I may have a solution however!

[elizabetdev]

Should this be less manual and we use instead a function to determine whether or not to use light or dark text against the given background color? We can use the isColorDark utility.

const textColor = (backgroundColor: any) => {
    return isColorDark(...hexToRgb(backgroundColor))
      ? euiTheme.colors.ghost
      : euiTheme.colors.ink;
  };

hollow: css`
      background-color: ${euiTheme.colors.emptyShade};
      color: ${textColor(euiTheme.colors.emptyShade)};
 `,

[cee-chen]

Sure! Personally I don't find a function significantly more useful/easier to read than a basic set of ternaries with the current set of color options, but it doesn't bother me either way and I can see the potential use if we add more colors in the future

[cee-chen]

e3ddcd0

Also it looks like we still need a ternary for the focus ring outline, since that doesn't really have the concept of a background color.

But overall on second thought I do think this DRY's out things a good amount. Thanks Elizabet!!

[kibanamachine]

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

[elizabetdev]

jenkins test this

[kibanamachine]

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