🐛 Fix color picker position

frontend/playwright/ui/pages/WorkspacePage.js

@@ -44,6 +44,7 @@ export class WorkspacePage extends BaseWebSocketPage {
     this.viewport = page.getByTestId("viewport");
     this.rootShape = page.locator(`[id="shape-00000000-0000-0000-0000-000000000000"]`);
     this.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" });
+    this.colorpicker = page.getByTestId("colorpicker");
   }
 
   async goToWorkspace() {

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

@@ -0,0 +1,22 @@
+import { test, expect } from "@playwright/test";
+import { WorkspacePage } from "../pages/WorkspacePage";
+
+test.beforeEach(async ({ page }) => {
+  await WorkspacePage.init(page);
+});
+
+// Fix for https://tree.taiga.io/project/penpot/issue/7549
+test("Bug 7549 - User clicks on color swatch to display the color picker next to it", async ({ page }) => {
+  const workspacePage = new WorkspacePage(page);
+  await workspacePage.setupEmptyFile(page);
+
+  await workspacePage.goToWorkspace();
+  const swatch = workspacePage.page.getByRole("button", { name: "E8E9EA" });
+  const swatchBox = await swatch.boundingBox();
+  await swatch.click();
+
+  await expect(workspacePage.colorpicker).toBeVisible();
+  const pickerBox = await workspacePage.colorpicker.boundingBox();
+  const distance = swatchBox.x - (pickerBox.x + pickerBox.width);
+  expect(distance).toBeLessThan(60);
+});

frontend/src/app/main/ui/components/color_bullet.cljs

@@ -76,6 +76,7 @@
                   :is-transparent (and opacity (> 1 opacity))
                   :grid-area area
                   :read-only read-only?)
+          :role "button"
           :data-readonly (str read-only?)
           :on-click on-click
           :title (color-title color)}

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

@@ -372,15 +372,14 @@
 (defn calculate-position
   "Calculates the style properties for the given coordinates and position"
   [{vh :height} position x y]
-  (let [;; picker height in pixels
-        h        510
-
+  (let [;; picker size in pixels
+        h 510
+        w 284
         ;; Checks for overflow outside the viewport height
         max-y   (- vh h)
         rulers? (mf/deref refs/rulers?)
         left-offset (if rulers? 40 18)
-
-        x-pos 400]
+        right-offset (+ w 40)]
 
     (cond
       (or (nil? x) (nil? y))
@@ -388,9 +387,9 @@
 
       (= position :left)
       (if (> y max-y)
-        #js {:left (dm/str (- x x-pos) "px")
+        #js {:left (dm/str (- x right-offset) "px")
              :bottom "1rem"}
-        #js {:left (dm/str (- x x-pos) "px")
+        #js {:left (dm/str (- x right-offset) "px")
              :top (dm/str (- y 70) "px")})
 
       (= position :right)
@@ -440,6 +439,7 @@
          (on-close @last-change)))
 
     [:div {:class (stl/css :colorpicker-tooltip)
+           :data-testid "colorpicker"
            :style style}
 
      [:& colorpicker {:data data