Skip to content

Comments

fix(metric): update badge to pill shape with adjusted padding#2786

Open
maryam-saeidi wants to merge 2 commits intoelastic:mainfrom
maryam-saeidi:kibana-251614-update-badge-radius
Open

fix(metric): update badge to pill shape with adjusted padding#2786
maryam-saeidi wants to merge 2 commits intoelastic:mainfrom
maryam-saeidi:kibana-251614-update-badge-radius

Conversation

@maryam-saeidi
Copy link
Member

@maryam-saeidi maryam-saeidi commented Feb 19, 2026

Summary

The metric badge now uses a pill-shaped border radius and updated padding to match the latest EUI badge styling. This provides a more elegant and consistent look for the secondary metric badge in metric charts.

image

Details

  • Updated border-radius from 2px to 9999px (pill shape, CSS clamps to half the badge height)
  • Added 2px vertical padding (padding-block) and 2px additional horizontal padding (padding-inline: 10px, up from 8px)
  • Updated the badge height calculation in the layout engine to account for the new vertical padding, ensuring correct responsive behavior when the metric panel is small and elements need to be hidden to fit

Issues

Related to elastic/kibana#251614

Checklist

  • The proper chart type label has been added (e.g. :xy, :partition)
  • The proper feature labels have been added (e.g. :interactions, :axis)
  • All related issues have been linked (i.e. closes #123, fixes #123)
  • The proper documentation and/or storybook story has been added or updated
  • The code has been checked for cross-browser compatibility (Chrome, Firefox, Safari, Edge)
  • Visual changes have been tested with light and dark themes

Match EUI badge style: use pill-shaped border-radius, add 2px
vertical padding and 2px additional horizontal padding. Update
layout height calculation to account for the new padding.

Co-authored-by: Cursor <cursoragent@cursor.com>
@maryam-saeidi maryam-saeidi self-assigned this Feb 19, 2026
@maryam-saeidi maryam-saeidi added enhancement New feature or request :metric Related to Metric chart :chart Chart element related issue labels Feb 19, 2026
@maryam-saeidi maryam-saeidi linked an issue Feb 19, 2026 that may be closed by this pull request
@maryam-saeidi
Copy link
Member Author

buildkite update vrt

@elastic-datavis
Copy link
Contributor

Copy link
Contributor

@mariairiartef mariairiartef left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

:chart Chart element related issue enhancement New feature or request :metric Related to Metric chart

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Lens] Improve badge style for metrics trends

2 participants