github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-05-30 04:08:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix highlight on token pill (#9829)

Browse Source
This commit is contained in:
Eva Marco 2026-05-26 16:25:18 +02:00 committed by GitHub
parent b609a964be
commit 0c568b0b2d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 52 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/playwright/ui/specs/tokens/crud.spec.js
View File

@ -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();
});

8
frontend/src/app/main/ui/workspace/sidebar.cljs
View File

@ -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)}])

7
frontend/src/app/main/ui/workspace/tokens/management.cljs
View File

@ -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}])]))

3
frontend/src/app/main/ui/workspace/tokens/management/group.cljs
View File

@ -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

4
frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs
View File

@ -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)

2
frontend/src/app/main/ui/workspace/tokens/management/token_tree.cljs
View File

@ -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