diff --git a/CHANGES.md b/CHANGES.md index f2a5c8760b..e6eaef3786 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -87,11 +87,11 @@ A non exhaustive list of changes: ### :bug: Bugs fixed - Fix getCurrentUser for plugins api [Taiga #11057](https://tree.taiga.io/project/penpot/issue/11057) - - Fix spacing / sizes of different elements in the measurements section of the design tab [Taiga #11076](https://tree.taiga.io/project/penpot/issue/11076) - Fix selection of short paths [Github #4472](https://github.com/penpot/penpot/issues/4472) - Fix element positioning on the right side to adjust to grid [#11073](https://tree.taiga.io/project/penpot/issue/11073) - Fix palette is over sidebar [#11160](https://tree.taiga.io/project/penpot/issue/11160) +- Fix font size input not displaying "mixed" when multiple texts are selected [Taiga #11177](https://tree.taiga.io/project/penpot/issue/11177) ## 2.7.1 diff --git a/frontend/playwright/data/design/get-file-11177.json b/frontend/playwright/data/design/get-file-11177.json new file mode 100644 index 0000000000..26829a53fd --- /dev/null +++ b/frontend/playwright/data/design/get-file-11177.json @@ -0,0 +1,116 @@ +{ + "~:features": { + "~#set": [ + "fdata/path-data", + "plugins/runtime", + "design-tokens/v1", + "layout/grid", + "styles/v2", + "fdata/pointer-map", + "fdata/objects-map", + "components/v2", + "fdata/shape-data-type" + ] + }, + "~:team-id": "~u04868522-3ebf-81e8-8006-306b0c9b5f59", + "~: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 2", + "~:revn": 7, + "~:modified-at": "~m1748434281122", + "~:vern": 0, + "~:id": "~ub3e5731a-c295-801d-8006-3fc33c3b1b13", + "~: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", + "0001-remove-tokens-from-groups", + "0002-normalize-bool-content", + "0002-clean-shape-interactions", + "0003-fix-root-shape", + "0003-convert-path-content" + ] + }, + "~:version": 67, + "~:project-id": "~ub3e5731a-c295-801d-8006-3fc3345c584a", + "~:created-at": "~m1748353453335", + "~:data": { + "~:pages": [ + "~ub3e5731a-c295-801d-8006-3fc33c3b1b14" + ], + "~:pages-index": { + "~ub3e5731a-c295-801d-8006-3fc33c3b1b14": { + "~#penpot/pointer": [ + "~u5ec9cb0b-596f-80d7-8006-40f791a955eb", + { + "~:created-at": "~m1748434281126" + } + ] + } + }, + "~:id": "~ub3e5731a-c295-801d-8006-3fc33c3b1b13", + "~:options": { + "~:components-v2": true, + "~:base-font-size": "16px" + } + } +} \ No newline at end of file diff --git a/frontend/playwright/data/design/get-file-fragment-11177.json b/frontend/playwright/data/design/get-file-fragment-11177.json new file mode 100644 index 0000000000..ad8c943b3b --- /dev/null +++ b/frontend/playwright/data/design/get-file-fragment-11177.json @@ -0,0 +1,373 @@ +{ + "~:id": "~u5ec9cb0b-596f-80d7-8006-40f791a955eb", + "~:file-id": "~ub3e5731a-c295-801d-8006-3fc33c3b1b13", + "~:created-at": "~m1748434281117", + "~:data": { + "~: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": [ + "~u629b4e50-e524-8051-8006-40f778ee4f52", + "~u629b4e50-e524-8051-8006-40f77ff3c2e7" + ] + } + }, + "~u629b4e50-e524-8051-8006-40f778ee4f52": { + "~#shape": { + "~:y": 46.00000185767806, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:typography-ref-id": null, + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "sourcesanspro", + "~:font-size": "20", + "~:font-weight": "400", + "~:typography-ref-file": null, + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { + "~:fill-color": "#000000", + "~:fill-opacity": 1 + } + ], + "~:font-family": "sourcesanspro", + "~:text": "Lorem" + } + ], + "~:typography-ref-id": null, + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "sourcesanspro", + "~:key": "ccjq7", + "~:font-size": "20", + "~:font-weight": "400", + "~:typography-ref-file": null, + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { + "~:fill-color": "#000000", + "~:fill-opacity": 1 + } + ], + "~:font-family": "sourcesanspro" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "Lorem", + "~:width": 54.000002241134666, + "~:type": "~:text", + "~:points": [ + { + "~#point": { + "~:x": 597.0000541090969, + "~:y": 46.00000185767806 + } + }, + { + "~#point": { + "~:x": 651.0000563502316, + "~:y": 46.00000185767806 + } + }, + { + "~#point": { + "~:x": 651.0000563502316, + "~:y": 70.0000024537245 + } + }, + { + "~#point": { + "~:x": 597.0000541090969, + "~:y": 70.0000024537245 + } + } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u629b4e50-e524-8051-8006-40f778ee4f52", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:x": 597.0000541090969, + "~:selrect": { + "~#rect": { + "~:x": 597.0000541090969, + "~:y": 46.00000185767806, + "~:width": 54.000002241134666, + "~:height": 24.000000596046448, + "~:x1": 597.0000541090969, + "~:y1": 46.00000185767806, + "~:x2": 651.0000563502316, + "~:y2": 70.0000024537245 + } + }, + "~:flip-x": null, + "~:height": 24.000000596046448, + "~:flip-y": null + } + }, + "~u629b4e50-e524-8051-8006-40f77ff3c2e7": { + "~#shape": { + "~:y": 85.00000137090683, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:auto-width", + "~:content": { + "~:type": "root", + "~:children": [ + { + "~:type": "paragraph-set", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:children": [ + { + "~:line-height": "1.2", + "~:font-style": "normal", + "~:typography-ref-id": null, + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "sourcesanspro", + "~:font-size": "14", + "~:font-weight": "400", + "~:typography-ref-file": null, + "~:text-direction": "ltr", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { + "~:fill-color": "#000000", + "~:fill-opacity": 1 + } + ], + "~:font-family": "sourcesanspro", + "~:text": "Ipsum" + } + ], + "~:typography-ref-id": null, + "~:text-transform": "none", + "~:text-align": "left", + "~:font-id": "sourcesanspro", + "~:key": "7hqs0", + "~:font-size": "14", + "~:font-weight": "400", + "~:typography-ref-file": null, + "~:text-direction": "ltr", + "~:type": "paragraph", + "~:font-variant-id": "regular", + "~:text-decoration": "none", + "~:letter-spacing": "0", + "~:fills": [ + { + "~:fill-color": "#000000", + "~:fill-opacity": 1 + } + ], + "~:font-family": "sourcesanspro" + } + ] + } + ] + }, + "~:hide-in-viewer": false, + "~:name": "Ipsum", + "~:width": 36.99999976158142, + "~:type": "~:text", + "~:points": [ + { + "~#point": { + "~:x": 636.9999854560631, + "~:y": 85.00000137090683 + } + }, + { + "~#point": { + "~:x": 673.9999852176445, + "~:y": 85.00000137090683 + } + }, + { + "~#point": { + "~:x": 673.9999852176445, + "~:y": 102.00000947713852 + } + }, + { + "~#point": { + "~:x": 636.9999854560631, + "~:y": 102.00000947713852 + } + } + ], + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u629b4e50-e524-8051-8006-40f77ff3c2e7", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:x": 636.9999854560631, + "~:selrect": { + "~#rect": { + "~:x": 636.9999854560631, + "~:y": 85.00000137090683, + "~:width": 36.99999976158142, + "~:height": 17.00000810623169, + "~:x1": 636.9999854560631, + "~:y1": 85.00000137090683, + "~:x2": 673.9999852176445, + "~:y2": 102.00000947713852 + } + }, + "~:flip-x": null, + "~:height": 17.00000810623169, + "~:flip-y": null + } + } + }, + "~:id": "~ub3e5731a-c295-801d-8006-3fc33c3b1b14", + "~:name": "Page 1" + } +} diff --git a/frontend/playwright/data/design/update-file-11177.json b/frontend/playwright/data/design/update-file-11177.json new file mode 100644 index 0000000000..f6f45ead47 --- /dev/null +++ b/frontend/playwright/data/design/update-file-11177.json @@ -0,0 +1,12 @@ +{ + "~:revn": 7, + "~:lagged": [ + { + "~:id": "~u5ec9cb0b-596f-80d7-8006-40fa6f2e6342", + "~:revn": 8, + "~:file-id": "~ub3e5731a-c295-801d-8006-3fc33c3b1b13", + "~:session-id": "~uf4ff412c-70fb-8020-8006-40fa0785fd63", + "~:changes": [] + } + ] +} \ 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 97e1f8cbb2..4ea04c0772 100644 --- a/frontend/playwright/ui/specs/design-tab.spec.js +++ b/frontend/playwright/ui/specs/design-tab.spec.js @@ -230,3 +230,29 @@ test("BUG 9543 - Layout padding inputs not showing 'mixed' when needed", async ( "Mixed", ); }); + +test("BUG 11177 - Font size input not showing 'mixed' when needed", async ({ + page, +}) => { + const workspace = new WorkspacePage(page); + await workspace.setupEmptyFile(); + await workspace.mockRPC( + "get-file-fragment?file-id=*&fragment-id=*", + "design/get-file-fragment-11177.json", + ); + await workspace.mockRPC("update-file?id=*", "design/update-file-11177.json"); + await workspace.mockRPC("get-file?id=*", "design/get-file-11177.json"); + + await workspace.goToWorkspace({ + fileId: "b3e5731a-c295-801d-8006-3fc33c3b1b13", + pageId: "b3e5731a-c295-801d-8006-3fc33c3b1b14", + }); + + await workspace.clickLeafLayer("Ipsum"); + await workspace.clickLeafLayer("Lorem", { modifiers: ["Shift"] }); + + const fontSizeInput = workspace.page.getByLabel("Font size"); + + await expect(fontSizeInput).toHaveValue(""); + await expect(fontSizeInput).toHaveAttribute("placeholder", "Mixed"); +}); diff --git a/frontend/src/app/main/ui/components/editable_select.cljs b/frontend/src/app/main/ui/components/editable_select.cljs index 614fd7002c..9c93cb6359 100644 --- a/frontend/src/app/main/ui/components/editable_select.cljs +++ b/frontend/src/app/main/ui/components/editable_select.cljs @@ -20,7 +20,7 @@ [rumext.v2 :as mf])) (mf/defc editable-select - [{:keys [value type options class on-change placeholder on-blur input-class] :as params}] + [{:keys [value type options class on-change placeholder on-blur input-class aria-label] :as params}] (let [state* (mf/use-state {:id (uuid/next) :is-open? false :current-value value @@ -168,14 +168,16 @@ :on-change set-value :on-focus handle-focus :on-blur handle-blur + :aria-label aria-label :placeholder placeholder}] - [:input {:value (or (some-> current-value value->label) "") + [:input {:value (if (= value :multiple) nil (or (some-> current-value value->label) "")) :class input-class :on-change handle-change-input :on-key-down handle-key-down :on-focus handle-focus :on-blur handle-blur :placeholder placeholder + :aria-label aria-label :type type}]) [:span {:class (stl/css :dropdown-button) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs index 9c48e7ce0b..083a7a6f26 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs @@ -322,12 +322,13 @@ (let [size-options [8 9 10 11 12 14 16 18 24 36 48 72] size-options (if (= font-size :multiple) (into [""] size-options) size-options)] [:& editable-select - {:value (attr->string font-size) + {:value (if (= font-size :multiple) :multiple (attr->string font-size)) :class (stl/css :font-size-select) + :aria-label (tr "inspect.attributes.typography.font-size") :input-class (stl/css :numeric-input) :options size-options :type "number" - :placeholder "--" + :placeholder (tr "settings.multiple") :min 3 :max 1000 :on-change on-font-size-change