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

♻️ Move the dashboard libraries and search styles to the DS

Browse Source 
Replace the deprecated spacing, size and border variables with DS
tokens and logical properties, and drop the refactor/ import.

- The search placeholder icon gets a class for its color instead of a
  .icon svg rule; its xl size already gives the 32px box.
- Delete the selectors no markup uses: .dashboard-projects in both
  files and .dashboard-shared in search.

No visual change (0 px in the new libraries and search visual test).

AI-assisted-by: claude-opus-5-5
This commit is contained in:
Eva Marco 2026-10-28 12:55:50 +01:00
parent f52d8e74d7
commit 7646cc5a0b
4 changed files with 37 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/playwright/ui/visual-specs/visual-dashboard.spec.js
View File

@ -814,6 +814,18 @@ test.describe("Dashboard headers", () => {
await expect(header(page)).toHaveScreenshot(shot);
});
test("Libraries page and search placeholder", async ({ page }) => {
const dashboardPage = new DashboardPage(page);
await dashboardPage.setupDashboardFull();
await dashboardPage.goToLibraries();
await expect(page).toHaveScreenshot(shot);
await dashboardPage.goToSearch();
const placeholder = page.locator("[class*='grid-empty-placeholder']");
await expect(placeholder).toBeVisible();
await expect(placeholder).toHaveScreenshot(shot);
});
test("Account header", async ({ page }) => {
const dashboardPage = new DashboardPage(page);
await dashboardPage.goToDashboard();

12
frontend/src/app/main/ui/dashboard/libraries.scss
View File

@ -4,17 +4,13 @@
//
// Copyright (c) KALEIDOS SUBSIDIARY SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_borders.scss" as *;
@use "dashboard/common/header";
.dashboard-container {
flex: 1 0 0;
margin-right: deprecated.$s-16;
margin-inline-end: var(--sp-l);
overflow-y: auto;
width: 100%;
border-top: deprecated.$s-1 solid var(--color-background-quaternary);
&.dashboard-projects {
user-select: none;
}
inline-size: 100%;
border-block-start: $b-1 solid var(--color-background-quaternary);
}

12
frontend/src/app/main/ui/dashboard/search.cljs
View File

@ -68,19 +68,25 @@
(empty? search-term)
[:div {:class (stl/css :grid-empty-placeholder :search)}
[:div {:class (stl/css :icon)}
[:> icon* {:icon-id i/search :size "xl"}]]
[:> icon* {:icon-id i/search
:size "xl"
:class (stl/css :search-icon)}]]
[:div {:class (stl/css :text)} (tr "dashboard.type-something")]]
(nil? result)
[:div {:class (stl/css :grid-empty-placeholder :search)}
[:div {:class (stl/css :icon)}
[:> icon* {:icon-id i/search :size "xl"}]]
[:> icon* {:icon-id i/search
:size "xl"
:class (stl/css :search-icon)}]]
[:div {:class (stl/css :text)} (tr "dashboard.searching-for" search-term)]]
(empty? result)
[:div {:class (stl/css :grid-empty-placeholder :search)}
[:div {:class (stl/css :icon)}
[:> icon* {:icon-id i/search :size "xl"}]]
[:> icon* {:icon-id i/search
:size "xl"
:class (stl/css :search-icon)}]]
[:div {:class (stl/css :text)} (tr "dashboard.no-matches-for" search-term)]]
:else

34
frontend/src/app/main/ui/dashboard/search.scss
View File

@ -4,25 +4,17 @@
//
// Copyright (c) KALEIDOS SUBSIDIARY SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "dashboard/common/header";
@use "./placeholder";
.dashboard-container {
flex: 1 0 0;
margin-right: deprecated.$s-16;
margin-inline-end: var(--sp-l);
overflow-y: auto;
width: 100%;
border-top: deprecated.$s-1 solid var(--color-background-quaternary);
&.dashboard-projects {
user-select: none;
}
&.dashboard-shared {
width: calc(100vw - deprecated.$s-320);
margin-right: deprecated.$s-52;
}
inline-size: 100%;
border-block-start: $b-1 solid var(--color-background-quaternary);
}
.grid-empty-placeholder.search {
@ -30,18 +22,16 @@
display: flex;
justify-content: center;
flex-direction: column;
height: deprecated.$s-200;
block-size: $sz-200;
background: transparent;
border: deprecated.$s-1 solid var(--color-background-quaternary);
border-radius: deprecated.$br-8;
border: $b-1 solid var(--color-background-quaternary);
border-radius: $br-8;
.text {
color: var(--color-foreground-primary);
}
.icon svg {
stroke: var(--color-foreground-secondary);
width: deprecated.$s-32;
height: deprecated.$s-32;
}
}
.search-icon {
color: var(--color-foreground-secondary);
}