diff --git a/frontend/playwright/ui/specs/tokens/apply.spec.js b/frontend/playwright/ui/specs/tokens/apply.spec.js index 64f49733ce..8b09827d0f 100644 --- a/frontend/playwright/ui/specs/tokens/apply.spec.js +++ b/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", diff --git a/frontend/playwright/ui/specs/tokens/crud.spec.js b/frontend/playwright/ui/specs/tokens/crud.spec.js index 4bfd1c6a4b..4f3d62f975 100644 --- a/frontend/playwright/ui/specs/tokens/crud.spec.js +++ b/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", () => { diff --git a/frontend/playwright/ui/specs/tokens/helpers.js b/frontend/playwright/ui/specs/tokens/helpers.js index 937a268242..d3f47a98da 100644 --- a/frontend/playwright/ui/specs/tokens/helpers.js +++ b/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} + */ + +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); diff --git a/frontend/playwright/ui/specs/tokens/remapping.spec.js b/frontend/playwright/ui/specs/tokens/remapping.spec.js index 55472cb4a1..3c733e9a2c 100644 --- a/frontend/playwright/ui/specs/tokens/remapping.spec.js +++ b/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", { diff --git a/frontend/playwright/ui/specs/tokens/tree.spec.js b/frontend/playwright/ui/specs/tokens/tree.spec.js index 243a539432..5ee9ced175 100644 --- a/frontend/playwright/ui/specs/tokens/tree.spec.js +++ b/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", { 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 3d92f56bea..a0969d2186 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 @@ -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*})