From d26a40163786aa64e4af7b31d68bf2620e632dd3 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Thu, 15 Oct 2026 20:06:29 +0200 Subject: [PATCH] :recycle: Use DS buttons for more colors in the selected colors (#12369) * :recycle: 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 * :recycle: 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 --- .../ui/visual-specs/workspace.spec.js | 24 ++++++++++++++ .../options/menus/color_selection.cljs | 16 ++++++---- .../options/menus/color_selection.scss | 32 ++++++------------- 3 files changed, 44 insertions(+), 28 deletions(-) diff --git a/frontend/playwright/ui/visual-specs/workspace.spec.js b/frontend/playwright/ui/visual-specs/workspace.spec.js index 6604c94ffc..a99ea0b020 100644 --- a/frontend/playwright/ui/visual-specs/workspace.spec.js +++ b/frontend/playwright/ui/visual-specs/workspace.spec.js @@ -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, + }); + }); +}); diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs index 5db6007cf7..d72f730775 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs @@ -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")])]])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss index 15da32944b..f49e29e66f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss @@ -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; }