From 0c568b0b2dff78eeed62bd3c44cae9175241b9ea Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Tue, 26 May 2026 16:25:18 +0200 Subject: [PATCH] :bug: Fix highlight on token pill (#9829) --- .../playwright/ui/specs/tokens/crud.spec.js | 42 +++++++++++++++---- .../src/app/main/ui/workspace/sidebar.cljs | 8 +++- .../main/ui/workspace/tokens/management.cljs | 7 +++- .../ui/workspace/tokens/management/group.cljs | 3 +- .../tokens/management/token_pill.cljs | 4 +- .../tokens/management/token_tree.cljs | 2 + 6 files changed, 52 insertions(+), 14 deletions(-) diff --git a/frontend/playwright/ui/specs/tokens/crud.spec.js b/frontend/playwright/ui/specs/tokens/crud.spec.js index 4bfd1c6a4b..c18360cdd5 100644 --- a/frontend/playwright/ui/specs/tokens/crud.spec.js +++ b/frontend/playwright/ui/specs/tokens/crud.spec.js @@ -1794,22 +1794,26 @@ test("User duplicate color token", async ({ page }) => { test("User disables the current set but token still have resolved values shown in the sidebar", async ({ page, }) => { - const { tokenThemesSetsSidebar, tokensSidebar } = await setupEmptyTokensFileRender(page); + const { tokenThemesSetsSidebar, tokensSidebar } = + await setupEmptyTokensFileRender(page); // Create color token await createToken(page, "Color", "color.primary", "Value", "#ff0000"); await unfoldTokenType(tokensSidebar, "color"); // Deactivate current set - await tokenThemesSetsSidebar - .getByRole("checkbox") - .click(); + await tokenThemesSetsSidebar.getByRole("checkbox").click(); // Tokens tab panel should have a token with the color #ff0000 and correct resolved value in the tooltip - const colorTokenPill = tokensSidebar.getByRole("button", { name: "#ff0000 color.primary" }); + const colorTokenPill = tokensSidebar.getByRole("button", { + name: "#ff0000 color.primary", + }); await expect(colorTokenPill).toHaveCount(1); - await colorTokenPill.hover(); // Force title attribute to be attached to the button - await expect(colorTokenPill).toHaveAttribute("title", /Resolved value: #ff0000/); + await colorTokenPill.hover(); // Force title attribute to be attached to the button + await expect(colorTokenPill).toHaveAttribute( + "title", + /Resolved value: #ff0000/, + ); }); test.describe("Tokens tab - edition", () => { @@ -2034,3 +2038,27 @@ test.describe("Tokens tab - delete", () => { await expect(colorToken).not.toBeVisible(); }); }); + +test("BUG: 1425 Token is not highlighted in red when value references a token in a disabled set", async ({ + page, +}) => { + const { tokensSidebar, tokenContextMenuForToken, tokenThemesSetsSidebar } = + await setupTokensFileRender(page); + + await expect(tokensSidebar).toBeVisible(); + + await unfoldTokenType(tokensSidebar, "Border radius"); + await createToken(page, "Border radius", "base-radius", "Value", "20"); + await createToken(page, "Border radius", "ref-base", "Value", "{base-radius}"); + + const refTokenPill = tokensSidebar.getByRole("button", { + name: "ref-base", + }); + + await expect(refTokenPill).toBeVisible(); + + const CoreSetCheckbox = tokenThemesSetsSidebar.getByRole('button', { name: 'core' }).getByRole('checkbox'); + await CoreSetCheckbox.click(); + const brokenTokenPill = tokensSidebar.getByRole('button', { name: 'Missing reference ref-base' }); + await expect(brokenTokenPill).toBeVisible(); +}); diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index 35a6ed83c5..468205156d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -119,7 +119,7 @@ (mf/defc left-sidebar* {::mf/memo true} - [{:keys [layout file tokens-lib active-tokens resolved-active-tokens]}] + [{:keys [layout file tokens-lib active-tokens resolved-active-tokens resolved-active-tokens-not-forced]}] (let [options-mode (mf/deref refs/options-mode-global) project (mf/deref refs/project) file-id (get file :id) @@ -223,7 +223,8 @@ [:> tokens-sidebar-tab* {:tokens-lib tokens-lib :active-tokens active-tokens - :resolved-active-tokens resolved-active-tokens}] + :resolved-active-tokens resolved-active-tokens + :resolved-active-tokens-not-forced resolved-active-tokens-not-forced}] :layers [:> layers-content* @@ -395,6 +396,8 @@ resolved-active-tokens-force-set (sd/use-resolved-tokens* active-tokens-force-set)] + ;; TODO: This props should be passed though context to avoid prop drilling. + [:* (if (:collapse-left-sidebar layout) [:> collapsed-button*] @@ -403,6 +406,7 @@ :page-id page-id :tokens-lib tokens-lib :active-tokens active-tokens-force-set + :resolved-active-tokens-not-forced resolved-active-tokens :resolved-active-tokens (if tokenscript? tokenscript-resolved-active-tokens-force-set resolved-active-tokens-force-set)}]) diff --git a/frontend/src/app/main/ui/workspace/tokens/management.cljs b/frontend/src/app/main/ui/workspace/tokens/management.cljs index 4442517184..0f2d65a838 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management.cljs @@ -85,7 +85,7 @@ (mf/defc tokens-section* {::mf/private true} - [{:keys [tokens-lib active-tokens resolved-active-tokens]}] + [{:keys [tokens-lib active-tokens resolved-active-tokens resolved-active-tokens-not-forced]}] (let [objects (mf/deref refs/workspace-page-objects) selected (mf/deref refs/selected-shapes) @@ -320,6 +320,7 @@ :selected-shapes selected-shapes :is-selected-inside-layout is-selected-inside-layout :active-theme-tokens resolved-active-tokens + :active-theme-tokens-not-forced resolved-active-tokens-not-forced :tokens-lib tokens-lib :selected-token-set-id selected-token-set-id}])) @@ -329,4 +330,6 @@ :type type :selected-shapes selected-shapes :is-selected-inside-layout is-selected-inside-layout - :active-theme-tokens resolved-active-tokens}])])) + :active-theme-tokens resolved-active-tokens + :active-theme-tokens-not-forced resolved-active-tokens-not-forced + :selected-token-set-id selected-token-set-id}])])) diff --git a/frontend/src/app/main/ui/workspace/tokens/management/group.cljs b/frontend/src/app/main/ui/workspace/tokens/management/group.cljs index bd36c11a9c..81c72be22b 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/group.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/group.cljs @@ -71,7 +71,7 @@ (mf/defc token-group* {::mf/schema schema:token-group} - [{:keys [type tokens selected-shapes is-selected-inside-layout active-theme-tokens selected-token-set-id tokens-lib selected-ids]}] + [{:keys [type tokens selected-shapes is-selected-inside-layout active-theme-tokens selected-token-set-id tokens-lib selected-ids active-theme-tokens-not-forced]}] (let [{:keys [modal title]} (get dwta/token-properties type) @@ -190,6 +190,7 @@ :selected-shapes selected-shapes :is-selected-inside-layout is-selected-inside-layout :active-theme-tokens active-theme-tokens + :active-theme-tokens-not-forced active-theme-tokens-not-forced :selected-token-set-id selected-token-set-id :tokens-lib tokens-lib :on-token-pill-click on-token-pill-click diff --git a/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs b/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs index c76651c151..4d815435a9 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs @@ -175,7 +175,7 @@ (mf/defc token-pill* {::mf/wrap [mf/memo]} - [{:keys [on-click token on-context-menu selected-shapes is-selected-inside-layout active-theme-tokens]}] + [{:keys [on-click token on-context-menu selected-shapes is-selected-inside-layout active-theme-tokens active-theme-tokens-not-forced]}] (let [{:keys [name value type]} token resolved-token (get active-theme-tokens (:name token)) @@ -216,7 +216,7 @@ (if (contains? cf/flags :tokenscript) (seq (:errors resolved-token)) (and is-reference? - (not (contains-reference-value? value active-theme-tokens)))) + (not (contains-reference-value? value active-theme-tokens-not-forced)))) no-valid-value (seq errors) diff --git a/frontend/src/app/main/ui/workspace/tokens/management/token_tree.cljs b/frontend/src/app/main/ui/workspace/tokens/management/token_tree.cljs index 798485cc87..51aae216c7 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/token_tree.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/token_tree.cljs @@ -134,6 +134,7 @@ selected-shapes is-selected-inside-layout active-theme-tokens + active-theme-tokens-not-forced tokens-lib selected-token-set-id on-token-pill-click @@ -171,6 +172,7 @@ :selected-shapes selected-shapes :is-selected-inside-layout is-selected-inside-layout :active-theme-tokens active-theme-tokens + :active-theme-tokens-not-forced active-theme-tokens-not-forced :on-click on-token-pill-click :on-context-menu on-pill-context-menu}]) ;; Render segment folder