From bbc670994347c07e11270a59b64c5b73a0e416e9 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Fri, 17 Oct 2025 11:10:10 +0200 Subject: [PATCH] :bug: Fix applying color tokens on a row from colorpicker (#7524) --- .../data/workspace/tokens/application.cljs | 19 +++++++++--- .../workspace/colorpicker/color_tokens.cljs | 2 ++ .../main/ui/workspace/sidebar/options.cljs | 1 - .../workspace/sidebar/options/menus/fill.cljs | 31 +++++-------------- .../options/menus/layout_container.cljs | 29 +++++++---------- .../sidebar/options/menus/measures.cljs | 6 ++-- .../sidebar/options/menus/stroke.cljs | 7 ++--- .../sidebar/options/rows/stroke_row.cljs | 27 +++++----------- .../sidebar/options/shapes/bool.cljs | 3 -- .../sidebar/options/shapes/circle.cljs | 3 -- .../sidebar/options/shapes/frame.cljs | 3 -- .../sidebar/options/shapes/group.cljs | 5 --- .../sidebar/options/shapes/multiple.cljs | 5 --- .../sidebar/options/shapes/path.cljs | 3 -- .../sidebar/options/shapes/rect.cljs | 3 -- .../sidebar/options/shapes/svg_raw.cljs | 3 -- .../sidebar/options/shapes/text.cljs | 3 -- .../main/ui/workspace/tokens/management.cljs | 1 + .../ui/workspace/tokens/management/group.cljs | 6 ++-- .../tokens/logic/token_actions_test.cljs | 8 ++--- 20 files changed, 58 insertions(+), 110 deletions(-) diff --git a/frontend/src/app/main/data/workspace/tokens/application.cljs b/frontend/src/app/main/data/workspace/tokens/application.cljs index 47caaaf64c..29113b8f39 100644 --- a/frontend/src/app/main/data/workspace/tokens/application.cljs +++ b/frontend/src/app/main/data/workspace/tokens/application.cljs @@ -466,6 +466,7 @@ (ptk/reify ::apply-token ptk/WatchEvent (watch [_ state _] + (prn "apply token" token attributes shape-ids) ;; We do not allow to apply tokens while text editor is open. (when (empty? (get state :workspace-editor-state)) (let [attributes-to-remove @@ -560,13 +561,23 @@ (update shape :applied-tokens remove-token)))))))) (defn toggle-token - [{:keys [token shapes attrs]}] + [{:keys [token attrs shape-ids expand-with-children]}] (ptk/reify ::on-toggle-token ptk/WatchEvent - (watch [_ _ _] - (let [{:keys [attributes all-attributes on-update-shape]} + (watch [_ state _] + (let [objects (dsh/lookup-page-objects state) + shapes (into [] (keep (d/getf objects)) shape-ids) + shapes + (if expand-with-children + (into [] + (mapcat (fn [shape] + (if (= (:type shape) :group) + (keep objects (:shapes shape)) + [shape]))) + shapes) + shapes) + {:keys [attributes all-attributes on-update-shape]} (get token-properties (:type token)) - unapply-tokens? (cft/shapes-token-applied? token shapes (or attrs all-attributes attributes)) shape-ids (map :id shapes)] diff --git a/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs b/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs index e9ae216a31..9d21c3dbc5 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs @@ -41,6 +41,7 @@ (mf/use-fn (mf/deps token on-token-pill-click) (fn [event] + (prn "entro en el on-click") (on-token-pill-click event token))) id-tooltip (mf/use-id) resolved (:resolved-value token) @@ -138,6 +139,7 @@ (fn [event token] (dom/stop-propagation event) (when (seq selected-shapes) + (prn "entro en on-token-pill-click") (on-token-change event token)))) create-token-on-set diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.cljs b/frontend/src/app/main/ui/workspace/sidebar/options.cljs index 944996a3d8..b5c0480773 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options.cljs @@ -143,7 +143,6 @@ edit-grid? [:& layout-container/grid-layout-edition {:ids [edition] - :shapes shapes :values (get objects edition)}] (some? sp-panel) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs index 708c53adca..30cfa503fe 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs @@ -56,20 +56,17 @@ n-vals (unchecked-get n-props "values") o-fills (get o-vals :fills) n-fills (get n-vals :fills) - o-objects (get o-vals :objects) - n-objects (get n-vals :objects) o-applied-tokens (get o-vals :applied-tokens) n-applied-tokens (get n-vals :applied-tokens) o-hide (get o-vals :hide-fill-on-export) n-hide (get n-vals :hide-fill-on-export)] (and (identical? o-hide n-hide) (identical? o-applied-tokens n-applied-tokens) - (identical? o-fills n-fills) - (identical? o-objects n-objects))))) + (identical? o-fills n-fills))))) (mf/defc fill-menu* {::mf/wrap [#(mf/memo' % check-props)]} - [{:keys [ids type values applied-tokens shapes objects]}] + [{:keys [ids type values applied-tokens]}] (let [fills (get values :fills) hide-on-export (get values :hide-fill-on-export false) @@ -175,25 +172,13 @@ on-token-change (mf/use-fn - (mf/deps shapes objects) + (mf/deps ids) (fn [_ token] - (let [expanded-shapes - (if (= 1 (count shapes)) - (let [shape (first shapes)] - (if (= (:type shape) :group) - (keep objects (:shapes shape)) - [shape])) - - (mapcat (fn [shape] - (if (= (:type shape) :group) - (keep objects (:shapes shape)) - [shape])) - shapes))] - - (st/emit! - (dwta/toggle-token {:token token - :attrs #{:fill} - :shapes expanded-shapes}))))) + (st/emit! + (dwta/toggle-token {:token token + :attrs #{:fill} + :shape-ids ids + :expand-with-children true})))) on-detach-token (mf/use-fn 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 a7e8eb32c9..1951083676 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 @@ -340,7 +340,7 @@ (select-padding false false false false)) (mf/defc simple-padding-selection* - [{:keys [value on-change shapes applied-tokens ids]}] + [{:keys [value on-change applied-tokens ids]}] (let [token-numeric-inputs (features/use-feature "tokens/numeric-input") @@ -373,7 +373,7 @@ nil) on-change' (mf/use-fn - (mf/deps on-change shapes) + (mf/deps on-change ids) (fn [value attr event] (if (or (string? value) (int? value)) (on-change :simple attr value event) @@ -381,7 +381,7 @@ (let [resolved-value (:resolved-value (first value))] (st/emit! (dwta/toggle-token {:token (first value) :attrs #{attr} - :shapes shapes})) + :shape-ids ids})) (on-change :simple attr resolved-value event)))))) on-detach-token @@ -474,7 +474,7 @@ :value p2}]])])) (mf/defc multiple-padding-selection* - [{:keys [value on-change shapes applied-tokens ids]}] + [{:keys [value on-change applied-tokens ids]}] (let [token-numeric-inputs (features/use-feature "tokens/numeric-input") @@ -485,7 +485,7 @@ on-change' (mf/use-fn - (mf/deps on-change shapes) + (mf/deps on-change ids) (fn [value attr event] (if (or (string? value) (int? value)) (on-change :multiple attr value event) @@ -493,7 +493,7 @@ (let [resolved-value (:resolved-value (first value))] (st/emit! (dwta/toggle-token {:token (first value) :attrs #{attr} - :shapes shapes})) + :shape-ids ids})) (on-change :multiple attr resolved-value event)))))) on-focus @@ -701,7 +701,7 @@ (select-gap! nil)) (mf/defc gap-section* - [{:keys [is-column wrap-type on-change value applied-tokens shapes ids] + [{:keys [is-column wrap-type on-change value applied-tokens ids] :as props}] (let [token-numeric-inputs (features/use-feature "tokens/numeric-input") @@ -718,7 +718,7 @@ on-change' (mf/use-fn - (mf/deps on-change wrap-type) + (mf/deps on-change wrap-type ids) (fn [value attr event] (if (or (string? value) (int? value)) @@ -727,7 +727,7 @@ (let [resolved-value (:resolved-value (first value))] (st/emit! (dwta/toggle-token {:token (first value) :attrs #{attr} - :shapes shapes})) + :shape-ids ids})) (on-change (= "nowrap" wrap-type) attr resolved-value event)))))) on-detach-token @@ -1083,7 +1083,7 @@ (mf/defc layout-container-menu {::mf/memo #{:ids :values :multiple :shapes :applied-tokens}} - [{:keys [ids values multiple shapes applied-tokens]}] + [{:keys [ids values multiple applied-tokens]}] (let [;; Display layout-type (:layout values) has-layout? (some? layout-type) @@ -1339,14 +1339,12 @@ [:> gap-section* {:is-column is-column :wrap-type wrap-type :on-change on-gap-change - :shapes shapes :ids ids :applied-tokens applied-tokens :value (:layout-gap values)}] [:> padding-section* {:value (:layout-padding values) :type (:layout-padding-type values) :on-type-change on-padding-type-change - :shapes shapes :ids ids :applied-tokens applied-tokens :on-change on-padding-change}]]] @@ -1384,14 +1382,12 @@ [:div {:class (stl/css :gap-row)} [:> gap-section* {:on-change on-gap-change - :shapes shapes :ids ids :applied-tokens applied-tokens :value (:layout-gap values)}]] [:div {:class (stl/css :padding-row)} [:> padding-section* {:value (:layout-padding values) :type (:layout-padding-type values) - :shapes shapes :applied-tokens applied-tokens :on-type-change on-padding-type-change :on-change on-padding-change}]]] @@ -1399,8 +1395,8 @@ nil))])) (mf/defc grid-layout-edition - {::mf/memo #{:ids :values :shapes :applied-tokens}} - [{:keys [ids values shapes applied-tokens]}] + {::mf/memo #{:ids :values :applied-tokens}} + [{:keys [ids values applied-tokens]}] (let [;; Gap saved-grid-dir (:layout-grid-dir values) @@ -1584,7 +1580,6 @@ [:div {:class (stl/css :gap-row)} [:> gap-section* {:on-change on-gap-change - :shapes shapes :ids ids :applied-tokens applied-tokens :value (:layout-gap values)}]] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index 7f3180b7a6..b1d36ba01d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -313,7 +313,7 @@ (st/emit! (udw/trigger-bounding-box-cloaking ids) (dwta/toggle-token {:token (first value) :attrs #{attr} - :shapes shapes})) + :shape-ids ids})) (binding [cts/*wasm-sync* true] (run! #(do-size-change resolved-value attr) shapes))))))) @@ -344,7 +344,7 @@ (st/emit! (udw/trigger-bounding-box-cloaking ids) (dwta/toggle-token {:token (first value) :attrs #{attr} - :shapes shapes})) + :shape-ids ids})) (binding [cts/*wasm-sync* true] (run! #(do-position-change %1 resolved-value attr) shapes))))))) @@ -369,7 +369,7 @@ (st/emit! (udw/trigger-bounding-box-cloaking ids) (dwta/toggle-token {:token (first value) :attrs #{:rotation} - :shapes shapes})) + :shape-ids ids})) (binding [cts/*wasm-sync* true] (run! #(do-rotation-change resolved-value) shapes))))))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs index 91b140011b..52a66b9053 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs @@ -38,8 +38,8 @@ :stroke-cap-end]) (mf/defc stroke-menu - {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "show-caps" "applied-tokens" "shapes" "objects"]))]} - [{:keys [ids type values show-caps disable-stroke-style applied-tokens shapes objects] :as props}] + {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "show-caps" "applied-tokens"]))]} + [{:keys [ids type values show-caps disable-stroke-style applied-tokens] :as props}] (let [label (case type :multiple (tr "workspace.options.selection-stroke") :group (tr "workspace.options.group-stroke") @@ -209,8 +209,7 @@ :stroke value :title (tr "workspace.options.stroke-color") :index index - :shapes shapes - :objects objects + :ids ids :show-caps show-caps :on-color-change on-color-change :on-color-detach on-color-detach diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs index 55eb1c3d9e..54c9bd0072 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs @@ -43,8 +43,7 @@ on-detach-token disable-stroke-style select-on-focus - shapes - objects]}] + ids]}] (let [on-drop (fn [_ data] @@ -105,25 +104,13 @@ on-token-change (mf/use-fn - (mf/deps shapes objects) + (mf/deps ids) (fn [_ token] - (let [expanded-shapes - (if (= 1 (count shapes)) - (let [shape (first shapes)] - (if (= (:type shape) :group) - (keep objects (:shapes shape)) - [shape])) - - (mapcat (fn [shape] - (if (= (:type shape) :group) - (keep objects (:shapes shape)) - [shape])) - shapes))] - - (st/emit! - (dwta/toggle-token {:token token - :attrs #{:stroke-color} - :shapes expanded-shapes}))))) + (st/emit! + (dwta/toggle-token {:token token + :attrs #{:stroke-color} + :shape-ids ids + :expand-with-children true})))) stroke-style (or (:stroke-style stroke) :solid) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs index bb06c3ac4b..cef7a66c57 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs @@ -98,7 +98,6 @@ :ids [(:id shape)] :values layout-container-values :applied-tokens applied-tokens - :shapes shapes :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) @@ -124,14 +123,12 @@ {:ids ids :type type :values shape - :shapes shapes :applied-tokens applied-tokens}] [:& stroke-menu {:ids ids :type type :show-caps true :values stroke-values - :shapes shapes :applied-tokens applied-tokens}] [:> shadow-menu* {:ids ids :values (get shape :shadow)}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs index 848e26ed7a..6641fa5c3e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs @@ -97,7 +97,6 @@ :ids [(:id shape)] :values layout-container-values :applied-tokens applied-tokens - :shapes shapes :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) @@ -123,13 +122,11 @@ {:ids ids :type type :values shape - :shapes shapes :applied-tokens applied-tokens}] [:& stroke-menu {:ids ids :type type :values stroke-values - :shapes shapes :applied-tokens applied-tokens}] [:> shadow-menu* {:ids ids :values (get shape :shadow)}] [:& blur-menu {:ids ids diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs index 98594c68d4..149179a337 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs @@ -115,7 +115,6 @@ [:& layout-container-menu {:type shape-type :ids ids - :shapes shapes :applied-tokens applied-tokens :values layout-container-values :multiple false}] @@ -146,13 +145,11 @@ {:ids ids :type shape-type :values shape - :shapes shapes :applied-tokens applied-tokens}] [:& stroke-menu {:ids ids :type shape-type :values stroke-values - :shapes shapes :applied-tokens applied-tokens}] [:> color-selection-menu* {:type shape-type :shapes shapes-with-children diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs index 507a73d03f..ddd77e2735 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs @@ -123,7 +123,6 @@ :ids [(:id shape)] :values layout-container-values :applied-tokens applied-tokens - :shapes shapes :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) @@ -149,16 +148,12 @@ {:type type :ids fill-ids :values fill-values - :shapes shapes - :objects objects :applied-tokens fill-tokens}]) (when-not (empty? stroke-ids) [:& stroke-menu {:type type :ids stroke-ids :values stroke-values - :shapes shapes - :objects objects :applied-tokens stroke-tokens}]) [:> color-selection-menu* diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs index ca7e6d6a38..14ae0bc955 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs @@ -462,7 +462,6 @@ :ids layout-container-ids :values layout-container-values :applied-tokens layout-contianer-tokens - :shapes shapes :multiple true}] (when (or is-layout-child? has-flex-layout-container?) @@ -485,8 +484,6 @@ [:> fill/fill-menu* {:type type :ids fill-ids :values fill-values - :shapes shapes - :objects objects :applied-tokens fill-tokens}]) (when-not (empty? stroke-ids) @@ -494,8 +491,6 @@ :ids stroke-ids :show-caps show-caps? :values stroke-values - :shapes shapes - :objects objects :disable-stroke-style has-text? :applied-tokens stroke-tokens}]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs index 433aa5f6c9..2c666ed1d9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs @@ -97,7 +97,6 @@ :ids [(:id shape)] :values layout-container-values :applied-tokens applied-tokens - :shapes shapes :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) @@ -123,14 +122,12 @@ {:ids ids :type type :values shape - :shapes shapes :applied-tokens applied-tokens}] [:& stroke-menu {:ids ids :type type :show-caps true :values stroke-values - :shapes shapes :applied-tokens applied-tokens}] [:> shadow-menu* {:ids ids :values (get shape :shadow)}] [:& blur-menu {:ids ids diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs index d22aecdcd8..980185ab85 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs @@ -97,7 +97,6 @@ :ids ids :values layout-container-values :applied-tokens applied-tokens - :shapes shapes :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) @@ -122,13 +121,11 @@ [:> fill/fill-menu* {:ids ids :type type - :shapes shapes :values shape :applied-tokens applied-tokens}] [:& stroke-menu {:ids ids :type type - :shapes shapes :values stroke-values :applied-tokens applied-tokens}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs index a2bafe0ed5..ca9037ea3d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs @@ -165,7 +165,6 @@ :ids [(:id shape)] :values layout-container-values :applied-tokens applied-tokens - :shapes shapes :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) @@ -191,13 +190,11 @@ {:ids ids :type type :values fill-values - :shapes shapes :applied-tokens applied-tokens}] [:& stroke-menu {:ids ids :type type :values stroke-values - :shapes shapes :applied-tokens applied-tokens}] [:> shadow-menu* {:ids ids :values (get shape :shadow)}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs index 287e2327c6..7cf76bcad2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs @@ -138,7 +138,6 @@ :ids ids :values layout-container-values :applied-tokens applied-tokens - :shapes shapes :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) @@ -170,13 +169,11 @@ {:ids ids :type type :values fill-values - :shapes shapes :applied-tokens applied-tokens}] [:& stroke-menu {:ids ids :type type :values stroke-values - :shapes shapes :disable-stroke-style true :applied-tokens applied-tokens}] diff --git a/frontend/src/app/main/ui/workspace/tokens/management.cljs b/frontend/src/app/main/ui/workspace/tokens/management.cljs index 21412342cd..f844f62c93 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management.cljs @@ -145,6 +145,7 @@ [:> token-group* {:key (name type) :is-open (get open-status type false) :type type + :selected-ids selected :selected-shapes selected-shapes :is-selected-inside-layout is-selected-inside-layout :active-theme-tokens resolved-active-tokens diff --git a/frontend/src/app/main/ui/workspace/tokens/management/group.cljs b/frontend/src/app/main/ui/workspace/tokens/management/group.cljs index 8bc0cd9b77..d496e88f52 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/group.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/group.cljs @@ -47,7 +47,7 @@ (mf/defc token-group* {::mf/private true} - [{:keys [type tokens selected-shapes is-selected-inside-layout active-theme-tokens is-open]}] + [{:keys [type tokens selected-shapes is-selected-inside-layout active-theme-tokens is-open selected-ids]}] (let [{:keys [modal title]} (get dwta/token-properties type) editing-ref (mf/deref refs/workspace-editor-state) @@ -93,12 +93,12 @@ on-token-pill-click (mf/use-fn - (mf/deps selected-shapes not-editing?) + (mf/deps not-editing? selected-ids) (fn [event token] (dom/stop-propagation event) (when (and not-editing? (seq selected-shapes) (not= (:type token) :number)) (st/emit! (dwta/toggle-token {:token token - :shapes selected-shapes})))))] + :shape-ids selected-ids})))))] [:div {:on-click on-toggle-open-click :class (stl/css :token-section-wrapper)} [:> cmm/asset-section* {:icon (token-section-icon type) diff --git a/frontend/test/frontend_tests/tokens/logic/token_actions_test.cljs b/frontend/test/frontend_tests/tokens/logic/token_actions_test.cljs index 3f7c83007d..b30678fd4f 100644 --- a/frontend/test/frontend_tests/tokens/logic/token_actions_test.cljs +++ b/frontend/test/frontend_tests/tokens/logic/token_actions_test.cljs @@ -722,7 +722,7 @@ store (ths/setup-store file) rect-1 (cths/get-shape file :rect-1) rect-2 (cths/get-shape file :rect-2) - events [(dwta/toggle-token {:shapes [rect-1 rect-2] + events [(dwta/toggle-token {:shape-ids [(:id rect-1) (:id rect-2)] :token-type-props {:attributes #{:r1 :r2 :r3 :r4} :on-update-shape dwta/update-shape-radius-all} :token (toht/get-token file "borderRadius.md")})]] @@ -753,7 +753,7 @@ rect-without-token (cths/get-shape file :rect-2) rect-with-other-token (cths/get-shape file :rect-3) - events [(dwta/toggle-token {:shapes [rect-with-token rect-without-token rect-with-other-token] + events [(dwta/toggle-token {:shape-ids [(:id rect-with-token) (:id rect-without-token) (:id rect-with-other-token)] :token (toht/get-token file "borderRadius.sm") :token-type-props {:attributes #{:r1 :r2 :r3 :r4}}})]] (tohs/run-store-async @@ -786,7 +786,7 @@ rect-without-token (cths/get-shape file :rect-2) rect-with-other-token-2 (cths/get-shape file :rect-3) - events [(dwta/toggle-token {:shapes [rect-with-other-token-1 rect-without-token rect-with-other-token-2] + events [(dwta/toggle-token {:shape-ids [(:id rect-with-other-token-1) (:id rect-without-token) (:id rect-with-other-token-2)] :token (toht/get-token file "borderRadius.sm") :token-type-props {:attributes #{:r1 :r2 :r3 :r4}}})]] (tohs/run-store-async @@ -822,7 +822,7 @@ rect-in-layout (cths/get-shape file :rect-in-layout) rect-regular (cths/get-shape file :rect-regular) events [(dwta/toggle-token {:token (toht/get-token file "spacing.md") - :shapes [frame-layout rect-in-layout rect-regular]})]] + :shape-ids [(:id frame-layout) (:id rect-in-layout) (:id rect-regular)]})]] (tohs/run-store-async store done events (fn [new-state]