github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-30 15:56:17 +00:00
Code Issues Packages Projects Releases Wiki Activity
penpot/frontend/test/frontend_tests/tokens/context_menu_test.cljs
Luis de Dios 98daf1592d
✨ Apply tokens to stroke per side (#10913) 
* ♻️ Derive per-side stroke widths from the side values

The per-stroke `:stroke-per-side` boolean only gated whether the
renderer looked at the four side widths, and the CSS generator used it
to decide whether to emit one `border-width` or four. Comparing the
sides is enough, so drop the attribute from the shape schema and from
the stroke attribute list.

The WASM property and upload bridges and `stroke-per-side-widths` now
derive the per-side widths from the values alone.

AI-assisted-by: deepseek-v4.1-flash

* ✨ Declare per-side stroke width token attributes

Replace the single `:stroke-width` token attribute with
`:stroke-width-top`, `:stroke-width-right`, `:stroke-width-bottom`
and `:stroke-width-left`, add `per-side-stroke-width-keys`, and map
the new attributes to the strokes shape attribute and to the
dimensions token type.

AI-assisted-by: deepseek-v4.1-flash

* 🐛 Unapply only the token of the changed stroke side

A stroke change that reports a single per-side sub-attribute now
resolves to that side's token only. A plain `:stroke-width` change
still resolves to every side, and a change with no sub-attribute
resolves to all width keys plus the color.

Add a regression test that tokens on untouched sides survive a change
to another side.

AI-assisted-by: deepseek-v4.1-flash

* ✨ Add a predicate for per-side stroke shapes

Boards and rectangles support independent stroke widths per side.
Expose `per-side-stroke-shape?` so callers can gate the per-side UI,
and cover the supported and unsupported shape types with a test.

AI-assisted-by: deepseek-v4.1-flash

* ✨ Add stroke side width materialization helper

`materialize-stroke-side-widths` concretizes the four per-side width
keys from a stroke: edited sides take the new value, the others keep
their current width (0 when there is no stroke), and `:stroke-width`
mirrors the top side for legacy consumers.

This pulls the logic already duplicated in the token apply path into a
shared helper, ready for the direct-edit path.

AI-assisted-by: deepseek-v4.1-flash

* ✨ Apply a stroke width token to every side

`update-stroke-width` now writes the four per-side width keys, both
when the shape already has a stroke and when it gets a new default
one, so the applied-token bookkeeping matches the stroke attributes.

AI-assisted-by: deepseek-v4.1-flash

* ✨ Apply a stroke width token to a single side

Add `update-stroke-width-side`, which changes only the sides named in
`attributes` on the first stroke of each shape. The remaining sides
keep their current width (0 when the shape had no stroke) and all side
keys are materialized through the shared helper, so consumers never
fall back to `:stroke-width`.

Route the per-side token keys to the new function and update the
apply, remap and component tests.

AI-assisted-by: deepseek-v4.1-flash

* ✨ Complete a partially applied per-side token on toggle

When explicit attributes come from an input or a plugin call, toggle
the token off only if it already covers every target attribute on every
selected shape. A partial per-side application is completed instead of
removed. The token pill keeps the previous any-attribute behavior.

Add tests for both the completion and the full removal.

AI-assisted-by: deepseek-v4.1-flash

* ✨ Offer per-side stroke width actions in the token menu

Boards and rectangles get a stroke width submenu with an all-sides
action and one action per side; other shapes keep the single global
action. The global action targets every per-side attribute so the
design tab keeps showing the token on each side.

Add the pill labels for the new attributes, the menu test, and the
`workspace.tokens.stroke-width` string.

AI-assisted-by: deepseek-v4.1-flash

* ✨ Persist the per-side stroke preference

Add `:stroke-per-side` to the user profile props schema and expose it
through a derived `stroke-per-side` ref. The design tab will read the
preference from here instead of a per-stroke attribute.

AI-assisted-by: deepseek-v4.1-flash

* ✨ Add per-side stroke width helpers to the stroke menu

Add `stroke-width-all-attrs` and `per-side-stroke-available?`, which
checks the feature flag and that a single board or rectangle, or a
uniform multi-selection of them, is selected. Use it instead of the
inline shape-type check and drop the old per-side toggle handler.

Cover both helpers with a test.

AI-assisted-by: deepseek-v4.1-flash

* ✨ Add per-side stroke width token inputs to the design tab

Turn the four side width fields into token inputs with detach actions
and a `:multiple` mixed value when the sides differ. The per-side
toggle now reads the persisted profile preference instead of a
per-stroke attribute, so previous per-side edits survive.

AI-assisted-by: deepseek-v4.1-flash

* 🐛 Materialize stroke sides on direct width edit

The stroke menu per-side handler only wrote the edited side key and,
for the top side, the global `:stroke-width`. A stroke holding just
`:stroke-width` made every consumer fall back to the global value, so
editing one side changed all the others.

Add a `change-stroke-side-width` event that materializes the four side
keys through the shared helper and reports only the edited key as
changed, so tokens on untouched sides are not unapplied. Route the menu
handler through it.

AI-assisted-by: deepseek-v4.1-flash

* 🐛 Make stroke width fields non nullable

Drop `:nillable` from the global and per-side stroke width inputs and
use `:multiple` for the mixed state, so an empty field no longer
represents a null width.

AI-assisted-by: deepseek-v4.1-flash

* 🐛 Fix the numeric-input props schema key

The schema declared `:applied-token`, but the component body and every
caller use `:applied-token-name`, so the prop was never validated.
Rename the schema entry to match.

AI-assisted-by: deepseek-v4.1-flash

* ✨ Add token-disabled support to the numeric input

The design-system numeric input accepts `:token-disabled` and
`:token-tooltip`; the token button is disabled and shows the reason.
Scope the disabled input style to `input:disabled` so a disabled token
button no longer dims the whole field. Pass both props through the
token wrapper.

AI-assisted-by: deepseek-v4.1-flash

* 🐛 Disable token controls below the first fill or stroke

Design tokens only apply to the first fill or stroke of a shape. Add
`tokens-allowed-position?` and mark the fill and stroke lists with
`tokens-first-only`, so later entries disable their token controls and
explain why. The colorpicker opens on the direct color tab and disables
the token tab for those rows.

Cover the helper with a test and add the new translation.

AI-assisted-by: deepseek-v4.1-flash

* ♻️ Refactor colorpicker style switcher to DS radio buttons

Replace the legacy `components/radio-buttons` markup in the colorpicker
with the design system `radio-buttons*`, using its declarative options
API. Switching between direct color and token mode now passes string
values, as the DS component expects.

The previous keyword values broke the round trip back to color mode:
the DOM stringifies keywords with a leading colon, so the value never
matched `:direct-color`. Using plain strings keeps the conversion
clean.

AI-assisted-by: deepseek-v4.1-flash

* ✨ Add playwright tests

* ✨ Scope per-side stroke controls to each stroke

Give every stroke row its own expanded state instead of sharing one
profile-wide preference. The state lives in `:workspace-local`, keyed by
`[ids index]`, so it survives selecting another shape and coming back but
resets on reload.

Remove the `:stroke-per-side` profile prop and its ref. The ref now derives
from `:workspace-local`.

Update the Playwright spec to expand the controls per stroke through the
toggle, and assert that strokes toggle independently, that the state resets
on reload, and that it survives switching shapes.

AI-assisted-by: deepseek-v4.1-flash

* 🐛 Keep stroke tokens when editing or removing later strokes

The token unapply logic decided which tokens to clear from the shape
using only the changed sub-attributes, without knowing which stroke was
edited. Since stroke tokens only live on the first stroke, editing or
removing a later stroke cleared the first stroke's tokens.

Add a `:changed-item-index` option to `generate-update-shapes` and skip
unapplying fill/stroke tokens when the changed item is not the first.
The stroke color, attrs, side-width and remove events now report the
index they touch.

AI-assisted-by: deepseek-v4.1-flash

* 🐛 Ignore token shortcuts when tokens are disabled for input

The numeric input opened the token dropdown on `{` regardless of
`token-disabled?`, so inputs that cannot hold tokens (for example,
strokes after the first one) still opened it, and typing `{token}` plus
`}` could apply a token there.

Extract the key handling into `token-shortcut`, which returns nil when
tokens are disabled, and use it for both `{` and `}`.

AI-assisted-by: deepseek-v4.1-flash

* 🐛 Gate per-side stroke tokens on the WASM renderer

The token context menu offered per-side stroke width actions whenever
the feature flag was on and the shape was a board or rectangle, without
checking the renderer. The classic renderer only draws the single
`:stroke-width`, so applying a per-side token there wrote inert data,
the token pill reported it, and the stroke changed appearance when the
WASM renderer was later enabled.

Add `per-side-stroke-enabled?` (flag + WASM renderer) and use it from
both the design tab and the token context menu. Thread the renderer
flag into the context menu through `:render-wasm`.

AI-assisted-by: deepseek-v4.1-flash

* 🐛 Keep first-stroke tokens when reordering later strokes

Fill and stroke tokens only ever live on the first item of the
collection. When a stroke update arrives without a changed item
index (for example reordering the second and third strokes), the
unapply logic assumed the first item had been edited and removed
every stroke token from the shape.

Compare the first item before and after the update instead: when
no item index is given, unapply only if the first item actually
changed. Reordering later strokes now leaves the first stroke and
its tokens untouched, while moving the first stroke away still
detaches them. Explicit item edits keep their previous behavior.

AI-assisted-by: deepseek-v4-flash
2026-09-25 13:09:55 +02:00

284 lines
14 KiB
Clojure
Raw Blame History

(ns frontend-tests.tokens.context-menu-test
(:require
[app.common.test-helpers.compositions :as tho]
[app.common.test-helpers.ids-map :as thi]
[app.common.test-helpers.shapes :as ths]
[app.common.test-helpers.tokens :as tht]
[app.common.types.tokens-lib :as ctob]
[app.common.types.tokens-status :as ctos]
[app.config :as cf]
[app.main.ui.workspace.tokens.management.context-menu :as wtcm]
[app.util.i18n :as i18n]
[clojure.test :as t]))
(t/use-fixtures :each thi/test-fixture)
(def ^:private all-label (i18n/tr "labels.all"))
(def ^:private per-side-flags (conj cf/flags :stroke-per-side))
(defn setup-file []
(-> (tht/sample-file-with-tokens
:lib-fn #(-> %
(ctob/add-set (ctob/make-token-set :id (thi/new-id! :test-token-set)
:name "test-token-set"))
(ctob/add-theme (ctob/make-token-theme :id (thi/new-id! :test-theme)
:name "test-theme"
:sets #{"test-token-set"}))
(ctob/add-token (thi/id :test-token-set)
(ctob/make-token :name "token-radius"
:type :border-radius
:value 10))
(ctob/add-token (thi/id :test-token-set)
(ctob/make-token :name "token-color"
:type :color
:value "red"))
(ctob/add-token (thi/id :test-token-set)
(ctob/make-token :name "token-spacing"
:type :spacing
:value 10))
(ctob/add-token (thi/id :test-token-set)
(ctob/make-token :name "token-sizing"
:type :sizing
:value 10))
(ctob/add-token (thi/id :test-token-set)
(ctob/make-token :name "token-rotation"
:type :rotation
:value 10))
(ctob/add-token (thi/id :test-token-set)
(ctob/make-token :name "token-opacity"
:type :opacity
:value 10))
(ctob/add-token (thi/id :test-token-set)
(ctob/make-token :name "token-dimensions"
:type :dimensions
:value 10))
(ctob/add-token (thi/id :test-token-set)
(ctob/make-token :name "token-stroke-width"
:type :stroke-width
:value 10))
(ctob/add-token (thi/id :test-token-set)
(ctob/make-token :name "token-number"
:type :number
:value 10)))
:status-fn #(ctos/set-tokens-status % #{(thi/id :test-theme)} #{(thi/id :test-token-set)}))
;; app.main.data.workspace.tokens.application/generic-attributes
(tho/add-group :group1)
;; app.main.data.workspace.tokens.application/rect-attributes
(tho/add-rect :rect1)
;; app.main.data.workspace.tokens.application/frame-attributes
(tho/add-frame :frame1 :layout :flex)
;; app.main.data.workspace.tokens.application/text-attributes
(tho/add-text :text1 "Hello World!")))
(defn- menu-actions*
[shape-names token-name extra]
(let [file (setup-file)
token (ctob/get-token-by-name (tht/get-tokens-lib file) "test-token-set" token-name)
selected-shapes (map #(ths/get-shape file %) shape-names)]
(wtcm/menu-actions
(merge {:token token
:render-wasm true
:selected-shapes selected-shapes}
extra))))
(defn token-menu-actions [shape-names token-name]
(menu-actions* shape-names token-name {}))
(defn submenu-actions [shape-names token-name submenu-type]
(menu-actions* shape-names token-name {:type submenu-type}))
(defn token-menu-action-labels [actions]
(mapv #(if (keyword? %) % (:title %)) actions))
(t/deftest border-radius-items
(t/testing "shows radius items for selection of supported shapes"
(let [actions (token-menu-actions [:frame1 :rect1] "token-radius")
action-titles (mapv :title actions)]
(t/is (= action-titles [all-label "Top Right" "Bottom Right" "Top Left" "Bottom Left"]))))
(t/testing "shows radius items for mixed selection"
(let [actions (token-menu-actions [:frame1 :text1] "token-radius")
action-titles (mapv :title actions)]
(t/is (= action-titles [all-label "Top Right" "Bottom Right" "Top Left" "Bottom Left"]))))
(t/testing "hides radius for unrelated shapes"
(let [actions (token-menu-actions [:text1 :group1] "token-radius")]
(t/is (empty? actions)))))
(t/deftest color-items
(t/testing "shows color items for selection of all shapes"
(let [actions (token-menu-actions [:frame1 :rect1 :group1 :text1] "token-color")
action-titles (mapv :title actions)]
(t/is (= action-titles ["Fill" "Stroke"])))))
(t/deftest spacing-items
(t/testing "shows gap and padding items for layout frames"
(let [actions (token-menu-actions [:frame1] "token-spacing")
action-titles (mapv #(if (keyword? %) % (:title %)) actions)]
(t/is (= action-titles [all-label "Column Gap" "Row Gap"
:separator
all-label "Horizontal" "Vertical"
"Padding top" "Padding right" "Padding bottom" "Padding left"
:separator]))))
(t/testing "shows gap and padding items for mixed selection"
(let [actions (token-menu-actions [:frame1 :text1] "token-spacing")
action-titles (mapv #(if (keyword? %) % (:title %)) actions)]
(t/is (= action-titles [all-label "Column Gap" "Row Gap"
:separator
all-label "Horizontal" "Vertical"
"Padding top" "Padding right" "Padding bottom" "Padding left"
:separator]))))
(t/testing "hides spacing for unrelated shapes"
(let [actions (token-menu-actions [:text1 :group1] "token-spacing")]
(t/is (empty? actions)))))
(t/deftest sizing-items
(t/testing "shows sizing items for selection of all shapes"
(let [actions (token-menu-actions [:frame1 :rect1 :group1 :text1] "token-sizing")
action-titles (mapv #(if (keyword? %) % (:title %)) actions)]
(t/is (= action-titles [all-label "Width" "Height"
:separator
all-label "Min Width" "Min Height"
:separator
all-label "Max Width" "Max Height"]))))
(t/testing "shows no sizing items for groups"
(let [actions (token-menu-actions [:group1] "token-sizing")]
(t/is (nil? actions)))))
(t/deftest rotation-items
(t/testing "shows color items for selection of all shapes"
(let [actions (token-menu-actions [:frame1 :rect1 :group1 :text1] "token-rotation")
action-titles (mapv :title actions)]
(t/is (= action-titles ["Rotation"])))))
(t/deftest dimensions-items
(t/testing "shows `rect-attributes` dimension items for rect"
(let [actions (token-menu-actions [:rect1] "token-dimensions")
action-titles (mapv #(if (keyword? %) % (select-keys % [:title :submenu])) actions)]
(t/is (= action-titles [{:title "Sizing", :submenu :sizing}
:separator
{:title "Border Radius", :submenu :border-radius}
:separator
{:title "Stroke Width"}
:separator
{:title "X"}
{:title "Y"}]))))
(t/testing "shows all attribute dimension items for frame"
(let [actions (token-menu-actions [:frame1] "token-dimensions")
action-titles (mapv #(if (keyword? %) % (select-keys % [:title :submenu])) actions)]
(t/is (= action-titles [{:title "Sizing", :submenu :sizing}
{:title "Spacing", :submenu :spacing}
:separator
{:title "Border Radius", :submenu :border-radius}
:separator
{:title "Stroke Width"}
:separator
{:title "X"}
{:title "Y"}]))))
(t/testing "shows `text-attributes` dimension items for text"
(let [actions (token-menu-actions [:text1] "token-dimensions")
action-titles (mapv #(if (keyword? %) % (select-keys % [:title :submenu])) actions)]
(t/is (= action-titles [{:title "Sizing", :submenu :sizing}
:separator
{:title "Stroke Width"}
:separator
{:title "X"}
{:title "Y"}]))))
(t/testing "not attributes for groups as they are not supported yet"
(let [actions (token-menu-actions [:group1] "token-dimensions")]
(t/is (nil? actions)))))
(t/deftest number-items
(t/testing "shows all number attribute items for text"
(let [actions (token-menu-actions [:text1] "token-number")
action-titles (mapv :title actions)]
(t/is (= action-titles ["Rotation" "Line Height"]))))
(t/testing "shows non text attributes for non text shapes"
(let [actions (token-menu-actions [:frame1 :rect1 :group1] "token-number")
action-titles (mapv :title actions)]
(t/is (= action-titles ["Rotation"])))))
(t/deftest stroke-width-items
(t/testing "shows a single global item when per-side is disabled"
(doseq [shape [:rect1 :frame1 :text1]]
(let [actions (token-menu-actions [shape] "token-stroke-width")
action-titles (mapv :title actions)]
(t/is (= action-titles ["Stroke Width"])))))
(t/testing "shows a single global item for mixed selections when per-side is disabled"
(let [actions (token-menu-actions [:rect1 :text1] "token-stroke-width")
action-titles (mapv :title actions)]
(t/is (= action-titles ["Stroke Width"])))))
(t/deftest stroke-width-items-per-side
(with-redefs [cf/flags per-side-flags]
(t/testing "shows per-side items for boards and rectangles"
(doseq [shape [:rect1 :frame1]]
(let [actions (token-menu-actions [shape] "token-stroke-width")
action-titles (mapv :title actions)]
(t/is (= (set action-titles) (set [all-label "Top" "Right" "Bottom" "Left"]))))))
(t/testing "shows a single global item for other shapes"
(let [actions (token-menu-actions [:text1] "token-stroke-width")
action-titles (mapv :title actions)]
(t/is (= action-titles ["Stroke Width"]))))
(t/testing "shows a single global item for mixed selections"
(let [actions (token-menu-actions [:rect1 :text1] "token-stroke-width")
action-titles (mapv :title actions)]
(t/is (= action-titles ["Stroke Width"]))))
(t/testing "submenu contains the per-side items for rectangles"
(let [actions (submenu-actions [:rect1] "token-dimensions" :stroke-width)
action-titles (mapv :title actions)]
(t/is (= (set action-titles) (set [all-label "Top" "Right" "Bottom" "Left"])))))
(t/testing "submenu falls back to the global item for other shapes"
(let [actions (submenu-actions [:text1] "token-dimensions" :stroke-width)
action-titles (mapv :title actions)]
(t/is (= action-titles ["Stroke Width"]))))
(t/testing "dimensions menu shows the stroke width submenu for rectangles"
(let [actions (token-menu-actions [:rect1] "token-dimensions")
action-titles (mapv #(if (keyword? %) % (select-keys % [:title :submenu])) actions)]
(t/is (some #(= {:title "Stroke Width" :submenu :stroke-width} %) action-titles))))))
(t/deftest stroke-width-items-classic-renderer
(t/testing "per-side is not offered when the WASM renderer is off"
(with-redefs [cf/flags per-side-flags]
(t/testing "shows a single global item for boards and rectangles"
(doseq [shape [:rect1 :frame1]]
(let [actions (menu-actions* [shape] "token-stroke-width" {:render-wasm false})
action-titles (mapv :title actions)]
(t/is (= action-titles ["Stroke Width"])))))
(t/testing "shows a single global item for mixed selections"
(let [actions (menu-actions* [:rect1 :text1] "token-stroke-width" {:render-wasm false})
action-titles (mapv :title actions)]
(t/is (= action-titles ["Stroke Width"]))))
(t/testing "the stroke-width submenu falls back to the global item"
(let [actions (menu-actions* [:rect1] "token-dimensions" {:type :stroke-width :render-wasm false})
action-titles (mapv :title actions)]
(t/is (= action-titles ["Stroke Width"]))))
(t/testing "the dimensions menu has no stroke-width submenu"
(let [actions (menu-actions* [:rect1] "token-dimensions" {:render-wasm false})
action-titles (mapv #(if (keyword? %) % (select-keys % [:title :submenu])) actions)]
(t/is (not (some #(= {:title "Stroke Width" :submenu :stroke-width} %) action-titles))))))))
(t/deftest opacity-items
(t/testing "shows opacity items for all shapes"
(let [actions (token-menu-actions [:frame1 :rect1 :group1 :text1] "token-opacity")
action-titles (mapv :title actions)]
(t/is (= action-titles ["Opacity"])))))
Reference in New Issue View Git Blame Copy Permalink