🎉 Add token numeric inputs for inputs on right sidebar (#9143)

Co-authored-by: Xavier Julian <xavier.julian@kaleidos.net>

CHANGES.md

@@ -10,8 +10,6 @@
 
 ### :bug: Bugs fixed
 
-
-
 ## 2.16.0 (Unreleased)
 
 ### :boom: Breaking changes & Deprecations
@@ -68,6 +66,7 @@
 - Show detailed messages on file import errors to help diagnose why a file could not be imported (by @jsdevninja) [Github #9004](https://github.com/penpot/penpot/issues/9004)
 - Add read-only preview mode for saved versions — click a version name to open a dedicated preview view (by @wdeveloper16) [Github #8976](https://github.com/penpot/penpot/issues/8976)
 - Add clipboard read/write permissions to the plugin system (by @wdeveloper16) [Github #9053](https://github.com/penpot/penpot/issues/9053)
+- Add new numeric inputs for token management on the right sidebar [Taiga #12109](https://tree.taiga.io/project/penpot/us/12109?milestone=513226)
 
 ### :bug: Bugs fixed
 
@@ -132,7 +131,6 @@
 - Fix tooltip appearing two times when nested elements [Github #9031](https://github.com/penpot/penpot/issues/9031)
 - Fix broken update library notification link in the UI [Github #9070](https://github.com/penpot/penpot/issues/9070)
 
-
 ## 2.15.0 (Unreleased)
 
 ### :sparkles: New features & Enhancements
@@ -147,7 +145,6 @@
 - Fix incorrect handling of version restore operation [Github #9041](https://github.com/penpot/penpot/pull/9041)
 - Fix Plugin API token methods rejecting JS array of strings [Github #9162](https://github.com/penpot/penpot/issues/9162)
 
-
 ## 2.14.4
 
 ### :bug: Bugs fixed
@@ -156,7 +153,6 @@
 - Fix email blacklisting [Github #9122](https://github.com/penpot/penpot/pull/9122)
 - Fix removeChild errors from unmount race conditions [Github #8927](https://github.com/penpot/penpot/pull/8927)
 
-
 ## 2.14.3
 
 ### :sparkles: New features & Enhancements
@@ -187,7 +183,6 @@
 - Fix typo `:podition` in swap-shapes grid cell
 - Fix multiple selection on shapes with token applied to stroke color
 
-
 ## 2.14.2
 
 ### :sparkles: New features & Enhancements

common/src/app/common/features.cljc

@@ -68,6 +68,7 @@
     "components/v2"
     "plugins/runtime"
     "design-tokens/v1"
+    "tokens/numeric-input"
     "variants/v1"})
 
 ;; A set of features which only affects on frontend and can be enabled

frontend/playwright/ui/specs/components.spec.js

@@ -3,9 +3,12 @@ import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
 
 test.beforeEach(async ({ page }) => {
   await WasmWorkspacePage.init(page);
+  await WasmWorkspacePage.mockConfigFlags(page, ["enable-feature-token-input"]);
 });
 
-test("BUG 13267 - Component instance is not synced with parent for geometry changes", async ({ page }) => {
+test("BUG 13267 - Component instance is not synced with parent for geometry changes", async ({
+  page,
+}) => {
   const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.setupEmptyFile(page);
   await workspacePage.mockGetFile("components/get-file-13267.json");
@@ -21,7 +24,9 @@ test("BUG 13267 - Component instance is not synced with parent for geometry chan
 
   // Select the main component
   await workspacePage.clickLeafLayer("A Component", {}, 1);
-  const rotationInput = workspacePage.rightSidebar.getByTestId("rotation").getByRole("textbox");
+  const rotationInput = workspacePage.rightSidebar.getByRole("textbox", {
+    name: "Rotation",
+  });
   await rotationInput.fill("45");
   await rotationInput.press("Enter");
 
@@ -30,4 +35,4 @@ test("BUG 13267 - Component instance is not synced with parent for geometry chan
   await workspacePage.clickLeafLayer("Rectangle");
 
   await expect(rotationInput).toHaveValue("45");
-});
+});

frontend/playwright/ui/specs/design-tab.spec.js

@@ -1,8 +1,11 @@
 import { test, expect } from "@playwright/test";
 import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
 
+const tokenInputFlag = "enable-feature-token-input";
+
 test.beforeEach(async ({ page }) => {
   await WasmWorkspacePage.init(page);
+  await WasmWorkspacePage.mockConfigFlags(page, [tokenInputFlag]);
 });
 
 const multipleConstraintsFileId = `03bff843-920f-81a1-8004-756365e1eb6a`;
@@ -71,7 +74,10 @@ test.describe("Shape attributes", () => {
     page,
   }) => {
     const workspace = new WasmWorkspacePage(page);
-    await workspace.mockConfigFlags(["enable-feature-render-wasm"]);
+    await workspace.mockConfigFlags([
+      "enable-feature-render-wasm",
+      tokenInputFlag,
+    ]);
     await workspace.setupEmptyFile();
     await workspace.mockRPC(/get\-file\?/, "design/get-file-fills-limit.json");
 
@@ -95,7 +101,10 @@ test.describe("Shape attributes", () => {
     page,
   }) => {
     const workspace = new WasmWorkspacePage(page);
-    await workspace.mockConfigFlags(["enable-feature-render-wasm"]);
+    await workspace.mockConfigFlags([
+      "enable-feature-render-wasm",
+      tokenInputFlag,
+    ]);
     await workspace.setupEmptyFile();
     await workspace.mockRPC(
       /get\-file\?/,
@@ -236,7 +245,7 @@ test.describe("Background blur", () => {
     page,
   }) => {
     const workspace = new WasmWorkspacePage(page);
-    await workspace.mockConfigFlags(["enable-background-blur"]);
+    await workspace.mockConfigFlags(["enable-background-blur", tokenInputFlag]);
     await workspace.setupEmptyFile();
     await workspace.mockGetFile("render-wasm/get-file-background-blur.json");
 
@@ -260,7 +269,7 @@ test.describe("Background blur", () => {
     page,
   }) => {
     const workspace = new WasmWorkspacePage(page);
-    await workspace.mockConfigFlags(["enable-background-blur"]);
+    await workspace.mockConfigFlags(["enable-background-blur", tokenInputFlag]);
     await workspace.setupEmptyFile();
     await workspace.mockGetFile("render-wasm/get-file-background-blur.json");
 
@@ -319,6 +328,7 @@ test("BUG 9543 - Layout padding inputs not showing 'mixed' when needed", async (
   page,
 }) => {
   const workspace = new WasmWorkspacePage(page);
+
   await workspace.setupEmptyFile();
   await workspace.mockRPC(/get\-file\?/, "design/get-file-9543.json");
   await workspace.mockRPC(
@@ -338,14 +348,18 @@ test("BUG 9543 - Layout padding inputs not showing 'mixed' when needed", async (
   });
 
   await toggle.click();
-  await workspace.page.getByLabel("Top padding").fill("10");
+  const topPaddingInput = workspace.page.getByRole("textbox", {
+    name: "Top padding",
+  });
+  await topPaddingInput.fill("10");
+  await topPaddingInput.press("Enter");
   await toggle.click();
 
-  await expect(workspace.page.getByLabel("Vertical padding")).toHaveValue("");
+  const verticalPaddingInput = await workspace.page.getByRole("textbox", {
-  await expect(workspace.page.getByLabel("Vertical padding")).toHaveAttribute(
+    name: "Vertical padding",
-    "placeholder",
+  });
-    "Mixed",
+  await expect(verticalPaddingInput).toHaveValue("");
-  );
+  await expect(verticalPaddingInput).toHaveAttribute("placeholder", "Mixed");
 });
 
 test("BUG 11177 - Font size input not showing 'mixed' when needed", async ({

frontend/playwright/ui/specs/multiseleccion.spec.js

@@ -3,6 +3,7 @@ import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
 
 test.beforeEach(async ({ page }) => {
   await WasmWorkspacePage.init(page);
+  await WasmWorkspacePage.mockConfigFlags(page, ["enable-feature-token-input"]);
 });
 
 test("Multiselection - check multiple values in measures", async ({ page }) => {
@@ -27,37 +28,53 @@ test("Multiselection - check multiple values in measures", async ({ page }) => {
   await workspacePage.layers.getByTestId("layer-row").nth(0).click();
 
   // === CHECK SINGLE SELECTION - ALL MEASURE FIELDS ===
-  const measuresSection = workspacePage.rightSidebar.getByRole('region', { name: 'shape-measures-section' });
+  const measuresSection = workspacePage.rightSidebar.getByRole("region", {
+    name: "shape-measures-section",
+  });
   await expect(measuresSection).toBeVisible();
 
   // Width
-  const widthInput = measuresSection.getByTitle('Width', { exact: true }).getByRole('textbox');
+  const widthInput = measuresSection.getByRole("textbox", {
+    name: "Width",
+    exact: true,
+  });
   await expect(widthInput).toHaveValue("360");
 
   // Height
-  const heightInput = measuresSection.getByTitle('Height', { exact: true }).getByRole('textbox');
+  const heightInput = measuresSection.getByRole("textbox", {
+    name: "Height",
+    exact: true,
+  });
   await expect(heightInput).toHaveValue("53");
 
   // X Position (using "X axis" title)
-  const xPosInput = measuresSection.getByTitle('X axis', { exact: true }).getByRole('textbox');
+  const xPosInput = measuresSection.getByRole("textbox", {
+    name: "X axis",
+    exact: true,
+  });
   await expect(xPosInput).toHaveValue("1094");
 
   // Y Position (using "Y axis" title)
-  const yPosInput = measuresSection.getByTitle('Y axis', { exact: true }).getByRole('textbox');
+  const yPosInput = measuresSection.getByRole("textbox", {
+    name: "Y axis",
+    exact: true,
+  });
   await expect(yPosInput).toHaveValue("856");
 
   // === CHECK MULTI-SELECTION - MIXED VALUES ===
   // Shift+click to add second layer to selection
-  await workspacePage.layers.getByTestId("layer-row").nth(1).click({ modifiers: ['Shift'] });
+  await workspacePage.layers
+    .getByTestId("layer-row")
+    .nth(1)
+    .click({ modifiers: ["Shift"] });
 
   // All measure fields should show "Mixed" placeholder when values differ
-  await expect(widthInput).toHaveAttribute('placeholder', 'Mixed');
+  await expect(widthInput).toHaveAttribute("placeholder", "Mixed");
-  await expect(heightInput).toHaveAttribute('placeholder', 'Mixed');
+  await expect(heightInput).toHaveAttribute("placeholder", "Mixed");
-  await expect(xPosInput).toHaveAttribute('placeholder', 'Mixed');
+  await expect(xPosInput).toHaveAttribute("placeholder", "Mixed");
-  await expect(yPosInput).toHaveAttribute('placeholder', 'Mixed');
+  await expect(yPosInput).toHaveAttribute("placeholder", "Mixed");
 });
 
-
 test("Multiselection - check fill multiple values", async ({ page }) => {
   const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.setupEmptyFile(page);
@@ -79,17 +96,22 @@ test("Multiselection - check fill multiple values", async ({ page }) => {
   await workspacePage.layers.getByTestId("layer-row").nth(0).click();
 
   // Fill section
-  const fillSection = workspacePage.rightSidebar.getByRole('region', { name: "Fill section" });
+  const fillSection = workspacePage.rightSidebar.getByRole("region", {
+    name: "Fill section",
+  });
   await expect(fillSection).toBeVisible();
 
   // Single selection - fill color should be visible (not "Mixed")
   await expect(fillSection.getByText(/Mixed/i)).not.toBeVisible();
 
   // Multi-selection with Shift+click
-  await workspacePage.layers.getByTestId("layer-row").nth(1).click({ modifiers: ['Shift'] });
+  await workspacePage.layers
+    .getByTestId("layer-row")
+    .nth(1)
+    .click({ modifiers: ["Shift"] });
 
   // Should show "Mixed" for fills when shapes have different fill colors
-  await expect(fillSection.getByText('Mixed')).toBeVisible();
+  await expect(fillSection.getByText("Mixed")).toBeVisible();
 });
 
 test("Multiselection - check stroke multiple values", async ({ page }) => {
@@ -113,17 +135,22 @@ test("Multiselection - check stroke multiple values", async ({ page }) => {
   await workspacePage.layers.getByTestId("layer-row").nth(0).click();
 
   // Stroke section
-  const strokeSection = workspacePage.rightSidebar.getByRole('region', { name: "Stroke section" });
+  const strokeSection = workspacePage.rightSidebar.getByRole("region", {
+    name: "Stroke section",
+  });
   await expect(strokeSection).toBeVisible();
 
   // Single selection - stroke should be visible (not "Mixed")
   await expect(strokeSection.getByText(/Mixed/i)).not.toBeVisible();
 
   // Multi-selection
-  await workspacePage.layers.getByTestId("layer-row").nth(1).click({ modifiers: ['Shift'] });
+  await workspacePage.layers
+    .getByTestId("layer-row")
+    .nth(1)
+    .click({ modifiers: ["Shift"] });
 
   // Should show "Mixed" for strokes when shapes have different stroke colors
-  await expect(strokeSection.getByText('Mixed')).toBeVisible();
+  await expect(strokeSection.getByText("Mixed")).toBeVisible();
 });
 
 test("Multiselection - check rotation multiple values", async ({ page }) => {
@@ -147,26 +174,33 @@ test("Multiselection - check rotation multiple values", async ({ page }) => {
   await workspacePage.layers.getByTestId("layer-row").nth(1).click();
 
   // Measures section contains rotation
-  const measuresSection = workspacePage.rightSidebar.getByRole('region', { name: 'shape-measures-section' });
+  const measuresSection = workspacePage.rightSidebar.getByRole("region", {
+    name: "shape-measures-section",
+  });
   await expect(measuresSection).toBeVisible();
 
   // Rotation field exists
-  const rotationInput = measuresSection.getByTitle('Rotation', { exact: true }).getByRole('textbox');
+  const rotationInput = measuresSection.getByRole("textbox", {
+    name: "Rotation",
+    exact: true,
+  });
   await expect(rotationInput).toBeVisible();
 
   // Rotate that shape
   await rotationInput.fill("45");
-  await page.keyboard.press('Enter');
+  await page.keyboard.press("Enter");
   await expect(rotationInput).toHaveValue("45"); // Rotation should be 45
 
   // Multi-selection
-  await workspacePage.layers.getByTestId("layer-row").nth(0).click({ modifiers: ['Shift'] });
+  await workspacePage.layers
+    .getByTestId("layer-row")
+    .nth(0)
+    .click({ modifiers: ["Shift"] });
 
   // Rotation should show "Mixed" placeholder
-  await expect(rotationInput).toHaveAttribute('placeholder', 'Mixed');
+  await expect(rotationInput).toHaveAttribute("placeholder", "Mixed");
 });
 
-
 test("Multiselection of text and typographies", async ({ page }) => {
   const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.setupEmptyFile(page);
@@ -181,29 +215,45 @@ test("Multiselection of text and typographies", async ({ page }) => {
   });
 
   const plainTextLayer = workspacePage.layers.getByTestId("layer-row").nth(5);
-  const plainTextLayerTwo = workspacePage.layers.getByTestId("layer-row").nth(2);
+  const plainTextLayerTwo = workspacePage.layers
-  const typographyTextLayerOne = workspacePage.layers.getByTestId("layer-row").nth(7);
+    .getByTestId("layer-row")
-  const typographyTextLayerTwo = workspacePage.layers.getByTestId("layer-row").nth(4);
+    .nth(2);
-  const tokenTypographyTextLayerOne = workspacePage.layers.getByTestId("layer-row").nth(6);
+  const typographyTextLayerOne = workspacePage.layers
-  const tokenTypographyTextLayerTwo = workspacePage.layers.getByTestId("layer-row").nth(3);
+    .getByTestId("layer-row")
+    .nth(7);
+  const typographyTextLayerTwo = workspacePage.layers
+    .getByTestId("layer-row")
+    .nth(4);
+  const tokenTypographyTextLayerOne = workspacePage.layers
+    .getByTestId("layer-row")
+    .nth(6);
+  const tokenTypographyTextLayerTwo = workspacePage.layers
+    .getByTestId("layer-row")
+    .nth(3);
   const rectangleLayer = workspacePage.layers.getByTestId("layer-row").nth(1);
   const elipseLayer = workspacePage.layers.getByTestId("layer-row").nth(0);
-  const textSection = workspacePage.rightSidebar.getByRole('region', { name: "Text section" });
+  const textSection = workspacePage.rightSidebar.getByRole("region", {
+    name: "Text section",
+  });
   // Select rectangle and elipse together
   await rectangleLayer.click();
-  await elipseLayer.click({ modifiers: ['Control'] });
+  await elipseLayer.click({ modifiers: ["Control"] });
   await expect(textSection).not.toBeVisible();
-  
+
   // Select plain text layer
   await plainTextLayer.click();
 
   await expect(textSection).toBeVisible();
-  await expect(textSection.getByText("Multiple typographies")).not.toBeVisible();
+  await expect(
+    textSection.getByText("Multiple typographies"),
+  ).not.toBeVisible();
 
   // Select two plain text layer with different font family
-  await plainTextLayerTwo.click({ modifiers: ['Control'] });
+  await plainTextLayerTwo.click({ modifiers: ["Control"] });
   await expect(textSection).toBeVisible();
-  await expect(textSection.getByTitle("Font family").getByText("--")).toBeVisible();
+  await expect(
+    textSection.getByTitle("Font family").getByText("--"),
+  ).toBeVisible();
 
   // Select typography text layer
   await typographyTextLayerOne.click();
@@ -211,48 +261,50 @@ test("Multiselection of text and typographies", async ({ page }) => {
   await expect(textSection.getByText("Typography one")).toBeVisible();
 
   // Select two typography text layer with different typography
-  await typographyTextLayerTwo.click({ modifiers: ['Control'] });
+  await typographyTextLayerTwo.click({ modifiers: ["Control"] });
   await expect(textSection).toBeVisible();
   await expect(textSection.getByText("Multiple typographies")).toBeVisible();
 
-  // Select token typography text layer 
+  // Select token typography text layer
   // TODO: CHANGE WHEN TOKEN TYPOGRAPHY ROW IS READY
   await tokenTypographyTextLayerOne.click();
   await expect(textSection).toBeVisible();
-  await expect(textSection.getByText('Metrophobic')).toBeVisible();
+  await expect(textSection.getByText("Metrophobic")).toBeVisible();
 
   // Select two token typography text layer with different token typography
-    // TODO: CHANGE WHEN TOKEN TYPOGRAPHY ROW IS READY
+  // TODO: CHANGE WHEN TOKEN TYPOGRAPHY ROW IS READY
-  await tokenTypographyTextLayerTwo.click({ modifiers: ['Control'] });
+  await tokenTypographyTextLayerTwo.click({ modifiers: ["Control"] });
   await expect(textSection).toBeVisible();
-  await expect(textSection.getByTitle("Font family").getByText("--")).toBeVisible();
+  await expect(
+    textSection.getByTitle("Font family").getByText("--"),
+  ).toBeVisible();
 
   //Select plain text layer and typography text layer together
   await plainTextLayer.click();
-  await typographyTextLayerOne.click({ modifiers: ['Control'] });
+  await typographyTextLayerOne.click({ modifiers: ["Control"] });
   await expect(textSection).toBeVisible();
   await expect(textSection.getByText("Multiple typographies")).toBeVisible();
 
   //Select plain text layer and typography text layer together on reverse order
   await typographyTextLayerOne.click();
-  await plainTextLayer.click({ modifiers: ['Control'] });
+  await plainTextLayer.click({ modifiers: ["Control"] });
   await expect(textSection).toBeVisible();
   await expect(textSection.getByText("Multiple typographies")).toBeVisible();
 
   //Selen token typography text layer and typography text layer together
   await tokenTypographyTextLayerOne.click();
-  await typographyTextLayerOne.click({ modifiers: ['Control'] });
+  await typographyTextLayerOne.click({ modifiers: ["Control"] });
   await expect(textSection).toBeVisible();
   await expect(textSection.getByText("Multiple typographies")).toBeVisible();
 
   //Select token typography text layer and typography text layer together on reverse order
   await typographyTextLayerOne.click();
-  await tokenTypographyTextLayerOne.click({ modifiers: ['Control'] });
+  await tokenTypographyTextLayerOne.click({ modifiers: ["Control"] });
   await expect(textSection).toBeVisible();
   await expect(textSection.getByText("Multiple typographies")).toBeVisible();
 
   // Select rectangle and elipse together
   await rectangleLayer.click();
-  await elipseLayer.click({ modifiers: ['Control'] });
+  await elipseLayer.click({ modifiers: ["Control"] });
   await expect(textSection).not.toBeVisible();
-});
+});

frontend/playwright/ui/specs/profile-menu.spec.js

@@ -10,12 +10,16 @@ test("Navigate to penpot changelog from profile menu", async ({ page }) => {
   await dashboardPage.goToDashboard();
 
   await dashboardPage.openProfileMenu();
-  await dashboardPage.clickProfileMenuItem("About Penpot");
+  const aboutPenpotItem = page.getByText("About Penpot");
+  await aboutPenpotItem.hover();
+
+  const changelogSubmenuItem = page.getByText("Penpot Changelog");
+  await expect(changelogSubmenuItem).toBeVisible();
 
   // Listen for the new page (tab) that opens when clicking "Penpot Changelog"
   const [newPage] = await Promise.all([
     page.context().waitForEvent("page"),
-    dashboardPage.clickProfileMenuItem("Penpot Changelog"),
+    changelogSubmenuItem.click(),
   ]);
 
   await newPage.waitForLoadState();

frontend/playwright/ui/specs/workspace-modifers.spec.js

@@ -3,13 +3,17 @@ import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";
 
 test.beforeEach(async ({ page }) => {
   await WasmWorkspacePage.init(page);
+  await WasmWorkspacePage.mockConfigFlags(page, ["enable-feature-token-input"]);
 });
 
 test("BUG 13305 - Fix resize board to fit content", async ({ page }) => {
   const workspacePage = new WasmWorkspacePage(page);
   await workspacePage.setupEmptyFile();
   await workspacePage.mockGetFile("workspace/get-file-13305.json");
-  await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-13305.json");
+  await workspacePage.mockRPC(
+    "update-file?id=*",
+    "workspace/update-file-13305.json",
+  );
 
   await workspacePage.goToWorkspace({
     fileId: "9666e946-78e8-8111-8007-8fe5f0f454bf",
@@ -17,12 +21,42 @@ test("BUG 13305 - Fix resize board to fit content", async ({ page }) => {
   });
 
   await workspacePage.clickLeafLayer("Board");
-  await workspacePage.rightSidebar.getByRole("button", { name: "Resize board to fit content" }).click();
+  await workspacePage.rightSidebar
+    .getByRole("button", { name: "Resize board to fit content" })
+    .click();
 
-  await expect(workspacePage.rightSidebar.getByTitle("Width").getByRole("textbox")).toHaveValue("630");
+  const measuresSection = workspacePage.rightSidebar.getByRole("region", {
-  await expect(workspacePage.rightSidebar.getByTitle("Height").getByRole("textbox")).toHaveValue("630");
+    name: "shape-measures-section",
-  await expect(workspacePage.rightSidebar.getByTitle("X axis").getByRole("textbox")).toHaveValue("110");
+  });
-  await expect(workspacePage.rightSidebar.getByTitle("Y axis").getByRole("textbox")).toHaveValue("110");
+  await expect(measuresSection).toBeVisible();
+
+  // Width
+  const widthInput = measuresSection.getByRole("textbox", {
+    name: "Width",
+    exact: true,
+  });
+  await expect(widthInput).toHaveValue("630");
+
+  // Height
+  const heightInput = measuresSection.getByRole("textbox", {
+    name: "Height",
+    exact: true,
+  });
+  await expect(heightInput).toHaveValue("630");
+
+  // X Position (using "X axis" title)
+  const xPosInput = measuresSection.getByRole("textbox", {
+    name: "X axis",
+    exact: true,
+  });
+  await expect(xPosInput).toHaveValue("110");
+
+  // Y Position (using "Y axis" title)
+  const yPosInput = measuresSection.getByRole("textbox", {
+    name: "Y axis",
+    exact: true,
+  });
+  await expect(yPosInput).toHaveValue("110");
 });
 
 test("BUG 13382 - Fix problem with flex layout", async ({ page }) => {
@@ -35,7 +69,10 @@ test("BUG 13382 - Fix problem with flex layout", async ({ page }) => {
     "workspace/get-file-13382-fragment.json",
   );
 
-  await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-empty.json");
+  await workspacePage.mockRPC(
+    "update-file?id=*",
+    "workspace/update-file-empty.json",
+  );
 
   await workspacePage.goToWorkspace({
     fileId: "52c4e771-3853-8190-8007-9506c70e8100",
@@ -47,13 +84,26 @@ test("BUG 13382 - Fix problem with flex layout", async ({ page }) => {
   await workspacePage.clickToggableLayer("C");
   await workspacePage.clickLeafLayer("R2");
 
-  const heightText = workspacePage.rightSidebar.getByTitle("Height").getByPlaceholder('--');
+  const measuresSection = workspacePage.rightSidebar.getByRole("region", {
-  await heightText.fill("200");
+    name: "shape-measures-section",
-  await heightText.press("Enter");
+  });
+  await expect(measuresSection).toBeVisible();
+
+  const heightInput = measuresSection.getByRole("textbox", {
+    name: "Height",
+    exact: true,
+  });
+  await heightInput.fill("200");
+  await heightInput.press("Enter");
 
   await workspacePage.clickLeafLayer("B");
-  await expect(workspacePage.rightSidebar.getByTitle("Height").getByRole("textbox")).toHaveValue("340");
 
+  // Width
+  const widthInput = measuresSection.getByRole("textbox", {
+    name: "Width",
+    exact: true,
+  });
+  await expect(widthInput).toHaveValue("393");
 });
 
 test("BUG 13468 - Fix problem with flex propagation", async ({ page }) => {
@@ -66,7 +116,10 @@ test("BUG 13468 - Fix problem with flex propagation", async ({ page }) => {
     "workspace/get-file-13468-fragment.json",
   );
 
-  await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-empty.json");
+  await workspacePage.mockRPC(
+    "update-file?id=*",
+    "workspace/update-file-empty.json",
+  );
 
   await workspacePage.goToWorkspace({
     fileId: "3a4d7ec7-c391-8146-8007-9a05c41da6b9",
@@ -76,10 +129,21 @@ test("BUG 13468 - Fix problem with flex propagation", async ({ page }) => {
   await workspacePage.clickToggableLayer("Parent");
   await workspacePage.clickToggableLayer("Container");
 
-  await workspacePage.sidebar.getByRole('button', { name: 'Show' }).click();
+  await workspacePage.sidebar.getByRole("button", { name: "Show" }).click();
 
   await workspacePage.clickLeafLayer("Container");
-  await expect(workspacePage.rightSidebar.getByTitle("Height").getByRole("textbox")).toHaveValue("76");
+
+  const measuresSection = workspacePage.rightSidebar.getByRole("region", {
+    name: "shape-measures-section",
+  });
+  await expect(measuresSection).toBeVisible();
+
+  const heightInput = measuresSection.getByRole("textbox", {
+    name: "Height",
+    exact: true,
+  });
+
+  await expect(heightInput).toHaveValue("76");
 });
 
 test("BUG 13272 - Fix problem with snap to pixel", async ({ page }) => {
@@ -92,7 +156,10 @@ test("BUG 13272 - Fix problem with snap to pixel", async ({ page }) => {
     "workspace/get-file-13272-fragment.json",
   );
 
-  await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-empty.json");
+  await workspacePage.mockRPC(
+    "update-file?id=*",
+    "workspace/update-file-empty.json",
+  );
 
   await workspacePage.goToWorkspace({
     fileId: "3b9773cc-d4f1-81e1-8007-b3f8dcaba770",
@@ -102,15 +169,31 @@ test("BUG 13272 - Fix problem with snap to pixel", async ({ page }) => {
   await workspacePage.clickToggableLayer("Group");
   await workspacePage.clickLeafLayer("Group");
 
-  await workspacePage.page.locator('g:nth-child(11) > .cursor-resize-nesw-0').hover();
+  await workspacePage.page
+    .locator("g:nth-child(11) > .cursor-resize-nesw-0")
+    .hover();
   await workspacePage.page.mouse.down();
 
   await workspacePage.page.mouse.move(1200, 800);
   await workspacePage.page.mouse.up();
 
   await workspacePage.clickLeafLayer("Rectangle");
-  await expect(workspacePage.rightSidebar.getByTitle("Width").getByRole("textbox")).toHaveValue("197.5");
+
-  await expect(workspacePage.rightSidebar.getByTitle("Height").getByRole("textbox")).toHaveValue("128.28");
+  const measuresSection = workspacePage.rightSidebar.getByRole("region", {
+    name: "shape-measures-section",
+  });
+  await expect(measuresSection).toBeVisible();
+
+  const heightInput = measuresSection.getByRole("textbox", {
+    name: "Height",
+    exact: true,
+  });
+  const widthInput = measuresSection.getByRole("textbox", {
+    name: "Width",
+    exact: true,
+  });
+  await expect(widthInput).toHaveValue("197.5");
+  await expect(heightInput).toHaveValue("128.28");
 });
 
 test("BUG 13755 - Fix problem with text change modiifers", async ({ page }) => {
@@ -123,7 +206,10 @@ test("BUG 13755 - Fix problem with text change modiifers", async ({ page }) => {
     "workspace/get-file-13755-fragment.json",
   );
 
-  await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-empty.json");
+  await workspacePage.mockRPC(
+    "update-file?id=*",
+    "workspace/update-file-empty.json",
+  );
 
   await workspacePage.goToWorkspace({
     fileId: "7fd33337-c651-80ae-8007-c357213f876e",
@@ -133,9 +219,19 @@ test("BUG 13755 - Fix problem with text change modiifers", async ({ page }) => {
   await workspacePage.clickToggableLayer("Board");
   await workspacePage.clickLeafLayer("uno dos tres cuatro");
 
-  await workspacePage.page.keyboard.press('Enter');
+  await workspacePage.page.keyboard.press("Enter");
-  await workspacePage.page.keyboard.type('test');
+  await workspacePage.page.keyboard.type("test");
 
   await workspacePage.clickToggableLayer("Board");
-  await expect(workspacePage.rightSidebar.getByTitle("Width").getByRole("textbox")).toHaveValue("23");
+
+  const measuresSection = workspacePage.rightSidebar.getByRole("region", {
+    name: "shape-measures-section",
+  });
+  await expect(measuresSection).toBeVisible();
+
+  const widthInput = measuresSection.getByRole("textbox", {
+    name: "Width",
+    exact: true,
+  });
+  await expect(widthInput).toHaveValue("23");
 });

frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs

@@ -619,8 +619,7 @@
               :value (get values :rotation)}]
 
             [:div {:class (stl/css :rotation)
-                   :title (tr "workspace.options.rotation")
+                   :title (tr "workspace.options.rotation")}
-                   :data-testid "rotation"}
              [:span {:class (stl/css :icon)}  deprecated-icon/rotation]
              [:> deprecated-input/numeric-input*
               {:no-validate true