diff --git a/frontend/playwright/data/design/get-file-9543.json b/frontend/playwright/data/design/get-file-9543.json new file mode 100644 index 0000000000..1507f67a4a --- /dev/null +++ b/frontend/playwright/data/design/get-file-9543.json @@ -0,0 +1,105 @@ +{ + "~:features": { + "~#set": [ + "layout/grid", + "fdata/pointer-map", + "fdata/objects-map", + "components/v2", + "fdata/shape-data-type" + ] + }, + "~:permissions": { + "~:type": "~:membership", + "~:is-owner": true, + "~:is-admin": true, + "~:can-edit": true, + "~:can-read": true, + "~:is-logged": true + }, + "~:has-media-trimmed": false, + "~:comment-thread-seqn": 0, + "~:name": "New File 1", + "~:revn": 15, + "~:modified-at": "~m1738332498202", + "~:vern": 0, + "~:id": "~u525a5d8b-028e-80e7-8005-aa6cad42f27d", + "~:is-shared": false, + "~:migrations": { + "~#ordered-set": [ + "legacy-2", + "legacy-3", + "legacy-5", + "legacy-6", + "legacy-7", + "legacy-8", + "legacy-9", + "legacy-10", + "legacy-11", + "legacy-12", + "legacy-13", + "legacy-14", + "legacy-16", + "legacy-17", + "legacy-18", + "legacy-19", + "legacy-25", + "legacy-26", + "legacy-27", + "legacy-28", + "legacy-29", + "legacy-31", + "legacy-32", + "legacy-33", + "legacy-34", + "legacy-36", + "legacy-37", + "legacy-38", + "legacy-39", + "legacy-40", + "legacy-41", + "legacy-42", + "legacy-43", + "legacy-44", + "legacy-45", + "legacy-46", + "legacy-47", + "legacy-48", + "legacy-49", + "legacy-50", + "legacy-51", + "legacy-52", + "legacy-53", + "legacy-54", + "legacy-55", + "legacy-56", + "legacy-57", + "legacy-59", + "legacy-62", + "legacy-65", + "legacy-66", + "legacy-67" + ] + }, + "~:version": 67, + "~:project-id": "~u525a5d8b-028e-80e7-8005-aa6ca759253d", + "~:created-at": "~m1738331541791", + "~:data": { + "~:pages": [ + "~u525a5d8b-028e-80e7-8005-aa6cad42f27e" + ], + "~:pages-index": { + "~u525a5d8b-028e-80e7-8005-aa6cad42f27e": { + "~#penpot/pointer": [ + "~u525a5d8b-028e-80e7-8005-aa705347b678", + { + "~:created-at": "~m1738332498207" + } + ] + } + }, + "~:id": "~u525a5d8b-028e-80e7-8005-aa6cad42f27d", + "~:options": { + "~:components-v2": true + } + } +} diff --git a/frontend/playwright/data/design/get-file-fragment-9543.json b/frontend/playwright/data/design/get-file-fragment-9543.json new file mode 100644 index 0000000000..4589bd3f8f --- /dev/null +++ b/frontend/playwright/data/design/get-file-fragment-9543.json @@ -0,0 +1,278 @@ +{ + "~:id": "~u525a5d8b-028e-80e7-8005-aa705347b678", + "~:file-id": "~u525a5d8b-028e-80e7-8005-aa6cad42f27d", + "~:created-at": "~m1738332498199", + "~:data": { + "~:options": {}, + "~:objects": { + "~u00000000-0000-0000-0000-000000000000": { + "~#shape": { + "~:y": 0, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:name": "Root Frame", + "~:width": 0.01, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 0.0, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.01 + } + }, + { + "~#point": { + "~:x": 0.0, + "~:y": 0.01 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u00000000-0000-0000-0000-000000000000", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 0, + "~:proportion": 1.0, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 0, + "~:y": 0, + "~:width": 0.01, + "~:height": 0.01, + "~:x1": 0, + "~:y1": 0, + "~:x2": 0.01, + "~:y2": 0.01 + } + }, + "~:fills": [ + { + "~:fill-color": "#FFFFFF", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 0.01, + "~:flip-y": null, + "~:shapes": [ + "~uc42485d8-8a02-80e3-8005-aa6caf76e409" + ] + } + }, + "~uc42485d8-8a02-80e3-8005-aa6caf76e409": { + "~#shape": { + "~:y": 0, + "~:layout-grid-columns": [ + { + "~:type": "~:flex", + "~:value": 1 + }, + { + "~:type": "~:flex", + "~:value": 1 + } + ], + "~:hide-fill-on-export": false, + "~:layout-gap-type": "~:multiple", + "~:layout-padding": { + "~:p1": 0, + "~:p2": 0, + "~:p3": 0, + "~:p4": 0 + }, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:layout": "~:grid", + "~:hide-in-viewer": false, + "~:name": "Board", + "~:layout-align-items": "~:start", + "~:width": 200, + "~:layout-grid-cells": { + "~uc42485d8-8a02-80e3-8005-aa6cb3b09187": { + "~:justify-self": "~:auto", + "~:column": 1, + "~:id": "~uc42485d8-8a02-80e3-8005-aa6cb3b09187", + "~:position": "~:auto", + "~:column-span": 1, + "~:align-self": "~:auto", + "~:row": 1, + "~:row-span": 1, + "~:shapes": [] + }, + "~uc42485d8-8a02-80e3-8005-aa6cb3b09188": { + "~:justify-self": "~:auto", + "~:column": 2, + "~:id": "~uc42485d8-8a02-80e3-8005-aa6cb3b09188", + "~:position": "~:auto", + "~:column-span": 1, + "~:align-self": "~:auto", + "~:row": 1, + "~:row-span": 1, + "~:shapes": [] + }, + "~uc42485d8-8a02-80e3-8005-aa6cb3b09189": { + "~:justify-self": "~:auto", + "~:column": 1, + "~:id": "~uc42485d8-8a02-80e3-8005-aa6cb3b09189", + "~:position": "~:auto", + "~:column-span": 1, + "~:align-self": "~:auto", + "~:row": 2, + "~:row-span": 1, + "~:shapes": [] + }, + "~uc42485d8-8a02-80e3-8005-aa6cb3b0918a": { + "~:justify-self": "~:auto", + "~:column": 2, + "~:id": "~uc42485d8-8a02-80e3-8005-aa6cb3b0918a", + "~:position": "~:auto", + "~:column-span": 1, + "~:align-self": "~:auto", + "~:row": 2, + "~:row-span": 1, + "~:shapes": [] + } + }, + "~:layout-padding-type": "~:simple", + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 0, + "~:y": 0 + } + }, + { + "~#point": { + "~:x": 200, + "~:y": 0 + } + }, + { + "~#point": { + "~:x": 200, + "~:y": 200 + } + }, + { + "~#point": { + "~:x": 0, + "~:y": 200 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:layout-gap": { + "~:row-gap": 0, + "~:column-gap": 0 + }, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:layout-justify-content": "~:stretch", + "~:r1": 0, + "~:id": "~uc42485d8-8a02-80e3-8005-aa6caf76e409", + "~:layout-justify-items": "~:start", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:layout-align-content": "~:stretch", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 0, + "~:proportion": 1, + "~:r4": 0, + "~:layout-grid-rows": [ + { + "~:type": "~:flex", + "~:value": 1 + }, + { + "~:type": "~:flex", + "~:value": 1 + } + ], + "~:selrect": { + "~#rect": { + "~:x": 0, + "~:y": 0, + "~:width": 200, + "~:height": 200, + "~:x1": 0, + "~:y1": 0, + "~:x2": 200, + "~:y2": 200 + } + }, + "~:fills": [ + { + "~:fill-color": "#FFFFFF", + "~:fill-opacity": 1 + } + ], + "~:layout-grid-dir": "~:row", + "~:flip-x": null, + "~:height": 200, + "~:flip-y": null, + "~:shapes": [] + } + } + }, + "~:id": "~u525a5d8b-028e-80e7-8005-aa6cad42f27e", + "~:name": "Page 1" + } +} diff --git a/frontend/playwright/data/design/update-file-9543.json b/frontend/playwright/data/design/update-file-9543.json new file mode 100644 index 0000000000..e0a1bffa2b --- /dev/null +++ b/frontend/playwright/data/design/update-file-9543.json @@ -0,0 +1 @@ +{"~:revn":15,"~:lagged":[]} \ No newline at end of file diff --git a/frontend/playwright/ui/specs/design-tab.spec.js b/frontend/playwright/ui/specs/design-tab.spec.js index 38b347efe6..ea73328de7 100644 --- a/frontend/playwright/ui/specs/design-tab.spec.js +++ b/frontend/playwright/ui/specs/design-tab.spec.js @@ -172,3 +172,36 @@ test("BUG 9061 - Group blur visibility toggle icon not updating", async ({ await blurButton.click(); await expect(blurIcon).toHaveAttribute("href", "#icon-hide"); }); + +test("BUG 9543 - Layout padding inputs not showing 'mixed' when needed", async ({ + page, +}) => { + const workspace = new WorkspacePage(page); + await workspace.setupEmptyFile(); + await workspace.mockRPC(/get\-file\?/, "design/get-file-9543.json"); + await workspace.mockRPC( + "get-file-fragment?file-id=*&fragment-id=*", + "design/get-file-fragment-9543.json", + ); + await workspace.mockRPC("update-file?id=*", "design/update-file-9543.json"); + + await workspace.goToWorkspace({ + fileId: "525a5d8b-028e-80e7-8005-aa6cad42f27d", + pageId: "525a5d8b-028e-80e7-8005-aa6cad42f27e", + }); + + await workspace.clickLeafLayer("Board"); + let toggle = workspace.page.getByRole("button", { + name: "Show 4 sided padding options", + }); + + await toggle.click(); + await workspace.page.getByLabel("Top padding").fill("10"); + await toggle.click(); + + await expect(workspace.page.getByLabel("Vertical padding")).toHaveValue(""); + await expect(workspace.page.getByLabel("Vertical padding")).toHaveAttribute( + "placeholder", + "Mixed", + ); +}); 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 b1b1a1c7e0..425fbc5d2f 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 @@ -303,12 +303,12 @@ p1 (if (and (not (= :multiple value)) (= p1 p3)) p1 - "--") + nil) p2 (if (and (not (= :multiple value)) (= p2 p4)) p2 - "--") + nil) on-change' (mf/use-fn @@ -334,30 +334,34 @@ [:div {:class (stl/css :paddings-simple)} [:div {:class (stl/css :padding-simple) - :title "Vertical padding"} + :title (tr "workspace.layout_grid.editor.padding.vertical")} [:span {:class (stl/css :icon)} i/padding-top-bottom] [:> numeric-input* {:class (stl/css :numeric-input) - :placeholder "--" + :placeholder (tr "settings.multiple") + :aria-label (tr "workspace.layout_grid.editor.padding.vertical") :data-attr "p1" :on-change on-change' :on-focus on-focus + :nillable true :min 0 :value p1}]] [:div {:class (stl/css :padding-simple) - :title "Horizontal padding"} + :title (tr "workspace.layout_grid.editor.padding.horizontal")} [:span {:class (stl/css :icon)} i/padding-left-right] [:> numeric-input* {:className (stl/css :numeric-input) - :placeholder "--" + :placeholder (tr "settings.multiple") + :aria-label (tr "workspace.layout_grid.editor.padding.horizontal") :data-attr "p2" :on-change on-change' :on-focus on-focus :on-blur on-padding-blur :min 0 + :nillable true :value p2}]]])) (mf/defc multiple-padding-selection @@ -389,12 +393,13 @@ [:div {:class (stl/css :paddings-multiple)} [:div {:class (stl/css :padding-multiple) - :title "Top padding"} + :title (tr "workspace.layout_grid.editor.padding.top")} [:span {:class (stl/css :icon)} i/padding-top] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder "--" + :aria-label (tr "workspace.layout_grid.editor.padding.top") :data-attr "p1" :on-change on-change' :on-focus on-focus @@ -403,12 +408,13 @@ :value p1}]] [:div {:class (stl/css :padding-multiple) - :title "Right padding"} + :title (tr "workspace.layout_grid.editor.padding.right")} [:span {:class (stl/css :icon)} i/padding-right] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder "--" + :aria-label (tr "workspace.layout_grid.editor.padding.right") :data-attr "p2" :on-change on-change' :on-focus on-focus @@ -417,12 +423,13 @@ :value p2}]] [:div {:class (stl/css :padding-multiple) - :title "Bottom padding"} + :title (tr "workspace.layout_grid.editor.padding.bottom")} [:span {:class (stl/css :icon)} i/padding-bottom] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder "--" + :aria-label (tr "workspace.layout_grid.editor.padding.bottom") :data-attr "p3" :on-change on-change' :on-focus on-focus @@ -431,12 +438,13 @@ :value p3}]] [:div {:class (stl/css :padding-multiple) - :title "Left padding"} + :title (tr "workspace.layout_grid.editor.padding.left")} [:span {:class (stl/css :icon)} i/padding-left] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder "--" + :aria-label (tr "workspace.layout_grid.editor.padding.left") :data-attr "p4" :on-change on-change' :on-focus on-focus @@ -476,6 +484,7 @@ :padding-toggle true :selected (= type :multiple)) :title (tr "workspace.layout_grid.editor.padding.expand") + :aria-label (tr "workspace.layout_grid.editor.padding.expand") :data-type (d/name type) :on-click on-type-change'} i/padding-extended]])) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index c125d38ff4..3387628caa 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -4641,6 +4641,30 @@ msgstr "Exit" msgid "workspace.layout_grid.editor.padding.expand" msgstr "Show 4 sided padding options" +#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:337 +msgid "workspace.layout_grid.editor.padding.vertical" +msgstr "Vertical padding" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:351 +msgid "workspace.layout_grid.editor.padding.horizontal" +msgstr "Horizontal padding" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:396 +msgid "workspace.layout_grid.editor.padding.top" +msgstr "Top padding" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:411 +msgid "workspace.layout_grid.editor.padding.right" +msgstr "Right padding" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:425 +msgid "workspace.layout_grid.editor.padding.bottom" +msgstr "Bottom padding" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:439 +msgid "workspace.layout_grid.editor.padding.left" +msgstr "Left padding" + #: src/app/main/ui/workspace/viewport/grid_layout_editor.cljs:59 msgid "workspace.layout_grid.editor.title" msgstr "Editing grid" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index d13f12a901..7b78fd0314 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -4643,6 +4643,30 @@ msgstr "Salir" msgid "workspace.layout_grid.editor.padding.expand" msgstr "Mostrar el padding a 4 lados" +#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:337 +msgid "workspace.layout_grid.editor.padding.vertical" +msgstr "Padding vertical" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:351 +msgid "workspace.layout_grid.editor.padding.horizontal" +msgstr "Padding horizontal" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:396 +msgid "workspace.layout_grid.editor.padding.top" +msgstr "Padding superior" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:411 +msgid "workspace.layout_grid.editor.padding.right" +msgstr "Padding derecho" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:425 +msgid "workspace.layout_grid.editor.padding.bottom" +msgstr "Padding inferior" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:439 +msgid "workspace.layout_grid.editor.padding.left" +msgstr "Padding izquierdo" + #: src/app/main/ui/workspace/viewport/grid_layout_editor.cljs:59 msgid "workspace.layout_grid.editor.title" msgstr "Editando rejilla"