diff --git a/frontend/src/app/main/ui/workspace/tokens/changes.cljs b/frontend/src/app/main/ui/workspace/tokens/changes.cljs index ae85600e71..f9ca010938 100644 --- a/frontend/src/app/main/ui/workspace/tokens/changes.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/changes.cljs @@ -6,6 +6,7 @@ (ns app.main.ui.workspace.tokens.changes (:require + [app.common.types.shape.layout :as ctsl] [app.common.types.shape.radius :as ctsr] [app.common.types.token :as ctt] [app.common.types.tokens-lib :as ctob] @@ -173,22 +174,30 @@ (zipmap (repeat value)))] {:layout-gap layout-gap})) +(defn- shape-ids-with-layout [state shape-ids] + (->> (dsh/lookup-shapes state shape-ids) + (eduction + (filter ctsl/any-layout?) + (map :id)))) + (defn update-layout-padding [value shape-ids attrs] - (dwsl/update-layout shape-ids - {:layout-padding (zipmap attrs (repeat value))} - {:ignore-touched true})) + (ptk/reify ::update-layout-padding + ptk/WatchEvent + (watch [_ state _] + (let [ids-with-layout (shape-ids-with-layout state shape-ids)] + (rx/of + (dwsl/update-layout ids-with-layout + {:layout-padding (zipmap attrs (repeat value))} + {:ignore-touched true})))))) (defn update-layout-spacing [value shape-ids attributes] (ptk/reify ::update-layout-spacing ptk/WatchEvent (watch [_ state _] - (let [layout-shape-ids (->> (dsh/lookup-shapes state shape-ids) - (eduction - (filter :layout) - (map :id))) + (let [ids-with-layout (shape-ids-with-layout state shape-ids) layout-attributes (attributes->layout-gap attributes value)] (rx/of - (dwsl/update-layout layout-shape-ids + (dwsl/update-layout ids-with-layout layout-attributes {:ignore-touched true})))))) 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 30e623d984..eb86d02523 100644 --- a/frontend/test/frontend_tests/tokens/logic/token_actions_test.cljs +++ b/frontend/test/frontend_tests/tokens/logic/token_actions_test.cljs @@ -186,6 +186,40 @@ (t/is (= (:width rect-1') 100)) (t/is (= (:height rect-1') 100)))))))))) +(t/deftest test-apply-padding + (t/testing "applies padding token to shapes with layout" + (t/async + done + (let [dimensions-token {:name "padding.sm" + :value "100" + :type :spacing} + file (-> (setup-file-with-tokens) + (ctho/add-frame :frame-1) + (ctho/add-frame :frame-2 {:layout :grid}) + (update-in [:data :tokens-lib] + #(ctob/add-token-in-set % "Set A" (ctob/make-token dimensions-token)))) + store (ths/setup-store file) + frame-1 (cths/get-shape file :frame-1) + frame-2 (cths/get-shape file :frame-2) + events [(wtch/apply-token {:shape-ids [(:id frame-1) (:id frame-2)] + :attributes #{:padding} + :token (toht/get-token file "padding.sm") + :on-update-shape wtch/update-layout-padding})]] + (tohs/run-store-async + store done events + (fn [new-state] + (let [file' (ths/get-file-from-state new-state) + token-target' (toht/get-token file' "dimensions.sm") + frame-1' (cths/get-shape file' :frame-1) + frame-2' (cths/get-shape file' :frame-2)] + (t/testing "shape `:applied-tokens` got updated" + (t/is (= (:spacing (:applied-tokens frame-1')) (:name token-target'))) + (t/is (= (:spacing (:applied-tokens frame-2')) (:name token-target')))) + (t/testing "shapes padding got updated" + (t/is (= (:layout-padding frame-2') {:padding 100}))) + (t/testing "shapes without layout get ignored" + (t/is (nil? (:layout-padding frame-1'))))))))))) + (t/deftest test-apply-sizing (t/testing "applies sizing token and updates the shapes width and height" (t/async