github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-10-29 05:50:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Use DS buttons and icons in the grid layout options (#12431)

Browse Source 
* ♻️ Use DS buttons and icons in the grid layout options

The "Edit grid" button of a grid layout and the "Exit" button of the grid
editor were raw buttons with the deprecated secondary style. Replace them
with DS secondary buttons; their text and actions stay the same. Drop the
"alt" attribute of "Edit grid": it is not valid on a button.

The expand and add buttons of the column and row headers are 52px parts of
a custom header, not DS buttons, so they stay raw; only their deprecated
icons move to the DS icon, as does the direction icon of each track.

Add a visual test that shows the grid layout options and the grid editor
with the column tracks expanded.

AI-assisted-by: claude-opus-5-5

* ♻️ Remove deprecated button styles from the grid layout options

"Edit grid" and "Exit" are now DS buttons, so their secondary placeholder
and typography go away; the classes only place them in the grid and center
their label. The track header and direction icons drop the deprecated icon
placeholder and get their colors through classes. The header buttons keep
their secondary and tertiary placeholders, since they stay raw.

AI-assisted-by: claude-opus-5-5
This commit is contained in:
Eva Marco 2026-10-19 15:49:14 +02:00 committed by GitHub
parent 3d6823eacd
commit e4da0527fc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 66 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,6 +53,44 @@ test.describe("Viewport", () => {
});
});
test.describe("Grid layout", () => {
test("Shows the grid layout options and the grid editor", 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");
const section = page.getByTestId("inspect-layout");
await expect(section.getByRole("button", { name: "Edit grid" }))
.toBeVisible();
// The buttons are a small part of the section: compare every pixel.
await expect(section).toHaveScreenshot("grid-layout-options.png", {
maxDiffPixelRatio: 0,
threshold: 0,
});
await section.getByRole("button", { name: "Edit grid" }).click();
await expect(workspace.rightSidebar.getByText("GRID LAYOUT")).toBeVisible();
// Expand the column tracks so their rows show too.
await workspace.rightSidebar.getByText(/^Columns? \d/).click();
await page.mouse.move(0, 0);
await expect(workspace.rightSidebar).toHaveScreenshot(
"grid-layout-editor.png",
{ maxDiffPixelRatio: 0, threshold: 0 },
);
});
});
test.describe("Design tab", () => {
test("Shows the boolean options when selecting two shapes", async ({
page,

24
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View File

@ -25,8 +25,9 @@
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.components.select :refer [select]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.ds.buttons.button :refer [button*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
[app.main.ui.formats :as fmt]
[app.main.ui.hooks :as h]
[app.main.ui.icons :as deprecated-icon]
@ -845,10 +846,9 @@
(if-not active?
(st/emit! (udw/start-edition-mode id))
(st/emit! :interrupt))))]
[:button
{:class (stl/css :edit-mode-btn)
:alt "Grid edit mode"
:on-click toggle-edit-mode}
[:> button* {:variant "secondary"
:class (stl/css :edit-mode-btn)
:on-click toggle-edit-mode}
(tr "workspace.layout-grid.editor.options.edit-grid")]))
(mf/defc align-grid-row
@ -988,7 +988,8 @@
[:div {:class (stl/css :track-info-container)}
[:div {:class (stl/css :track-info-dir-icon)
:on-click handle-select-track}
(if is-column deprecated-icon/flex-vertical deprecated-icon/flex-horizontal)]
[:> icon* {:icon-id (if is-column i/flex-vertical i/flex-horizontal)
:class (stl/css :track-info-dir)}]]
[:div {:class (stl/css :track-info-value)}
[:> deprecated-input/numeric-input* {:no-validate true
@ -1036,11 +1037,13 @@
[: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} deprecated-icon/menu]
[:button {:class (stl/css :expand-icon) :on-click toggle}
[:> icon* {:icon-id i/menu :class (stl/css :expand-icon-svg)}]]
[:div {:class (stl/css :track-title) :on-click toggle}
[:div {:class (stl/css :track-name) :title track-name} track-name]
[:div {:class (stl/css :track-detail) :title track-detail} track-detail]]
[:button {:class (stl/css :add-column) :on-click add-track} deprecated-icon/add]]
[:button {:class (stl/css :add-column) :on-click add-track}
[:> icon* {:icon-id i/add :size "s" :class (stl/css :add-column-svg)}]]]
(when expanded?
[:> h/sortable-container* {}
@ -1568,8 +1571,9 @@
:aria-label (tr "labels.help-center")
:on-click open-grid-help
:icon i/help}]
[:button {:class (stl/css :exit-btn)
:on-click #(st/emit! (udw/clear-edition-mode))}
[:> button* {:variant "secondary"
:class (stl/css :exit-btn)
:on-click #(st/emit! (udw/clear-edition-mode))}
(tr "workspace.layout-grid.editor.options.exit")]]
[:div {:class (stl/css :row :first-row)}

55
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
View File

@ -176,22 +176,14 @@
grid-column: span 5;
}
// TODO: Replace this buttons with DS buttons
.edit-mode-btn {
@extend %button-secondary;
@include t.use-typography("headline-small");
inline-size: 100%;
padding: var(--sp-s);
justify-content: center;
grid-column: span 7;
}
// TODO: Replace this buttons with DS buttons
.exit-btn {
@extend %button-secondary;
@include t.use-typography("headline-small");
padding: var(--sp-s) var(--sp-xl);
justify-content: center;
grid-column: span 2;
}
@ -237,22 +229,17 @@
grid-column: 1 / span 7;
}
// TODO: Replace this buttons with DS buttons
.track-info-dir-icon {
display: flex;
align-items: center;
cursor: pointer;
border-radius: $br-8 0 0 $br-8;
background-color: var(--color-background-tertiary);
padding: 0 var(--sp-s);
color: var(--color-foreground-secondary);
svg {
@extend %button-icon;
stroke: var(--color-foreground-secondary);
block-size: 100%;
}
&:hover svg {
stroke: var(--color-foreground-primary);
&:hover {
color: var(--color-foreground-primary);
}
}
@ -309,7 +296,8 @@
color: var(--color-foreground-secondary);
}
// TODO: Replace this buttons with DS buttons
// Raw buttons on purpose: they are 52px segments of the track header, not
// DS buttons. The nested icon rules win over the placeholder svg colors.
.expand-icon {
@extend %button-secondary;
@ -317,38 +305,23 @@
border-radius: $br-8 0 0 $br-8;
border-inline-end: $b-1 solid var(--color-background-primary);
svg {
@extend %button-icon;
.expand-icon-svg {
stroke: var(--color-foreground-secondary);
fill: var(--color-foreground-secondary);
}
&:hover,
&:active {
svg {
stroke: var(--color-accent-primary);
fill: var(--color-accent-primary);
}
&:hover .expand-icon-svg,
&:active .expand-icon-svg {
stroke: var(--color-accent-primary);
}
}
// TODO: Replace this buttons with DS buttons
.add-column {
@extend %button-tertiary;
block-size: px2rem(52);
svg {
display: flex;
justify-content: center;
align-items: center;
color: transparent;
stroke-width: px2rem(1);
block-size: $sz-12;
inline-size: $sz-12;
.add-column-svg {
stroke: var(--color-foreground-secondary);
fill: var(--color-foreground-secondary);
}
}