Beta badge inner visual alignment

[ek-so]

Summary

• Current EuiBetaBadge looks slightly unbalanced in terms of text baseline: the label with uppercase letters by nature feels like being shifted a bit more towards the top of the badge, so I pulled it down very slightly.
• It also looks a bit too harsh when the text inside is bold, so I tried what if we make it semibold, and increase the font-size for smaller badge at the same time for better readability. This also makes the text better visually balanced with icon-only badge in terms of the line thickness.
  

[ek-so]

Hey team, before reviewing from a technical side I'd like to ask somebody from design side to check the visual part and my considerations. @MichaelMarcialis @ryankeairns what are your thoughts?

[MichaelMarcialis]

Hey team, before reviewing from a technical side I'd like to ask somebody from design side to check the visual part and my considerations. @MichaelMarcialis @ryankeairns what are your thoughts?

I think this looks great visually. It's a small but noticeable improvement.

[mgadewoll]

Minute alignment is tricky as browsers handle sub-pixels differently. One browser might round a 0.4px offset to 0.5px, another to 0 or 1px or not round at all. It won't always look as expected.

See this comparison:

• Chrome (seems to round < 0.5 to 0 and > 0.5 to 1)

Screen.Recording.2025-01-07.at.14.49.05.mov

Screen.Recording.2025-01-08.at.10.20.04.mov

• Firefox (seems to round > 0 to 1px)

Screen.Recording.2025-01-07.at.14.49.40.mov

Screen.Recording.2025-01-08.at.10.18.29.mov

Based on this, I think it doesn't make sense to try adjust based on sub-pixels. According to these changes we could just add 1px padding-top for m size and nothing for s.
I'm afraid we'll generally have to accept that it won't look perfectly aligned in all scenarios 🙈

[mgadewoll]

I'm really not a fan of using magic numbers or static values here 🙈
I do like that you're adding a height to the badge and with that the line-height is not really that important anymore, we could just use the same height.

What I'm thinking

// simplified code

const badgeSizes = {
    m: euiTheme.size.l,
    s: mathWithUnits(euiTheme.size.base, (x) => x * 1.25),
};

euiBetaBadge: {
  m: css`
      line-height: ${badgeSizes.m};
  `,
  s: css`
      line-height: ${badgeSizes.s};
  `,

...

  badgeSizes: {
    default: {
        m: `
          ${logicalCSS('height', badgeSizes.m)}
        `,
        s: `
          ${logicalCSS('height', badgeSizes.s)}
    },
   }
 }

[kyrspl]

@mgadewoll - following up on your comment regarding various browsers:
Does it make sense to align specifically for each major browser and have a general fallback?

Badges are used so extensively across our UIs that this minute change may make a bigger difference across the board.

[mgadewoll]

@mgadewoll - following up on your comment regarding various browsers: Does it make sense to align specifically for each major browser and have a general fallback?

Badges are used so extensively across our UIs that this minute change may make a bigger difference across the board.

@kyrspl I would vote against it. Mainly because we don't even know which browser versions handle sub-pixel in what way (a new version might introduce changes) or how they handle font rendering.
Trying to adjust for browsers specifically will introduce complexity that's - imho - an overkill for this change and the impact.

While I understand it's not looking perfect, I'm wondering if it's mostly something our eyes notice more than a users' 😅
But I can spend a bit more time to check if I can propose an alternative.

[kyrspl]

> a new version might introduce changes
That's something i didn't consider. Makes sense not to make it more complex than it has to be

[ek-so]

@mgadewoll thanks again for looking into this! After our conversation, I removed 1px padding.
It seems there's really no big difference in all the possible solutions if we can't do minute alignment.
So the scope is:

• Make text slightly less bold
• Introduce strictly defined height for all badges
• Increase font size for smaller badge for better readibility

[mgadewoll]

🚢 🐈‍⬛ The changes are looking good to me. 👍
Thanks for contributing! 🎉

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_8255/
• Storybook: https://eui.elastic.co/pr_8255/storybook
• New docs: https://eui.elastic.co/pr_8255/new-docs

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: e0982e9

History

• 💚 Build #3312 succeeded 434d200
• 💚 Build #3310 succeeded aefac66
• 💔 Build #3309 failed 99e0d71
• 💚 Build #3306 succeeded 0223c75
• 💚 Build #3294 succeeded 2ffcf43
• 💔 Build #3292 failed 9886cb7