[controls] time slider play button "display=fill" property not being respected #145301
Labels
bug
Fixes for quality problems that affect the customer experience
design
regression
Team:Presentation
Presentation Team for Dashboard, Input Controls, and Canvas
Comments
nreese
added
bug
|
Pinging @elastic/kibana-presentation (Team:Presentation) |
nreese
changed the title
nreese
added a commit
that referenced
this issue
Nov 16, 2022
…g respected (#145417) resolves #145301 Steps to test * create new dashboard * Add time slider control * verify play toggle button has primary color background <img width="600" alt="Screen Shot 2022-11-16 at 9 56 00 AM" src="https://user-images.githubusercontent.com/373691/202244344-e4ec6f45-9d87-4819-96a6-dc47b551b213.png"> Co-authored-by: Kibana Machine <[email protected]>
kibanamachine
pushed a commit
that referenced
this issue
Nov 16, 2022
…g respected (#145417) resolves #145301 Steps to test * create new dashboard * Add time slider control * verify play toggle button has primary color background <img width="600" alt="Screen Shot 2022-11-16 at 9 56 00 AM" src="https://user-images.githubusercontent.com/373691/202244344-e4ec6f45-9d87-4819-96a6-dc47b551b213.png"> Co-authored-by: Kibana Machine <[email protected]> (cherry picked from commit de39dba)
kibanamachine
referenced
this issue
Nov 16, 2022
…t being respected (#145417) (#145447) # Backport This will backport the following commits from `main` to `8.6`: - [[Controls] fix time slider play button display=fill property not being respected (#145417)](#145417) <!--- 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-16T20:19:53Z","message":"[Controls] fix time slider play button display=fill property not being respected (#145417)\n\nresolves https://github.com/elastic/kibana/issues/145301\r\n\r\nSteps to test\r\n* create new dashboard\r\n* Add time slider control\r\n* verify play toggle button has primary color background\r\n\r\n<img width=\"600\" alt=\"Screen Shot 2022-11-16 at 9 56 00 AM\"\r\nsrc=\"https://user-images.githubusercontent.com/373691/202244344-e4ec6f45-9d87-4819-96a6-dc47b551b213.png\">\r\n\r\nCo-authored-by: Kibana Machine <[email protected]>","sha":"de39dba2c49959293a970b271a588269ba11ed0e","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Presentation","release_note:skip","auto-backport","v8.6.0","v8.7.0"],"number":145417,"url":"https://github.com/elastic/kibana/pull/145417","mergeCommit":{"message":"[Controls] fix time slider play button display=fill property not being respected (#145417)\n\nresolves https://github.com/elastic/kibana/issues/145301\r\n\r\nSteps to test\r\n* create new dashboard\r\n* Add time slider control\r\n* verify play toggle button has primary color background\r\n\r\n<img width=\"600\" alt=\"Screen Shot 2022-11-16 at 9 56 00 AM\"\r\nsrc=\"https://user-images.githubusercontent.com/373691/202244344-e4ec6f45-9d87-4819-96a6-dc47b551b213.png\">\r\n\r\nCo-authored-by: Kibana Machine <[email protected]>","sha":"de39dba2c49959293a970b271a588269ba11ed0e"}},"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/145417","number":145417,"mergeCommit":{"message":"[Controls] fix time slider play button display=fill property not being respected (#145417)\n\nresolves https://github.com/elastic/kibana/issues/145301\r\n\r\nSteps to test\r\n* create new dashboard\r\n* Add time slider control\r\n* verify play toggle button has primary color background\r\n\r\n<img width=\"600\" alt=\"Screen Shot 2022-11-16 at 9 56 00 AM\"\r\nsrc=\"https://user-images.githubusercontent.com/373691/202244344-e4ec6f45-9d87-4819-96a6-dc47b551b213.png\">\r\n\r\nCo-authored-by: Kibana Machine <[email protected]>","sha":"de39dba2c49959293a970b271a588269ba11ed0e"}}]}] BACKPORT--> Co-authored-by: Nathan Reese <[email protected]>
![https://user-images.githubusercontent.com/373691/202244344-e4ec6f45-9d87-4819-96a6-dc47b551b213.png\">\r\n\r\nCo-authored-by](https://user-images.githubusercontent.com/373691/202244344-e4ec6f45-9d87-4819-96a6-dc47b551b213.png\">\r\n\r\nCo-authored-by){kind=link}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
In the screen shot below, notice how the "play" button has a grey background and white button. To reproduce the problem, create a new dashboard, click "Controls" and select "Add time slider control".
The play button should have the primary color background because the component sets
display="fill"and look like the below screen shot (from 8.5.0). This is a regression that may be caused by #141279The problem is that background is getting set to grey by this css rule, https://github.com/elastic/eui/blob/main/src/components/form/form_control_layout/_form_control_layout.scss#L95
The text was updated successfully, but these errors were encountered: