♻️ Fix regression and add test

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");
 

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

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,
 };

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

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 resolved-active-tokens}]
-              :resolved-active-tokens-not-forced resolved-active-tokens-not-forced}]
 
             :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)}])

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 resolved-active-tokens}])]))
-                         :active-theme-tokens-not-forced resolved-active-tokens-not-forced
-                         :selected-token-set-id selected-token-set-id}])]))

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

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)
 

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