`EuiColorPicker` opacity support #2850

thompsongl · 2020-02-12T19:26:49Z

Summary

Resolved the primary goal of #2629.

EuiColorPicker color prop and text input will now accept hex and RGB(a) values, automatically parsing opacity and format.
EuiColorPicker onChange now has a second parameter, which is an object containing the rgba and hex representations of the input (('#hex', [r,g,b,a])), as well as an isValid flag.
Enabling:
- Opacity of off by default
- Enabling showOpacity will render the range input selector

Coming soon(ish)

I think there will be 1 additional PR after this:
Add the option to render a hex input in the popover, as seen in #2629 (comment). May involve a refactor of EuiColorStops.

Checklist

Check against all themes for compatibility in both light and dark modes
Checked in mobile
Checked in IE11 and Firefox
Props have proper autodocs
Added documentation examples
Added or updated jest tests
Checked for breaking changes and labeled appropriately
Checked for accessibility including keyboard-only and screenreader modes
A changelog entry exists and is marked appropriately

chandlerprall · 2020-02-12T21:28:27Z

Maybe render the color over a repeating checkboard pattern to show the transparency?

cchaos · 2020-02-12T21:47:02Z

Maybe render the color over a repeating checkboard pattern to show the transparency?

I think that only works for large images. The swatches are so small, that this will just cause noise and confusion as to what's going on. Just a simply applying the opacity to the swatch is ideal.

cchaos · 2020-02-12T21:50:24Z

Currently, the swatch next to the hex input is the only place that actually shows the color with opacity applied (see screenshot above).
Is this confusing?

No I think we're fine here but I do think the hex value in the input should be the full 8-digit representation. Right now there's no indictor of the opacity value in the input.

Should all visual indications of the selected color be shown with opacity applied?

No, just the output (indicator in the text input)

If opacity is less than 100% and I click a prepopulated swatch from the list, should opacity be reset to 100%?

Yes but just from the pre-populated swatches which could also contain their own opacity values.

thompsongl · 2020-02-13T16:16:27Z

Thought about this some more after a question from @cchaos. I think this should instead:

accept 6- and 8-digit hex values, as well as rgb and rgba...
from which the alpha value can be parsed...
which eliminates the need for a separate alpha prop

We could go with 6- and 8-digit hex support only for now, but I doubt consumers have and can use 8-digiit hex values without further conversion (IE11 support, for instance). rgba input support seems necessary for automatic alpha value parsing.

This approach would also prevent the breaking change to EuiColorStops mentioned in the summary.

thompsongl · 2020-02-14T20:43:39Z

^ Still have quite a bit of clean-up to do (e.g., validation in the docs), but you can give it a test drive now.

Still thinking on:

Returning either hex or rgba depending on what input was provided originally
Returning an isValid boolean as part of onChange to make simple validation easier

cchaos · 2020-02-19T17:37:01Z

A couple of feedback items from a visual/functional test:

The color stops handle shouldn't show through to the bar underneath. The handle should then have a background of $euiColorEmptyShade.

Functionally, only clicking the swatches should reset the opacity slider to 100% (or whatever the swatch's alpha is since I'd hope even the swatches can accept alpha channel?)

The invalid state needs fixing if the input allow alpha channel

Unrelated

cchaos · 2020-02-19T17:41:10Z

src-docs/src/views/color_picker/alpha.js

+import { useColorPicker } from './utils';
+
+export const Alpha = () => {
+  const [color, setColor, errors] = useColorPicker('#D36086');


Looks like useColorPicker is probably a service we'll want to document and export if it's this helpful in a consuming application?

Going to open an issue for this. I hadn't thought about it, but it does seem really useful and could be something of a pattern for other relatively simple form-like components.

thompsongl · 2020-02-19T18:58:56Z

@cchaos Still working on item No. 1 (see-through color stops handle), but Nos. 2 and 3 are fixed.

As for the "Unrelated" items:

Compressed and invalid states for EuiColorStops: No designs exist for either that I know of. Do we need a ticket for someone to work on these?
Beginning and end transition colors: This is intentional. I'm having trouble finding the conversation, but it boils down to is that each color thumb is the start of a new color. Before a thumb, it is either the previous color or empty/gray. After a thumb, that color goes to infinity or until the next thumb.
Grayed out indicator in disabled state: Bug. I'll get it fixed.
Badge: You get console warnings about it being an invalid color. We can definitely prevent it in the docs, but should EuiBadge itself prevent opacity?

snide · 2020-02-19T19:04:28Z

Beginning and end transition colors: This is intentional. I'm having trouble finding the conversation, but it boils down to is that each color thumb is the start of a new color. Before a thumb, it is either the previous color or empty/gray. After a thumb, that color goes to infinity or until the next thumb.

Yep. This was a valid request from Maps. They have situations where the color doesn't start until a certain point. The best way to illustrate that was to use gray since that felt "disabled"

cchaos · 2020-02-19T21:59:30Z

Compressed and invalid states for EuiColorStops: No designs exist for either that I know of. Do we need a ticket for someone to work on these?

I think we should just remove the toggles from the docs. You can pass canInvalid: false and canCompressed: false to remove them from DisplayToggles

Badge: You get console warnings about it being an invalid color. We can definitely prevent it in the docs, but should EuiBadge itself prevent opacity?

Yes I think EuiBadge should still warn, but instead of warn AND show a transparent background (which as you can see also invalidates the contrast), it should at least not respect alpha channels. Chroma might have a function that does this?

thompsongl · 2020-02-19T23:32:35Z

Yes I think EuiBadge should still warn, but instead of warn AND show a transparent background (which as you can see also invalidates the contrast), it should at least not respect alpha channels.

Chroma can help with this, for sure. I'm going to open an issue for it, because we'll want to change validation and error messaging at the same time. Somewhat related to #2804

kibanamachine · 2020-02-20T17:29:42Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_2850/

JoshMock · 2020-02-20T17:40:49Z

That one, on the other hand, was real! 🎉

kibanamachine · 2020-02-20T23:02:56Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_2850/

kibanamachine · 2020-03-04T16:51:33Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_2850/

src-docs/src/views/color_picker/color_picker_example.js

src/components/color_picker/color_stops/_color_stops.scss

cchaos

Looks good from my side! 🎉

kibanamachine · 2020-03-04T19:16:35Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_2850/

chandlerprall

Have a mix of comments, suggestions, and requests. Haven't yet done a full review of the components' internal changes, as I suspect some of this review will impact that area as well.

src/components/color_picker/color_picker.tsx

src-docs/src/views/color_picker/formats.js

src-docs/src/views/color_picker/alpha.js

kibanamachine · 2020-03-05T19:23:42Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_2850/

chandlerprall

Some small suggestions; this looks great though!

src/components/color_picker/color_picker.tsx

src/components/color_picker/utils.ts

kibanamachine · 2020-03-11T16:16:36Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_2850/

kibanamachine · 2020-03-11T20:37:45Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_2850/

chandlerprall

Changes LGTM; Pulled & tested locally. Thank you @thompsongl for the effort & dedication on this one!

chandlerprall · 2020-03-12T00:22:41Z

Also: quick changelog entry before merging 🥇

kibanamachine · 2020-03-12T15:29:42Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_2850/

thompsongl added 3 commits February 12, 2020 11:24

alpha range

78e8187

alpha tests

00f84a6

docs

59addfa

thompsongl requested a review from cchaos February 12, 2020 19:26

wip: rgba support

6af0bed

cchaos reviewed Feb 19, 2020

View reviewed changes

maintain alpha value

3a95340

cchaos mentioned this pull request Feb 19, 2020

[EuiColorStops] Beginning from empty should look more empty #2876

Closed

prevent track visibility; clean up

9900dd9

thompsongl added 2 commits February 19, 2020 17:25

Merge branch 'master' into colorpicker-opacity

1465d18

display toggles

52c6aee

thompsongl mentioned this pull request Feb 19, 2020

[EuiBadge] Prevent color opacity #2883

Closed

docs validation

34a654a

thompsongl added 3 commits February 20, 2020 11:44

use rgba for swatches

3320fac

Merge branch 'master' into colorpicker-opacity

0338379

use rgba for css

db5b934

better hue and format throughput

4a87871

allow empty range value

522d598

cchaos reviewed Mar 4, 2020

View reviewed changes

src-docs/src/views/color_picker/color_picker_example.js Outdated Show resolved Hide resolved

src/components/color_picker/color_stops/_color_stops.scss Show resolved Hide resolved

thompsongl added 3 commits March 4, 2020 12:18

sanitize rgb strings

887cd3d

more resiliant sanitization

1de8de3

feedback

99285c4

cchaos approved these changes Mar 4, 2020

View reviewed changes

thompsongl requested a review from chandlerprall March 4, 2020 19:37

chandlerprall suggested changes Mar 5, 2020

View reviewed changes

clean up

48c42c3

chandlerprall added the priority label Mar 10, 2020

chandlerprall suggested changes Mar 10, 2020

View reviewed changes

thompsongl added 2 commits March 11, 2020 10:44

Merge branch 'master' into colorpicker-opacity

bac43b4

usesEffect; clean up

5fd717f

utils tests

64dc808

chandlerprall approved these changes Mar 12, 2020

View reviewed changes

thompsongl added 3 commits March 12, 2020 10:07

comment

b71ae10

Merge branch 'master' into colorpicker-opacity

751685d

CL

010f310

thompsongl merged commit cbbf27b into elastic:master Mar 12, 2020

This was referenced Mar 12, 2020

Moved utils helpers(useColorPicker) to src/services #2918

Closed

EuiColorPicker needs to support opacity #2629

Closed

chandlerprall mentioned this pull request Mar 31, 2020

Upgrade to EUI v22.1.1 elastic/kibana#62065

Closed

chandlerprall mentioned this pull request Apr 8, 2020

Upgrade to EUI v22.3.0 elastic/kibana#62963

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`EuiColorPicker` opacity support #2850

`EuiColorPicker` opacity support #2850

thompsongl commented Feb 12, 2020 •

edited

Loading

chandlerprall commented Feb 12, 2020

cchaos commented Feb 12, 2020

cchaos commented Feb 12, 2020 •

edited

Loading

thompsongl commented Feb 13, 2020 •

edited

Loading

thompsongl commented Feb 14, 2020

cchaos commented Feb 19, 2020

cchaos Feb 19, 2020

thompsongl Feb 20, 2020

thompsongl commented Feb 19, 2020

snide commented Feb 19, 2020

cchaos commented Feb 19, 2020

thompsongl commented Feb 19, 2020

kibanamachine commented Feb 20, 2020

JoshMock commented Feb 20, 2020

kibanamachine commented Feb 20, 2020

kibanamachine commented Mar 4, 2020

cchaos left a comment

kibanamachine commented Mar 4, 2020

chandlerprall left a comment

kibanamachine commented Mar 5, 2020

chandlerprall left a comment

kibanamachine commented Mar 11, 2020

kibanamachine commented Mar 11, 2020

chandlerprall left a comment

chandlerprall commented Mar 12, 2020

kibanamachine commented Mar 12, 2020

EuiColorPicker opacity support #2850

EuiColorPicker opacity support #2850

Conversation

thompsongl commented Feb 12, 2020 • edited Loading

Summary

Coming soon(ish)

Checklist

chandlerprall commented Feb 12, 2020

cchaos commented Feb 12, 2020

cchaos commented Feb 12, 2020 • edited Loading

thompsongl commented Feb 13, 2020 • edited Loading

thompsongl commented Feb 14, 2020

cchaos commented Feb 19, 2020

Unrelated

cchaos Feb 19, 2020

Choose a reason for hiding this comment

thompsongl Feb 20, 2020

Choose a reason for hiding this comment

thompsongl commented Feb 19, 2020

snide commented Feb 19, 2020

cchaos commented Feb 19, 2020

thompsongl commented Feb 19, 2020

kibanamachine commented Feb 20, 2020

JoshMock commented Feb 20, 2020

kibanamachine commented Feb 20, 2020

kibanamachine commented Mar 4, 2020

cchaos left a comment

Choose a reason for hiding this comment

kibanamachine commented Mar 4, 2020

chandlerprall left a comment

Choose a reason for hiding this comment

kibanamachine commented Mar 5, 2020

chandlerprall left a comment

Choose a reason for hiding this comment

kibanamachine commented Mar 11, 2020

kibanamachine commented Mar 11, 2020

chandlerprall left a comment

Choose a reason for hiding this comment

chandlerprall commented Mar 12, 2020

kibanamachine commented Mar 12, 2020

`EuiColorPicker` opacity support #2850

`EuiColorPicker` opacity support #2850

thompsongl commented Feb 12, 2020 •

edited

Loading

cchaos commented Feb 12, 2020 •

edited

Loading

thompsongl commented Feb 13, 2020 •

edited

Loading