From cdb7dc2977620ef1500bc492d657a6f3e94bcdf5 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Mon, 19 Oct 2026 17:05:22 +0200 Subject: [PATCH] :recycle: Use a DS button for edit grid in the grid cell options (#12385) * :recycle: Use a DS button for edit grid in the grid cell options Replace the raw "Edit grid" button of the grid cell options with the DS secondary button. Drop its alt attribute, which is not valid on a button; the label already names it. The column and row icons label the numeric inputs, so they move with the numeric inputs migration. Add a visual test that selects a cell in grid edit mode so the options show. AI-assisted-by: claude-opus-5-5 * :recycle: Move grid cell options styles to DS tokens The edit grid button is a DS button now, so its button placeholder and typography mixin go away; the class only stretches it and centers its label. Merge the two .grid-cell-menu-container rules, inline the flex mixins, and move spacing, borders and color aliases to DS tokens and logical properties. Use the DS body-small typography in the inputs; its line-height is 1.3 instead of 1.4. The refactor/ import stays only for %input-element and %button-icon, used by the inputs and their legacy icons, which move with the numeric inputs migration. AI-assisted-by: claude-opus-5-5 --- .../ui/visual-specs/workspace.spec.js | 36 +++++++++++ .../sidebar/options/menus/grid_cell.cljs | 8 +-- .../sidebar/options/menus/grid_cell.scss | 59 ++++++++++--------- 3 files changed, 71 insertions(+), 32 deletions(-) diff --git a/frontend/playwright/ui/visual-specs/workspace.spec.js b/frontend/playwright/ui/visual-specs/workspace.spec.js index 73c5e2a524..7d21687ba7 100644 --- a/frontend/playwright/ui/visual-specs/workspace.spec.js +++ b/frontend/playwright/ui/visual-specs/workspace.spec.js @@ -449,3 +449,39 @@ test.describe("Imported SVG attributes", () => { }); }); }); + +test.describe("Grid cell options", () => { + test("Shows the grid cell options when selecting a cell", async ({ + page, + }) => { + const workspace = new WorkspacePage(page); + await workspace.setupEmptyFile(); + await workspace.mockRPC(/get\-file\?/, "workspace/get-file-9042.json"); + await workspace.mockRPC( + "get-file-fragment?file-id=*&fragment-id=*", + "workspace/get-file-fragment-9042.json", + ); + await workspace.goToWorkspace({ + fileId: "af2494d0-39ba-8184-8005-230696f6df5c", + pageId: "af2494d0-39ba-8184-8005-230696f6df5d", + }); + + await workspace.clickLeafLayer("Board"); + await page + .getByTestId("inspect-layout") + .getByRole("button", { name: "Edit grid" }) + .click(); + + // Click the first cell of the grid editor. + const cell = page.locator("g.cell-editor > rect").first(); + const box = await cell.boundingBox(); + await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2); + + await expect(workspace.rightSidebar.getByText("Grid cell")).toBeVisible(); + // The cell options are a small part of the sidebar: compare every pixel. + await expect(workspace.rightSidebar).toHaveScreenshot({ + maxDiffPixelRatio: 0, + threshold: 0, + }); + }); +}); diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs index 2434c66c07..b7ee6b4f6e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs @@ -19,6 +19,7 @@ [app.main.ui.components.numeric-input :as deprecated-input] [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.components.title-bar :refer [title-bar*]] + [app.main.ui.ds.buttons.button :refer [button*]] [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.hooks :as hooks] [app.main.ui.icons :as deprecated-icon] @@ -289,8 +290,7 @@ :set-alignment set-justify-self}]] [:div {:class (stl/css :row)} - [:button - {:class (stl/css :edit-grid-btn) - :alt (tr "workspace.layout-grid.editor.options.edit-grid") - :on-click toggle-edit-mode} + [:> button* {:variant "secondary" + :class (stl/css :edit-grid-btn) + :on-click toggle-edit-mode} (tr "workspace.layout-grid.editor.options.edit-grid")]]])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss index 8c245a491f..6b2092b133 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss @@ -4,14 +4,20 @@ // // Copyright (c) KALEIDOS SUBSIDIARY SL +// Only for %input-element and %button-icon: the inputs and their icons move +// to the DS in their own plan. @use "refactor/common-refactor.scss" as deprecated; +@use "ds/_borders.scss" as *; +@use "ds/_utils.scss" as *; +@use "ds/typography.scss" as *; @use "../../../sidebar/common/sidebar.scss" as sidebar; .grid-cell-menu-container { - @include deprecated.flex-column; - - margin-top: deprecated.$s-8; - gap: deprecated.$s-16; + display: flex; + flex-direction: column; + gap: var(--sp-l); + grid-column: span 8; + margin-block-start: var(--sp-s); } .grid-cell-menu { @@ -20,55 +26,52 @@ .grid-cell-menu-title { grid-column: span 8; - font-size: deprecated.$fs-11; -} - -.grid-cell-menu-container { - grid-column: span 8; + font-size: px2rem(11); } .row { - @include deprecated.flex-row; + display: flex; + align-items: center; + gap: var(--sp-xs); } .cell-mode :global(label) { - padding: 0 deprecated.$s-12; + padding: 0 var(--sp-m); } .edit-grid-btn { - @extend %button-secondary; - @include deprecated.uppercase-title-typography; - - width: 100%; - padding: deprecated.$s-8; + justify-content: center; + inline-size: 100%; } .area-input { @extend %input-element; - @include deprecated.body-small-typography; + @include use-typography("body-small"); - width: 100%; - padding: deprecated.$s-8; + inline-size: 100%; + padding: var(--sp-s); } .grid-coord-group { - @include deprecated.flex-row; - - border-radius: deprecated.$br-8; - padding-left: deprecated.$s-4; - background-color: var(--input-background-color); + display: flex; + align-items: center; + gap: var(--sp-xs); + border-radius: $br-8; + padding-inline-start: var(--sp-xs); + background-color: var(--color-background-tertiary); } +// The legacy icon is a raw svg with no class of its own. .icon svg { @extend %button-icon; - stroke: var(--icon-foreground); + stroke: var(--color-foreground-secondary); } .coord-input { @extend %input-element; - @include deprecated.body-small-typography; + @include use-typography("body-small"); - border-radius: 0 deprecated.$br-8 deprecated.$br-8 0; - border-left: deprecated.$s-1 solid var(--panel-background-color); + border-radius: 0 $br-8 $br-8 0; + border-inline-start: $b-1 solid var(--color-background-primary); }