3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-04 15:15:54 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix border radius and fills tokens

Browse source
This commit is contained in:
Andrés Moya 2024-12-13 11:19:18 +01:00
parent cd6d5491fa
commit 78819c68c9
2 changed files with 74 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/app/main/ui/workspace/tokens/update.cljs
View file

@ -17,10 +17,8 @@
(def filter-existing-values? false) (def filter-existing-values? false)
(def attributes->shape-update (def attributes->shape-update
{#{:r1 :r2 :r3 :r4} wtch/update-shape-radius-single-corner {#{:r1 :r2 :r3 :r4} wtch/update-shape-radius-all
#_(fn [v ids _] (wtch/update-shape-radius-all v ids)) ctt/color-keys wtch/update-fill-stroke
#{:fill} wtch/update-fill
#{:stroke-color} wtch/update-stroke-color
ctt/stroke-width-keys wtch/update-stroke-width ctt/stroke-width-keys wtch/update-stroke-width
ctt/sizing-keys wtch/update-shape-dimensions ctt/sizing-keys wtch/update-shape-dimensions
ctt/opacity-keys wtch/update-opacity ctt/opacity-keys wtch/update-opacity

113
frontend/test/frontend_tests/logic/components_and_tokens.cljs
View file

@ -51,7 +51,7 @@
:type :border-radius :type :border-radius
:value 75)))) :value 75))))
(ctho/add-frame :frame1) (ctho/add-frame :frame1)
(ctht/apply-token-to-shape :frame1 "test-token-1" [:rx :ry] [:rx :ry] 25))) (ctht/apply-token-to-shape :frame1 "test-token-1" [:r1 :r2 :r3 :r4] [:r1 :r2 :r3 :r4] 25)))
(defn- setup-file-with-main (defn- setup-file-with-main
[] []
@ -84,11 +84,15 @@
tokens-frame1' (:applied-tokens frame1')] tokens-frame1' (:applied-tokens frame1')]
;; ==== Check ;; ==== Check
(t/is (= (count tokens-frame1') 2)) (t/is (= (count tokens-frame1') 4))
(t/is (= (get tokens-frame1' :rx) "test-token-1")) (t/is (= (get tokens-frame1' :r1) "test-token-1"))
(t/is (= (get tokens-frame1' :ry) "test-token-1")) (t/is (= (get tokens-frame1' :r2) "test-token-1"))
(t/is (= (get frame1' :rx) 25)) (t/is (= (get tokens-frame1' :r3) "test-token-1"))
(t/is (= (get frame1' :ry) 25)))))))) (t/is (= (get tokens-frame1' :r4) "test-token-1"))
(t/is (= (get frame1' :r1) 25))
(t/is (= (get frame1' :r2) 25))
(t/is (= (get frame1' :r3) 25))
(t/is (= (get frame1' :r4) 25))))))))
(t/deftest create-copy-with-token (t/deftest create-copy-with-token
(t/async (t/async
@ -112,11 +116,15 @@
tokens-frame1' (:applied-tokens c-frame1')] tokens-frame1' (:applied-tokens c-frame1')]
;; ==== Check ;; ==== Check
(t/is (= (count tokens-frame1') 2)) (t/is (= (count tokens-frame1') 4))
(t/is (= (get tokens-frame1' :rx) "test-token-1")) (t/is (= (get tokens-frame1' :r1) "test-token-1"))
(t/is (= (get tokens-frame1' :ry) "test-token-1")) (t/is (= (get tokens-frame1' :r2) "test-token-1"))
(t/is (= (get c-frame1' :rx) 25)) (t/is (= (get tokens-frame1' :r3) "test-token-1"))
(t/is (= (get c-frame1' :ry) 25)))))))) (t/is (= (get tokens-frame1' :r4) "test-token-1"))
(t/is (= (get c-frame1' :r1) 25))
(t/is (= (get c-frame1' :r2) 25))
(t/is (= (get c-frame1' :r3) 25))
(t/is (= (get c-frame1' :r4) 25))))))))
(t/deftest change-token-in-main (t/deftest change-token-in-main
(t/async (t/async
@ -127,7 +135,7 @@
;; ==== Action ;; ==== Action
events [(wtch/apply-token {:shape-ids [(cthi/id :frame1)] events [(wtch/apply-token {:shape-ids [(cthi/id :frame1)]
:attributes #{:rx :ry} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "test-token-2") :token (toht/get-token file "test-token-2")
:on-update-shape wtch/update-shape-radius-all})] :on-update-shape wtch/update-shape-radius-all})]
@ -142,11 +150,15 @@
tokens-frame1' (:applied-tokens c-frame1')] tokens-frame1' (:applied-tokens c-frame1')]
;; ==== Check ;; ==== Check
(t/is (= (count tokens-frame1') 2)) (t/is (= (count tokens-frame1') 4))
(t/is (= (get tokens-frame1' :rx) "test-token-2")) (t/is (= (get tokens-frame1' :r1) "test-token-2"))
(t/is (= (get tokens-frame1' :ry) "test-token-2")) (t/is (= (get tokens-frame1' :r2) "test-token-2"))
(t/is (= (get c-frame1' :rx) 50)) (t/is (= (get tokens-frame1' :r3) "test-token-2"))
(t/is (= (get c-frame1' :ry) 50)))))))] (t/is (= (get tokens-frame1' :r4) "test-token-2"))
(t/is (= (get c-frame1' :r1) 50))
(t/is (= (get c-frame1' :r2) 50))
(t/is (= (get c-frame1' :r3) 50))
(t/is (= (get c-frame1' :r4) 50)))))))]
(tohs/run-store-async (tohs/run-store-async
store step2 events identity)))) store step2 events identity))))
@ -160,7 +172,7 @@
;; ==== Action ;; ==== Action
events [(wtch/unapply-token {:shape-ids [(cthi/id :frame1)] events [(wtch/unapply-token {:shape-ids [(cthi/id :frame1)]
:attributes #{:rx :ry} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "test-token-1")})] :token (toht/get-token file "test-token-1")})]
step2 (fn [_] step2 (fn [_]
@ -175,8 +187,10 @@
;; ==== Check ;; ==== Check
(t/is (= (count tokens-frame1') 0)) (t/is (= (count tokens-frame1') 0))
(t/is (= (get c-frame1' :rx) 25)) (t/is (= (get c-frame1' :r1) 25))
(t/is (= (get c-frame1' :ry) 25)))))))] (t/is (= (get c-frame1' :r2) 25))
(t/is (= (get c-frame1' :r3) 25))
(t/is (= (get c-frame1' :r4) 25)))))))]
(tohs/run-store-async (tohs/run-store-async
store step2 events identity)))) store step2 events identity))))
@ -206,11 +220,15 @@
tokens-frame1' (:applied-tokens c-frame1')] tokens-frame1' (:applied-tokens c-frame1')]
;; ==== Check ;; ==== Check
(t/is (= (count tokens-frame1') 2)) (t/is (= (count tokens-frame1') 4))
(t/is (= (get tokens-frame1' :rx) "test-token-1")) (t/is (= (get tokens-frame1' :r1) "test-token-1"))
(t/is (= (get tokens-frame1' :ry) "test-token-1")) (t/is (= (get tokens-frame1' :r2) "test-token-1"))
(t/is (= (get c-frame1' :rx) 66)) (t/is (= (get tokens-frame1' :r3) "test-token-1"))
(t/is (= (get c-frame1' :ry) 66)))))))] (t/is (= (get tokens-frame1' :r4) "test-token-1"))
(t/is (= (get c-frame1' :r1) 66))
(t/is (= (get c-frame1' :r2) 66))
(t/is (= (get c-frame1' :r3) 66))
(t/is (= (get c-frame1' :r4) 66)))))))]
(tohs/run-store-async (tohs/run-store-async
store step2 events identity)))) store step2 events identity))))
@ -224,11 +242,11 @@
;; ==== Action ;; ==== Action
events [(wtch/apply-token {:shape-ids [(cthi/id :c-frame1)] events [(wtch/apply-token {:shape-ids [(cthi/id :c-frame1)]
:attributes #{:rx :ry} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "test-token-2") :token (toht/get-token file "test-token-2")
:on-update-shape wtch/update-shape-radius-all}) :on-update-shape wtch/update-shape-radius-all})
(wtch/apply-token {:shape-ids [(cthi/id :frame1)] (wtch/apply-token {:shape-ids [(cthi/id :frame1)]
:attributes #{:rx :ry} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "test-token-3") :token (toht/get-token file "test-token-3")
:on-update-shape wtch/update-shape-radius-all})] :on-update-shape wtch/update-shape-radius-all})]
@ -243,11 +261,15 @@
tokens-frame1' (:applied-tokens c-frame1')] tokens-frame1' (:applied-tokens c-frame1')]
;; ==== Check ;; ==== Check
(t/is (= (count tokens-frame1') 2)) (t/is (= (count tokens-frame1') 4))
(t/is (= (get tokens-frame1' :rx) "test-token-2")) (t/is (= (get tokens-frame1' :r1) "test-token-2"))
(t/is (= (get tokens-frame1' :ry) "test-token-2")) (t/is (= (get tokens-frame1' :r2) "test-token-2"))
(t/is (= (get c-frame1' :rx) 50)) (t/is (= (get tokens-frame1' :r3) "test-token-2"))
(t/is (= (get c-frame1' :ry) 50)))))))] (t/is (= (get tokens-frame1' :r4) "test-token-2"))
(t/is (= (get c-frame1' :r1) 50))
(t/is (= (get c-frame1' :r2) 50))
(t/is (= (get c-frame1' :r3) 50))
(t/is (= (get c-frame1' :r4) 50)))))))]
(tohs/run-store-async (tohs/run-store-async
store step2 events identity)))) store step2 events identity))))
@ -261,10 +283,10 @@
;; ==== Action ;; ==== Action
events [(wtch/unapply-token {:shape-ids [(cthi/id :c-frame1)] events [(wtch/unapply-token {:shape-ids [(cthi/id :c-frame1)]
:attributes #{:rx :ry} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "test-token-1")}) :token (toht/get-token file "test-token-1")})
(wtch/apply-token {:shape-ids [(cthi/id :frame1)] (wtch/apply-token {:shape-ids [(cthi/id :frame1)]
:attributes #{:rx :ry} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "test-token-3") :token (toht/get-token file "test-token-3")
:on-update-shape wtch/update-shape-radius-all})] :on-update-shape wtch/update-shape-radius-all})]
@ -280,8 +302,10 @@
;; ==== Check ;; ==== Check
(t/is (= (count tokens-frame1') 0)) (t/is (= (count tokens-frame1') 0))
(t/is (= (get c-frame1' :rx) 25)) (t/is (= (get c-frame1' :r1) 25))
(t/is (= (get c-frame1' :ry) 25)))))))] (t/is (= (get c-frame1' :r2) 25))
(t/is (= (get c-frame1' :r3) 25))
(t/is (= (get c-frame1' :r4) 25)))))))]
(tohs/run-store-async (tohs/run-store-async
store step2 events identity)))) store step2 events identity))))
@ -322,7 +346,7 @@
:type :dimensions :type :dimensions
:value 100)))) :value 100))))
(ctho/add-frame :frame1) (ctho/add-frame :frame1)
(ctht/apply-token-to-shape :frame1 "token-radius" [:rx :ry] [:rx :ry] 10) (ctht/apply-token-to-shape :frame1 "token-radius" [:r1 :r2 :r3 :r4] [:r1 :r2 :r3 :r4] 10)
(ctht/apply-token-to-shape :frame1 "token-rotation" [:rotation] [:rotation] 30) (ctht/apply-token-to-shape :frame1 "token-rotation" [:rotation] [:rotation] 30)
(ctht/apply-token-to-shape :frame1 "token-opacity" [:opacity] [:opacity] 0.7) (ctht/apply-token-to-shape :frame1 "token-opacity" [:opacity] [:opacity] 0.7)
(ctht/apply-token-to-shape :frame1 "token-stroke-width" [:stroke-width] [:stroke-width] 2) (ctht/apply-token-to-shape :frame1 "token-stroke-width" [:stroke-width] [:stroke-width] 2)
@ -367,13 +391,16 @@
(fn [new-state] (fn [new-state]
(let [;; ==== Get (let [;; ==== Get
file' (ths/get-file-from-store new-state) file' (ths/get-file-from-store new-state)
frame1' (cths/get-shape file' :frame1)
c-frame1' (cths/get-shape file' :c-frame1) c-frame1' (cths/get-shape file' :c-frame1)
tokens-frame1' (:applied-tokens c-frame1')] tokens-frame1' (:applied-tokens c-frame1')]
;; ==== Check ;; ==== Check
(t/is (= (count tokens-frame1') 9)) (t/is (= (count tokens-frame1') 11))
(t/is (= (get tokens-frame1' :rx) "token-radius")) (t/is (= (get tokens-frame1' :r1) "token-radius"))
(t/is (= (get tokens-frame1' :ry) "token-radius")) (t/is (= (get tokens-frame1' :r2) "token-radius"))
(t/is (= (get tokens-frame1' :r3) "token-radius"))
(t/is (= (get tokens-frame1' :r4) "token-radius"))
(t/is (= (get tokens-frame1' :rotation) "token-rotation")) (t/is (= (get tokens-frame1' :rotation) "token-rotation"))
(t/is (= (get tokens-frame1' :opacity) "token-opacity")) (t/is (= (get tokens-frame1' :opacity) "token-opacity"))
(t/is (= (get tokens-frame1' :stroke-width) "token-stroke-width")) (t/is (= (get tokens-frame1' :stroke-width) "token-stroke-width"))
@ -381,8 +408,10 @@
(t/is (= (get tokens-frame1' :fill) "token-color")) (t/is (= (get tokens-frame1' :fill) "token-color"))
(t/is (= (get tokens-frame1' :width) "token-dimensions")) (t/is (= (get tokens-frame1' :width) "token-dimensions"))
(t/is (= (get tokens-frame1' :height) "token-dimensions")) (t/is (= (get tokens-frame1' :height) "token-dimensions"))
(t/is (= (get c-frame1' :rx) 30)) (t/is (= (get c-frame1' :r1) 30))
(t/is (= (get c-frame1' :ry) 30)) (t/is (= (get c-frame1' :r2) 30))
(t/is (= (get c-frame1' :r3) 30))
(t/is (= (get c-frame1' :r4) 30))
(t/is (= (get c-frame1' :rotation) 45)) (t/is (= (get c-frame1' :rotation) 45))
(t/is (= (get c-frame1' :opacity) 0.9)) (t/is (= (get c-frame1' :opacity) 0.9))
(t/is (= (get-in c-frame1' [:strokes 0 :stroke-width]) 8)) (t/is (= (get-in c-frame1' [:strokes 0 :stroke-width]) 8))