github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-10-28 21:40:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Use a DS button for edit grid in the grid cell options (#12385)

Browse Source 
* ♻️ 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

* ♻️ 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
This commit is contained in:
Eva Marco 2026-10-19 17:05:22 +02:00 committed by GitHub
parent 1c70b0ce2d
commit cdb7dc2977
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 71 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/playwright/ui/visual-specs/workspace.spec.js
View File

@ -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,
});
});
});

8
frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs
View File

@ -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")]]])]))

59
frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss
View File

@ -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);
}