From 10f5b1ae3b27c5b46cbf01aa9d4c611b3be37a93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Tue, 10 Feb 2026 13:01:21 +0100 Subject: [PATCH] :bug: Fix token not being highlight when applied in wasm --- .../data/tokens/get-file-13302.json | 206 +++++++++++ .../data/tokens/update-file-13302.json | 338 ++++++++++++++++++ .../playwright/ui/pages/WasmWorkspacePage.js | 10 +- .../playwright/ui/specs/tokens-wasm.spec.js | 38 ++ frontend/playwright/ui/specs/tokens.spec.js | 77 ++-- .../app/main/data/workspace/transforms.cljs | 2 +- .../tokens/management/token_pill.cljs | 4 + 7 files changed, 636 insertions(+), 39 deletions(-) create mode 100644 frontend/playwright/data/tokens/get-file-13302.json create mode 100644 frontend/playwright/data/tokens/update-file-13302.json create mode 100644 frontend/playwright/ui/specs/tokens-wasm.spec.js diff --git a/frontend/playwright/data/tokens/get-file-13302.json b/frontend/playwright/data/tokens/get-file-13302.json new file mode 100644 index 0000000000..1580c3d489 --- /dev/null +++ b/frontend/playwright/data/tokens/get-file-13302.json @@ -0,0 +1,206 @@ +{ + "~:features": { + "~#set": [ + "fdata/path-data", + "plugins/runtime", + "design-tokens/v1", + "variants/v1", + "layout/grid", + "styles/v2", + "fdata/objects-map", + "render-wasm/v1", + "components/v2", + "fdata/shape-data-type" + ] + }, + "~:team-id": "~u99e49e93-362f-80ef-8007-3450ea52c9a4", + "~:permissions": { + "~:type": "~:membership", + "~:is-owner": true, + "~:is-admin": true, + "~:can-edit": true, + "~:can-read": true, + "~:is-logged": true + }, + "~:has-media-trimmed": false, + "~:comment-thread-seqn": 0, + "~:name": "BUG 13302 - Token highlight", + "~:revn": 13, + "~:modified-at": "~m1770721633482", + "~:vern": 0, + "~:id": "~u6886b62b-1979-8195-8007-8d0b92d3116a", + "~:is-shared": false, + "~:migrations": { + "~#ordered-set": [ + "legacy-2", + "legacy-3", + "legacy-5", + "legacy-6", + "legacy-7", + "legacy-8", + "legacy-9", + "legacy-10", + "legacy-11", + "legacy-12", + "legacy-13", + "legacy-14", + "legacy-16", + "legacy-17", + "legacy-18", + "legacy-19", + "legacy-25", + "legacy-26", + "legacy-27", + "legacy-28", + "legacy-29", + "legacy-31", + "legacy-32", + "legacy-33", + "legacy-34", + "legacy-36", + "legacy-37", + "legacy-38", + "legacy-39", + "legacy-40", + "legacy-41", + "legacy-42", + "legacy-43", + "legacy-44", + "legacy-45", + "legacy-46", + "legacy-47", + "legacy-48", + "legacy-49", + "legacy-50", + "legacy-51", + "legacy-52", + "legacy-53", + "legacy-54", + "legacy-55", + "legacy-56", + "legacy-57", + "legacy-59", + "legacy-62", + "legacy-65", + "legacy-66", + "legacy-67", + "0001-remove-tokens-from-groups", + "0002-normalize-bool-content-v2", + "0002-clean-shape-interactions", + "0003-fix-root-shape", + "0003-convert-path-content-v2", + "0005-deprecate-image-type", + "0006-fix-old-texts-fills", + "0008-fix-library-colors-v4", + "0009-clean-library-colors", + "0009-add-partial-text-touched-flags", + "0010-fix-swap-slots-pointing-non-existent-shapes", + "0011-fix-invalid-text-touched-flags", + "0012-fix-position-data", + "0013-fix-component-path", + "0013-clear-invalid-strokes-and-fills", + "0014-fix-tokens-lib-duplicate-ids", + "0014-clear-components-nil-objects", + "0015-fix-text-attrs-blank-strings", + "0015-clean-shadow-color", + "0016-copy-fills-from-position-data-to-text-node" + ] + }, + "~:version": 67, + "~:project-id": "~ucd8f7672-e5d1-810f-8007-87e124eda82a", + "~:created-at": "~m1770719668044", + "~:backend": "legacy-db", + "~:data": { + "~:pages": [ + "~u6886b62b-1979-8195-8007-8d0b92d3116b" + ], + "~:pages-index": { + "~u6886b62b-1979-8195-8007-8d0b92d3116b": { + "~:objects": { + "~#penpot/objects-map/v2": { + "~u00000000-0000-0000-0000-000000000000": "[\"~#shape\",[\"^ \",\"~:y\",0,\"~:hide-fill-on-export\",false,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:name\",\"Root Frame\",\"~:width\",0.01,\"~:type\",\"~:frame\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",0.0,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.0]],[\"^:\",[\"^ \",\"~:x\",0.01,\"~:y\",0.01]],[\"^:\",[\"^ \",\"~:x\",0.0,\"~:y\",0.01]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^3\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",0,\"~:proportion\",1.0,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",0,\"~:y\",0,\"^6\",0.01,\"~:height\",0.01,\"~:x1\",0,\"~:y1\",0,\"~:x2\",0.01,\"~:y2\",0.01]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#FFFFFF\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^H\",0.01,\"~:flip-y\",null,\"~:shapes\",[\"~ud601cd4c-f774-802c-8007-8d0c13228bba\"]]]", + "~ud601cd4c-f774-802c-8007-8d0c13228bba": "[\"~#shape\",[\"^ \",\"~:y\",79.00000276416532,\"~:transform\",[\"~#matrix\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:rotation\",0,\"~:grow-type\",\"~:fixed\",\"~:hide-in-viewer\",false,\"~:name\",\"Rectangle\",\"~:width\",100.00000353902578,\"~:type\",\"~:rect\",\"~:points\",[[\"~#point\",[\"^ \",\"~:x\",0,\"~:y\",79.0000027641653]],[\"^<\",[\"^ \",\"~:x\",100.00000353902578,\"~:y\",79.0000027641653]],[\"^<\",[\"^ \",\"~:x\",100.00000353902578,\"~:y\",178.9999994188543]],[\"^<\",[\"^ \",\"~:x\",0,\"~:y\",178.9999994188543]]],\"~:r2\",0,\"~:proportion-lock\",false,\"~:transform-inverse\",[\"^2\",[\"^ \",\"~:a\",1.0,\"~:b\",0.0,\"~:c\",0.0,\"~:d\",1.0,\"~:e\",0.0,\"~:f\",0.0]],\"~:r3\",0,\"~:r1\",0,\"~:id\",\"~ud601cd4c-f774-802c-8007-8d0c13228bba\",\"~:parent-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:applied-tokens\",[\"^ \"],\"~:frame-id\",\"~u00000000-0000-0000-0000-000000000000\",\"~:strokes\",[],\"~:x\",0,\"~:proportion\",1,\"~:r4\",0,\"~:selrect\",[\"~#rect\",[\"^ \",\"~:x\",0,\"~:y\",79.00000276416532,\"^8\",100.00000353902578,\"~:height\",99.99999665468899,\"~:x1\",0,\"~:y1\",79.00000276416532,\"~:x2\",100.00000353902578,\"~:y2\",178.99999941885432]],\"~:fills\",[[\"^ \",\"~:fill-color\",\"#B1B2B5\",\"~:fill-opacity\",1]],\"~:flip-x\",null,\"^K\",99.99999665468899,\"~:flip-y\",null]]" + } + }, + "~:id": "~u6886b62b-1979-8195-8007-8d0b92d3116b", + "~:name": "Page 1" + } + }, + "~:id": "~u6886b62b-1979-8195-8007-8d0b92d3116a", + "~:options": { + "~:components-v2": true, + "~:base-font-size": "16px" + }, + "~:tokens-lib": { + "~#penpot/tokens-lib": { + "~:sets": { + "~#ordered-map": [ + [ + "S-Global", + { + "~#penpot/token-set": { + "~:id": "~u7b395852-8f6b-8027-8007-8d0bb31bd9d9", + "~:name": "Global", + "~:description": "", + "~:modified-at": "~m1770719731235", + "~:tokens": { + "~#ordered-map": [ + [ + "any-dimensions-token", + { + "~#penpot/token": { + "~:id": "~u7b395852-8f6b-8027-8007-8d0bb31b8a10", + "~:name": "any-dimensions-token", + "~:type": "~:dimensions", + "~:value": "256", + "~:description": "", + "~:modified-at": "~m1770719731235" + } + } + ] + ] + } + } + } + ] + ] + }, + "~:themes": { + "~#ordered-map": [ + [ + "", + { + "~#ordered-map": [ + [ + "__PENPOT__HIDDEN__TOKEN__THEME__", + { + "~#penpot/token-theme": { + "~:id": "~u00000000-0000-0000-0000-000000000000", + "~:name": "__PENPOT__HIDDEN__TOKEN__THEME__", + "~:group": "", + "~:description": "", + "~:is-source": false, + "~:external-id": "", + "~:modified-at": "~m1770719704149", + "~:sets": { + "~#set": [ + "Global" + ] + } + } + } + ] + ] + } + ] + ] + }, + "~:active-themes": { + "~#set": [ + "/__PENPOT__HIDDEN__TOKEN__THEME__" + ] + } + } + } + } +} \ No newline at end of file diff --git a/frontend/playwright/data/tokens/update-file-13302.json b/frontend/playwright/data/tokens/update-file-13302.json new file mode 100644 index 0000000000..9bd9e68074 --- /dev/null +++ b/frontend/playwright/data/tokens/update-file-13302.json @@ -0,0 +1,338 @@ +{ + "~:revn": 11, + "~:lagged": [ + { + "~:id": "~u6886b62b-1979-8195-8007-8d12e2ccd0f1", + "~:revn": 11, + "~:file-id": "~u6886b62b-1979-8195-8007-8d0b92d3116a", + "~:session-id": "~u488d46ff-4717-808d-8007-8d0c3dac344e", + "~:changes": [ + { + "~:type": "~:mod-obj", + "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba", + "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b", + "~:operations": [ + { + "~:type": "~:set", + "~:attr": "~:width", + "~:val": 100.00000353902578, + "~:ignore-geometry": false, + "~:ignore-touched": false + }, + { + "~:type": "~:set", + "~:attr": "~:points", + "~:val": [ + { + "~#point": { + "~:x": 0, + "~:y": 79.00000333786011 + } + }, + { + "~#point": { + "~:x": 100.00000353902578, + "~:y": 79.00000333786011 + } + }, + { + "~#point": { + "~:x": 100.00000353902578, + "~:y": 335.00001430511475 + } + }, + { + "~#point": { + "~:x": 0, + "~:y": 335.00001430511475 + } + } + ], + "~:ignore-geometry": false, + "~:ignore-touched": false + }, + { + "~:type": "~:set", + "~:attr": "~:selrect", + "~:val": { + "~#rect": { + "~:x": 0, + "~:y": 79.00000333786011, + "~:width": 100.00000353902578, + "~:height": 256.00001096725464, + "~:x1": 0, + "~:y1": 79.00000333786011, + "~:x2": 100.00000353902578, + "~:y2": 335.00001430511475 + } + }, + "~:ignore-geometry": false, + "~:ignore-touched": false + } + ] + }, + { + "~:type": "~:mod-obj", + "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba", + "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b", + "~:operations": [ + { + "~:type": "~:set", + "~:attr": "~:applied-tokens", + "~:val": { + "~:height": "any-dimensions-token" + }, + "~:ignore-geometry": false, + "~:ignore-touched": false + } + ] + }, + { + "~:type": "~:mod-obj", + "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba", + "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b", + "~:operations": [ + { + "~:type": "~:set", + "~:attr": "~:y", + "~:val": 79.00000276416532, + "~:ignore-geometry": false, + "~:ignore-touched": false + }, + { + "~:type": "~:set", + "~:attr": "~:points", + "~:val": [ + { + "~#point": { + "~:x": 0, + "~:y": 79.0000027641653 + } + }, + { + "~#point": { + "~:x": 100.00000353902578, + "~:y": 79.0000027641653 + } + }, + { + "~#point": { + "~:x": 100.00000353902578, + "~:y": 178.9999994188543 + } + }, + { + "~#point": { + "~:x": 0, + "~:y": 178.9999994188543 + } + } + ], + "~:ignore-geometry": false, + "~:ignore-touched": false + }, + { + "~:type": "~:set", + "~:attr": "~:selrect", + "~:val": { + "~#rect": { + "~:x": 0, + "~:y": 79.00000276416532, + "~:width": 100.00000353902578, + "~:height": 99.99999665468899, + "~:x1": 0, + "~:y1": 79.00000276416532, + "~:x2": 100.00000353902578, + "~:y2": 178.99999941885432 + } + }, + "~:ignore-geometry": false, + "~:ignore-touched": false + }, + { + "~:type": "~:set", + "~:attr": "~:height", + "~:val": 99.99999665468899, + "~:ignore-geometry": false, + "~:ignore-touched": false + } + ] + }, + { + "~:type": "~:mod-obj", + "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba", + "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b", + "~:operations": [ + { + "~:type": "~:set", + "~:attr": "~:applied-tokens", + "~:val": {}, + "~:ignore-geometry": false, + "~:ignore-touched": false + } + ] + } + ] + }, + { + "~:id": "~u6886b62b-1979-8195-8007-8d12e996895c", + "~:revn": 12, + "~:file-id": "~u6886b62b-1979-8195-8007-8d0b92d3116a", + "~:session-id": "~u488d46ff-4717-808d-8007-8d0c3dac344e", + "~:changes": [ + { + "~:type": "~:mod-obj", + "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba", + "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b", + "~:operations": [ + { + "~:type": "~:set", + "~:attr": "~:applied-tokens", + "~:val": { + "~:width": "any-dimensions-token", + "~:height": "any-dimensions-token" + }, + "~:ignore-geometry": false, + "~:ignore-touched": false + } + ] + }, + { + "~:type": "~:mod-obj", + "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba", + "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b", + "~:operations": [ + { + "~:type": "~:set", + "~:attr": "~:width", + "~:val": 256.0000033378599, + "~:ignore-geometry": false, + "~:ignore-touched": true + }, + { + "~:type": "~:set", + "~:attr": "~:points", + "~:val": [ + { + "~#point": { + "~:x": 0, + "~:y": 79.0000027641653 + } + }, + { + "~#point": { + "~:x": 256.0000033378599, + "~:y": 79.0000027641653 + } + }, + { + "~#point": { + "~:x": 256.0000033378599, + "~:y": 178.9999994188543 + } + }, + { + "~#point": { + "~:x": 0, + "~:y": 178.9999994188543 + } + } + ], + "~:ignore-geometry": false, + "~:ignore-touched": true + }, + { + "~:type": "~:set", + "~:attr": "~:selrect", + "~:val": { + "~#rect": { + "~:x": 0, + "~:y": 79.00000276416532, + "~:width": 256.0000033378599, + "~:height": 99.99999665468899, + "~:x1": 0, + "~:y1": 79.00000276416532, + "~:x2": 256.0000033378599, + "~:y2": 178.99999941885432 + } + }, + "~:ignore-geometry": false, + "~:ignore-touched": true + } + ] + }, + { + "~:type": "~:mod-obj", + "~:id": "~ud601cd4c-f774-802c-8007-8d0c13228bba", + "~:page-id": "~u6886b62b-1979-8195-8007-8d0b92d3116b", + "~:operations": [ + { + "~:type": "~:set", + "~:attr": "~:y", + "~:val": 79.00000826835657, + "~:ignore-geometry": false, + "~:ignore-touched": true + }, + { + "~:type": "~:set", + "~:attr": "~:points", + "~:val": [ + { + "~#point": { + "~:x": 0, + "~:y": 79.00000826835657 + } + }, + { + "~#point": { + "~:x": 256.0000033378599, + "~:y": 79.00000826835657 + } + }, + { + "~#point": { + "~:x": 256.0000033378599, + "~:y": 335.0000178241718 + } + }, + { + "~#point": { + "~:x": 0, + "~:y": 335.0000178241718 + } + } + ], + "~:ignore-geometry": false, + "~:ignore-touched": true + }, + { + "~:type": "~:set", + "~:attr": "~:selrect", + "~:val": { + "~#rect": { + "~:x": 0, + "~:y": 79.00000826835657, + "~:width": 256.0000033378599, + "~:height": 256.0000095558152, + "~:x1": 0, + "~:y1": 79.00000826835657, + "~:x2": 256.0000033378599, + "~:y2": 335.0000178241718 + } + }, + "~:ignore-geometry": false, + "~:ignore-touched": true + }, + { + "~:type": "~:set", + "~:attr": "~:height", + "~:val": 256.0000095558152, + "~:ignore-geometry": false, + "~:ignore-touched": true + } + ] + } + ] + } + ] +} \ No newline at end of file diff --git a/frontend/playwright/ui/pages/WasmWorkspacePage.js b/frontend/playwright/ui/pages/WasmWorkspacePage.js index d594232c47..a29f741612 100644 --- a/frontend/playwright/ui/pages/WasmWorkspacePage.js +++ b/frontend/playwright/ui/pages/WasmWorkspacePage.js @@ -10,7 +10,7 @@ export const WASM_FLAGS = [ export class WasmWorkspacePage extends WorkspacePage { static async init(page) { await super.init(page); - await WorkspacePage.mockConfigFlags(page, WASM_FLAGS); + await WasmWorkspacePage.mockConfigFlags(page, WASM_FLAGS); await page.addInitScript(() => { document.addEventListener("penpot:wasm:loaded", () => { @@ -27,6 +27,14 @@ export class WasmWorkspacePage extends WorkspacePage { }); } + static async mockConfigFlags(page, flags) { + await super.mockConfigFlags(page, [...WASM_FLAGS, ...flags]); + } + + async mockConfigFlags(flags) { + return WasmWorkspacePage.mockConfigFlags(this.page, flags); + } + constructor(page) { super(page); this.canvas = page.getByTestId("canvas-wasm-shapes"); diff --git a/frontend/playwright/ui/specs/tokens-wasm.spec.js b/frontend/playwright/ui/specs/tokens-wasm.spec.js new file mode 100644 index 0000000000..6dc7e41d37 --- /dev/null +++ b/frontend/playwright/ui/specs/tokens-wasm.spec.js @@ -0,0 +1,38 @@ +// FIXME: This is to be merged with tokens.spec.js once that file has been migrated +// to use the new WasmWorkspacePage page. + +import { test, expect } from "@playwright/test"; +import { WasmWorkspacePage } from "../pages/WasmWorkspacePage"; + +test.beforeEach(async ({ page }) => { + await WasmWorkspacePage.init(page); + await WasmWorkspacePage.mockConfigFlags(page, ["enable-feature-design-tokens-v1"]); +}); + +test("BUG 13302 - Dimension token not being highlighted after applying it", async ({ page }) => { + const workspacePage = new WasmWorkspacePage(page); + await workspacePage.setupEmptyFile(); + + await workspacePage.mockGetFile("tokens/get-file-13302.json"); + await workspacePage.mockRPC("update-file?id=*", "tokens/update-file-13302.json"); + + await workspacePage.goToWorkspace({ + fileId: "6886b62b-1979-8195-8007-8d0b92d3116a", + pageId: "6886b62b-1979-8195-8007-8d0b92d3116b", + }); + + await workspacePage.clickLeafLayer("Rectangle"); + + await workspacePage.sidebar.getByRole("tab", { name: "Tokens" }).click(); + + await workspacePage.tokensSidebar + .getByRole("button", { name: "Dimensions 1" }) + .click(); + + const token = workspacePage.tokensSidebar.getByRole("checkbox", { name: "any-dimensions-token" }); + await token.click(); + + // FIXME: this is a bug somewhere else in tokens, this should be fully applied + // for a dimensions token + await expect(token).toBeChecked({ indeterminate: true }); +}); \ No newline at end of file diff --git a/frontend/playwright/ui/specs/tokens.spec.js b/frontend/playwright/ui/specs/tokens.spec.js index d7715a7f4c..908a1f98f6 100644 --- a/frontend/playwright/ui/specs/tokens.spec.js +++ b/frontend/playwright/ui/specs/tokens.spec.js @@ -7,6 +7,9 @@ test.beforeEach(async ({ page }) => { await BaseWebSocketPage.mockRPC(page, "get-teams", "get-teams-tokens.json"); }); +// FIXME: Looks like we could benefit from splitting this large file into multiple +// specs files, and have a TokensPage that extends WasmWorkspacePage to deal +// with the shared code. const setupEmptyTokensFile = async (page, options = {}) => { const { flags = [] } = options; @@ -220,7 +223,7 @@ async function testTokenCreationFlow( await submitButton.click(); await expect( - tokensTabPanel.getByRole("button", { name: "my-token" }), + tokensTabPanel.getByRole("checkbox", { name: "my-token" }), ).toBeEnabled(); // @@ -240,7 +243,7 @@ async function testTokenCreationFlow( await submitButton.click(); await expect( - tokensTabPanel.getByRole("button", { name: "my-token-2" }), + tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), ).toBeEnabled(); } @@ -472,7 +475,7 @@ test.describe("Tokens: Tokens Tab", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("button", { + tokensTabPanel.getByRole("checkbox", { name: "color.primary", }), ).toBeEnabled(); @@ -495,14 +498,14 @@ test.describe("Tokens: Tokens Tab", () => { await nameField.press("Enter"); await expect( - tokensTabPanel.getByRole("button", { + tokensTabPanel.getByRole("checkbox", { name: "color.secondary", }), ).toBeEnabled(); // Tokens tab panel should have two tokens with the color red / #ff0000 await expect( - tokensTabPanel.getByRole("button", { name: "#ff0000" }), + tokensTabPanel.getByRole("checkbox", { name: "#ff0000" }), ).toHaveCount(2); // Global set has been auto created and is active @@ -643,7 +646,7 @@ test.describe("Tokens: Tokens Tab", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("button", { name: "my-token" }), + tokensTabPanel.getByRole("checkbox", { name: "my-token" }), ).toBeEnabled(); // @@ -684,7 +687,7 @@ test.describe("Tokens: Tokens Tab", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("button", { name: "my-token-2" }), + tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), ).toBeEnabled(); // @@ -701,7 +704,7 @@ test.describe("Tokens: Tokens Tab", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("button", { name: "my-token-3" }), + tokensTabPanel.getByRole("checkbox", { name: "my-token-3" }), ).toBeEnabled(); }); @@ -797,7 +800,7 @@ test.describe("Tokens: Tokens Tab", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("button", { name: "my-token" }), + tokensTabPanel.getByRole("checkbox", { name: "my-token" }), ).toBeEnabled(); // @@ -817,7 +820,7 @@ test.describe("Tokens: Tokens Tab", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("button", { name: "my-token-2" }), + tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), ).toBeEnabled(); // @@ -837,7 +840,7 @@ test.describe("Tokens: Tokens Tab", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("button", { name: "my-token-3" }), + tokensTabPanel.getByRole("checkbox", { name: "my-token-3" }), ).toBeEnabled(); }); @@ -933,7 +936,7 @@ test.describe("Tokens: Tokens Tab", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("button", { name: "my-token" }), + tokensTabPanel.getByRole("checkbox", { name: "my-token" }), ).toBeEnabled(); // @@ -953,7 +956,7 @@ test.describe("Tokens: Tokens Tab", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("button", { name: "my-token-2" }), + tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), ).toBeEnabled(); }); @@ -1051,7 +1054,7 @@ test.describe("Tokens: Tokens Tab", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("button", { name: "my-token" }), + tokensTabPanel.getByRole("checkbox", { name: "my-token" }), ).toBeEnabled(); // @@ -1071,7 +1074,7 @@ test.describe("Tokens: Tokens Tab", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("button", { name: "my-token-2" }), + tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), ).toBeEnabled(); }); @@ -1079,7 +1082,7 @@ test.describe("Tokens: Tokens Tab", () => { const emptyNameError = "Name should be at least 1 character"; const { tokensUpdateCreateModal, tokenThemesSetsSidebar } = - await setupEmptyTokensFile(page, {flags: ["enable-token-shadow"]}); + await setupEmptyTokensFile(page, { flags: ["enable-token-shadow"] }); // Open modal const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); @@ -1215,7 +1218,7 @@ test.describe("Tokens: Tokens Tab", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("button", { name: "my-token" }), + tokensTabPanel.getByRole("checkbox", { name: "my-token" }), ).toBeEnabled(); // @@ -1252,15 +1255,15 @@ test.describe("Tokens: Tokens Tab", () => { await expect(submitButton).toBeEnabled(); await submitButton.click(); await expect( - tokensTabPanel.getByRole("button", { name: "my-token-2" }), + tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), ).toBeEnabled(); }); - test("User creates shadow token with negative spread", async ({ page }) => { + test("User creates shadow token with negative spread", async ({ page }) => { const emptyNameError = "Name should be at least 1 character"; const { tokensUpdateCreateModal, tokenThemesSetsSidebar } = - await setupEmptyTokensFile(page, {flags: ["enable-token-shadow"]}); + await setupEmptyTokensFile(page, { flags: ["enable-token-shadow"] }); // Open modal const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" }); @@ -1390,8 +1393,8 @@ test.describe("Tokens: Tokens Tab", () => { await expect( tokensUpdateCreateModal.getByText("Resolved value: 0"), ).toBeVisible(); - - await spreadField.fill("1 - 3"); + + await spreadField.fill("1 - 3"); await expect( tokensUpdateCreateModal.getByText("Resolved value: -2"), ).toBeVisible(); @@ -1401,7 +1404,7 @@ test.describe("Tokens: Tokens Tab", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("button", { name: "my-token" }), + tokensTabPanel.getByRole("checkbox", { name: "my-token" }), ).toBeEnabled(); // @@ -1438,7 +1441,7 @@ test.describe("Tokens: Tokens Tab", () => { await expect(submitButton).toBeEnabled(); await submitButton.click(); await expect( - tokensTabPanel.getByRole("button", { name: "my-token-2" }), + tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), ).toBeEnabled(); }); @@ -1645,7 +1648,7 @@ test.describe("Tokens: Tokens Tab", () => { await submitButton.click(); await expect( - tokensTabPanel.getByRole("button", { name: "my-token" }), + tokensTabPanel.getByRole("checkbox", { name: "my-token" }), ).toBeEnabled(); // @@ -1686,7 +1689,7 @@ test.describe("Tokens: Tokens Tab", () => { await expect(submitButton).toBeEnabled(); await submitButton.click(); await expect( - tokensTabPanel.getByRole("button", { name: "my-token-2" }), + tokensTabPanel.getByRole("checkbox", { name: "my-token-2" }), ).toBeEnabled(); }); @@ -1709,7 +1712,7 @@ test.describe("Tokens: Tokens Tab", () => { await expect(tokensColorGroup).toBeVisible(); await tokensColorGroup.click(); - const colorToken = tokensSidebar.getByRole("button", { + const colorToken = tokensSidebar.getByRole("checkbox", { name: "colors.blue.100", }); await expect(colorToken).toBeVisible(); @@ -1727,7 +1730,7 @@ test.describe("Tokens: Tokens Tab", () => { await expect(tokensUpdateCreateModal).not.toBeVisible(); - const colorTokenChanged = tokensSidebar.getByRole("button", { + const colorTokenChanged = tokensSidebar.getByRole("checkbox", { name: "colors.blue.100.changed", }); await expect(colorTokenChanged).toBeVisible(); @@ -1947,7 +1950,7 @@ test.describe("Tokens: Tokens Tab", () => { await expect(tokensColorGroup).toBeVisible(); await tokensColorGroup.click(); - const colorToken = tokensSidebar.getByRole("button", { + const colorToken = tokensSidebar.getByRole("checkbox", { name: "colors.blue.100", }); @@ -1958,7 +1961,7 @@ test.describe("Tokens: Tokens Tab", () => { await expect(tokenContextMenuForToken).not.toBeVisible(); await expect( - tokensSidebar.getByRole("button", { name: "colors.blue.100-copy" }), + tokensSidebar.getByRole("checkbox", { name: "colors.blue.100-copy" }), ).toBeVisible(); }); @@ -1975,7 +1978,7 @@ test.describe("Tokens: Tokens Tab", () => { await tokensColorGroup.click(); - const colorToken = tokensSidebar.getByRole("button", { + const colorToken = tokensSidebar.getByRole("checkbox", { name: "colors.blue.100", }); await expect(colorToken).toBeVisible(); @@ -2000,7 +2003,7 @@ test.describe("Tokens: Tokens Tab", () => { await expect(tokensColorGroup).toBeVisible(); await tokensColorGroup.click(); - const colorToken = tokensSidebar.getByRole("button", { + const colorToken = tokensSidebar.getByRole("checkbox", { name: "colors.blue.100", }); await expect(colorToken).toBeVisible(); @@ -2410,7 +2413,7 @@ test.describe("Tokens: Apply token", () => { .click(); await tokensSidebar - .getByRole("button", { name: "colors.black" }) + .getByRole("checkbox", { name: "colors.black" }) .click({ button: "right" }); await tokenContextMenuForToken.getByText("Fill").click(); @@ -2438,7 +2441,7 @@ test.describe("Tokens: Apply token", () => { .filter({ hasText: "Typography" }) .click(); - await tokensSidebar.getByRole("button", { name: "Full" }).click(); + await tokensSidebar.getByRole("checkbox", { name: "Full" }).click(); const fontSizeInput = workspacePage.rightSidebar.getByRole("textbox", { name: "Font Size", @@ -2459,7 +2462,7 @@ test.describe("Tokens: Apply token", () => { .click(); // Open edit modal for "Full" typography token - const token = tokensSidebar.getByRole("button", { name: "Full" }); + const token = tokensSidebar.getByRole("checkbox", { name: "Full" }); await token.click({ button: "right" }); await page.getByText("Edit token").click(); @@ -2620,7 +2623,7 @@ test.describe("Tokens: Apply token", () => { await expect(tokensUpdateCreateModal).not.toBeVisible(); - const newToken = tokensSidebar.getByRole("button", { + const newToken = tokensSidebar.getByRole("checkbox", { name: newTokenTitle, }); @@ -2896,7 +2899,7 @@ test.describe("Tokens: Apply token", () => { await expect(tokensUpdateCreateModal).not.toBeVisible(); // Verify token appears in sidebar - const shadowToken = tokensSidebar.getByRole("button", { + const shadowToken = tokensSidebar.getByRole("checkbox", { name: "shadow.primary", }); await expect(shadowToken).toBeEnabled(); diff --git a/frontend/src/app/main/data/workspace/transforms.cljs b/frontend/src/app/main/data/workspace/transforms.cljs index 0d88b7c37b..82fcc00f27 100644 --- a/frontend/src/app/main/data/workspace/transforms.cljs +++ b/frontend/src/app/main/data/workspace/transforms.cljs @@ -409,7 +409,7 @@ modif-tree (dwm/build-modif-tree ids objects get-modifier)] (if (features/active-feature? state "render-wasm/v1") - (rx/of (dwm/apply-wasm-modifiers modif-tree {:ignore-snap-pixel true})) + (rx/of (dwm/apply-wasm-modifiers modif-tree (assoc options :ignore-snap-pixel true))) (let [modif-tree (gm/set-objects-modifiers modif-tree objects)] (rx/of (dwm/apply-modifiers* objects modif-tree nil options))))))))) 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 dd001e187c..e2abd289d0 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 @@ -285,6 +285,10 @@ :token-pill-invalid-applied-viewer (and is-viewer? (and full-applied? errors?))) :type "button" + :role "checkbox" + :aria-checked (cond full-applied? "true" + half-applied? "mixed" + :else "false") :on-focus on-hover :on-click on-click