[Lens] Fix secondary metric styles to prevent wrapping#227234
[Lens] Fix secondary metric styles to prevent wrapping#227234mariairiartef merged 7 commits intoelastic:mainfrom
Conversation
|
Pinging @elastic/kibana-visualizations (Team:Visualizations) |
...orm/plugins/shared/chart_expressions/expression_metric/public/components/metric_vis.test.tsx
Outdated
Show resolved
Hide resolved
...orm/plugins/shared/chart_expressions/expression_metric/public/components/metric_vis.test.tsx
Outdated
Show resolved
Hide resolved
|
From the purely design/visual perspective everything seems to work fine! |
markov00
left a comment
There was a problem hiding this comment.
Tested locally works great!
💚 Build Succeeded
Metrics [docs]Async chunks
History
|
|
Starting backport for target branches: 8.19, 9.1 https://github.com/elastic/kibana/actions/runs/16262151325 |
Closes elastic#226208 ## Summary The secondary metric component stays on a single line with proper text overflow handling, while giving priority to the value/badge over the prefix when space is limited. <img width="1080" alt="Screenshot 2025-07-09 at 14 20 20" src="https://github.com/user-attachments/assets/dc6cc536-eb74-411d-9237-16ae6713e33e" /> #### The value/badge can take the whole width <img width="316" alt="Screenshot 2025-07-09 at 14 16 38" src="https://github.com/user-attachments/assets/1257b677-0983-43c3-a39f-ae038716651b" /> ### Checklist - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. (cherry picked from commit c238ede)
💔 Some backports could not be created
Note: Successful backport PRs will be merged automatically after passing CI. Manual backportTo create the backport manually run: Questions ?Please refer to the Backport tool documentation |
|
Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync. |
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
Closes elastic#226208 ## Summary The secondary metric component stays on a single line with proper text overflow handling, while giving priority to the value/badge over the prefix when space is limited. <img width="1080" alt="Screenshot 2025-07-09 at 14 20 20" src="https://github.com/user-attachments/assets/dc6cc536-eb74-411d-9237-16ae6713e33e" /> #### The value/badge can take the whole width <img width="316" alt="Screenshot 2025-07-09 at 14 16 38" src="https://github.com/user-attachments/assets/1257b677-0983-43c3-a39f-ae038716651b" /> ### Checklist - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. (cherry picked from commit c238ede) # Conflicts: # src/platform/plugins/shared/chart_expressions/expression_metric/public/components/secondary_metric.test.tsx
|
Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync. |
2 similar comments
|
Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync. |
|
Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync. |
… (#228188) # Backport This will backport the following commits from `main` to `8.19`: - [[Lens] Fix secondary metric styles to prevent wrapping (#227234)](#227234) <!--- Backport version: 10.0.1 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Maria Iriarte","email":"106958839+mariairiartef@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-07-14T08:39:53Z","message":"[Lens] Fix secondary metric styles to prevent wrapping (#227234)\n\nCloses https://github.com/elastic/kibana/issues/226208\n\n## Summary\n\nThe secondary metric component stays on a single line with proper text\noverflow handling, while giving priority to the value/badge over the\nprefix when space is limited.\n\n<img width=\"1080\" alt=\"Screenshot 2025-07-09 at 14 20 20\"\nsrc=\"https://github.com/user-attachments/assets/dc6cc536-eb74-411d-9237-16ae6713e33e\"\n/>\n\n#### The value/badge can take the whole width\n\n<img width=\"316\" alt=\"Screenshot 2025-07-09 at 14 16 38\"\nsrc=\"https://github.com/user-attachments/assets/1257b677-0983-43c3-a39f-ae038716651b\"\n/>\n\n\n### Checklist\n\n- [x] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n- [x] Review the [backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand apply applicable `backport:*` labels.","sha":"c238ede3d4ac816fce88d6c96ecc1f5445a6414a","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Team:Visualizations","Feature:Lens","backport missing","backport:version","v9.1.0","v8.19.0","v9.2.0"],"title":"[Lens] Fix secondary metric styles to prevent wrapping","number":227234,"url":"https://github.com/elastic/kibana/pull/227234","mergeCommit":{"message":"[Lens] Fix secondary metric styles to prevent wrapping (#227234)\n\nCloses https://github.com/elastic/kibana/issues/226208\n\n## Summary\n\nThe secondary metric component stays on a single line with proper text\noverflow handling, while giving priority to the value/badge over the\nprefix when space is limited.\n\n<img width=\"1080\" alt=\"Screenshot 2025-07-09 at 14 20 20\"\nsrc=\"https://github.com/user-attachments/assets/dc6cc536-eb74-411d-9237-16ae6713e33e\"\n/>\n\n#### The value/badge can take the whole width\n\n<img width=\"316\" alt=\"Screenshot 2025-07-09 at 14 16 38\"\nsrc=\"https://github.com/user-attachments/assets/1257b677-0983-43c3-a39f-ae038716651b\"\n/>\n\n\n### Checklist\n\n- [x] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n- [x] Review the [backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand apply applicable `backport:*` labels.","sha":"c238ede3d4ac816fce88d6c96ecc1f5445a6414a"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/227767","number":227767,"state":"OPEN"},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/227234","number":227234,"mergeCommit":{"message":"[Lens] Fix secondary metric styles to prevent wrapping (#227234)\n\nCloses https://github.com/elastic/kibana/issues/226208\n\n## Summary\n\nThe secondary metric component stays on a single line with proper text\noverflow handling, while giving priority to the value/badge over the\nprefix when space is limited.\n\n<img width=\"1080\" alt=\"Screenshot 2025-07-09 at 14 20 20\"\nsrc=\"https://github.com/user-attachments/assets/dc6cc536-eb74-411d-9237-16ae6713e33e\"\n/>\n\n#### The value/badge can take the whole width\n\n<img width=\"316\" alt=\"Screenshot 2025-07-09 at 14 16 38\"\nsrc=\"https://github.com/user-attachments/assets/1257b677-0983-43c3-a39f-ae038716651b\"\n/>\n\n\n### Checklist\n\n- [x] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n- [x] Review the [backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand apply applicable `backport:*` labels.","sha":"c238ede3d4ac816fce88d6c96ecc1f5445a6414a"}}]}] BACKPORT-->
|
Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync. |
2 similar comments
|
Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync. |
|
Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync. |
Closes elastic#226208 ## Summary The secondary metric component stays on a single line with proper text overflow handling, while giving priority to the value/badge over the prefix when space is limited. <img width="1080" alt="Screenshot 2025-07-09 at 14 20 20" src="https://github.com/user-attachments/assets/dc6cc536-eb74-411d-9237-16ae6713e33e" /> #### The value/badge can take the whole width <img width="316" alt="Screenshot 2025-07-09 at 14 16 38" src="https://github.com/user-attachments/assets/1257b677-0983-43c3-a39f-ae038716651b" /> ### Checklist - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels.
|
Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync. |
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
Closes elastic#226208 ## Summary The secondary metric component stays on a single line with proper text overflow handling, while giving priority to the value/badge over the prefix when space is limited. <img width="1080" alt="Screenshot 2025-07-09 at 14 20 20" src="https://github.com/user-attachments/assets/dc6cc536-eb74-411d-9237-16ae6713e33e" /> #### The value/badge can take the whole width <img width="316" alt="Screenshot 2025-07-09 at 14 16 38" src="https://github.com/user-attachments/assets/1257b677-0983-43c3-a39f-ae038716651b" /> ### Checklist - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. (cherry picked from commit c238ede)
#229564) # Backport This will backport the following commits from `main` to `9.1`: - [[Lens] Fix secondary metric styles to prevent wrapping (#227234)](#227234) <!--- Backport version: 10.0.1 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Maria Iriarte","email":"106958839+mariairiartef@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-07-14T08:39:53Z","message":"[Lens] Fix secondary metric styles to prevent wrapping (#227234)\n\nCloses https://github.com/elastic/kibana/issues/226208\n\n## Summary\n\nThe secondary metric component stays on a single line with proper text\noverflow handling, while giving priority to the value/badge over the\nprefix when space is limited.\n\n<img width=\"1080\" alt=\"Screenshot 2025-07-09 at 14 20 20\"\nsrc=\"https://github.com/user-attachments/assets/dc6cc536-eb74-411d-9237-16ae6713e33e\"\n/>\n\n#### The value/badge can take the whole width\n\n<img width=\"316\" alt=\"Screenshot 2025-07-09 at 14 16 38\"\nsrc=\"https://github.com/user-attachments/assets/1257b677-0983-43c3-a39f-ae038716651b\"\n/>\n\n\n### Checklist\n\n- [x] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n- [x] Review the [backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand apply applicable `backport:*` labels.","sha":"c238ede3d4ac816fce88d6c96ecc1f5445a6414a","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Team:Visualizations","Feature:Lens","backport missing","backport:version","v9.1.0","v8.19.0","v9.2.0"],"title":"[Lens] Fix secondary metric styles to prevent wrapping","number":227234,"url":"https://github.com/elastic/kibana/pull/227234","mergeCommit":{"message":"[Lens] Fix secondary metric styles to prevent wrapping (#227234)\n\nCloses https://github.com/elastic/kibana/issues/226208\n\n## Summary\n\nThe secondary metric component stays on a single line with proper text\noverflow handling, while giving priority to the value/badge over the\nprefix when space is limited.\n\n<img width=\"1080\" alt=\"Screenshot 2025-07-09 at 14 20 20\"\nsrc=\"https://github.com/user-attachments/assets/dc6cc536-eb74-411d-9237-16ae6713e33e\"\n/>\n\n#### The value/badge can take the whole width\n\n<img width=\"316\" alt=\"Screenshot 2025-07-09 at 14 16 38\"\nsrc=\"https://github.com/user-attachments/assets/1257b677-0983-43c3-a39f-ae038716651b\"\n/>\n\n\n### Checklist\n\n- [x] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n- [x] Review the [backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand apply applicable `backport:*` labels.","sha":"c238ede3d4ac816fce88d6c96ecc1f5445a6414a"}},"sourceBranch":"main","suggestedTargetBranches":["9.1"],"targetPullRequestStates":[{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/228188","number":228188,"state":"MERGED","mergeCommit":{"sha":"be0f29268950f326aeef95ff3d1ecc612ac7c750","message":"[8.19] [Lens] Fix secondary metric styles to prevent wrapping (#227234) (#228188)\n\n# Backport\n\nThis will backport the following commits from `main` to `8.19`:\n- [[Lens] Fix secondary metric styles to prevent wrapping\n(#227234)](https://github.com/elastic/kibana/pull/227234)\n\n\n\n### Questions ?\nPlease refer to the [Backport tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n"}},{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/227234","number":227234,"mergeCommit":{"message":"[Lens] Fix secondary metric styles to prevent wrapping (#227234)\n\nCloses https://github.com/elastic/kibana/issues/226208\n\n## Summary\n\nThe secondary metric component stays on a single line with proper text\noverflow handling, while giving priority to the value/badge over the\nprefix when space is limited.\n\n<img width=\"1080\" alt=\"Screenshot 2025-07-09 at 14 20 20\"\nsrc=\"https://github.com/user-attachments/assets/dc6cc536-eb74-411d-9237-16ae6713e33e\"\n/>\n\n#### The value/badge can take the whole width\n\n<img width=\"316\" alt=\"Screenshot 2025-07-09 at 14 16 38\"\nsrc=\"https://github.com/user-attachments/assets/1257b677-0983-43c3-a39f-ae038716651b\"\n/>\n\n\n### Checklist\n\n- [x] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n- [x] Review the [backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand apply applicable `backport:*` labels.","sha":"c238ede3d4ac816fce88d6c96ecc1f5445a6414a"}}]}] BACKPORT-->
Closes #226208
Summary
The secondary metric component stays on a single line with proper text overflow handling, while giving priority to the value/badge over the prefix when space is limited.
The value/badge can take the whole width
Checklist
release_note:*label is applied per the guidelinesbackport:*labels.