🐛 Fix token application to grid padding (#9630)

CHANGES.md

@@ -124,6 +124,7 @@
 - Fix asset icon broken on Asset tab [#9587](https://github.com/penpot/penpot/issues/9587) (PR: [#9612](https://github.com/penpot/penpot/pull/9612))
 - Fix text fill color stops updating in multiselect with texts [#9608](https://github.com/penpot/penpot/issues/9608) (PR: [#9549](https://github.com/penpot/penpot/pull/9549))
 - Fix editing a legacy text element silently detaches its color token [Taiga #13958](https://tree.taiga.io/project/penpot/issue/13958)
+- Fix token application to grid paddings [Taiga #14136](https://tree.taiga.io/project/penpot/issue/14136)
 
 ## 2.15.4 (Unreleased)
 

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

@@ -1030,6 +1030,56 @@ test("BUG: 13930, Token colors are shown on selected colors section", async ({
   ).toBeVisible();
 });
 
+test("BUG: 14136 Apply grid layout padding token to a shape from the sidebar does not change values", async ({
+  page,
+}) => {
+  // Setup the workspace with token features enabled
+  const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
+    await setupTokensFileRender(page, {
+      flags: ["enable-token-combobox", "enable-feature-token-input"],
+    });
+
+  // Transform a rectangle into a grid container to expose gap properties
+  await page.getByRole("tab", { name: "Layers" }).click();
+
+  await workspacePage.layers.getByTestId("layer-row").nth(1).click();
+
+  const layoutSection = page.getByTestId("inspect-layout");
+  await expect(layoutSection).toBeVisible();
+
+  const addLayoutButton = layoutSection
+    .getByRole("button", { name: "Add layout" })
+    .first();
+  await addLayoutButton.click();
+  await page.getByText("Grid layout").click();
+
+  // Apply a dimension token to the vertical padding property
+  await layoutSection.getByLabel("Open token list").nth(2).click();
+  const tokenDimensionMd = layoutSection.getByRole("option", {
+    name: "dimension.md",
+  });
+  await expect(tokenDimensionMd).toBeVisible();
+  await tokenDimensionMd.click();
+
+  // Expand padding to all sides
+  await layoutSection.getByRole('button', { name: 'Show 4 sided padding options' }).click();
+  const topPaddingSection = layoutSection.getByLabel("Top padding");
+  const bottomPaddingSection = layoutSection.getByLabel("Bottom padding");
+  await expect(topPaddingSection).toBeVisible();
+
+  // Check if token is still applied to top and bottom padding
+  await expect(topPaddingSection.getByLabel("Detach token")).toBeVisible();
+  await expect(bottomPaddingSection.getByLabel("Detach token")).toBeVisible();
+
+  // Check if the value of the attribute is still correct
+  await expect(
+    await topPaddingSection.getByRole("button", { name: "dimension.md" }).textContent()
+  ).toBe("16");
+  await expect(
+    await bottomPaddingSection.getByRole("button", { name: "dimension.md" }).textContent()
+  ).toBe("16");
+});
+
 test.describe("Numeric Input and Token Integration Tests", () => {
   test("Token pill persists after blur in gap inputs", async ({ page }) => {
     // Setup the workspace with token features enabled

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

@@ -1377,6 +1377,7 @@
           [:div {:class (stl/css :padding-row)}
            [:> padding-section* {:value (:layout-padding values)
                                  :type (:layout-padding-type values)
+                                 :ids ids
                                  :applied-tokens applied-tokens
                                  :on-type-change on-padding-type-change
                                  :on-change on-padding-change}]]]