🐛 Fix colorpicker eyedropper on gradients tab (#9125)

* 🐛 Fix colorpicker eyedropper on gradients tab

* 🐛 Fix gradient test deleting opacity input

CHANGES.md

@@ -81,6 +81,8 @@
 - Fix incorrect rendering when exporting text as SVG, PNG and JPG (by @edwin-rivera-dev) [Github #8516](https://github.com/penpot/penpot/issues/8516)
 - Fix plugin `addInteraction` silently rejecting `open-overlay` actions with `manualPositionLocation` [Github #8409](https://github.com/penpot/penpot/issues/8409)
 - Fix typography style creation with tokenized line-height (by @juan-flores077) [Github #8479](https://github.com/penpot/penpot/issues/8479)
+- Fix colorpicker layout so the eyedropper button is visible again [Taiga #14057](https://tree.taiga.io/project/penpot/issue/14057)
+
 
 ## 2.16.0 (Unreleased)
 

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

@@ -85,14 +85,6 @@ test("Create a LINEAR gradient", async ({ page }) => {
     .last();
   await inputOpacity2.fill("40");
 
-  const inputOpacityGlobal = workspacePage.colorpicker.getByTestId(
-    "opacity-global-input",
-  );
-  await inputOpacityGlobal.fill("50");
-  await inputOpacityGlobal.press("Enter");
-  await expect(inputOpacityGlobal).toHaveValue("50");
-  await expect(inputOpacityGlobal).toBeVisible();
-
   await expect(
     workspacePage.page.getByText("Linear gradient")
   ).toBeVisible();
@@ -169,14 +161,6 @@ test("Create a RADIAL gradient", async ({ page }) => {
     .last();
   await inputOpacity2.fill("100");
 
-  const inputOpacityGlobal = workspacePage.colorpicker.getByTestId(
-    "opacity-global-input",
-  );
-  await inputOpacityGlobal.fill("50");
-  await inputOpacityGlobal.press("Enter");
-  await expect(inputOpacityGlobal).toHaveValue("50");
-  await expect(inputOpacityGlobal).toBeVisible();
-
   await expect(
     workspacePage.page.getByText("Radial gradient")
   ).toBeVisible();

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

@@ -26,7 +26,6 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.file-uploader :refer [file-uploader]]
-   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.radio-buttons :refer [radio-buttons radio-button]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.ds.foundations.assets.icon :as i]
@@ -341,11 +340,6 @@
                  (mapv #(assoc %2 :offset (:offset %1)) stops new-stops)]
              (st/emit! (dc/update-colorpicker-stops stops)))))
 
-        handle-change-gradient-opacity
-        (mf/use-fn
-         (fn [value]
-           (st/emit! (dc/update-colorpicker-gradient-opacity (/ value 100)))))
-
         render-wasm?
         (features/use-feature "render-wasm/v1")
 
@@ -394,17 +388,6 @@
       [:div {:class (stl/css :top-actions)}
 
        [:div {:class (stl/css :top-actions-right)}
-        (when (and (= color-style :direct-color)
-                   (= :gradient selected-mode))
-          [:div {:class (stl/css :opacity-input-wrapper)}
-           [:span {:class (stl/css :icon-text)} "%"]
-           [:> numeric-input*
-            {:value (-> data :opacity opacity->string)
-             :on-change handle-change-gradient-opacity
-             :default 100
-             :data-testid "opacity-global-input"
-             :min 0
-             :max 100}]])
 
         (when (and (= color-style :direct-color)
                    (or (not disable-gradient) (not disable-image)))