diff --git a/CHANGES.md b/CHANGES.md index 7905f7cdbd..00d3918679 100644 --- a/CHANGES.md +++ b/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) diff --git a/frontend/playwright/ui/specs/tokens/apply.spec.js b/frontend/playwright/ui/specs/tokens/apply.spec.js index 64f49733ce..df4fcfb247 100644 --- a/frontend/playwright/ui/specs/tokens/apply.spec.js +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index dd992ce08b..08e1774904 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/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}]]]