From 1f88c8288a1361f214978dc328654e5d0128e7f1 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Mon, 29 Jul 2024 11:08:15 +0200 Subject: [PATCH 1/5] Parse double to preserve opacity --- frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs index 1944abe10..738cdbc1e 100644 --- a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs @@ -89,7 +89,7 @@ (let [resolved-tokens (reduce (fn [acc ^js cur] (let [value (.-value cur) - resolved-value (d/parse-integer (.-value cur)) + resolved-value (d/parse-double (.-value cur)) original-value (-> cur .-original .-value) id (uuid (.-uuid (.-id cur))) missing-reference? (and (not resolved-value) From c29024bd62786d7ff20403d0bbc40546c997fc38 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Mon, 5 Aug 2024 10:51:35 +0200 Subject: [PATCH 2/5] Dont update values outside of 0..1 (e.g.: 20) --- frontend/src/app/main/ui/workspace/tokens/changes.cljs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/changes.cljs b/frontend/src/app/main/ui/workspace/tokens/changes.cljs index 3ba521c39..b146b5c2a 100644 --- a/frontend/src/app/main/ui/workspace/tokens/changes.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/changes.cljs @@ -94,7 +94,8 @@ :attrs ctt/border-radius-keys})) (defn update-opacity [value shape-ids] - (dch/update-shapes shape-ids #(assoc % :opacity value))) + (when (<= 0 value 1) + (dch/update-shapes shape-ids #(assoc % :opacity value)))) (defn update-rotation [value shape-ids] (ptk/reify ::update-shape-dimensions From ad468582b3426a8ff17e0919d5863b91c6f651fc Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Mon, 5 Aug 2024 10:53:59 +0200 Subject: [PATCH 3/5] Add changelog --- frontend/src/app/main/ui/workspace/tokens/CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/frontend/src/app/main/ui/workspace/tokens/CHANGELOG.md b/frontend/src/app/main/ui/workspace/tokens/CHANGELOG.md index 7347888c4..3b58325f3 100644 --- a/frontend/src/app/main/ui/workspace/tokens/CHANGELOG.md +++ b/frontend/src/app/main/ui/workspace/tokens/CHANGELOG.md @@ -18,6 +18,12 @@ If possible add video here from PR as well ## Changes +### 2024-08-05 - Fix opacity updating + +[Link to PR](https://github.com/orgs/tokens-studio/projects/69/views/11?pane=issue&itemId=69801248) + +Fixes opacity not being applied correctly to shapes. + ### 2024-07-25 - UX Improvements for the context menu [Link to PR](https://github.com/tokens-studio/tokens-studio-for-penpot/pull/224) From 62a9dd65822cca47a88a4e1328e97f26595db660 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Mon, 5 Aug 2024 10:54:46 +0200 Subject: [PATCH 4/5] Cleanup --- frontend/test/token_tests/logic/token_actions_test.cljs | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/test/token_tests/logic/token_actions_test.cljs b/frontend/test/token_tests/logic/token_actions_test.cljs index 1b6565d00..88dd13b82 100644 --- a/frontend/test/token_tests/logic/token_actions_test.cljs +++ b/frontend/test/token_tests/logic/token_actions_test.cljs @@ -4,7 +4,6 @@ [app.common.test-helpers.files :as cthf] [app.common.test-helpers.shapes :as cths] [app.main.ui.workspace.tokens.changes :as wtch] - [app.main.ui.workspace.tokens.core :as wtc] [cljs.test :as t :include-macros true] [frontend-tests.helpers.pages :as thp] [frontend-tests.helpers.state :as ths] From 6cb3afe87f38bb8e6d25001cf0d5f6203da8bd8f Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Mon, 5 Aug 2024 11:05:49 +0200 Subject: [PATCH 5/5] Add opacity tests --- .../token_tests/logic/token_actions_test.cljs | 67 +++++++++++++------ 1 file changed, 46 insertions(+), 21 deletions(-) diff --git a/frontend/test/token_tests/logic/token_actions_test.cljs b/frontend/test/token_tests/logic/token_actions_test.cljs index 88dd13b82..f58228f77 100644 --- a/frontend/test/token_tests/logic/token_actions_test.cljs +++ b/frontend/test/token_tests/logic/token_actions_test.cljs @@ -165,27 +165,52 @@ (t/deftest test-apply-opacity (t/testing "applies opacity token and updates the shapes opacity" (t/async - done - (let [file (-> (setup-file) - (toht/add-token :token-target {:value "0.5" - :name "opacity.medium" - :type :opacity})) - store (ths/setup-store file) - rect-1 (cths/get-shape file :rect-1) - events [(wtch/apply-token {:shape-ids [(:id rect-1)] - :attributes #{:opacity} - :token (toht/get-token file :token-target) - :on-update-shape wtch/update-opacity})]] - (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' :token-target) - rect-1' (cths/get-shape file' :rect-1)] - (t/is (some? (:applied-tokens rect-1'))) - (t/is (= (:opacity (:applied-tokens rect-1')) (:id token-target'))) - ;; TODO Fix opacity shape update not working? - #_(t/is (= (:opacity rect-1') 0.5))))))))) + done + (let [file (-> (setup-file) + (toht/add-token :opacity-float {:value "0.3" + :name "opacity.float" + :type :opacity}) + (toht/add-token :opacity-percent {:value "40%" + :name "opacity.percent" + :type :opacity}) + (toht/add-token :opacity-invalid {:value "100" + :name "opacity.invalid" + :type :opacity})) + store (ths/setup-store file) + rect-1 (cths/get-shape file :rect-1) + rect-2 (cths/get-shape file :rect-2) + rect-3 (cths/get-shape file :rect-3) + events [(wtch/apply-token {:shape-ids [(:id rect-1)] + :attributes #{:opacity} + :token (toht/get-token file :opacity-float) + :on-update-shape wtch/update-opacity}) + (wtch/apply-token {:shape-ids [(:id rect-2)] + :attributes #{:opacity} + :token (toht/get-token file :opacity-percent) + :on-update-shape wtch/update-opacity}) + (wtch/apply-token {:shape-ids [(:id rect-3)] + :attributes #{:opacity} + :token (toht/get-token file :opacity-invalid) + :on-update-shape wtch/update-opacity})]] + (tohs/run-store-async + store done events + (fn [new-state] + (let [file' (ths/get-file-from-store new-state) + rect-1' (cths/get-shape file' :rect-1) + rect-2' (cths/get-shape file' :rect-2) + rect-3' (cths/get-shape file' :rect-3) + token-opacity-float (toht/get-token file' :opacity-float) + token-opacity-percent (toht/get-token file' :opacity-percent) + token-opacity-invalid (toht/get-token file' :opacity-invalid)] + (t/testing "float value got translated to float and applied to opacity" + (t/is (= (:opacity (:applied-tokens rect-1')) (:id token-opacity-float))) + (t/is (= (:opacity rect-1') 0.3))) + (t/testing "percentage value got translated to float and applied to opacity" + (t/is (= (:opacity (:applied-tokens rect-2')) (:id token-opacity-percent))) + (t/is (= (:opacity rect-2') 0.4))) + (t/testing "invalid opacity value got applied but did not change shape" + (t/is (= (:opacity (:applied-tokens rect-3')) (:id token-opacity-invalid))) + (t/is (nil? (:opacity rect-3'))))))))))) (t/deftest test-apply-rotation (t/testing "applies rotation token and updates the shapes rotation"