[Maps] Fix text readability on map scale, attribution, and coordinate controls #189639
Conversation
…es and adds it to the scale control
jsanz
added
release_note:fix
Team:Presentation
|
/ci |
|
/ci |
jsanz
changed the title
|
Pinging @elastic/kibana-presentation (Team:Presentation) |
There was a problem hiding this comment.
Nice update, @jsanz! I agree with you that applying a background color is probably our best bet here. However, I do worry that the use of a semi-transparent background color could potentially result in a text color contrast that fails accessibility standards in some scenarios. As such, it may be better to use a non-transparent background color with a text color of sufficient contrast.
For example, I've quickly mocked up an example below in light and dark mode that uses euiTheme.colors.body for the background and euiTheme.colors.subduedText for the text. Since the background has no transparency, there should be no fear of contrast issues or issues across light/dark mode. For the purposes of my example, I also repositioned the text containers to the extreme edges of the map to prevent visual interference with inner portions of the map. Thoughts?
|
Sorry for the delayed response, just getting back from PTO. Appreciate the comments @MichaelMarcialis!! I've tried the text to be At the beginning I was trying to find a background that would fit well with all dark/light/classic map styles (that can be selected independently of the Kibana theme). By the screenshots below, following the Kibana style as the other map widgets feels pretty aligned and the contrast is always good as well. What do you think @nreese @nickpeihl? ScreenshotsLight mode - auto basemap
Dark mode - auto basemap
Dark mode - classic
Dark mode - light
Dark mode - light with a tint
Light mode - dark
|
Improving contrast by using the Kibana style for the background lgtm! |
@jsanz: Yeah, |
💛 Build succeeded, but was flaky
Failed CI StepsMetrics [docs]Async chunks
History
To update your PR or re-run it, just comment with: |
There was a problem hiding this comment.
Approving now to unblock. Would it be worth my opening a separate issue for some of the suggested tweaks in my earlier comment's mockups (for things like text color, positioning, etc.)?
yeah sorry, I failed to comment about the positioning 🤦 We would appreciate a separate issue!! |
… controls (elastic#189639) ## Summary Fixes elastic#128783 This PR fixes the visualization of the texts in Maps scale bar, attribution, and coordinate controls with a dark background. ## Context While checking on the scale bar component of the map I saw this SCSS mixin that seemed to be broken. Originally I thought on fixing the shadow but the readability of the text is not great for dark background (see 7f2a698) <details><summary>Adding a shadow</summary> | before | after | | :--:| :--:| | |  | </details> So I decided to propose to fix this by adding a background as is usual in other platforms.    (cherry picked from commit 32dd373)
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
…rdinate controls (#189639) (#191408) # Backport This will backport the following commits from `main` to `8.15`: - [[Maps] Fix text readability on map scale, attribution, and coordinate controls (#189639)](#189639) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Jorge Sanz","email":"jorge.sanz@elastic.co"},"sourceCommit":{"committedDate":"2024-08-27T09:06:15Z","message":"[Maps] Fix text readability on map scale, attribution, and coordinate controls (#189639)\n\n## Summary\r\n\r\nFixes #128783\r\n\r\nThis PR fixes the visualization of the texts in Maps scale bar,\r\nattribution, and coordinate controls with a dark background.\r\n\r\n## Context\r\n\r\nWhile checking on the scale bar component of the map I saw this SCSS\r\nmixin that seemed to be broken.\r\n\r\nOriginally I thought on fixing the shadow but the readability of the\r\ntext is not great for dark background (see\r\n7f2a698f4401c9b22f5c526ad8cfaa7839e30282)\r\n\r\n<details><summary>Adding a shadow</summary>\r\n\r\n| before | after |\r\n| :--:| :--:| \r\n\r\n|\r\n|\r\n\r\n|\r\n</details>\r\n\r\nSo I decided to propose to fix this by adding a background as is usual\r\nin other platforms.\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n","sha":"32dd3730fa70acdb2e37918861c32537ffd2fc7e","branchLabelMapping":{"^v8.16.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Presentation","backport:prev-minor","Feature:Maps","v8.16.0"],"title":"[Maps] Fix text readability on map scale, attribution, and coordinate controls","number":189639,"url":"https://github.com/elastic/kibana/pull/189639","mergeCommit":{"message":"[Maps] Fix text readability on map scale, attribution, and coordinate controls (#189639)\n\n## Summary\r\n\r\nFixes #128783\r\n\r\nThis PR fixes the visualization of the texts in Maps scale bar,\r\nattribution, and coordinate controls with a dark background.\r\n\r\n## Context\r\n\r\nWhile checking on the scale bar component of the map I saw this SCSS\r\nmixin that seemed to be broken.\r\n\r\nOriginally I thought on fixing the shadow but the readability of the\r\ntext is not great for dark background (see\r\n7f2a698f4401c9b22f5c526ad8cfaa7839e30282)\r\n\r\n<details><summary>Adding a shadow</summary>\r\n\r\n| before | after |\r\n| :--:| :--:| \r\n\r\n|\r\n|\r\n\r\n|\r\n</details>\r\n\r\nSo I decided to propose to fix this by adding a background as is usual\r\nin other platforms.\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n","sha":"32dd3730fa70acdb2e37918861c32537ffd2fc7e"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/189639","number":189639,"mergeCommit":{"message":"[Maps] Fix text readability on map scale, attribution, and coordinate controls (#189639)\n\n## Summary\r\n\r\nFixes #128783\r\n\r\nThis PR fixes the visualization of the texts in Maps scale bar,\r\nattribution, and coordinate controls with a dark background.\r\n\r\n## Context\r\n\r\nWhile checking on the scale bar component of the map I saw this SCSS\r\nmixin that seemed to be broken.\r\n\r\nOriginally I thought on fixing the shadow but the readability of the\r\ntext is not great for dark background (see\r\n7f2a698f4401c9b22f5c526ad8cfaa7839e30282)\r\n\r\n<details><summary>Adding a shadow</summary>\r\n\r\n| before | after |\r\n| :--:| :--:| \r\n\r\n|\r\n|\r\n\r\n|\r\n</details>\r\n\r\nSo I decided to propose to fix this by adding a background as is usual\r\nin other platforms.\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n","sha":"32dd3730fa70acdb2e37918861c32537ffd2fc7e"}}]}] BACKPORT--> Co-authored-by: Jorge Sanz <jorge.sanz@elastic.co>
Summary
Fixes #128783
This PR fixes the visualization of the texts in Maps scale bar, attribution, and coordinate controls with a dark background.
Context
While checking on the scale bar component of the map I saw this SCSS mixin that seemed to be broken.
Originally I thought on fixing the shadow but the readability of the text is not great for dark background (see 7f2a698)
Adding a shadow
So I decided to propose to fix this by adding a background as is usual in other platforms.