Beta badge inner visual alignment by ek-so · Pull Request #8255 · elastic/eui

ek-so · 2024-12-30T12:42:41Z

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 · 2024-12-30T18:02:46Z

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 · 2025-01-06T14:37:42Z

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 · 2025-01-08T09:31:08Z

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 · 2025-01-08T09:28:51Z

packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts

    m: css`
      font-size: ${euiFontSizeFromScale('xs', euiTheme)};
-      line-height: ${euiTheme.size.l};
+      line-height: ${mathWithUnits(euiTheme.size.l, (x) => x * 0.96)};


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 · 2025-01-08T09:51:03Z

@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 · 2025-01-08T10:28:57Z

@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 · 2025-01-08T10:38:58Z

> 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 · 2025-01-08T18:05:37Z

@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

…kso-beta-badge

mgadewoll

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

kibanamachine · 2025-01-09T13:01:27Z

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 · 2025-01-09T13:02:47Z

💚 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

`99.0.0-borealis.1` ⏩ `99.1.0-borealis.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- # `@elastic/eui` ## [`v99.1.0`](https://github.com/elastic/eui/releases/v99.1.0) - Updated `EuiColorPalettePicker` - adds `append` to `EuiColorPalettePickerPaletteProps` to support appending custom content to the title ([#8208](elastic/eui#8208)) - Updated font-weight and font-size of `EuiBetaBadge`s to improve legibility ([#8255](elastic/eui#8255)) - Added suppport for `titleColor` variant `warning` on `EuiStat` ([#8278](elastic/eui#8278)) # `@elastic/eui-theme-borealis` ## `v0.0.9` - [Visual Refresh] Support new theme tokens on JSON exports ([#8277](elastic/eui#8277)) - Remap few colors for EuiLoadingSpinner and EuiLoadingChart ([#8276](elastic/eui#8276)) - [Visual Refresh] Update floating border on EuiPanel ([#8270](elastic/eui#8270)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: nickofthyme <nicholas.partridge@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

`98.2.2-borealis.0` ⏩ `99.3.0-classic.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## [`v99.3.0`](https://github.com/elastic/eui/releases/v99.3.0) - Updated table components to support adding tooltips to header cells ([#8273](elastic/eui#8273)) - Added `columns.nameTooltip` on `EuiBasicTable` - Added `tooltipProps` prop on `EuiTableHeaderCell` - Added `accent` color option to `EuiCallOut` ([#8303](elastic/eui#8303)) - Updated `EuiInlineEditForm`'s `onCancel` prop type to allow uncontrolled mode usage ([#8307](elastic/eui#8307)) - Added ES|QL syntax highlighting for `EuiCode`, `EuiCodeBlock`, `EuiMarkdownFormat`, and `EuiMarkdownEditor` components. ([#8317](elastic/eui#8317)) - Updated `EuiAccordion` to prevent content from being transitioned on initial render when `initialIsOpen=true` ([#8327](elastic/eui#8327)) **Bug fixes** - Fixed a bug on `EuiSuperDatePicker` where pasting an absolute date would append the date instead of replace it ([#8311](elastic/eui#8311)) ## [`v99.2.0`](https://github.com/elastic/eui/releases/v99.2.0) - Changed `EuiFieldText` styles to prioritize `disabled` styling over `readonly`. ([#8271](elastic/eui#8271)) - Added `plugs` and `web` glyphs to `EuiIcon` ([#8285](elastic/eui#8285)) - Update `title` on `EuiColorPalettePickerPaletteProps` to be optional ([#8289](elastic/eui#8289)) **Bug fixes** - Fixed an issue with EuiDataGrid with auto row height resulting in a table of 0 height ([#8251](elastic/eui#8251)) - Fixed `disabled` behavior of `EuiFieldText` to prevent input changes. ([#8271](elastic/eui#8271)) ## [`v99.1.0`](https://github.com/elastic/eui/releases/v99.1.0) - Updated `EuiColorPalettePicker` - adds `append` to `EuiColorPalettePickerPaletteProps` to support appending custom content to the title ([#8208](elastic/eui#8208)) - Updated font-weight and font-size of `EuiBetaBadge`s to improve legibility ([#8255](elastic/eui#8255)) - Added support for `titleColor` variant `warning` on `EuiStat` ([#8278](elastic/eui#8278)) ## [`v99.0.0`](https://github.com/elastic/eui/releases/v99.0.0) - Added two new icons: `createGenericJob` and `createGeoJob` ([#8248](elastic/eui#8248)) - Added new icon `section` ([#8261](elastic/eui#8261)) **Bug fixes** - Ensures that the `values` of `EuiI18n` used in `EuiPagination` use `key` attributes to prevent potential ["unique key" warnings](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key). ([#8243](elastic/eui#8243)) **Breaking changes** - Removed `EuiPopover`'s deprecated `hasDragDrop` prop. Use `usePortal` on any child `EuiDraggable` instead ([#8256](elastic/eui#8256)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Arturo Castillo Delgado <arturo.castillo@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

`98.2.2-borealis.0` ⏩ `99.3.0-classic.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## [`v99.3.0`](https://github.com/elastic/eui/releases/v99.3.0) - Updated table components to support adding tooltips to header cells ([elastic#8273](elastic/eui#8273)) - Added `columns.nameTooltip` on `EuiBasicTable` - Added `tooltipProps` prop on `EuiTableHeaderCell` - Added `accent` color option to `EuiCallOut` ([elastic#8303](elastic/eui#8303)) - Updated `EuiInlineEditForm`'s `onCancel` prop type to allow uncontrolled mode usage ([elastic#8307](elastic/eui#8307)) - Added ES|QL syntax highlighting for `EuiCode`, `EuiCodeBlock`, `EuiMarkdownFormat`, and `EuiMarkdownEditor` components. ([elastic#8317](elastic/eui#8317)) - Updated `EuiAccordion` to prevent content from being transitioned on initial render when `initialIsOpen=true` ([elastic#8327](elastic/eui#8327)) **Bug fixes** - Fixed a bug on `EuiSuperDatePicker` where pasting an absolute date would append the date instead of replace it ([elastic#8311](elastic/eui#8311)) ## [`v99.2.0`](https://github.com/elastic/eui/releases/v99.2.0) - Changed `EuiFieldText` styles to prioritize `disabled` styling over `readonly`. ([elastic#8271](elastic/eui#8271)) - Added `plugs` and `web` glyphs to `EuiIcon` ([elastic#8285](elastic/eui#8285)) - Update `title` on `EuiColorPalettePickerPaletteProps` to be optional ([elastic#8289](elastic/eui#8289)) **Bug fixes** - Fixed an issue with EuiDataGrid with auto row height resulting in a table of 0 height ([elastic#8251](elastic/eui#8251)) - Fixed `disabled` behavior of `EuiFieldText` to prevent input changes. ([elastic#8271](elastic/eui#8271)) ## [`v99.1.0`](https://github.com/elastic/eui/releases/v99.1.0) - Updated `EuiColorPalettePicker` - adds `append` to `EuiColorPalettePickerPaletteProps` to support appending custom content to the title ([elastic#8208](elastic/eui#8208)) - Updated font-weight and font-size of `EuiBetaBadge`s to improve legibility ([elastic#8255](elastic/eui#8255)) - Added support for `titleColor` variant `warning` on `EuiStat` ([elastic#8278](elastic/eui#8278)) ## [`v99.0.0`](https://github.com/elastic/eui/releases/v99.0.0) - Added two new icons: `createGenericJob` and `createGeoJob` ([elastic#8248](elastic/eui#8248)) - Added new icon `section` ([elastic#8261](elastic/eui#8261)) **Bug fixes** - Ensures that the `values` of `EuiI18n` used in `EuiPagination` use `key` attributes to prevent potential ["unique key" warnings](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key). ([elastic#8243](elastic/eui#8243)) **Breaking changes** - Removed `EuiPopover`'s deprecated `hasDragDrop` prop. Use `usePortal` on any child `EuiDraggable` instead ([elastic#8256](elastic/eui#8256)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Arturo Castillo Delgado <arturo.castillo@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

ek-so added 3 commits December 30, 2024 13:28

Badge spacing changes

0a92bd1

Slight update for bigger badge

b275d15

Slight change for smaller badge

368a487

ek-so added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Dec 30, 2024

ek-so marked this pull request as ready for review December 30, 2024 18:00

ek-so requested a review from a team as a code owner December 30, 2024 18:00

Update beta_badge.styles.ts

0ad802e

ek-so and others added 3 commits January 6, 2025 16:17

Apply height property in a right place

6a84fa9

Update beta_badge.styles.ts

9886cb7

Merge branch 'main' into ekso-beta-badge

2ffcf43

mgadewoll reviewed Jan 8, 2025

View reviewed changes

ek-so added 2 commits January 8, 2025 14:26

Updated according to suggestions

0223c75

Removed 1px padding

99e0d71

Merge branch 'main' into ekso-beta-badge

aefac66

mgadewoll removed the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Jan 9, 2025

ek-so added 3 commits January 9, 2025 12:17

Create 8255.md

960e954

Merge branch 'ekso-beta-badge' of https://github.com/ek-so/eui into e…

434d200

…kso-beta-badge

Update 8255.md

e0982e9

mgadewoll approved these changes Jan 9, 2025

View reviewed changes

mgadewoll enabled auto-merge (squash) January 9, 2025 12:55

mgadewoll merged commit 9959b18 into elastic:main Jan 9, 2025

ek-so deleted the ekso-beta-badge branch January 9, 2025 13:31

acstll mentioned this pull request Jan 22, 2025

Upgrade EUI to v99.1.0 elastic/kibana#207724

Merged

weronikaolejniczak pushed a commit to cee-chen/eui that referenced this pull request Feb 10, 2025

Beta badge inner visual alignment (elastic#8255)

c0fcab1

Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

tkajtoch mentioned this pull request Feb 20, 2025

[8.x] Upgrade EUI to v99.3.0-classic.0 elastic/kibana#211917

Merged

ek-so mentioned this pull request Dec 12, 2025

Enhance EuiBadge and deprecate EuiBetaBadge #9268

Closed

mgadewoll mentioned this pull request Apr 1, 2026

[EuiListItemLayout] Add internal, shared list item component #9530

Merged

37 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Beta badge inner visual alignment#8255

Beta badge inner visual alignment#8255
mgadewoll merged 13 commits intoelastic:mainfrom
ek-so:ekso-beta-badge

ek-so commented Dec 30, 2024 •

edited

Loading

Uh oh!

ek-so commented Dec 30, 2024

Uh oh!

MichaelMarcialis commented Jan 6, 2025

Uh oh!

mgadewoll commented Jan 8, 2025

Uh oh!

mgadewoll Jan 8, 2025

Uh oh!

kyrspl commented Jan 8, 2025

Uh oh!

mgadewoll commented Jan 8, 2025 •

edited

Loading

Uh oh!

kyrspl commented Jan 8, 2025

Uh oh!

ek-so commented Jan 8, 2025

Uh oh!

mgadewoll left a comment •

edited

Loading

Uh oh!

kibanamachine commented Jan 9, 2025

Uh oh!

elasticmachine commented Jan 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

ek-so commented Dec 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

ek-so commented Dec 30, 2024

Uh oh!

MichaelMarcialis commented Jan 6, 2025

Uh oh!

mgadewoll commented Jan 8, 2025

Uh oh!

mgadewoll Jan 8, 2025

Choose a reason for hiding this comment

Uh oh!

kyrspl commented Jan 8, 2025

Uh oh!

mgadewoll commented Jan 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kyrspl commented Jan 8, 2025

Uh oh!

ek-so commented Jan 8, 2025

Uh oh!

mgadewoll left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Jan 9, 2025

Uh oh!

elasticmachine commented Jan 9, 2025

💚 Build Succeeded

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

ek-so commented Dec 30, 2024 •

edited

Loading

mgadewoll commented Jan 8, 2025 •

edited

Loading

mgadewoll left a comment •

edited

Loading