diff --git a/frontend/src/app/main/ui/workspace/tokens/changes.cljs b/frontend/src/app/main/ui/workspace/tokens/changes.cljs index 3cea08e690..e0c0f09100 100644 --- a/frontend/src/app/main/ui/workspace/tokens/changes.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/changes.cljs @@ -143,6 +143,14 @@ [value shape-ids] (update-color wdc/change-stroke value shape-ids)) +(defn update-fill-stroke [value shape-ids attributes] + (ptk/reify ::update-fill-stroke + ptk/WatchEvent + (watch [_ _ _] + (rx/of + (when (:fill attributes) (update-fill value shape-ids)) + (when (:stroke-color attributes) (update-stroke-color value shape-ids)))))) + (defn update-shape-dimensions [value shape-ids attributes] (ptk/reify ::update-shape-dimensions ptk/WatchEvent diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 379ee4b3b6..670cff3feb 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -78,7 +78,7 @@ :id (if mixed? ic/remove ic/tick)}])])) (mf/defc sets-tree-set-group - [{:keys [active? label tree-depth tree-path selected? collapsed? editing? on-edit on-edit-reset on-edit-submit]}] + [{:keys [label tree-depth tree-path active? selected? collapsed? editing? on-edit on-edit-reset _on-edit-submit]}] (let [editing?' (editing? tree-path) active?' (active? tree-path) on-context-menu diff --git a/frontend/src/app/main/ui/workspace/tokens/token_types.cljs b/frontend/src/app/main/ui/workspace/tokens/token_types.cljs index b8247a288d..f5979add43 100644 --- a/frontend/src/app/main/ui/workspace/tokens/token_types.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/token_types.cljs @@ -23,8 +23,9 @@ :color {:title "Color" - :attributes ctt/color-keys - :on-update-shape wtch/update-fill + :attributes #{:fill} + :all-attributes ctt/color-keys + :on-update-shape wtch/update-fill-stroke :modal {:key :tokens/color :fields [{:label "Color" :key :color}]}} diff --git a/frontend/src/app/main/ui/workspace/tokens/update.cljs b/frontend/src/app/main/ui/workspace/tokens/update.cljs index bc85bea839..2d4120b01c 100644 --- a/frontend/src/app/main/ui/workspace/tokens/update.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/update.cljs @@ -19,8 +19,7 @@ (def attributes->shape-update {#{:rx :ry} (fn [v ids _] (wtch/update-shape-radius-all v ids)) #{:r1 :r2 :r3 :r4} wtch/update-shape-radius-single-corner - #{:fill} wtch/update-fill - #{:stroke-color} wtch/update-stroke-color + ctt/color-keys wtch/update-fill-stroke ctt/stroke-width-keys wtch/update-stroke-width ctt/sizing-keys wtch/update-shape-dimensions ctt/opacity-keys wtch/update-opacity diff --git a/frontend/src/app/worker.cljs b/frontend/src/app/worker.cljs index 502e3d67e1..213d20ae2b 100644 --- a/frontend/src/app/worker.cljs +++ b/frontend/src/app/worker.cljs @@ -168,7 +168,6 @@ (.removeEventListener js/self "message" on-message)) (defn ^:dev/after-load start [] - [] (set! process-message-sub (subscribe-buffer-messages)) (.addEventListener js/self "message" on-message)) 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 0df429b6e4..e53b6d8105 100644 --- a/frontend/test/frontend_tests/tokens/logic/token_actions_test.cljs +++ b/frontend/test/frontend_tests/tokens/logic/token_actions_test.cljs @@ -129,6 +129,38 @@ (t/testing "while :r4 was kept with borderRadius.sm" (t/is (= (:r4 (:applied-tokens rect-1')) (:name token-sm))))))))))) +(t/deftest test-apply-color + (t/testing "applies color token and updates the shape fill and stroke-color" + (t/async + done + (let [color-token {:name "color.primary" + :value "red" + :type :color} + file (-> (setup-file-with-tokens) + (update-in [:data :tokens-lib] + #(ctob/add-token-in-set % "Set A" (ctob/make-token color-token)))) + store (ths/setup-store file) + rect-1 (cths/get-shape file :rect-1) + events [(wtch/apply-token {:shape-ids [(:id rect-1)] + :attributes #{:color} + :token (toht/get-token file "color.primary") + :on-update-shape wtch/update-fill}) + (wtch/apply-token {:shape-ids [(:id rect-1)] + :attributes #{:stroke-color} + :token (toht/get-token file "color.primary") + :on-update-shape wtch/update-stroke-color})]] + (tohs/run-store-async + store done events + (fn [new-state] + (let [file' (ths/get-file-from-store new-state) + token-target' (toht/get-token file' "rotation.medium") + rect-1' (cths/get-shape file' :rect-1)] + (t/is (some? (:applied-tokens rect-1'))) + (t/is (= (:fill (:applied-tokens rect-1')) (:name token-target'))) + (t/is (= (get-in rect-1' [:fills 0 :fill-color]) "#ff0000")) + (t/is (= (:stroke (:applied-tokens rect-1')) (:name token-target'))) + (t/is (= (get-in rect-1' [:strokes 0 :stroke-color]) "#ff0000"))))))))) + (t/deftest test-apply-dimensions (t/testing "applies dimensions token and updates the shapes width and height" (t/async