🐛 Fix problem when changing colorpicker alpha (#5770)

frontend/playwright/ui/specs/colorpicker.spec.js

@@ -181,3 +181,34 @@ test("Bug 9900 - Color picker has no inputs for HSV values", async ({
   await workspacePage.page.getByLabel("S", { exact: true }).isVisible();
   await workspacePage.page.getByLabel("V", { exact: true }).isVisible();
 });
+
+test("Bug 10089 - Cannot change alpha", async ({ page }) => {
+  const workspacePage = new WorkspacePage(page);
+  await workspacePage.setupEmptyFile();
+  await workspacePage.mockRPC(
+    /get\-file\?/,
+    "workspace/get-file-not-empty.json",
+  );
+  await workspacePage.mockRPC(
+    "update-file?id=*",
+    "workspace/update-file-create-rect.json",
+  );
+
+  await workspacePage.goToWorkspace({
+    fileId: "6191cd35-bb1f-81f7-8004-7cc63d087374",
+    pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375",
+  });
+  await workspacePage.clickLeafLayer("Rectangle");
+
+  const swatch = workspacePage.page.getByRole("button", { name: "#B1B2B5" });
+  const swatchBox = await swatch.boundingBox();
+  await swatch.click();
+
+  const alpha = workspacePage.page.getByLabel("A", { exact: true });
+  await expect(alpha).toHaveValue("100");
+
+  const alphaSlider = workspacePage.page.getByTestId("slider-opacity");
+  await alphaSlider.click();
+
+  await expect(alpha).toHaveValue("50");
+});

frontend/src/app/main/ui/workspace/colorpicker.cljs

@@ -181,7 +181,8 @@
            (when (or (not= (str/lower (:hex color)) (str/lower (:hex current-color)))
                      (not= (:h color) (:h current-color))
                      (not= (:s color) (:s current-color))
-                     (not= (:v color) (:v current-color)))
+                     (not= (:v color) (:v current-color))
+                     (not= (:alpha color) (:alpha current-color)))
              (let [recent-color (merge current-color color)
                    recent-color (dc/materialize-color-components recent-color)]
                (st/emit! (dc/update-colorpicker-color recent-color (not @drag?)))))))

frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs

@@ -57,6 +57,7 @@
                                               :hue (= type :hue)
                                               :opacity (= type :opacity)
                                               :value (= type :value)))
+           :data-testid (when (= type :opacity) "slider-opacity")
            :on-pointer-down handle-start-drag
            :on-pointer-up handle-stop-drag
            :on-lost-pointer-capture handle-stop-drag