From 33192cfdb8365f21c707bcdaef44d55816738fc5 Mon Sep 17 00:00:00 2001
From: AzazelN28 <asakon28@gmail.com>
Date: Fri, 24 Jan 2025 12:50:52 +0100
Subject: [PATCH] :bug: Fix colorpicker HSVA inputs

---
 .../playwright/ui/specs/colorpicker.spec.js   | 19 +++++++++++++++++++
 .../app/main/ui/workspace/colorpicker.cljs    |  4 +++-
 .../workspace/colorpicker/color_inputs.cljs   | 16 ++++++++--------
 3 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/frontend/playwright/ui/specs/colorpicker.spec.js b/frontend/playwright/ui/specs/colorpicker.spec.js
index 0ea20f52b..d415649fd 100644
--- a/frontend/playwright/ui/specs/colorpicker.spec.js
+++ b/frontend/playwright/ui/specs/colorpicker.spec.js
@@ -22,3 +22,22 @@ test("Bug 7549 - User clicks on color swatch to display the color picker next to
   const distance = swatchBox.x - (pickerBox.x + pickerBox.width);
   expect(distance).toBeLessThan(60);
 });
+
+// Fix for https://tree.taiga.io/project/penpot/issue/9900
+test("Bug 9900 - Color picker has no inputs for HSV values", async ({
+  page,
+}) => {
+  const workspacePage = new WorkspacePage(page);
+  await workspacePage.setupEmptyFile(page);
+
+  await workspacePage.goToWorkspace();
+  const swatch = workspacePage.page.getByRole("button", { name: "E8E9EA" });
+  await swatch.click();
+
+  const HSVA = await workspacePage.page.getByLabel("HSVA");
+  await HSVA.click();
+
+  await workspacePage.page.getByLabel("H", { exact: true }).isVisible();
+  await workspacePage.page.getByLabel("S", { exact: true }).isVisible();
+  await workspacePage.page.getByLabel("V", { exact: true }).isVisible();
+});
diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs
index fe6ea243e..1843614b5 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs
@@ -97,6 +97,8 @@
         active-color-tab       (mf/use-state (dc/get-active-color-tab))
         drag?                  (mf/use-state false)
 
+        type                   (if (= @active-color-tab "hsva") :hsv :rgb)
+
         fill-image-ref         (mf/use-ref nil)
 
         selected-mode          (get state :type :color)
@@ -358,7 +360,7 @@
                             :on-change-tab on-change-tab}]]
 
         [:& color-inputs
-         {:type (if (= @active-color-tab :hsva) :hsv :rgb)
+         {:type type
           :disable-opacity disable-opacity
           :color current-color
           :on-change handle-change-color}]
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.cljs b/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.cljs
index 53fb08dfd..5bf07553e 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.cljs
@@ -120,7 +120,7 @@
       (if (= type :rgb)
         [:*
          [:div {:class (stl/css :input-wrapper)}
-          [:span {:class (stl/css :input-label)} "R"]
+          [:label {:for "red-value" :class (stl/css :input-label)} "R"]
           [:input {:id "red-value"
                    :ref (:r refs)
                    :type "number"
@@ -129,7 +129,7 @@
                    :default-value red
                    :on-change (on-change-property :r 255)}]]
          [:div {:class (stl/css :input-wrapper)}
-          [:span {:class (stl/css :input-label)} "G"]
+          [:label {:for "green-value" :class (stl/css :input-label)} "G"]
           [:input {:id "green-value"
                    :ref (:g refs)
                    :type "number"
@@ -138,7 +138,7 @@
                    :default-value green
                    :on-change (on-change-property :g 255)}]]
          [:div {:class (stl/css :input-wrapper)}
-          [:span {:class (stl/css :input-label)} "B"]
+          [:label {:for "blue-value" :class (stl/css :input-label)} "B"]
           [:input {:id "blue-value"
                    :ref (:b refs)
                    :type "number"
@@ -149,7 +149,7 @@
 
         [:*
          [:div {:class (stl/css :input-wrapper)}
-          [:span {:class (stl/css :input-label)} "H"]
+          [:label {:for "hue-value" :class (stl/css :input-label)} "H"]
           [:input {:id "hue-value"
                    :ref (:h refs)
                    :type "number"
@@ -158,7 +158,7 @@
                    :default-value hue
                    :on-change (on-change-property :h 360)}]]
          [:div {:class (stl/css :input-wrapper)}
-          [:span {:class (stl/css :input-label)} "S"]
+          [:label {:for "saturation-value" :class (stl/css :input-label)} "S"]
           [:input {:id "saturation-value"
                    :ref (:s refs)
                    :type "number"
@@ -168,7 +168,7 @@
                    :default-value saturation
                    :on-change (on-change-property :s 100)}]]
          [:div {:class (stl/css :input-wrapper)}
-          [:span {:class (stl/css :input-label)} "V"]
+          [:label {:for "value-value" :class (stl/css :input-label)} "V"]
           [:input {:id "value-value"
                    :ref (:v refs)
                    :type "number"
@@ -179,7 +179,7 @@
      [:div {:class (stl/css :hex-alpha-wrapper)}
       [:div {:class (stl/css-case :input-wrapper true
                                   :hex true)}
-       [:span {:class (stl/css :input-label)} "HEX"]
+       [:label {:for "hex-value" :class (stl/css :input-label)} "HEX"]
        [:input {:id "hex-value"
                 :ref (:hex refs)
                 :default-value hex
@@ -187,7 +187,7 @@
                 :on-blur on-blur-hex}]]
       (when (not disable-opacity)
         [:div {:class (stl/css-case :input-wrapper true)}
-         [:span {:class (stl/css :input-label)} "A"]
+         [:label {:for "alpha-value" :class (stl/css :input-label)} "A"]
          [:input {:id "alpha-value"
                   :ref (:alpha refs)
                   :type "number"