fix(color-picker): fix opacity slider keyboard nudging (#7400)

**Related Issue:** #7394 ## Summary This fixes opacity thumb keyboard interaction.
Esri · Aug 1, 2023 · 2b4f7c3 · 2b4f7c3
1 parent d803980
commit 2b4f7c3
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
@@ -2299,5 +2299,31 @@ describe("calcite-color-picker", () => {
         expect(await colorPicker.getProperty("value")).not.toBe(value);
       });
     });
+
+    describe("alpha channel", () => {
+      it("allows editing alpha value via keyboard", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-color-picker alpha-channel value="#ffffffff"></calcite-color-picker>`);
+
+        const picker = await page.find("calcite-color-picker");
+        const scope = await page.find(`calcite-color-picker >>> .${CSS.opacityScope}`);
+
+        await scope.press("ArrowDown");
+        expect(await picker.getProperty("value")).toBe("#fffffffc");
+        await scope.press("ArrowDown");
+        expect(await picker.getProperty("value")).toBe("#fffffffa");
+        await scope.press("ArrowDown");
+        expect(await picker.getProperty("value")).toBe("#fffffff7");
+
+        await scope.press("ArrowUp");
+        expect(await picker.getProperty("value")).toBe("#fffffffa");
+
+        await scope.press("ArrowRight");
+        expect(await picker.getProperty("value")).toBe("#fffffffc");
+
+        await scope.press("ArrowLeft");
+        expect(await picker.getProperty("value")).toBe("#fffffffa");
+      });
+    });
   });
 });
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx
@@ -1581,16 +1581,18 @@ export class ColorPicker
     const modifier = event.shiftKey ? 10 : 1;
     const { key } = event;
     const arrowKeyToXOffset = {
-      ArrowUp: 1,
-      ArrowRight: 1,
-      ArrowDown: -1,
-      ArrowLeft: -1,
+      ArrowUp: 0.01,
+      ArrowRight: 0.01,
+      ArrowDown: -0.01,
+      ArrowLeft: -0.01,
     };
 
     if (arrowKeyToXOffset[key]) {
       event.preventDefault();
-      const delta = opacityToAlpha(arrowKeyToXOffset[key] * modifier);
-      this.captureHueSliderColor(this.opacityScopeLeft + delta);
+      const delta = arrowKeyToXOffset[key] * modifier;
+      const alpha = this.baseColorFieldColor.alpha();
+      const color = this.baseColorFieldColor.alpha(alpha + delta);
+      this.internalColorSet(color, false);
     }
   };