github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
# 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)](https://github.com/elastic/kibana/pull/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":"reese.nathan@elastic.co"},"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 <reese.nathan@elastic.co>
This commit is contained in:
Kibana Machine 2022-11-17 16:30:55 -05:00 • committed by GitHub
parent 142a15c71e
commit 953ece5454
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/plugins/controls/public/time_slider/embeddable/time_slider_embeddable.tsx
View file

@ -12,6 +12,7 @@ import moment from 'moment-timezone';
import { Embeddable, IContainer } from '@kbn/embeddable-plugin/public';
import { ReduxEmbeddableTools, ReduxEmbeddablePackage } from '@kbn/presentation-util-plugin/public';
import type { TimeRange } from '@kbn/es-query';
import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
import React from 'react';
import ReactDOM from 'react-dom';
import { Subscription } from 'rxjs';
@ -270,16 +271,18 @@ export class TimeSliderControlEmbeddable extends Embeddable<
const { Wrapper: TimeSliderControlReduxWrapper } = this.reduxEmbeddableTools;
ReactDOM.render(
<TimeSliderControlReduxWrapper>
<TimeSlider
formatDate={this.epochToKbnDateFormat}
onChange={(value?: [number, number]) => {
this.onTimesliceChange(value);
const range = value ? value[TO_INDEX] - value[FROM_INDEX] : undefined;
this.onRangeChange(range);
}}
/>
</TimeSliderControlReduxWrapper>,
<KibanaThemeProvider theme$={pluginServices.getServices().theme.theme$}>
<TimeSliderControlReduxWrapper>
<TimeSlider
formatDate={this.epochToKbnDateFormat}
onChange={(value?: [number, number]) => {
this.onTimesliceChange(value);
const range = value ? value[TO_INDEX] - value[FROM_INDEX] : undefined;
this.onRangeChange(range);
}}
/>
</TimeSliderControlReduxWrapper>
</KibanaThemeProvider>,
node
);
};