Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[controls] fix Time Slider text is not working properly with Dark Mode #145612

Merged
merged 1 commit into from
Nov 17, 2022

Conversation

nreese
Copy link
Contributor

@nreese nreese commented Nov 17, 2022

Fixes #145594

TimeSlider component is not wrapped by KibanaThemeProvider and therefore does not properly use kibana themeing. This PR resolves the issues by wrapping TimeSlider by KibanaThemeProvider.

To test

  • set advanced setting theme:darkMode to true
  • open dashboard
  • add time slider
  • verify timeslider is using dark theme

Screen Shot 2022-11-17 at 12 04 40 PM

@nreese nreese added release_note:fix Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas auto-backport Deprecated - use backport:version if exact versions are needed v8.6.0 v8.7.0 labels Nov 17, 2022
@nreese nreese requested a review from a team as a code owner November 17, 2022 19:08
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-presentation (Team:Presentation)

Copy link
Contributor

@ThomThomson ThomThomson left a comment

Choose a reason for hiding this comment

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

ThemeProvider addition LGTM! Code only review

@kibana-ci
Copy link
Collaborator

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
controls 474.1KB 474.2KB +85.0B
Unknown metric groups

ESLint disabled in files

id before after diff
osquery 1 2 +1

ESLint disabled line counts

id before after diff
enterpriseSearch 19 21 +2
fleet 59 65 +6
osquery 108 113 +5
securitySolution 441 447 +6
total +19

Total ESLint disabled count

id before after diff
enterpriseSearch 20 22 +2
fleet 67 73 +6
osquery 109 115 +6
securitySolution 518 524 +6
total +20

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@nreese nreese merged commit d5ed16a into elastic:main Nov 17, 2022
kibanamachine pushed a commit that referenced this pull request Nov 17, 2022
#145612)

Fixes #145594

TimeSlider component is not wrapped by KibanaThemeProvider and therefore
does not properly use kibana themeing. This PR resolves the issues by
wrapping TimeSlider by KibanaThemeProvider.

To test
* set advanced setting `theme:darkMode` to true
* open dashboard
* add time slider
* verify timeslider is using dark theme

<img width="500" alt="Screen Shot 2022-11-17 at 12 04 40 PM"
src="https://user-images.githubusercontent.com/373691/202536272-9ef9e9fe-debe-4722-a50e-03929b94c18d.png">

(cherry picked from commit d5ed16a)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.6

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation and see the Github Action logs for details

kibanamachine added a commit that referenced this pull request Nov 17, 2022
…rk Mode (#145612) (#145623)

# Backport

This will backport the following commits from `main` to `8.6`:
- [[controls] fix Time Slider text is not working properly with Dark
Mode (#145612)](#145612)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Nathan
Reese","email":"[email protected]"},"sourceCommit":{"committedDate":"2022-11-17T20:24:47Z","message":"[controls]
fix Time Slider text is not working properly with Dark Mode
(#145612)\n\nFixes
https://github.com/elastic/kibana/issues/145594\r\n\r\nTimeSlider
component is not wrapped by KibanaThemeProvider and therefore\r\ndoes
not properly use kibana themeing. This PR resolves the issues
by\r\nwrapping TimeSlider by KibanaThemeProvider.\r\n\r\nTo test\r\n*
set advanced setting `theme:darkMode` to true\r\n* open dashboard\r\n*
add time slider\r\n* verify timeslider is using dark theme\r\n\r\n<img
width=\"500\" alt=\"Screen Shot 2022-11-17 at 12 04 40
PM\"\r\nsrc=\"https://user-images.githubusercontent.com/373691/202536272-9ef9e9fe-debe-4722-a50e-03929b94c18d.png\">","sha":"d5ed16a86e105e3cd1418fa1a42a3745a46e0a9c","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Presentation","auto-backport","v8.6.0","v8.7.0"],"number":145612,"url":"https://github.com/elastic/kibana/pull/145612","mergeCommit":{"message":"[controls]
fix Time Slider text is not working properly with Dark Mode
(#145612)\n\nFixes
https://github.com/elastic/kibana/issues/145594\r\n\r\nTimeSlider
component is not wrapped by KibanaThemeProvider and therefore\r\ndoes
not properly use kibana themeing. This PR resolves the issues
by\r\nwrapping TimeSlider by KibanaThemeProvider.\r\n\r\nTo test\r\n*
set advanced setting `theme:darkMode` to true\r\n* open dashboard\r\n*
add time slider\r\n* verify timeslider is using dark theme\r\n\r\n<img
width=\"500\" alt=\"Screen Shot 2022-11-17 at 12 04 40
PM\"\r\nsrc=\"https://user-images.githubusercontent.com/373691/202536272-9ef9e9fe-debe-4722-a50e-03929b94c18d.png\">","sha":"d5ed16a86e105e3cd1418fa1a42a3745a46e0a9c"}},"sourceBranch":"main","suggestedTargetBranches":["8.6"],"targetPullRequestStates":[{"branch":"8.6","label":"v8.6.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/145612","number":145612,"mergeCommit":{"message":"[controls]
fix Time Slider text is not working properly with Dark Mode
(#145612)\n\nFixes
https://github.com/elastic/kibana/issues/145594\r\n\r\nTimeSlider
component is not wrapped by KibanaThemeProvider and therefore\r\ndoes
not properly use kibana themeing. This PR resolves the issues
by\r\nwrapping TimeSlider by KibanaThemeProvider.\r\n\r\nTo test\r\n*
set advanced setting `theme:darkMode` to true\r\n* open dashboard\r\n*
add time slider\r\n* verify timeslider is using dark theme\r\n\r\n<img
width=\"500\" alt=\"Screen Shot 2022-11-17 at 12 04 40
PM\"\r\nsrc=\"https://user-images.githubusercontent.com/373691/202536272-9ef9e9fe-debe-4722-a50e-03929b94c18d.png\">","sha":"d5ed16a86e105e3cd1418fa1a42a3745a46e0a9c"}}]}]
BACKPORT-->

Co-authored-by: Nathan Reese <[email protected]>
@KOTungseth KOTungseth added the Feature:Dashboard Dashboard related features label Nov 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
auto-backport Deprecated - use backport:version if exact versions are needed Feature:Dashboard Dashboard related features release_note:fix Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas v8.6.0 v8.7.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Controls] Time Slider text is not working properly with Dark Mode
6 participants