🎉 Add flag

common/src/app/common/flags.cljc

@@ -121,6 +121,7 @@
     :terms-and-privacy-checkbox
     :tiered-file-data-storage
     :token-base-font-size
+    :token-combobox
     :token-color
     :token-shadow
     :token-tokenscript

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

@@ -43,7 +43,9 @@ test.describe("Tokens: Apply token", () => {
     page,
   }) => {
     const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
-      await setupTokensFileRender(page);
+      await setupTokensFileRender(page, {
+        flags: ["enable-token-combobox", "enable-feature-token-input"],
+      });
 
     await page.getByRole("tab", { name: "Layers" }).click();
 
@@ -82,7 +84,9 @@ test.describe("Tokens: Apply token", () => {
     await brTokenPillSM.click();
 
     // Change token from dropdown
-    const brTokenOptionXl = borderRadiusSection.getByRole('option', { name: 'borderRadius.xl' })
+    const brTokenOptionXl = borderRadiusSection
+      .getByRole("option", { name: "borderRadius.xl" })
+      .getByLabel("borderRadius.xl");
     await expect(brTokenOptionXl).toBeVisible();
     await brTokenOptionXl.click();
 
@@ -517,7 +521,9 @@ test.describe("Tokens: Apply token", () => {
     await dimensionSMTokenPill.nth(1).click();
 
     // Change token from dropdown
-    const dimensionTokenOptionXl = measuresSection.getByLabel("dimension.xl");
+    const dimensionTokenOptionXl = measuresSection.getByRole("option", {
+      name: "dimension.xl",
+    });
     await expect(dimensionTokenOptionXl).toBeVisible();
     await dimensionTokenOptionXl.click();
 
@@ -571,7 +577,9 @@ test.describe("Tokens: Apply token", () => {
     await dimensionSMTokenPill.click();
 
     // Change token from dropdown
-    const dimensionTokenOptionXl = measuresSection.getByRole('option', { name: 'dimension.xl' });
+    const dimensionTokenOptionXl = measuresSection.getByRole("option", {
+      name: "dimension.xl",
+    });
     await expect(dimensionTokenOptionXl).toBeVisible();
     await dimensionTokenOptionXl.click();
 
@@ -625,7 +633,9 @@ test.describe("Tokens: Apply token", () => {
     await dimensionSMTokenPill.click();
 
     // Change token from dropdown
-    const dimensionTokenOptionXl = measuresSection.getByRole('option', { name: 'dimension.xl' });
+    const dimensionTokenOptionXl = measuresSection.getByRole("option", {
+      name: "dimension.xl",
+    });
     await expect(dimensionTokenOptionXl).toBeVisible();
     await dimensionTokenOptionXl.click();
 
@@ -680,8 +690,9 @@ test.describe("Tokens: Apply token", () => {
     await dimensionXSTokenPill.click();
 
     // Change token from dropdown
-    const dimensionTokenOptionXl =
-      borderRadiusSection.getByRole('option', { name: 'dimension.xl' });
+    const dimensionTokenOptionXl = borderRadiusSection.getByRole("option", {
+      name: "dimension.xl",
+    });
     await expect(dimensionTokenOptionXl).toBeVisible();
     await dimensionTokenOptionXl.click();
 
@@ -750,7 +761,9 @@ test.describe("Tokens: Apply token", () => {
     });
     await tokenDropdown.click();
 
-    const widthOptionSmall = firstStrokeRow.getByLabel("width-small");
+    const widthOptionSmall = firstStrokeRow.getByRole("option", {
+      name: "width-small",
+    });
     await expect(widthOptionSmall).toBeVisible();
     await widthOptionSmall.click();
     const StrokeWidthPillSmall = firstStrokeRow.getByRole("button", {

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

@@ -29,7 +29,7 @@ test.describe("Tokens - creation", () => {
       secondResolvedValueText: "Resolved value: 3",
     });
   });
-  // TODO: put this test under flag
+
   test("User creates border radius token with combobox", async ({ page }) => {
     const invalidValueError = "Invalid token value";
     const emptyNameError = "Name should be at least 1 character";
@@ -37,7 +37,9 @@ test.describe("Tokens - creation", () => {
     const missingReferenceError = "Missing token references";
 
     const { tokensUpdateCreateModal, tokenThemesSetsSidebar } =
-      await setupEmptyTokensFile(page);
+      await setupEmptyTokensFile(page , {
+        flags: ["enable-token-combobox", "enable-feature-token-input"],
+      });
 
     // Open modal
     const tokensTabPanel = page.getByRole("tabpanel", { name: "tokens" });

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

@@ -431,10 +431,18 @@ test.describe("Remapping Tokens", () => {
     test("User renames border radius token with alias references", async ({
       page,
     }) => {
-      const { tokensSidebar } = await setupTokensFileRender(page);
+      const { tokensSidebar } = await setupTokensFileRender(page, {
+        flags: ["enable-token-combobox", "enable-feature-token-input"],
+      });
 
       // Create base border radius token
-      await createTokenCombobox(page, "Border Radius", "base-radius", "Value", "4");
+      await createTokenCombobox(
+        page,
+        "Border Radius",
+        "base-radius",
+        "Value",
+        "4",
+      );
 
       // Create derived border radius token
       await createTokenCombobox(
@@ -473,10 +481,18 @@ test.describe("Remapping Tokens", () => {
         tokensUpdateCreateModal,
         tokensSidebar,
         tokenContextMenuForToken,
-      } = await setupTokensFileRender(page);
+      } = await setupTokensFileRender(page, {
+        flags: ["enable-token-combobox", "enable-feature-token-input"],
+      });
 
       // Create base border radius token
-      await createTokenCombobox(page, "Border Radius", "radius-sm", "Value", "4");
+      await createTokenCombobox(
+        page,
+        "Border Radius",
+        "radius-sm",
+        "Value",
+        "4",
+      );
 
       // Create derived border radius token
       await createTokenCombobox(

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

@@ -8,6 +8,7 @@
   (:require
    [app.common.data :as d]
    [app.common.types.tokens-lib :as ctob]
+   [app.config :as cf]
    [app.main.refs :as refs]
    [app.main.ui.workspace.tokens.management.forms.color :as color]
    [app.main.ui.workspace.tokens.management.forms.controls :as token.controls]
@@ -41,7 +42,9 @@
         text-case-props (mf/spread-props props {:input-value-placeholder (tr "workspace.tokens.text-case-value-enter")})
         text-decoration-props (mf/spread-props props {:input-value-placeholder (tr "workspace.tokens.text-decoration-value-enter")})
         font-weight-props (mf/spread-props props {:input-value-placeholder (tr "workspace.tokens.font-weight-value-enter")})
-        border-radius-props (mf/spread-props props {:input-component token.controls/combobox*})]
+        border-radius-props (if (contains? cf/flags :token-combobox)
+                              (mf/spread-props props {:input-component token.controls/combobox*})
+                              props)]
 
     (case token-type
       :color [:> color/form* props]