feat(color-picker): add support for alpha channel (deprecates hideChannels, hideHex, hideSaved)

src/components/calcite-color-picker-hex-input/calcite-color-picker-hex-input.tsx

@@ -12,10 +12,13 @@ import {
   Watch
 } from "@stencil/core";
 import {
+  createColor,
   hexChar,
+  hexify,
   hexToRGB,
   isLonghandHex,
   isValidHex,
+  normalizeAlpha,
   normalizeHex,
   rgbToHex
 } from "../calcite-color-picker/utils";
@@ -27,7 +30,7 @@ import { focusElement, getElementDir } from "../../utils/dom";
 import { TEXT } from "../calcite-color-picker/resources";
 import { getKey } from "../../utils/key";
 
-const DEFAULT_COLOR = Color();
+const DEFAULT_COLOR = createColor();
 
 @Component({
   tag: "calcite-color-picker-hex-input",
@@ -50,13 +53,13 @@ export class CalciteColorPickerHexInput {
   //--------------------------------------------------------------------------
 
   connectedCallback(): void {
-    const { allowEmpty, value } = this;
+    const { allowEmpty, alphaSupport, value } = this;
 
     if (value) {
       const normalized = normalizeHex(value);
 
-      if (isValidHex(normalized)) {
-        this.internalColor = Color(normalized);
+      if (isValidHex(normalized, alphaSupport)) {
+        this.internalColor = createColor(normalized);
         this.value = normalized;
       }
 
@@ -75,6 +78,11 @@ export class CalciteColorPickerHexInput {
   //
   //--------------------------------------------------------------------------
 
+  /**
+   * When true, the input will process and display hex characters for the alpha channel.
+   */
+  @Prop() alphaSupport = false;
+
   /**
    * When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component.
    *
@@ -102,17 +110,21 @@ export class CalciteColorPickerHexInput {
   /**
    * The hex value.
    */
-  @Prop({ mutable: true, reflect: true }) value: string = normalizeHex(DEFAULT_COLOR.hex());
+  @Prop({ mutable: true, reflect: true }) value: string = normalizeHex(
+    hexify(DEFAULT_COLOR, this.alphaSupport)
+  );
 
   @Watch("value")
   handleValueChange(value: string, oldValue: string): void {
     if (value) {
       const normalized = normalizeHex(value);
+      const { alphaSupport } = this;
 
-      if (isValidHex(normalized)) {
+      if (isValidHex(normalized, alphaSupport)) {
         const { internalColor } = this;
-        const changed = !internalColor || normalized !== normalizeHex(internalColor.hex());
-        this.internalColor = Color(normalized);
+        const changed =
+          !internalColor || normalized !== normalizeHex(hexify(internalColor, alphaSupport));
+        this.internalColor = createColor(normalized);
         this.previousNonNullValue = normalized;
         this.value = normalized;
 
@@ -148,27 +160,34 @@ export class CalciteColorPickerHexInput {
     const node = event.currentTarget as HTMLCalciteInputElement;
     const inputValue = node.value;
     const hex = `#${inputValue}`;
-    const willClearValue = this.allowEmpty && !inputValue;
+    const { allowEmpty, alphaSupport, internalColor } = this;
+    const willClearValue = allowEmpty && !inputValue;
 
-    if (willClearValue || (isValidHex(hex) && isLonghandHex(hex))) {
+    if (willClearValue || (isValidHex(hex, alphaSupport) && isLonghandHex(hex))) {
       return;
     }
 
     // manipulating DOM directly since rerender doesn't update input value
     node.value =
-      this.allowEmpty && !this.internalColor
+      allowEmpty && !internalColor
         ? ""
-        : this.formatForInternalInput(rgbToHex(this.internalColor.object() as any as RGB));
+        : this.formatForInternalInput(
+            rgbToHex(
+              alphaSupport
+                ? normalizeAlpha(internalColor.object())
+                : (internalColor.object() as any as RGB)
+            )
+          );
   };
 
-  private onInputChange = (event: Event): void => {
+  private onCalciteInputChange = (event: CustomEvent): void => {
     const node = event.currentTarget as HTMLCalciteInputElement;
     const inputValue = node.value;
     let value: this["value"];
 
     if (inputValue) {
       const hex = inputValue;
-      const color = hexToRGB(`#${hex}`);
+      const color = hexToRGB(`#${hex}`, this.alphaSupport);
 
       if (!color) {
         return;
@@ -187,7 +206,7 @@ export class CalciteColorPickerHexInput {
   @Listen("keydown", { capture: true })
   protected onInputKeyDown(event: KeyboardEvent): void {
     const { altKey, ctrlKey, metaKey, shiftKey } = event;
-    const { el, inputNode, internalColor, value } = this;
+    const { alphaSupport, el, inputNode, internalColor, value } = this;
     const key = getKey(event.key);
     const isNudgeKey = key === "ArrowDown" || key === "ArrowUp";
 
@@ -201,14 +220,16 @@ export class CalciteColorPickerHexInput {
       const direction = key === "ArrowUp" ? 1 : -1;
       const bump = shiftKey ? 10 : 1;
 
-      this.value = normalizeHex(this.nudgeRGBChannels(internalColor, bump * direction).hex());
+      this.value = normalizeHex(
+        hexify(this.nudgeRGBChannels(internalColor, bump * direction), alphaSupport)
+      );
 
       event.preventDefault();
       return;
     }
 
     const withModifiers = altKey || ctrlKey || metaKey;
-    const exceededHexLength = inputNode.value.length >= 6;
+    const exceededHexLength = inputNode.value.length >= (alphaSupport ? 8 : 6);
     const focusedElement = el.shadowRoot.activeElement as HTMLInputElement;
     const hasTextSelection =
       // can't use window.getSelection() because of FF bug: https://bugzilla.mozilla.org/show_bug.cgi?id=85686
@@ -258,7 +279,7 @@ export class CalciteColorPickerHexInput {
           dir={elementDir}
           label={intlHex}
           onCalciteInputBlur={this.onCalciteInputBlur}
-          onChange={this.onInputChange}
+          onChange={this.onCalciteInputChange}
           prefixText="#"
           ref={this.storeInputRef}
           scale={this.scale}
@@ -303,6 +324,15 @@ export class CalciteColorPickerHexInput {
   }
 
   private nudgeRGBChannels(color: Color, amount: number): Color {
-    return Color.rgb(color.array().map((channel) => channel + amount));
+    const channels = color.array().map((channel) => channel + amount);
+
+    return Color.rgb(
+      this.alphaSupport
+        ? [
+            ...channels,
+            color.alpha() // only RGB channels are nudged
+          ]
+        : channels
+    );
   }
 }

src/components/calcite-color-picker-swatch/calcite-color-picker-swatch.scss

@@ -34,3 +34,7 @@ $size-l: 28px;
     inset-0
     absolute;
 }
+
+.checker {
+  fill: #cacaca;
+}

src/components/calcite-color-picker-swatch/calcite-color-picker-swatch.tsx

@@ -3,6 +3,10 @@ import Color from "color";
 import { COLORS, CSS } from "./resources";
 import { Scale } from "../interfaces";
 import { getThemeName } from "../../utils/dom";
+import { createColor, hexify } from "../calcite-color-picker/utils";
+
+const CHECKER_SQUARE_SIZE_IN_PX = 4;
+const CHECKER_SIZE_IN_PX = CHECKER_SQUARE_SIZE_IN_PX * 2;
 
 @Component({
   tag: "calcite-color-picker-swatch",
@@ -34,7 +38,7 @@ export class CalciteColorPickerSwatch {
 
   @Watch("color")
   handleColorChange(color: string): void {
-    this.internalColor = Color(color);
+    this.internalColor = createColor(color);
   }
 
   /**
@@ -69,17 +73,45 @@ export class CalciteColorPickerSwatch {
   render(): VNode {
     const { active, el, internalColor } = this;
     const borderRadius = active ? "100%" : "0";
-    const hex = internalColor.hex();
+    const alpha = internalColor.alpha();
+    const hex = hexify(internalColor, alpha < 1);
     const theme = getThemeName(el);
     const borderColor = theme === "light" ? COLORS.borderLight : COLORS.borderDark;
 
     return (
       <svg class={CSS.swatch} xmlns="http://www.w3.org/2000/svg">
         <title>{hex}</title>
+        <defs>
+          <pattern
+            height={CHECKER_SIZE_IN_PX}
+            id="checker"
+            patternUnits="userSpaceOnUse"
+            width={CHECKER_SIZE_IN_PX}
+            x="0"
+            y="0"
+          >
+            <rect
+              class={CSS.checker}
+              height={CHECKER_SQUARE_SIZE_IN_PX}
+              width={CHECKER_SQUARE_SIZE_IN_PX}
+              x="0"
+              y="0"
+            />
+            <rect
+              class={CSS.checker}
+              height={CHECKER_SQUARE_SIZE_IN_PX}
+              width={CHECKER_SQUARE_SIZE_IN_PX}
+              x={CHECKER_SQUARE_SIZE_IN_PX}
+              y={CHECKER_SQUARE_SIZE_IN_PX}
+            />
+          </pattern>
+        </defs>
+        <rect fill="url(#checker)" height="100%" rx={borderRadius} width="100%" />
         <rect
           fill={hex}
           height="100%"
           id="swatch"
+          opacity={alpha}
           rx={borderRadius}
           stroke={borderColor}
           // stroke-width and clip-path are needed to hide overflowing portion of stroke

src/components/calcite-color-picker-swatch/resources.ts

@@ -1,6 +1,7 @@
 export const CSS = {
   swatch: "swatch",
-  noColorIcon: "no-color-icon"
+  noColorIcon: "no-color-icon",
+  checker: "checker"
 };
 
 export const COLORS = {

src/components/calcite-color-picker/calcite-color-picker.e2e.ts

@@ -69,6 +69,10 @@ describe("calcite-color-picker", () => {
         propertyName: "allowEmpty",
         defaultValue: false
       },
+      {
+        propertyName: "alphaSupport",
+        defaultValue: false
+      },
       {
         propertyName: "appearance",
         defaultValue: "default"
@@ -248,11 +252,17 @@ describe("calcite-color-picker", () => {
 
   const supportedFormatToSampleValue = {
     hex: "#ffffff",
+    hexa: "#ffffffff",
     "rgb-css": "rgb(255, 255, 255)",
+    "rgba-css": "rgba(255, 255, 255, 1)",
     "hsl-css": "hsl(0, 0%, 100%)",
+    "hsla-css": "hsla(0, 0%, 100%, 1)",
     rgb: { r: 255, g: 255, b: 255 },
+    rgba: { r: 255, g: 255, b: 255, a: 1 },
     hsl: { h: 0, s: 0, l: 100 },
-    hsv: { h: 0, s: 0, v: 100 }
+    hsla: { h: 0, s: 0, l: 100, a: 1 },
+    hsv: { h: 0, s: 0, v: 100 },
+    hsva: { h: 0, s: 0, v: 100, a: 1 }
   };
 
   const clearAndEnterHexOrChannelValue = async (
@@ -366,8 +376,11 @@ describe("calcite-color-picker", () => {
 
     const supportedStringFormats = [
       supportedFormatToSampleValue.hex,
+      supportedFormatToSampleValue.hexa,
       supportedFormatToSampleValue["rgb-css"],
-      supportedFormatToSampleValue["hsl-css"]
+      supportedFormatToSampleValue["rgba-css"],
+      supportedFormatToSampleValue["hsl-css"],
+      supportedFormatToSampleValue["hsla-css"]
     ];
 
     for (const value of supportedStringFormats) {
@@ -379,8 +392,11 @@ describe("calcite-color-picker", () => {
 
     const supportedObjectFormats = [
       supportedFormatToSampleValue.rgb,
+      supportedFormatToSampleValue.rgba,
       supportedFormatToSampleValue.hsl,
-      supportedFormatToSampleValue.hsv
+      supportedFormatToSampleValue.hsla,
+      supportedFormatToSampleValue.hsv,
+      supportedFormatToSampleValue.hsva
     ];
 
     for (const value of supportedObjectFormats) {
@@ -577,6 +593,7 @@ describe("calcite-color-picker", () => {
   });
 
   it("normalizes shorthand CSS hex", async () => {
+    // TODO: needs alpha test
     const page = await newE2EPage({
       html: "<calcite-color-picker></calcite-color-picker>"
     });
@@ -638,6 +655,8 @@ describe("calcite-color-picker", () => {
       let page: E2EPage;
       let picker: E2EElement;
 
+      // TODO: needs alpha
+
       beforeEach(async () => {
         page = await newE2EPage({
           html: "<calcite-color-picker></calcite-color-picker>"
@@ -767,6 +786,7 @@ describe("calcite-color-picker", () => {
     });
 
     describe("color gets propagated to support inputs", () => {
+      // TODO: needs alpha
       describe("valid color", () => {
         it("color gets propagated to hex, RGB & HSV inputs", async () => {
           const page = await newE2EPage({
@@ -902,6 +922,7 @@ describe("calcite-color-picker", () => {
         });
 
         describe("clearing color via supporting inputs", () => {
+          // TODO: add alpha
           it("clears color via hex input", async () => {
             const page = await newE2EPage({
               html: "<calcite-color-picker allow-empty value='#c0ff33'></calcite-color-picker>"
@@ -961,6 +982,7 @@ describe("calcite-color-picker", () => {
         });
 
         it("restores previous color value when a nudge key is pressed", async () => {
+          // TODO: add alpha
           const consistentRgbHsvChannelValue = "0";
           const initialValue = "#".padEnd(7, consistentRgbHsvChannelValue);
 
@@ -1035,6 +1057,7 @@ describe("calcite-color-picker", () => {
   });
 
   describe("color storage", () => {
+    // TODO: add alpha
     const storageId = "test-storage-id";
     const color1 = "#ff00ff";
     const color2 = "#beefee";
@@ -1157,6 +1180,7 @@ describe("calcite-color-picker", () => {
   });
 
   it("allows hiding sections", async () => {
+    // TODO: add alpha hidden w/ channels
     const page = await newE2EPage({
       html: `<calcite-color-picker></calcite-color-picker>`
     });