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 DS buttons for more colors in the selected colors (#12369)

Browse Source 
* ♻️ Use DS buttons for more colors in the selected colors

Replace the three raw "more colors" buttons (library colors, colors and
color tokens) with the DS secondary button.

Add a visual test that selects a board with more than three colors so
the button shows.

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

* ♻️ Move selected colors styles to DS tokens

The "more colors" buttons are DS buttons now, so their placeholder and
typography mixin go away; the class only centers the label, since the
column stretches the button. Delete the unused .add-fill rule, move
spacing to DS tokens and logical properties, and drop the refactor/
import.

AI-assisted-by: claude-opus-5-5
This commit is contained in:
Eva Marco 2026-10-15 20:06:29 +02:00 committed by GitHub
parent 47f0e15744
commit d26a401637
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 44 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -188,3 +188,27 @@ test.describe("Palette", () => {
).toBeVisible();
});
});
test.describe("Selected colors", () => {
test("Shows the more colors button", async ({ page }) => {
const workspace = new WorkspacePage(page);
await workspace.setupEmptyFile();
await workspace.mockRPC(/get\-file\?/, "workspace/get-file-9066.json");
await workspace.goToWorkspace({
fileId: "e179d9df-de35-80bf-8005-283bbd5516b0",
pageId: "e179d9df-de35-80bf-8005-283bbd5516b1",
});
await workspace.clickToggableLayer("Board");
await page.keyboard.press("Control+A");
await expect(
workspace.rightSidebar.getByRole("button", { name: "More colors" }),
).toBeVisible();
// The button is a small part of the sidebar: compare every pixel.
await expect(workspace.rightSidebar).toHaveScreenshot({
maxDiffPixelRatio: 0,
threshold: 0,
});
});
});

16
frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
View File

@ -14,6 +14,7 @@
[app.main.data.workspace.tokens.application :as dwta]
[app.main.store :as st]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.ds.buttons.button :refer [button*]]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]))
@ -247,8 +248,9 @@
:origin :color-selection
:on-close on-close}]))
(when (and (false? @expand-lib-color) (< 3 (count library-colors)))
[:button {:class (stl/css :more-colors-btn)
:on-click #(reset! expand-lib-color true)}
[:> button* {:variant "secondary"
:class (stl/css :more-colors-btn)
:on-click #(reset! expand-lib-color true)}
(tr "workspace.options.more-lib-colors")])]
[:div {:class (stl/css :selected-color-group)}
@ -265,8 +267,9 @@
:on-close on-close}])
(when (and (false? @expand-color) (< 3 (count colors)))
[:button {:class (stl/css :more-colors-btn)
:on-click #(reset! expand-color true)}
[:> button* {:variant "secondary"
:class (stl/css :more-colors-btn)
:on-click #(reset! expand-color true)}
(tr "workspace.options.more-colors")])]
[:div {:class (stl/css :selected-color-group)}
@ -288,6 +291,7 @@
(when (and (false? @expand-token-color)
(< 3 (count token-colors)))
[:button {:class (stl/css :more-colors-btn)
:on-click #(reset! expand-token-color true)}
[:> button* {:variant "secondary"
:class (stl/css :more-colors-btn)
:on-click #(reset! expand-token-color true)}
(tr "workspace.options.more-token-colors")])]])]))

32
frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss
View File

@ -4,7 +4,6 @@
//
// Copyright (c) KALEIDOS SUBSIDIARY SL
@use "refactor/common-refactor.scss" as deprecated;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
.element-set {
@ -16,36 +15,25 @@
}
.title-spacing-selected-colors {
padding-left: deprecated.$s-2;
padding-inline-start: var(--sp-xxs);
margin: 0;
}
.add-fill {
@extend %button-tertiary;
height: deprecated.$s-32;
width: deprecated.$s-28;
svg {
@extend %button-icon;
}
}
.element-content {
grid-column: span 8;
@include deprecated.flex-column;
margin-bottom: deprecated.$s-8;
display: flex;
flex-direction: column;
gap: var(--sp-xs);
margin-block-end: var(--sp-s);
}
.selected-color-group {
@include deprecated.flex-column;
display: flex;
flex-direction: column;
gap: var(--sp-xs);
}
// The DS button is stretched by the column; center its label.
.more-colors-btn {
@extend %button-secondary;
@include deprecated.uppercase-title-typography;
height: deprecated.$s-32;
justify-content: center;
}