From b1018c77b7fd742f6e693aba05cca349fe12b87b Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Wed, 28 Oct 2026 10:39:20 +0100 Subject: [PATCH] :recycle: Use DS icons in the legacy context notification (#12542) * :recycle: 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 * :recycle: 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 * :fire: 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 --- .../ui/visual-specs/visual-dashboard.spec.js | 36 ++++++++ .../notifications/context_notification.cljs | 28 ++----- .../notifications/context_notification.scss | 82 +++++++++---------- 3 files changed, 82 insertions(+), 64 deletions(-) diff --git a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js index d4563b69d2..007092884f 100644 --- a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js +++ b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js @@ -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); + }); +}); diff --git a/frontend/src/app/main/ui/notifications/context_notification.cljs b/frontend/src/app/main/ui/notifications/context_notification.cljs index 923a4958a3..9455f284c2 100644 --- a/frontend/src/app/main/ui/notifications/context_notification.cljs +++ b/frontend/src/app/main/ui/notifications/context_notification.cljs @@ -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 diff --git a/frontend/src/app/main/ui/notifications/context_notification.scss b/frontend/src/app/main/ui/notifications/context_notification.scss index e4cb80b794..cd8de495c1 100644 --- a/frontend/src/app/main/ui/notifications/context_notification.scss +++ b/frontend/src/app/main/ui/notifications/context_notification.scss @@ -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); }