[calcite-color] add support for alpha

[jcfranco]

The color picker needs to support alpha channel updates. https://github.com/Esri/calcite-components/issues/64#issuecomment-583678167 has some designs with opacity.

Not sure if the design needs any tweaks, but it'd be nice for the final design to have an alpha channel input as well. The color picker from Chrome dev tool's has something similar:

[bstifle]

👀

[jcfranco]

Another thing to consider in the design is the selected color + transparency preview. One idea would be to update calcite-color-swatch to support transparency (rough mockup 😄):

[bstifle]

yeah i dig it

[macandcheese]

Yeah looks good... Think that's a pretty universal treatment for opacity so should be familiar.

[bstifle]

here's a comp with the transparency checker fill.

light theme using 4x4 #000000 squares at 40% opacity dark theme using 4x4 #FFFFFF squares at 40% opacity

[bstifle]

ok this is better.

CACACA for light theme

6A6A6A for dark

[smambrose]

Is there any progress on this one? Testers for charts keep running into it and noticing they can't control this.

[jcfranco]

@smambrose Not for the time being. I'll move this to backlog until it's ready for development. I estimate this will land after 1.0.0 ships (after April).

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tyanthony]

Having the ability to change the Opacity would be a great enhancement for our team as well. An example of a use case for us:

[julio8a]

@bstifle, is this one ready for implementation?

[bstifle]

Here's the design with an opacity slider:

[jcfranco]

Moving to next sprint. Draft PR should be up today.

[jcfranco]

Moving to a future sprint (current one is a low-risk sprint). This should land this week. I've got some review feedback to address and tests to add.

[ethanbdev]

Hey @jcfranco, was there just a little bit left to do on this? Checking on if it could be for this release cycle, thanks!!

[phlorah]

Any update on this?

[jcfranco]

Apologies for the belated update. I have an old PR with the functionality in place, but no tests set up. I'll sync it with the latest changes and add the missing tests for the assigned milestone.

[jcfranco]

Quick update: while adding/updating the remaining tests, there were some additional changes that went in that I'd like to test a bit more before we ship. Based on this, I'm moving it to the next release. Worth noting that this will land early in the next sprint and will be available under @next.

[ashetland]

Updated designs complete. @geospatialem @brittneyzwolfer for visibility. @jcfranco added to Figma file.

[patrickarlt]

Is there any expected release date for this? We are waiting on support for alpha and RGBA before migrating Vector Tile Style Editor to this.

[ashetland]

@geospatialem Not sure if Franco started work on this before he went on leave.

[benelan]

We plan on installing the functionality for v1, however it will go through a design rework afterwards at some point. The design rework would impact layout so it would be a breaking change. Here is a demo with the existing functionality if you want to take a look (VPN required)

[benelan]

Here is a publicly accessible link to the existing calcite-color-picker alpha functionality

[geospatialem]

Will continue efforts in February's priorities.

[ashetland]

Updated designs are available as well.

[jcfranco]

Update: this will land this week, but will be available via next and not in the April release. Automated tests will be updated/added separately.

[github-actions[bot]]

Installed and assigned for verification.

[geospatialem]

Verified in 1.4.0-next.6 with the alpha-channel attribute:

<calcite-color-picker alpha-channel></calcite-color-picker>

[geospatialem]

Adding to the new future breaking change label, where a few deprecated props take place:

• hideChannels
• hideHex
• hideSaved