diff --git a/common/src/app/common/flags.cljc b/common/src/app/common/flags.cljc index 6d7d49a98d..12398760b3 100644 --- a/common/src/app/common/flags.cljc +++ b/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 diff --git a/frontend/playwright/ui/specs/tokens/apply.spec.js b/frontend/playwright/ui/specs/tokens/apply.spec.js index ca3eaca2b0..bff5bb75b5 100644 --- a/frontend/playwright/ui/specs/tokens/apply.spec.js +++ b/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", { diff --git a/frontend/playwright/ui/specs/tokens/crud.spec.js b/frontend/playwright/ui/specs/tokens/crud.spec.js index 2d60e1ed5b..b59ddef588 100644 --- a/frontend/playwright/ui/specs/tokens/crud.spec.js +++ b/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" }); diff --git a/frontend/playwright/ui/specs/tokens/remapping.spec.js b/frontend/playwright/ui/specs/tokens/remapping.spec.js index 1839b4ff69..b3e1e02cfc 100644 --- a/frontend/playwright/ui/specs/tokens/remapping.spec.js +++ b/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( diff --git a/frontend/src/app/main/ui/workspace/tokens/management/forms/form_container.cljs b/frontend/src/app/main/ui/workspace/tokens/management/forms/form_container.cljs index c0db894991..d19f43b5b2 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/forms/form_container.cljs +++ b/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]