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 icons in the legacy context notification (#12542)

Browse Source 
* ♻️ Use DS icons in the legacy context notification

The legacy context notification (still used by the global context
notifications, the fonts page, the team, change email, delete account
and export modals) draws its level icon with the DS icons instead of
the deprecated icon set, colored through the color property. The icons
are the same drawings, so nothing changes on screen.

The component stays: the DS context notification has no links, which
the global context notifications use. A visual test covers the info and
warning levels and a warning with html content.

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

* ♻️ Move the legacy context notification styles to the DS

The legacy context notification no longer imports refactor/: its sizes,
spacing, borders and alert color aliases resolve to DS tokens, with
logical properties. The legacy body-small typography becomes the DS
one, which differs only in its line height (1.3 instead of 1.4): one
line notifications do not change, and multi-line ones are about 1.5px
shorter per extra line. The unused .default level is commented out with
a TODO.

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

* 🔥 Remove unused styles from the legacy context notification

The SCSS refactor of the legacy context notification left rules
commented out with a TODO because the module does not use them, or
because they target an svg inside a DS icon that is the svg itself. CSS
modules scope the classes to this module and no other source uses them,
so they go: .default. No visual change.

AI-assisted-by: claude-opus-5-5
This commit is contained in:
Eva Marco 2026-10-28 10:39:20 +01:00 committed by GitHub
parent a8e8a54a2b
commit b1018c77b7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 82 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -672,3 +672,39 @@ test.describe("Templates section controls", () => {
);
});
});
test.describe("Context notification", () => {
const shot = { maxDiffPixelRatio: 0, threshold: 0 };
test("Info and warning levels", async ({ page }) => {
await page.goto("/?screen=settings-profile");
// Info: the change email modal.
await page.getByText("Change email", { exact: true }).click();
const info = page.locator("[class*='modal-container'] aside");
await expect(info).toBeVisible();
await expect(info).toHaveScreenshot(shot);
await page.keyboard.press("Escape");
await expect(info).toBeHidden();
// Warning: the delete account modal.
await page.getByText("Want to remove your account?").click();
const warning = page.locator("[class*='modal-container'] aside");
await expect(warning).toBeVisible();
await expect(warning).toHaveScreenshot(shot);
});
test("Warning with html content", async ({ page }) => {
const dashboardPage = new DashboardPage(page);
await dashboardPage.goToDashboard();
await dashboardPage.fontsLink.click();
await page
.locator("#font-upload")
.setInputFiles("playwright/data/render-wasm/assets/ebgaramond.ttf");
const warning = page
.locator("[class*='dashboard-fonts-hero'] aside")
.last();
await expect(warning).toBeVisible();
await expect(warning).toHaveScreenshot(shot);
});
});

28
frontend/src/app/main/ui/notifications/context_notification.cljs
View File

@ -10,29 +10,16 @@
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.ui.components.link-button :as lb]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[rumext.v2 :as mf]))
(def ^:private neutral-icon
(deprecated-icon/icon-xref :msg-neutral (stl/css :icon)))
(def ^:private error-icon
(deprecated-icon/icon-xref :delete-text (stl/css :icon)))
(def ^:private success-icon
(deprecated-icon/icon-xref :status-tick (stl/css :icon)))
(def ^:private info-icon
(deprecated-icon/icon-xref :help (stl/css :icon)))
(defn get-icon-by-level
(defn- level->icon-id
[level]
(case level
:warning neutral-icon
:error error-icon
:success success-icon
:info info-icon
neutral-icon))
:error i/delete-text
:success i/status-tick
:info i/help
i/msg-neutral))
(mf/defc context-notification
"They are persistent, informative and non-actionable.
@ -49,7 +36,8 @@
:success (= level :success)
:info (= level :info)))}
(get-icon-by-level level)
[:> icon* {:icon-id (level->icon-id level)
:class (stl/css :icon)}]
;; The content can arrive in markdown format, in these cases
;; we will use the prop is-html to true to indicate it and

82
frontend/src/app/main/ui/notifications/context_notification.scss
View File

@ -4,71 +4,65 @@
//
// Copyright (c) KALEIDOS SUBSIDIARY SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/typography.scss" as *;
.context-notification {
--context-notification-bg-color: var(--alert-background-color-default);
--context-notification-fg-color: var(--alert-text-foreground-color-default);
--context-notification-icon-color: var(--alert-icon-foreground-color-default);
--context-notification-border-color: var(--alert-border-color-default);
--context-notification-bg-color: var(--color-background-primary);
--context-notification-fg-color: var(--color-foreground-primary);
--context-notification-icon-color: var(--color-foreground-primary);
--context-notification-border-color: var(--color-background-quaternary);
box-sizing: border-box;
display: grid;
grid-template-columns: deprecated.$s-16 1fr;
gap: deprecated.$s-8;
min-height: deprecated.$s-32;
height: fit-content;
width: 100%;
padding: deprecated.$s-8;
border: deprecated.$s-1 solid var(--context-notification-border-color);
border-radius: deprecated.$br-8;
grid-template-columns: $sz-16 1fr;
gap: var(--sp-s);
min-block-size: $sz-32;
block-size: fit-content;
inline-size: 100%;
padding: var(--sp-s);
border: $b-1 solid var(--context-notification-border-color);
border-radius: $br-8;
background-color: var(--context-notification-bg-color);
}
.warning {
--context-notification-bg-color: var(--alert-background-color-warning);
--context-notification-fg-color: var(--alert-text-foreground-color-warning);
--context-notification-icon-color: var(--alert-icon-foreground-color-warning);
--context-notification-border-color: var(--alert-border-color-warning);
--context-notification-bg-color: var(--color-background-warning);
--context-notification-fg-color: var(--color-foreground-primary);
--context-notification-icon-color: var(--color-accent-warning);
--context-notification-border-color: var(--color-accent-warning);
}
.success {
--context-notification-bg-color: var(--alert-background-color-success);
--context-notification-fg-color: var(--alert-text-foreground-color-success);
--context-notification-icon-color: var(--alert-icon-foreground-color-success);
--context-notification-border-color: var(--alert-border-color-success);
--context-notification-bg-color: var(--color-background-success);
--context-notification-fg-color: var(--color-foreground-primary);
--context-notification-icon-color: var(--color-accent-success);
--context-notification-border-color: var(--color-accent-success);
}
.info {
--context-notification-bg-color: var(--alert-background-color-info);
--context-notification-fg-color: var(--alert-text-foreground-color-info);
--context-notification-icon-color: var(--alert-icon-foreground-color-info);
--context-notification-border-color: var(--alert-border-color-info);
}
.default {
--context-notification-bg-color: var(--alert-background-color-default);
--context-notification-fg-color: var(--alert-text-foreground-color-default);
--context-notification-icon-color: var(--alert-icon-foreground-color-default);
--context-notification-border-color: var(--alert-border-color-default);
--context-notification-bg-color: var(--color-background-info);
--context-notification-fg-color: var(--color-foreground-primary);
--context-notification-icon-color: var(--color-accent-info);
--context-notification-border-color: var(--color-accent-info);
}
.error {
--context-notification-bg-color: var(--alert-background-color-error);
--context-notification-fg-color: var(--alert-text-foreground-color-error);
--context-notification-icon-color: var(--alert-icon-foreground-color-error);
--context-notification-border-color: var(--alert-border-color-error);
--context-notification-bg-color: var(--color-background-error);
--context-notification-fg-color: var(--color-foreground-primary);
--context-notification-icon-color: var(--color-accent-error);
--context-notification-border-color: var(--color-accent-error);
}
.icon {
@extend %button-icon;
flex-shrink: 0;
align-self: self-start;
stroke: var(--context-notification-icon-color);
color: var(--context-notification-icon-color);
}
.context-text {
@include deprecated.body-small-typography;
@include use-typography("body-small");
align-self: center;
color: var(--context-notification-fg-color);
@ -81,12 +75,12 @@
.link,
.contain-html .context-text a {
@include deprecated.body-small-typography;
@include use-typography("body-small");
align-self: center;
display: inline;
text-align: left;
height: deprecated.$s-16;
text-align: start;
block-size: $sz-16;
margin: 0;
color: var(--modal-link-foreground-color);
color: var(--color-accent-primary);
}