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

TSVB doesn't scroll correctly with color picker open #52084

Closed
timroes opened this issue Dec 3, 2019 · 9 comments · Fixed by #68888
Closed

TSVB doesn't scroll correctly with color picker open #52084

timroes opened this issue Dec 3, 2019 · 9 comments · Fixed by #68888
Assignees
Labels
blocked bug Fixes for quality problems that affect the customer experience Feature:TSVB TSVB (Time Series Visual Builder) Team:Visualizations Visualization editors, elastic-charts and infrastructure

Comments

@timroes
Copy link
Contributor

timroes commented Dec 3, 2019

If you go to TSVB and create enough new series, so you hit the bottom of your screen and trying to open the color picker in the bottom most series (or any other way it will go outside the screen), you can actually not scroll the page further down to see all of the color picker and properly use it. If you're running on a system showing scrollbars in the browser, you'll also see that there seem to be two layers of scrolling, but the wrong layer will get the scroll:

screenshot-20191203-165923

Expected behavior: we should be able to scroll down to see all of the color picker to actually use it.

Blocking issue: elastic/eui#2629

@timroes timroes added bug Fixes for quality problems that affect the customer experience Feature:TSVB TSVB (Time Series Visual Builder) Team:Visualizations Visualization editors, elastic-charts and infrastructure :KibanaApp/fix-it-week labels Dec 3, 2019
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-app (Team:KibanaApp)

@cchaos
Copy link
Contributor

cchaos commented Dec 10, 2019

EUI now has its own color picker and this implementation should just be swapped for that. https://elastic.github.io/eui/#/forms/color-selection

@mbondyra mbondyra self-assigned this Dec 11, 2019
@mbondyra
Copy link
Contributor

mbondyra commented Dec 11, 2019

Hi @cchaos I've taken over this task but I cannot find the transparency setting in the new EUI color picker that would be equivalent of the one in the picture:

image

Are there plans to implement it in the future? Is the assumption to implement this setting outside of EUI?

@cchaos
Copy link
Contributor

cchaos commented Dec 11, 2019

Ahh, yes, the EUI component does not yet have an opacity slider. Though it should be pretty easy to add and should be added on the EUI side. I'll create a ticket.

@thompsongl
Copy link
Contributor

EuiColorPicker now supports opacity and will be available next time EUI is upgraded in Kibana.
EuiColorPicker and the current TSVB picker are not a 1:1 functionality match, but overall EUI's is a better option at this point.

@nickofthyme
Copy link
Contributor

@thompsongl what functionality is missing from the existing color picker?

@thompsongl
Copy link
Contributor

Assuming you stay with the swatch-style button to open the color picker popover, there is no input to manually enter color strings.
We have an issue for this in EUI: elastic/eui#3055

Not sure how important it is to this use case, but if it remains a blocker, let me know and we can get it prioritized.

@timroes
Copy link
Contributor Author

timroes commented Mar 20, 2020

Since TSVB is rather much used, I think we should not exchange the color picker without giving the users the ability to enter hex codes as they could before. The problem is that without that there is no way to get to a "specific color", meaning the users wouldn't e.g. be able to use their corporate colors (or any other color they know about), because they can just "try to get it".

@thompsongl
Copy link
Contributor

Added the last remaining feature to unblock this. The next EUI release (v23.0.0, I think) will allow for color value text entry with the swatch-style button.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
blocked bug Fixes for quality problems that affect the customer experience Feature:TSVB TSVB (Time Series Visual Builder) Team:Visualizations Visualization editors, elastic-charts and infrastructure
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants