From 08228324db14df2c0b8a57408af37a6e3af550e5 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Wed, 28 Oct 2026 09:21:00 +0100 Subject: [PATCH] :recycle: Use DS icons in the dashboard templates section (#12535) The arrow and add icons of the dashboard libraries and templates section use the DS icons and get their color from the color property. The collapse button says whether the section is expanded, and the left scroll button, which had no name, is now named "Previous". The scroll buttons stay raw: they are round 36px buttons with no DS equivalent. The template cards are anchors without href; they go to the anchors backlog. A new fixture lists eight builtin templates, and a visual test covers the cards, a card hover, the scroll buttons and the collapsed title. No visual change. AI-assisted-by: claude-opus-5-5 --- .../data/dashboard/get-builtin-templates.json | 34 +++++++++++++++ .../ui/visual-specs/visual-dashboard.spec.js | 43 +++++++++++++++++++ .../src/app/main/ui/dashboard/templates.cljs | 27 ++++++------ .../src/app/main/ui/dashboard/templates.scss | 12 ++---- 4 files changed, 95 insertions(+), 21 deletions(-) create mode 100644 frontend/playwright/data/dashboard/get-builtin-templates.json diff --git a/frontend/playwright/data/dashboard/get-builtin-templates.json b/frontend/playwright/data/dashboard/get-builtin-templates.json new file mode 100644 index 0000000000..ab08f3b31d --- /dev/null +++ b/frontend/playwright/data/dashboard/get-builtin-templates.json @@ -0,0 +1,34 @@ +[ + { + "~:id": "tokens-starter-kit", + "~:name": "Design tokens starter kit" + }, + { + "~:id": "penpot-design-system", + "~:name": "Penpot Design System | Pencil" + }, + { + "~:id": "wireframing-kit", + "~:name": "Wireframe library" + }, + { + "~:id": "prototype-examples", + "~:name": "Prototype template" + }, + { + "~:id": "plants-app", + "~:name": "UI mockup example" + }, + { + "~:id": "tutorial-for-beginners", + "~:name": "Tutorial for beginners" + }, + { + "~:id": "lucide-icons", + "~:name": "Lucide Icons" + }, + { + "~:id": "font-awesome", + "~:name": "Font Awesome" + } +] diff --git a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js index 06e3cd2639..d4563b69d2 100644 --- a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js +++ b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js @@ -629,3 +629,46 @@ test.describe("Onboarding questions controls", () => { await expect(actions).toHaveScreenshot(shot); }); }); + +test.describe("Templates section controls", () => { + const shot = { maxDiffPixelRatio: 0, threshold: 0 }; + + test("Template cards, scroll buttons and collapse", async ({ page }) => { + const dashboardPage = new DashboardPage(page); + await dashboardPage.mockRPC( + "get-builtin-templates", + "dashboard/get-builtin-templates.json", + ); + await dashboardPage.goToDashboard(); + + const section = page.locator("[class*='dashboard-templates-section']"); + const card = section.locator("[class*='template-card']").first(); + await expect(card).toBeVisible(); + await expect(section.locator("img").first()).toHaveJSProperty( + "complete", + true, + ); + await page.mouse.move(640, 100); + await expect(section).toHaveScreenshot(shot); + + // Hovering a card shows its add icon in the accent color. + await card.hover(); + await expect(card).toHaveScreenshot(shot); + + const moveButtons = section.locator("[class*='move-button']"); + await moveButtons.last().hover(); + await expect(moveButtons.last()).toHaveScreenshot(shot); + + await moveButtons.last().click(); + await expect(moveButtons).toHaveCount(2); + await page.mouse.move(640, 100); + await expect(moveButtons.first()).toHaveScreenshot(shot); + + await section.locator("[class*='title-btn']").click(); + await expect(section).toHaveClass(/collapsed/); + await page.waitForTimeout(500); + await expect(section.locator("[class*='title-btn']")).toHaveScreenshot( + shot, + ); + }); +}); diff --git a/frontend/src/app/main/ui/dashboard/templates.cljs b/frontend/src/app/main/ui/dashboard/templates.cljs index cecb4db1aa..55e0176651 100644 --- a/frontend/src/app/main/ui/dashboard/templates.cljs +++ b/frontend/src/app/main/ui/dashboard/templates.cljs @@ -16,7 +16,7 @@ [app.main.data.modal :as modal] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.icons :as deprecated-icon] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.util.dom :as dom] [app.util.dom.normalize-wheel :as nw] [app.util.i18n :refer [tr]] @@ -25,12 +25,6 @@ [okulary.core :as l] [rumext.v2 :as mf])) -(def ^:private arrow-icon - (deprecated-icon/icon-xref :arrow (stl/css :arrow-icon))) - -(def ^:private download-icon - (deprecated-icon/icon-xref :add (stl/css :download-icon))) - (def builtin-templates (l/derived :builtin-templates st/state)) @@ -77,6 +71,7 @@ [:div {:class (stl/css :title)} [:button {:tab-index "0" :class (stl/css :title-btn) + :aria-expanded (not is-collapsed) :on-click on-click :on-key-down on-key-down} [:span {:class (stl/css :title-text)} @@ -85,11 +80,13 @@ [:span {:class (stl/css :title-icon-container)} [:span {:class (stl/css :title-icon-text)} (tr "labels.show")] [:span {:class (stl/css :title-icon :title-icon-collapsed)} - arrow-icon]] + [:> icon* {:icon-id i/arrow + :class (stl/css :arrow-icon)}]]] [:span {:class (stl/css :title-icon-container)} [:span {:class (stl/css :title-icon-text)} (tr "labels.hide")] [:span {:class (stl/css :title-icon)} - arrow-icon]])]])) + [:> icon* {:icon-id i/arrow + :class (stl/css :arrow-icon)}]]])]])) (mf/defc card-item* [{:keys [item index is-visible collapsed on-import]}] @@ -131,7 +128,8 @@ (if @hover? (tr "dashboard.template.add-to-project") (:name item))] - download-icon]]])) + [:> icon* {:icon-id i/add + :class (stl/css :download-icon)}]]]])) (mf/defc card-item-link* [{:keys [total is-visible collapsed section]}] @@ -286,8 +284,10 @@ [:button {:class (stl/css :move-button :move-left) :tab-index (if ^boolean collapsed "-1" "0") :on-click on-move-left - :on-key-down on-move-left} - arrow-icon]) + :on-key-down on-move-left + :aria-label (tr "labels.previous")} + [:> icon* {:icon-id i/arrow + :class (stl/css :arrow-icon)}]]) (when (:right @can-move) [:button {:class (stl/css :move-button :move-right) @@ -295,4 +295,5 @@ :on-click on-move-right :on-key-down on-move-right :aria-label (tr "labels.next")} - arrow-icon])])) + [:> icon* {:icon-id i/arrow + :class (stl/css :arrow-icon)}]])])) diff --git a/frontend/src/app/main/ui/dashboard/templates.scss b/frontend/src/app/main/ui/dashboard/templates.scss index eabb3c8976..1be61d4465 100644 --- a/frontend/src/app/main/ui/dashboard/templates.scss +++ b/frontend/src/app/main/ui/dashboard/templates.scss @@ -105,10 +105,8 @@ align-items: center; height: $sz-16; width: $sz-16; - color: transparent; - fill: none; stroke-width: $b-1; - stroke: var(--color-foreground-secondary); + color: var(--color-foreground-secondary); } .move-button { @@ -131,7 +129,7 @@ background-color: var(--color-accent-primary); .arrow-icon { - stroke: var(--color-background-tertiary); + color: var(--color-background-tertiary); } } } @@ -196,7 +194,7 @@ border-color: var(--color-accent-primary); .download-icon { - stroke: var(--color-accent-primary); + color: var(--color-accent-primary); } .card-text { @@ -243,10 +241,8 @@ align-items: center; height: $sz-16; width: $sz-16; - color: transparent; - fill: none; stroke-width: $b-1; - stroke: var(--icon-foreground); + color: var(--color-foreground-secondary); } .template-link {