3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-25 09:56:59 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Display color swatch only on color type tokens

Browse source
This commit is contained in:
Xavier Julian 2025-05-26 15:20:00 +02:00 • committed by Xaviju
parent be13704934
commit 14afd58eac
2 changed files with 7 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens_value.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.ui.workspace.tokens.components.controls.input-tokens-value (ns app.main.ui.workspace.tokens.components.controls.input-tokens-value
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.ui.ds.controls.utilities.input-field :refer [input-field*]] [app.main.ui.ds.controls.utilities.input-field :refer [input-field*]]
[app.main.ui.ds.controls.utilities.label :refer [label*]] [app.main.ui.ds.controls.utilities.label :refer [label*]]
@ -19,6 +20,7 @@
[:placeholder {:optional true} :string] [:placeholder {:optional true} :string]
[:value {:optional true} [:maybe :string]] [:value {:optional true} [:maybe :string]]
[:class {:optional true} :string] [:class {:optional true} :string]
[:is-color-token {:optional true} :boolean]
[:color {:optional true} [:maybe :string]] [:color {:optional true} [:maybe :string]]
[:display-colorpicker {:optional true} fn?] [:display-colorpicker {:optional true} fn?]
[:error {:optional true} :boolean]]) [:error {:optional true} :boolean]])
@ -28,9 +30,10 @@
{::mf/props :obj {::mf/props :obj
::mf/forward-ref true ::mf/forward-ref true
::mf/schema schema::input-tokens-value} ::mf/schema schema::input-tokens-value}
[{:keys [class label placeholder error value color display-colorpicker] :rest props} ref] [{:keys [class label is-color-token placeholder error value color display-colorpicker] :rest props} ref]
(let [id (mf/use-id) (let [id (mf/use-id)
input-ref (mf/use-ref) input-ref (mf/use-ref)
is-color-token (d/nilv is-color-token false)
swatch swatch
(mf/html [:> input-token-color-bullet* (mf/html [:> input-token-color-bullet*
{:color color {:color color
@ -44,7 +47,7 @@
:value value :value value
:variant "comfortable" :variant "comfortable"
:hint-type (when error "error") :hint-type (when error "error")
:slot-start swatch :slot-start (when is-color-token swatch)
:ref (or ref input-ref)})] :ref (or ref input-ref)})]
[:div {:class (dm/str class " " (stl/css-case :wrapper true [:div {:class (dm/str class " " (stl/css-case :wrapper true
:input-error error))} :input-error error))}

3
frontend/src/app/main/ui/workspace/tokens/form.cljs
View file

@ -560,7 +560,8 @@
:label (tr "workspace.tokens.token-value") :label (tr "workspace.tokens.token-value")
:default-value (mf/ref-val value-ref) :default-value (mf/ref-val value-ref)
:ref value-input-ref :ref value-input-ref
:color (when is-color-token color) :is-color-token is-color-token
:color color
:on-change on-update-value :on-change on-update-value
:error (not (nil? (:errors token-resolve-result))) :error (not (nil? (:errors token-resolve-result)))
:display-colorpicker on-display-colorpicker' :display-colorpicker on-display-colorpicker'