Skip to content

feat(metric): add secondary badge text color#2799

Merged
maryam-saeidi merged 4 commits intoelastic:mainfrom
maryam-saeidi:kibana-251614-metric-badge-text-color
Mar 3, 2026
Merged

feat(metric): add secondary badge text color#2799
maryam-saeidi merged 4 commits intoelastic:mainfrom
maryam-saeidi:kibana-251614-metric-badge-text-color

Conversation

@maryam-saeidi
Copy link
Copy Markdown
Member

@maryam-saeidi maryam-saeidi commented Mar 2, 2026 •
edited
Loading

Summary

EUI badge styling is moving to light background + colored text, and Lens needs elastic-charts’ resizable metric badge to support this pattern consistently. See elastic/kibana#251614.

Details

  • Adds badgeTextColor?: Color to SecondaryMetricProps so metric secondary badges can explicitly control text color (in addition to background).
  • Updates the metric layout Storybook example to use explicit TREND and COMPLEMENTARY palette background/text pairs based on EUI light theme tokens. (As shown below)
image

Issues

Related to elastic/kibana#251614

Checklist

  • The proper chart type label has been added (e.g. :xy, :partition)
  • All related issues have been linked (i.e. closes #123, fixes #123)
  • New public API exports have been added to packages/charts/src/index.ts
  • Unit tests have been added or updated to match the most common scenarios
  • 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)

@maryam-saeidi
feat(metric): add secondary badge text color
797210b 
Expose `badgeTextColor` on `SecondaryMetricProps` and thread it through the metric badge rendering.
Update the metric layout story to map TREND and COMPLEMENTARY selections to explicit EUI light theme background/text pairs.

Made-with: Cursor
@maryam-saeidi
Set text color true by default in storybook
211649a
@maryam-saeidi maryam-saeidi self-assigned this Mar 2, 2026
@maryam-saeidi maryam-saeidi added the :metric Related to Metric chart label Mar 2, 2026
@maryam-saeidi
Copy link
Copy Markdown
Member Author

maryam-saeidi commented Mar 2, 2026

buildkite update vrt

@mariairiartef mariairiartef self-requested a review March 2, 2026 16:45
mariairiartef
mariairiartef reviewed Mar 3, 2026
View reviewed changes
mariairiartef
mariairiartef approved these changes Mar 3, 2026
View reviewed changes
Copy link
Copy Markdown
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!

@maryam-saeidi
Copy link
Copy Markdown
Member Author

maryam-saeidi commented Mar 3, 2026

buildkite build this

1 similar comment
@markov00
Copy link
Copy Markdown
Collaborator

markov00 commented Mar 3, 2026

buildkite build this

@maryam-saeidi maryam-saeidi enabled auto-merge (squash) March 3, 2026 17:50
@elastic-datavis
Copy link
Copy Markdown
Contributor

elastic-datavis bot commented Mar 3, 2026

✅ Successful Deployment (build#73) - a3ee478

@maryam-saeidi maryam-saeidi merged commit 5c765e8 into elastic:main Mar 3, 2026
14 checks passed
@maryam-saeidi maryam-saeidi deleted the kibana-251614-metric-badge-text-color branch March 3, 2026 18:06
nickofthyme pushed a commit that referenced this pull request Mar 3, 2026
@semantic-release-bot
chore(release): 71.3.0 [skip ci]
0c96e34 
# [71.3.0](v71.2.0...v71.3.0) (2026-03-03)

### Features

* **metric:** add secondary badge text color ([#2799](#2799)) ([5c765e8](5c765e8))
* **metric:** expose medium (500) title font-weight in Metric chart ([#2792](#2792)) ([c582e81](c582e81))
@maryam-saeidi maryam-saeidi mentioned this pull request Mar 3, 2026
Merged
maryam-saeidi added a commit to elastic/kibana that referenced this pull request Mar 3, 2026
@maryam-saeidi
Upgrade dependency @elastic/charts to v71.3.0 (#255853)
5734c6b 
## Summary

This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [@elastic/charts](https://togithub.com/elastic/elastic-charts) |
dependencies | minor | [`71.2.0` ->
`71.3.0`](elastic/elastic-charts@v71.2.0...v71.3.0)
|


### Release Notes
##
[71.3.0](elastic/elastic-charts@v71.2.0...v71.3.0)
(2026-03-03)


### Features

* **metric:** add secondary badge text color
([#2799](elastic/elastic-charts#2799))
([5c765e8](elastic/elastic-charts@5c765e8))
* **metric:** expose medium (500) title font-weight in Metric chart
([#2792](elastic/elastic-charts#2792))
([c582e81](elastic/elastic-charts@c582e81))
rbrtj pushed a commit to rbrtj/kibana that referenced this pull request Mar 5, 2026
@maryam-saeidi @rbrtj
Upgrade dependency @elastic/charts to v71.3.0 (elastic#255853)
1cc0f9c 
## Summary

This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [@elastic/charts](https://togithub.com/elastic/elastic-charts) |
dependencies | minor | [`71.2.0` ->
`71.3.0`](elastic/elastic-charts@v71.2.0...v71.3.0)
|


### Release Notes
##
[71.3.0](elastic/elastic-charts@v71.2.0...v71.3.0)
(2026-03-03)


### Features

* **metric:** add secondary badge text color
([elastic#2799](elastic/elastic-charts#2799))
([5c765e8](elastic/elastic-charts@5c765e8))
* **metric:** expose medium (500) title font-weight in Metric chart
([elastic#2792](elastic/elastic-charts#2792))
([c582e81](elastic/elastic-charts@c582e81))
DennisKo pushed a commit to DennisKo/kibana that referenced this pull request Mar 6, 2026
@maryam-saeidi @DennisKo
Upgrade dependency @elastic/charts to v71.3.0 (elastic#255853)
5dcc98b 
## Summary

This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [@elastic/charts](https://togithub.com/elastic/elastic-charts) |
dependencies | minor | [`71.2.0` ->
`71.3.0`](elastic/elastic-charts@v71.2.0...v71.3.0)
|


### Release Notes
##
[71.3.0](elastic/elastic-charts@v71.2.0...v71.3.0)
(2026-03-03)


### Features

* **metric:** add secondary badge text color
([elastic#2799](elastic/elastic-charts#2799))
([5c765e8](elastic/elastic-charts@5c765e8))
* **metric:** expose medium (500) title font-weight in Metric chart
([elastic#2792](elastic/elastic-charts#2792))
([c582e81](elastic/elastic-charts@c582e81))
qn895 pushed a commit to qn895/kibana that referenced this pull request Mar 11, 2026
@maryam-saeidi @qn895
Upgrade dependency @elastic/charts to v71.3.0 (elastic#255853)
a2f485a 
## Summary

This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [@elastic/charts](https://togithub.com/elastic/elastic-charts) |
dependencies | minor | [`71.2.0` ->
`71.3.0`](elastic/elastic-charts@v71.2.0...v71.3.0)
|


### Release Notes
##
[71.3.0](elastic/elastic-charts@v71.2.0...v71.3.0)
(2026-03-03)


### Features

* **metric:** add secondary badge text color
([elastic#2799](elastic/elastic-charts#2799))
([5c765e8](elastic/elastic-charts@5c765e8))
* **metric:** expose medium (500) title font-weight in Metric chart
([elastic#2792](elastic/elastic-charts#2792))
([c582e81](elastic/elastic-charts@c582e81))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mariairiartef mariairiartef mariairiartef approved these changes

Assignees

@maryam-saeidi maryam-saeidi

Labels

:metric Related to Metric chart

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@maryam-saeidi @markov00 @mariairiartef