0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-16 08:51:32 -05:00

🐛 Fix "Mixed" not showing up for layout padding inputs (#5741)

* 🐛 Fix layout padding inputs not showing 'mixed' text

*  Add integration test
This commit is contained in:
Belén Albeza 2025-02-03 09:51:26 +01:00 committed by GitHub
parent e486bb4bec
commit fe5de94db4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 484 additions and 10 deletions

View file

@ -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
}
}
}

View file

@ -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"
}
}

View file

@ -0,0 +1 @@
{"~:revn":15,"~:lagged":[]}

View file

@ -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",
);
});

View file

@ -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]]))

View file

@ -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"

View file

@ -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"