[Metrics] Fix LensWrapper mark color regression#250619
Merged
justinkambic merged 2 commits intoelastic:mainfrom Jan 29, 2026
Merged
[Metrics] Fix LensWrapper mark color regression#250619justinkambic merged 2 commits intoelastic:mainfrom
justinkambic merged 2 commits intoelastic:mainfrom
Conversation
justinkambic
added
bug
Contributor
|
Pinging @elastic/obs-exploration-team (Team:obs-exploration) |
2 tasks
Contributor
💔 Build Failed
Failed CI StepsMetrics [docs]Async chunks
History |
kpatticha
approved these changes
Jan 28, 2026
Contributor
|
Starting backport for target branches: 9.3 https://github.com/elastic/kibana/actions/runs/21491142795 |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Jan 29, 2026
## Summary In elastic#249450 we added a `titleHighlight` prop to Lens. This allowed us to remove our custom header implementation in the Metrics panel and rely on core Lens for the panel titles. Unfortunately, this removed custom styling that matched our highlight feature with the underlying Discover style. We want to keep this consistent. This PR adds a CSS override for the `mark` elements within the metrics LensWrapper component, which will cause `EuiHighlight` to show the color consistent with Discover, `euiTheme.colors.textAccent`. ## Testing the PR Index some metrics data, then perform a search for some content in the panel header. ### Current (in main) <img width="1568" height="312" alt="image" src="https://github.com/user-attachments/assets/48433064-5b43-4406-b77d-a5075a37e9be" /> ### This PR branch <img width="1581" height="532" alt="image" src="https://github.com/user-attachments/assets/16847ed0-2c43-4576-9dc6-081e9e8758e4" /> (cherry picked from commit 35faed5)
Contributor
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Jan 29, 2026
) # Backport This will backport the following commits from `main` to `9.3`: - [[Metrics] Fix LensWrapper mark color regression (#250619)](#250619) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Justin Kambic","email":"jk@elastic.co"},"sourceCommit":{"committedDate":"2026-01-29T19:04:47Z","message":"[Metrics] Fix LensWrapper mark color regression (#250619)\n\n## Summary\n\nIn #249450 we added a\n`titleHighlight` prop to Lens. This allowed us to remove our custom\nheader implementation in the Metrics panel and rely on core Lens for the\npanel titles.\n\nUnfortunately, this removed custom styling that matched our highlight\nfeature with the underlying Discover style. We want to keep this\nconsistent.\n\nThis PR adds a CSS override for the `mark` elements within the metrics\nLensWrapper component, which will cause `EuiHighlight` to show the color\nconsistent with Discover, `euiTheme.colors.textAccent`.\n\n## Testing the PR\n\nIndex some metrics data, then perform a search for some content in the\npanel header.\n\n### Current (in main)\n\n<img width=\"1568\" height=\"312\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/48433064-5b43-4406-b77d-a5075a37e9be\"\n/>\n\n\n### This PR branch\n\n<img width=\"1581\" height=\"532\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/16847ed0-2c43-4576-9dc6-081e9e8758e4\"\n/>","sha":"35faed5408006214e99770c9fb2525c6150f32d9","branchLabelMapping":{"^v9.4.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","backport:version","v9.3.0","Team:obs-exploration","v9.4.0"],"title":"[Metrics] Fix LensWrapper mark color regression","number":250619,"url":"https://github.com/elastic/kibana/pull/250619","mergeCommit":{"message":"[Metrics] Fix LensWrapper mark color regression (#250619)\n\n## Summary\n\nIn #249450 we added a\n`titleHighlight` prop to Lens. This allowed us to remove our custom\nheader implementation in the Metrics panel and rely on core Lens for the\npanel titles.\n\nUnfortunately, this removed custom styling that matched our highlight\nfeature with the underlying Discover style. We want to keep this\nconsistent.\n\nThis PR adds a CSS override for the `mark` elements within the metrics\nLensWrapper component, which will cause `EuiHighlight` to show the color\nconsistent with Discover, `euiTheme.colors.textAccent`.\n\n## Testing the PR\n\nIndex some metrics data, then perform a search for some content in the\npanel header.\n\n### Current (in main)\n\n<img width=\"1568\" height=\"312\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/48433064-5b43-4406-b77d-a5075a37e9be\"\n/>\n\n\n### This PR branch\n\n<img width=\"1581\" height=\"532\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/16847ed0-2c43-4576-9dc6-081e9e8758e4\"\n/>","sha":"35faed5408006214e99770c9fb2525c6150f32d9"}},"sourceBranch":"main","suggestedTargetBranches":["9.3"],"targetPullRequestStates":[{"branch":"9.3","label":"v9.3.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.4.0","branchLabelMappingKey":"^v9.4.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/250619","number":250619,"mergeCommit":{"message":"[Metrics] Fix LensWrapper mark color regression (#250619)\n\n## Summary\n\nIn #249450 we added a\n`titleHighlight` prop to Lens. This allowed us to remove our custom\nheader implementation in the Metrics panel and rely on core Lens for the\npanel titles.\n\nUnfortunately, this removed custom styling that matched our highlight\nfeature with the underlying Discover style. We want to keep this\nconsistent.\n\nThis PR adds a CSS override for the `mark` elements within the metrics\nLensWrapper component, which will cause `EuiHighlight` to show the color\nconsistent with Discover, `euiTheme.colors.textAccent`.\n\n## Testing the PR\n\nIndex some metrics data, then perform a search for some content in the\npanel header.\n\n### Current (in main)\n\n<img width=\"1568\" height=\"312\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/48433064-5b43-4406-b77d-a5075a37e9be\"\n/>\n\n\n### This PR branch\n\n<img width=\"1581\" height=\"532\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/16847ed0-2c43-4576-9dc6-081e9e8758e4\"\n/>","sha":"35faed5408006214e99770c9fb2525c6150f32d9"}}]}] BACKPORT--> Co-authored-by: Justin Kambic <jk@elastic.co>
hannahbrooks
pushed a commit
to hannahbrooks/kibana
that referenced
this pull request
Jan 30, 2026
## Summary In elastic#249450 we added a `titleHighlight` prop to Lens. This allowed us to remove our custom header implementation in the Metrics panel and rely on core Lens for the panel titles. Unfortunately, this removed custom styling that matched our highlight feature with the underlying Discover style. We want to keep this consistent. This PR adds a CSS override for the `mark` elements within the metrics LensWrapper component, which will cause `EuiHighlight` to show the color consistent with Discover, `euiTheme.colors.textAccent`. ## Testing the PR Index some metrics data, then perform a search for some content in the panel header. ### Current (in main) <img width="1568" height="312" alt="image" src="https://github.com/user-attachments/assets/48433064-5b43-4406-b77d-a5075a37e9be" /> ### This PR branch <img width="1581" height="532" alt="image" src="https://github.com/user-attachments/assets/16847ed0-2c43-4576-9dc6-081e9e8758e4" />
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
In #249450 we added a
titleHighlightprop to Lens. This allowed us to remove our custom header implementation in the Metrics panel and rely on core Lens for the panel titles.Unfortunately, this removed custom styling that matched our highlight feature with the underlying Discover style. We want to keep this consistent.
This PR adds a CSS override for the
markelements within the metrics LensWrapper component, which will causeEuiHighlightto show the color consistent with Discover,euiTheme.colors.textAccent.Testing the PR
Index some metrics data, then perform a search for some content in the panel header.
Current (in main)
This PR branch