mirror of
https://github.com/penpot/penpot.git
synced 2025-06-04 06:01:38 +02: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
GitHub
parent
e486bb4bec
commit
fe5de94db4
7 changed files with 484 additions and 10 deletions
105
frontend/playwright/data/design/get-file-9543.json
Normal file
105
frontend/playwright/data/design/get-file-9543.json
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
278
frontend/playwright/data/design/get-file-fragment-9543.json
Normal file
278
frontend/playwright/data/design/get-file-fragment-9543.json
Normal 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"
|
||||
}
|
||||
}
|
||||
1
frontend/playwright/data/design/update-file-9543.json
Normal file
1
frontend/playwright/data/design/update-file-9543.json
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"~:revn":15,"~:lagged":[]}
|
||||
|
|
@ -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",
|
||||
);
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue