diff --git a/frontend/playwright/data/workspace/get-file-9042.json b/frontend/playwright/data/workspace/get-file-9042.json new file mode 100644 index 000000000..f7f218077 --- /dev/null +++ b/frontend/playwright/data/workspace/get-file-9042.json @@ -0,0 +1,49 @@ +{ + "~:features": { + "~#set": [ + "layout/grid", + "styles/v2", + "fdata/pointer-map", + "fdata/objects-map", + "components/v2", + "fdata/shape-data-type" + ] + }, + "~:permissions": { + "~:type": "~:membership", + "~:is-owner": true, + "~:is-admin": true, + "~:can-edit": true, + "~:can-read": true, + "~:is-logged": true + }, + "~:has-media-trimmed": false, + "~:comment-thread-seqn": 0, + "~:name": "New File 5", + "~:revn": 3, + "~:modified-at": "~m1729245873067", + "~:id": "~uaf2494d0-39ba-8184-8005-230696f6df5c", + "~:is-shared": false, + "~:version": 55, + "~:project-id": "~u17866431-4e74-816e-8004-eba55c3a5694", + "~:created-at": "~m1729245083615", + "~:data": { + "~:pages": [ + "~uaf2494d0-39ba-8184-8005-230696f6df5d" + ], + "~:pages-index": { + "~uaf2494d0-39ba-8184-8005-230696f6df5d": { + "~#penpot/pointer": [ + "~uaf2494d0-39ba-8184-8005-230999ec862d", + { + "~:created-at": "~m1729245873074" + } + ] + } + }, + "~:id": "~uaf2494d0-39ba-8184-8005-230696f6df5c", + "~:options": { + "~:components-v2": true + } + } +} \ No newline at end of file diff --git a/frontend/playwright/data/workspace/get-file-fragment-9042.json b/frontend/playwright/data/workspace/get-file-fragment-9042.json new file mode 100644 index 000000000..aed00751d --- /dev/null +++ b/frontend/playwright/data/workspace/get-file-fragment-9042.json @@ -0,0 +1,270 @@ +{ + "~:id": "~uaf2494d0-39ba-8184-8005-230999ec862d", + "~:file-id": "~uaf2494d0-39ba-8184-8005-230696f6df5c", + "~:created-at": "~m1729245873057", + "~:data": { + "~:options": {}, + "~:objects": { + "~u00000000-0000-0000-0000-000000000000": { + "~#shape": { + "~:y": 0, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:name": "Root Frame", + "~:width": 0.01, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 0.0, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.01 + } + }, + { + "~#point": { + "~:x": 0.0, + "~:y": 0.01 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u00000000-0000-0000-0000-000000000000", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 0, + "~:proportion": 1.0, + "~:selrect": { + "~#rect": { + "~:x": 0, + "~:y": 0, + "~:width": 0.01, + "~:height": 0.01, + "~:x1": 0, + "~:y1": 0, + "~:x2": 0.01, + "~:y2": 0.01 + } + }, + "~:fills": [ + { + "~:fill-color": "#FFFFFF", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 0.01, + "~:flip-y": null, + "~:shapes": [ + "~u8611ed3e-43d1-80dc-8005-23069fddf984" + ] + } + }, + "~u8611ed3e-43d1-80dc-8005-23069fddf984": { + "~#shape": { + "~:y": 128, + "~:layout-grid-columns": [ + { + "~:type": "~:flex", + "~:value": 1 + }, + { + "~:type": "~:flex", + "~:value": 1 + } + ], + "~:hide-fill-on-export": false, + "~:layout-gap-type": "~:multiple", + "~:layout-padding": { + "~:p1": 0, + "~:p2": 0, + "~:p3": 0, + "~:p4": 0 + }, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:layout": "~:grid", + "~:hide-in-viewer": false, + "~:name": "Board", + "~:layout-align-items": "~:start", + "~:width": 200, + "~:layout-grid-cells": { + "~u96353b58-4e42-8052-8005-230996dafe13": { + "~:justify-self": "~:auto", + "~:column": 1, + "~:id": "~u96353b58-4e42-8052-8005-230996dafe13", + "~:position": "~:auto", + "~:column-span": 1, + "~:align-self": "~:auto", + "~:row": 1, + "~:row-span": 1, + "~:shapes": [] + }, + "~u96353b58-4e42-8052-8005-230996dafe14": { + "~:justify-self": "~:auto", + "~:column": 2, + "~:id": "~u96353b58-4e42-8052-8005-230996dafe14", + "~:position": "~:auto", + "~:column-span": 1, + "~:align-self": "~:auto", + "~:row": 1, + "~:row-span": 1, + "~:shapes": [] + }, + "~u96353b58-4e42-8052-8005-230996dafe15": { + "~:justify-self": "~:auto", + "~:column": 1, + "~:id": "~u96353b58-4e42-8052-8005-230996dafe15", + "~:position": "~:auto", + "~:column-span": 1, + "~:align-self": "~:auto", + "~:row": 2, + "~:row-span": 1, + "~:shapes": [] + }, + "~u96353b58-4e42-8052-8005-230996dafe16": { + "~:justify-self": "~:auto", + "~:column": 2, + "~:id": "~u96353b58-4e42-8052-8005-230996dafe16", + "~:position": "~:auto", + "~:column-span": 1, + "~:align-self": "~:auto", + "~:row": 2, + "~:row-span": 1, + "~:shapes": [] + } + }, + "~:layout-padding-type": "~:simple", + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 128, + "~:y": 128 + } + }, + { + "~#point": { + "~:x": 328, + "~:y": 128 + } + }, + { + "~#point": { + "~:x": 328, + "~:y": 328 + } + }, + { + "~#point": { + "~:x": 128, + "~:y": 328 + } + } + ], + "~:proportion-lock": false, + "~:layout-gap": { + "~:row-gap": 0, + "~:column-gap": 0 + }, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:layout-justify-content": "~:stretch", + "~:id": "~u8611ed3e-43d1-80dc-8005-23069fddf984", + "~:layout-justify-items": "~:start", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:layout-align-content": "~:stretch", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 128, + "~:proportion": 1, + "~:layout-grid-rows": [ + { + "~:type": "~:flex", + "~:value": 1 + }, + { + "~:type": "~:flex", + "~:value": 1 + } + ], + "~:selrect": { + "~#rect": { + "~:x": 128, + "~:y": 128, + "~:width": 200, + "~:height": 200, + "~:x1": 128, + "~:y1": 128, + "~:x2": 328, + "~:y2": 328 + } + }, + "~:fills": [ + { + "~:fill-color": "#FFFFFF", + "~:fill-opacity": 1 + } + ], + "~:layout-grid-dir": "~:row", + "~:flip-x": null, + "~:height": 200, + "~:flip-y": null, + "~:shapes": [] + } + } + }, + "~:id": "~uaf2494d0-39ba-8184-8005-230696f6df5d", + "~:name": "Page 1" + } +} \ No newline at end of file diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js index 60b740859..6a5af216a 100644 --- a/frontend/playwright/ui/pages/WorkspacePage.js +++ b/frontend/playwright/ui/pages/WorkspacePage.js @@ -61,6 +61,7 @@ export class WorkspacePage extends BaseWebSocketPage { ); this.toolbarOptions = page.getByTestId("toolbar-options"); this.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" }); + this.boardButton = page.getByRole("button", { name: "Board (B)" }); this.toggleToolbarButton = page.getByRole("button", { name: "Toggle toolbar", }); diff --git a/frontend/playwright/ui/specs/inspect-layout.spec.js b/frontend/playwright/ui/specs/inspect-layout.spec.js new file mode 100644 index 000000000..afed6ace0 --- /dev/null +++ b/frontend/playwright/ui/specs/inspect-layout.spec.js @@ -0,0 +1,34 @@ +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/9042 +test("Bug 9042 - Measurement unit dropdowns for columns are cut off in grid layout edit mode", async ({ + page, +}) => { + const workspacePage = new WorkspacePage(page); + await workspacePage.setupEmptyFile(page); + await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-9042.json"); + await workspacePage.mockRPC( + "get-file-fragment?file-id=*&fragment-id=*", + "workspace/get-file-fragment-9042.json", + ); + + await workspacePage.goToWorkspace({ + fileId: "af2494d0-39ba-8184-8005-230696f6df5c", + pageId: "af2494d0-39ba-8184-8005-230696f6df5d", + }); + await workspacePage.clickLeafLayer("Board"); + await workspacePage.expectSelectedLayer("Board"); + + const layoutContainer = workspacePage.page.getByTestId("inspect-layout"); + await layoutContainer.getByRole("button", { name: "Edit grid" }).click(); + const rowsContainer = workspacePage.page.getByTestId("inspect-layout-rows"); + await rowsContainer.click(); + + await rowsContainer.getByText("FR").nth(2).click(); + await expect(rowsContainer.getByText("%")).toBeInViewport(); +}); diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index 5bede159d..4d29786cc 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -776,13 +776,14 @@ track-detail (str/join ", " (map manage-values column-values)) type (if is-column :column :row) + testid (when (not is-column) "inspect-layout-rows") add-track #(do (when-not expanded? (toggle)) (add-new-element type ctl/default-track-value))] - [:div {:class (stl/css :grid-tracks)} + [:div {:class (stl/css :grid-tracks) :data-testid testid} [:div {:class (stl/css :grid-track-header)} [:button {:class (stl/css :expand-icon) :on-click toggle} i/menu] [:div {:class (stl/css :track-title) :on-click toggle} @@ -982,7 +983,7 @@ on-hide-dropdown (mf/use-fn #(reset! show-dropdown* false))] - [:div {:class (stl/css :element-set)} + [:div {:class (stl/css :element-set) :data-testid "inspect-layout"} [:div {:class (stl/css :element-title)} [:& title-bar {:collapsable has-layout? @@ -996,6 +997,7 @@ (when ^boolean grid-enabled? [:* [:button {:class (stl/css :add-layout) + :aria-label "Add" :on-click on-toggle-dropdown-visibility} i/menu] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss index 00d7c2f7f..465489f91 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss @@ -150,7 +150,6 @@ .grid-layout-menu { @include flexColumn; gap: $s-8; - overflow: hidden; .row { @include flexRow; @@ -282,7 +281,7 @@ } .track-title { - @include flexColumn; + display: grid; flex-grow: 1; padding: $s-8; gap: 0;