diff --git a/frontend/playwright/ui/specs/tokens/apply.spec.js b/frontend/playwright/ui/specs/tokens/apply.spec.js index 28efebea4c..d20ffdd6a2 100644 --- a/frontend/playwright/ui/specs/tokens/apply.spec.js +++ b/frontend/playwright/ui/specs/tokens/apply.spec.js @@ -6,6 +6,7 @@ import { setupTypographyTokensFileRender, unfoldTokenType, createToken, + createSet } from "./helpers"; test.beforeEach(async ({ page }) => { @@ -1101,21 +1102,6 @@ test("BUG: 14200, Tokens in sets are applied when clicking on Save during creati flags: ["enable-token-combobox", "enable-feature-token-input"], }); - const changeSetInput = async (sidebar, setName, finalKey = "Enter") => { - const setInput = sidebar.locator("input:focus"); - await expect(setInput).toBeVisible(); - await setInput.fill(setName); - await setInput.press(finalKey); - }; - - const createSet = async (sidebar, setName, finalKey = "Enter") => { - const tokensTabButton = sidebar - .getByRole("button", { name: "Add set" }) - .click(); - - await changeSetInput(sidebar, setName, (finalKey = "Enter")); - }; - // Select rectangle layer await page.getByRole("tab", { name: "Layers" }).click(); @@ -1213,21 +1199,6 @@ test("Check token application across sets", async ({ page }) => { flags: ["enable-token-combobox", "enable-feature-token-input"], }); - const changeSetInput = async (sidebar, setName, finalKey = "Enter") => { - const setInput = sidebar.locator("input:focus"); - await expect(setInput).toBeVisible(); - await setInput.fill(setName); - await setInput.press(finalKey); - }; - - const createSet = async (sidebar, setName, finalKey = "Enter") => { - const tokensTabButton = sidebar - .getByRole("button", { name: "Add set" }) - .click(); - - await changeSetInput(sidebar, setName, (finalKey = "Enter")); - }; - const createTokenInSet = async (tokenName, tokenValue) => { await unfoldTokenType(tokensSidebar, "Border radius"); diff --git a/frontend/playwright/ui/specs/tokens/crud.spec.js b/frontend/playwright/ui/specs/tokens/crud.spec.js index c18360cdd5..8cf0ba50e7 100644 --- a/frontend/playwright/ui/specs/tokens/crud.spec.js +++ b/frontend/playwright/ui/specs/tokens/crud.spec.js @@ -8,6 +8,7 @@ import { testTokenCreationFlow, unfoldTokenType, createToken, + createSet, } from "./helpers"; test.beforeEach(async ({ page }) => { @@ -2039,7 +2040,7 @@ test.describe("Tokens tab - delete", () => { }); }); -test("BUG: 1425 Token is not highlighted in red when value references a token in a disabled set", async ({ +test("BUG: 14262 Token pill must be highlighted when value references a token in a disabled set", async ({ page, }) => { const { tokensSidebar, tokenContextMenuForToken, tokenThemesSetsSidebar } = @@ -2049,16 +2050,54 @@ test("BUG: 1425 Token is not highlighted in red when value references a token in await unfoldTokenType(tokensSidebar, "Border radius"); await createToken(page, "Border radius", "base-radius", "Value", "20"); - await createToken(page, "Border radius", "ref-base", "Value", "{base-radius}"); - + 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'); + 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(); + + // Pill is not highlighted if both tokens are on the same disabled set + const brokenTokenPill = tokensSidebar.getByRole("button", { + name: "Missing reference ref-base", + }); + await expect(brokenTokenPill).not.toBeVisible(); + await createSet(tokenThemesSetsSidebar, "New set"); + await tokenThemesSetsSidebar.getByRole("button", { name: "New set" }).click(); + + await tokenThemesSetsSidebar + .getByRole("button", { name: "New set" }) + .getByRole("checkbox") + .click(); + await createToken(page, "Border radius", "new-ref", "Value", "{base-radius}"); + + // Pill is highlighted if the referenced token is in a different disabled set than the token with the reference + const newBrokenTokenPill = tokensSidebar.getByRole("button", { + name: "Missing reference new-ref", + }); + await expect(newBrokenTokenPill).toBeVisible(); + await tokenThemesSetsSidebar + .getByRole("button", { name: "core" }) + .getByRole("checkbox") + .click(); + + // When the disabled set is activated again, pill is not highlighted anymore + await expect( + tokenThemesSetsSidebar + .getByRole("button", { name: "core" }) + .getByRole("checkbox"), + ).toBeChecked(); + await expect(newBrokenTokenPill).not.toBeVisible(); }); diff --git a/frontend/playwright/ui/specs/tokens/helpers.js b/frontend/playwright/ui/specs/tokens/helpers.js index 937a268242..d641eb6c04 100644 --- a/frontend/playwright/ui/specs/tokens/helpers.js +++ b/frontend/playwright/ui/specs/tokens/helpers.js @@ -360,6 +360,21 @@ const createToken = async (page, type, name, textFieldName, value) => { await expect(tokensUpdateCreateModal).not.toBeVisible(); }; + const changeSetInput = async (sidebar, setName, finalKey = "Enter") => { + const setInput = sidebar.locator("input:focus"); + await expect(setInput).toBeVisible(); + await setInput.fill(setName); + await setInput.press(finalKey); + }; + + const createSet = async (sidebar, setName, finalKey = "Enter") => { + const tokensTabButton = sidebar + .getByRole("button", { name: "Add set" }) + .click(); + + await changeSetInput(sidebar, setName, (finalKey = "Enter")); + }; + export { setupEmptyTokensFile, setupEmptyTokensFileRender, @@ -370,4 +385,6 @@ export { testTokenCreationFlow, unfoldTokenType, createToken, + createSet, + changeSetInput, }; diff --git a/frontend/playwright/ui/specs/tokens/sets.spec.js b/frontend/playwright/ui/specs/tokens/sets.spec.js index c0fc52a17a..9f1f3ed3f4 100644 --- a/frontend/playwright/ui/specs/tokens/sets.spec.js +++ b/frontend/playwright/ui/specs/tokens/sets.spec.js @@ -1,7 +1,7 @@ import { test, expect } from "@playwright/test"; import { BaseWebSocketPage } from "../../pages/BaseWebSocketPage"; import { WasmWorkspacePage } from "../../pages/WasmWorkspacePage"; -import { setupEmptyTokensFileRender, setupTokensFileRender } from "./helpers"; +import { setupEmptyTokensFileRender, setupTokensFileRender, createSet, changeSetInput } from "./helpers"; test.beforeEach(async ({ page }) => { await WasmWorkspacePage.init(page); @@ -9,20 +9,6 @@ test.beforeEach(async ({ page }) => { }); test.describe("Tokens: Sets Tab", () => { - const changeSetInput = async (sidebar, setName, finalKey = "Enter") => { - const setInput = sidebar.locator("input:focus"); - await expect(setInput).toBeVisible(); - await setInput.fill(setName); - await setInput.press(finalKey); - }; - - const createSet = async (sidebar, setName, finalKey = "Enter") => { - const tokensTabButton = sidebar - .getByRole("button", { name: "Add set" }) - .click(); - - await changeSetInput(sidebar, setName, (finalKey = "Enter")); - }; const assertEmptySetsList = async (el) => { const buttons = await el.getByRole("button").allTextContents(); diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index 468205156d..35a6ed83c5 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 resolved-active-tokens-not-forced]}] + [{:keys [layout file tokens-lib active-tokens resolved-active-tokens]}] (let [options-mode (mf/deref refs/options-mode-global) project (mf/deref refs/project) file-id (get file :id) @@ -223,8 +223,7 @@ [:> tokens-sidebar-tab* {:tokens-lib tokens-lib :active-tokens active-tokens - :resolved-active-tokens resolved-active-tokens - :resolved-active-tokens-not-forced resolved-active-tokens-not-forced}] + :resolved-active-tokens resolved-active-tokens}] :layers [:> layers-content* @@ -396,8 +395,6 @@ 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*] @@ -406,7 +403,6 @@ :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 0f2d65a838..4442517184 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 resolved-active-tokens-not-forced]}] + [{:keys [tokens-lib active-tokens resolved-active-tokens]}] (let [objects (mf/deref refs/workspace-page-objects) selected (mf/deref refs/selected-shapes) @@ -320,7 +320,6 @@ :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}])) @@ -330,6 +329,4 @@ :type type :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 - :selected-token-set-id selected-token-set-id}])])) + :active-theme-tokens resolved-active-tokens}])])) 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 81c72be22b..bd36c11a9c 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 active-theme-tokens-not-forced]}] + [{:keys [type tokens selected-shapes is-selected-inside-layout active-theme-tokens selected-token-set-id tokens-lib selected-ids]}] (let [{:keys [modal title]} (get dwta/token-properties type) @@ -190,7 +190,6 @@ :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 4d815435a9..c76651c151 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 active-theme-tokens-not-forced]}] + [{:keys [on-click token on-context-menu selected-shapes is-selected-inside-layout active-theme-tokens]}] (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-forced)))) + (not (contains-reference-value? value active-theme-tokens)))) 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 51aae216c7..798485cc87 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,7 +134,6 @@ selected-shapes is-selected-inside-layout active-theme-tokens - active-theme-tokens-not-forced tokens-lib selected-token-set-id on-token-pill-click @@ -172,7 +171,6 @@ :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