From 017f1d9994676a0719faefef87747d22c0a85527 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Mon, 25 May 2026 07:47:58 +0200 Subject: [PATCH] :bug: Fix filter tokens to be case-sensitive (#9800) * :bug: Fix filter tokens to be case-sensitive * :recycle: Add test --- .../playwright/ui/specs/tokens/apply.spec.js | 51 ++++++++++++++++--- .../main/ui/ds/controls/numeric_input.cljs | 7 ++- .../management/forms/controls/utils.cljs | 13 +++-- 3 files changed, 56 insertions(+), 15 deletions(-) diff --git a/frontend/playwright/ui/specs/tokens/apply.spec.js b/frontend/playwright/ui/specs/tokens/apply.spec.js index b36539a9cb..28efebea4c 100644 --- a/frontend/playwright/ui/specs/tokens/apply.spec.js +++ b/frontend/playwright/ui/specs/tokens/apply.spec.js @@ -1200,9 +1200,7 @@ test("BUG: 14200, Tokens in sets are applied when clicking on Save during creati await expect(borderTokenPill).not.toBeVisible(); }); -test("Check token application across sets", async ({ - page, -}) => { +test("Check token application across sets", async ({ page }) => { // Setup the workspace with token features enabled const { workspacePage, @@ -1253,7 +1251,7 @@ test("Check token application across sets", async ({ }); await submitButton.click(); await expect(tokensUpdateCreateModal).not.toBeVisible(); - } + }; // Select rectangle layer await page.getByRole("tab", { name: "Layers" }).click(); @@ -1268,7 +1266,9 @@ test("Check token application across sets", async ({ // Create nested token set, select it and activate it await createSet(tokenThemesSetsSidebar, "device/desktop"); - const desktopSetButton = tokenThemesSetsSidebar.getByRole("button", { name: "desktop" }); + const desktopSetButton = tokenThemesSetsSidebar.getByRole("button", { + name: "desktop", + }); await desktopSetButton.click(); await desktopSetButton.getByRole("checkbox").click(); @@ -1292,14 +1292,18 @@ test("Check token application across sets", async ({ await expect(borderTokenPill).not.toBeVisible(); // Apply token to shape - await tokensSidebar.getByRole('button', { name: 'border-radius', exact: true }).click(); + await tokensSidebar + .getByRole("button", { name: "border-radius", exact: true }) + .click(); await expect(borderTokenPill).toBeVisible(); await expect(borderTokenPill).toHaveText("20"); //Create new set, select it and activate it await createSet(tokenThemesSetsSidebar, "device/mobile"); - const mobileSetButton = tokenThemesSetsSidebar.getByRole("button", { name: "mobile" }); + const mobileSetButton = tokenThemesSetsSidebar.getByRole("button", { + name: "mobile", + }); await mobileSetButton.click(); await mobileSetButton.getByRole("checkbox").click(); @@ -1768,3 +1772,36 @@ test.describe("Numeric Input and Token Integration Tests", () => { await expect(brokenPill).toHaveCount(2); }); }); + +test("BUG: 14234, Numeric input token filtering must be case sensitive", async ({ + page, +}) => { + const { workspacePage, tokensSidebar } = await setupTokensFileRender(page, { + flags: ["enable-token-combobox", "enable-feature-token-input"], + }); + + await page.getByRole("tab", { name: "Layers" }).click(); + await workspacePage.layers.getByTestId("layer-row").nth(1).click(); + + const tokensTabButton = page.getByRole("tab", { name: "Tokens" }); + await tokensTabButton.click(); + await unfoldTokenType(tokensSidebar, "dimensions"); + + await createToken(page, "Dimensions", "Dim-up", "Value", "20"); + await createToken(page, "Dimensions", "dim-up", "Value", "10"); + const measuresSection = page.getByRole("region", { + name: "shape-measures-section", + }); + await expect(measuresSection).toBeVisible(); + const widthInput = measuresSection.getByRole("textbox", { + name: "Width", + }); + await widthInput.click(); + await widthInput.type("{Dim"); + await expect( + measuresSection.getByText("Dim-up", { exact: true }), + ).toBeVisible(); + await expect( + measuresSection.getByText("dim-up", { exact: true }), + ).not.toBeVisible(); +}); diff --git a/frontend/src/app/main/ui/ds/controls/numeric_input.cljs b/frontend/src/app/main/ui/ds/controls/numeric_input.cljs index 464fb2edf4..7c8997e691 100644 --- a/frontend/src/app/main/ui/ds/controls/numeric_input.cljs +++ b/frontend/src/app/main/ui/ds/controls/numeric_input.cljs @@ -344,6 +344,7 @@ (mf/deps apply-token) (fn [id value name] (mf/set-ref-val! token-selection-in-progress* true) + (mf/set-ref-val! dirty-ref false) (reset! selected-id* id) (reset! focused-id* nil) (reset! is-open* false) @@ -434,7 +435,11 @@ (let [name (clean-token-name (mf/ref-val raw-value*)) token (get-option-by-name options name)] (if token - (apply-token (:resolved-value token) name) + (do + (apply-token (:resolved-value token) name) + (mf/set-ref-val! dirty-ref false) + (reset! filter-id* "") + (handle-blur event)) (apply-value (mf/ref-val last-value*)))) (reset! is-open* false)) diff --git a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/utils.cljs b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/utils.cljs index 510257b3ca..ce0124b546 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/utils.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/utils.cljs @@ -53,13 +53,12 @@ (defn- filter-token-groups-by-name [tokens filter-text] - (let [lc-filter (str/lower filter-text)] - (into {} - (keep (fn [[group tokens]] - (let [filtered (filter #(str/includes? (str/lower (:name %)) lc-filter) tokens)] - (when (seq filtered) - [group filtered])))) - tokens))) + (into {} + (keep (fn [[group tokens]] + (let [filtered (filter #(str/includes? (:name %) filter-text) tokens)] + (when (seq filtered) + [group filtered])))) + tokens)) (defn- sort-groups-and-tokens "Sorts the tokens inside the groups alphabetically.