♻️ Fix tests

frontend/playwright/ui/specs/tokens/apply.spec.js

@@ -1386,8 +1386,14 @@ test.describe("Numeric Input and Token Integration Tests", () => {
       flags: ["enable-token-combobox", "enable-feature-token-input"],
     });
     // Create a token with a reference value in other set.
-    await createToken(page, "Dimensions", "reference-token", "Value", "{card.padding}");
-
+    await createToken(
+      page,
+      "Dimensions",
+      "reference-token",
+      "Value",
+      "combobox",
+      "{card.padding}",
+    );
 
     // Apply this token to a shape
     await page.getByRole("tab", { name: "Layers" }).click();
@@ -1410,11 +1416,16 @@ test.describe("Numeric Input and Token Integration Tests", () => {
     });
     await expect(measuresSection).toBeVisible();
 
-    await expect(measuresSection.getByRole('button', { name: 'reference-token' })).toBeVisible();
+    await expect(
+      measuresSection.getByRole("button", { name: "reference-token" }),
+    ).toBeVisible();
 
     // Deactivate token set where reference token exist to make token broken
-    await tokenThemesSetsSidebar.getByRole('button', { name: 'theme' }).getByRole('checkbox').click();
-    
+    await tokenThemesSetsSidebar
+      .getByRole("button", { name: "theme" })
+      .getByRole("checkbox")
+      .click();
+
     // Check if token pill show broken reference state
     const brokenPill = measuresSection.getByRole("button", {
       name: "is not in any active set",

frontend/playwright/ui/specs/tokens/crud.spec.js

@@ -1794,22 +1794,33 @@ 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 createToken(
+    page,
+    "Color",
+    "color.primary",
+    "Value",
+    "textbox",
+    "#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", () => {

frontend/playwright/ui/specs/tokens/helpers.js

@@ -332,7 +332,26 @@ const unfoldTokenType = async (tokensTabPanel, type) => {
   }
 };
 
-const createToken = async (page, type, name, textFieldName, value) => {
+/**
+ * Creates a token from the Tokens sidebar modal.
+ *
+ * @param {import("@playwright/test").Page} page - Playwright page instance.
+ * @param {string} type - Token category label shown in UI (e.g. "Color", "Typography", "Shadow").
+ * @param {string} name - Token name to create.
+ * @param {string} textFieldName - Accessible label of the value textbox in the modal (e.g. "Value", "Color", "Font size").
+ * @param {"textbox" | "combobox"} textFieldType - Type of the token value field, wether it's a simple text field or a combo box, to properly fill the value.
+ * @param {string} value - Token value to set in the modal.
+ * @returns {Promise<void>}
+ */
+
+const createToken = async (
+  page,
+  type,
+  name,
+  textFieldName,
+  textFieldType,
+  value,
+) => {
   const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
 
   const { tokensUpdateCreateModal } = await setupTokensFileRender(page, {
@@ -348,7 +367,7 @@ const createToken = async (page, type, name, textFieldName, value) => {
   const nameField = tokensUpdateCreateModal.getByLabel("Name");
   await nameField.fill(name);
 
-  const colorField = tokensUpdateCreateModal.getByRole("textbox", {
+  const colorField = tokensUpdateCreateModal.getByRole(textFieldType, {
     name: textFieldName,
   });
   await colorField.fill(value);

frontend/playwright/ui/specs/tokens/remapping.spec.js

@@ -106,7 +106,14 @@ test.describe("Remapping a single token", () => {
       });
 
       // Create base shadow token
-      await createToken(page, "Shadow", "base-shadow", "Color", "#000000");
+      await createToken(
+        page,
+        "Shadow",
+        "base-shadow",
+        "Color",
+        "textbox",
+        "#000000",
+      );
 
       // Create derived shadow token that references base-shadow
       await createCompositeDerivedToken(
@@ -150,7 +157,14 @@ test.describe("Remapping a single token", () => {
       } = await setupTokensFileRender(page, { flags: ["enable-token-shadow"] });
 
       // Create base shadow token
-      await createToken(page, "Shadow", "primary-shadow", "Color", "#000000");
+      await createToken(
+        page,
+        "Shadow",
+        "primary-shadow",
+        "Color",
+        "textbox",
+        "#000000",
+      );
 
       // Create derived shadow token that references base
       await createCompositeDerivedToken(
@@ -257,7 +271,14 @@ test.describe("Remapping a single token", () => {
       const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
 
       // Create base typography token
-      await createToken(page, "Typography", "base-text", "Font size", "16");
+      await createToken(
+        page,
+        "Typography",
+        "base-text",
+        "Font size",
+        "textbox",
+        "16",
+      );
 
       // Create derived typography token
       await createCompositeDerivedToken(
@@ -301,7 +322,14 @@ test.describe("Remapping a single token", () => {
       const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });
 
       // Create base typography token
-      await createToken(page, "Typography", "body-style", "Font size", "16");
+      await createToken(
+        page,
+        "Typography",
+        "body-style",
+        "Font size",
+        "textbox",
+        "16",
+      );
 
       // Create derived typography token
       await tokensTabPanel
@@ -536,7 +564,14 @@ test.describe("Remapping a single token", () => {
       });
 
       // Create base shadow token
-      await createToken(page, "Shadow", "base-shadow", "Color", "#000000");
+      await createToken(
+        page,
+        "Shadow",
+        "base-shadow",
+        "Color",
+        "textbox",
+        "#000000",
+      );
 
       // Create derived shadow token that references base-shadow
       await createCompositeDerivedToken(
@@ -575,7 +610,14 @@ test.describe("Remapping a single token", () => {
       });
 
       // Create base shadow token
-      await createToken(page, "Shadow", "base-shadow", "Color", "#000000");
+      await createToken(
+        page,
+        "Shadow",
+        "base-shadow",
+        "Color",
+        "textbox",
+        "#000000",
+      );
 
       // Create derived shadow token that references base-shadow
       await createCompositeDerivedToken(
@@ -615,8 +657,22 @@ test.describe("Remapping group of tokens", () => {
     const rightSidebar = workspacePage.rightSidebar;
 
     // Create multiple tokens in a group
-    await createToken(page, "Color", "light.primary", "Value", "#FFFFFF");
-    await createToken(page, "Color", "light.secondary", "Value", "#EEEEEE");
+    await createToken(
+      page,
+      "Color",
+      "light.primary",
+      "Value",
+      "textbox",
+      "#FFFFFF",
+    );
+    await createToken(
+      page,
+      "Color",
+      "light.secondary",
+      "Value",
+      "textbox",
+      "#EEEEEE",
+    );
 
     // Verify that the node and child token are visible before deletion
     const lightNode = tokensSidebar.getByRole("button", {
@@ -687,7 +743,9 @@ test.describe("Remapping group of tokens", () => {
     await expect(lighterNode).toBeVisible();
 
     // Verify that the applied token reference has been updated in the right sidebar for the selected shape
-    const fillSection = rightSidebar.getByRole("region", { name: "Fill section" });
+    const fillSection = rightSidebar.getByRole("region", {
+      name: "Fill section",
+    });
     await expect(fillSection).toBeVisible();
 
     const tokenReference = fillSection.getByLabel("lighter.primary", {

frontend/playwright/ui/specs/tokens/tree.spec.js

@@ -32,8 +32,22 @@ test.describe("Tokens - node tree", () => {
     const { tokensSidebar } = await setupTokensFileRender(page);
 
     // Create multiple tokens in a group
-    await createToken(page, "Color", "dark.primary", "Value", "#000000");
-    await createToken(page, "Color", "dark.secondary", "Value", "#111111");
+    await createToken(
+      page,
+      "Color",
+      "dark.primary",
+      "Value",
+      "textbox",
+      "#000000",
+    );
+    await createToken(
+      page,
+      "Color",
+      "dark.secondary",
+      "Value",
+      "textbox",
+      "#111111",
+    );
 
     // Verify that the node and child token are visible before deletion
     const darkNode = tokensSidebar.getByRole("button", {
@@ -88,8 +102,22 @@ test.describe("Tokens - node tree", () => {
     const { tokensSidebar } = await setupTokensFileRender(page);
 
     // Create multiple tokens in a group
-    await createToken(page, "Color", "dark.primary", "Value", "#000000");
-    await createToken(page, "Color", "dark.secondary", "Value", "#111111");
+    await createToken(
+      page,
+      "Color",
+      "dark.primary",
+      "Value",
+      "textbox",
+      "#000000",
+    );
+    await createToken(
+      page,
+      "Color",
+      "dark.secondary",
+      "Value",
+      "textbox",
+      "#111111",
+    );
 
     // Verify that the node and child token are visible before deletion
     const darkNode = tokensSidebar.getByRole("button", {

frontend/src/app/main/ui/workspace/tokens/management/forms/form_container.cljs

@@ -55,8 +55,9 @@
                                 (mf/spread-props props {:input-value-placeholder (tr "workspace.tokens.text-decoration-value-enter")}))
 
         font-weight-props (if (contains? cf/flags :token-combobox)
-                            (mf/spread-props props {:input-component token.controls/value-combobox*})
-                            props)
+                            (mf/spread-props props {:input-component token.controls/value-combobox*
+                                                    :input-value-placeholder (tr "workspace.tokens.font-weight-value-enter")})
+                            (mf/spread-props props {:input-value-placeholder (tr "workspace.tokens.font-weight-value-enter")}))
 
         border-radius-props (if (contains? cf/flags :token-combobox)
                               (mf/spread-props props {:input-component token.controls/value-combobox*})