Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-15 11:38:24 -05:00
Code Issues Activity

✨ Add warning when editing a token name

Browse source
This commit is contained in:
Xaviju 2025-01-24 12:43:07 +01:00 • committed by Xaviju
parent 71560c0a53
commit da273c1168
4 changed files with 28 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -18,6 +18,7 @@
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.ds.foundations.typography.heading :refer [heading*]]
[app.main.ui.ds.foundations.typography.text :refer [text*]]
[app.main.ui.notifications.context-notification :refer [context-notification]]
[app.main.ui.workspace.colorpicker :as colorpicker]
[app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector*]]
[app.main.ui.workspace.tokens.components.controls.input-token-color-bullet :refer [input-token-color-bullet*]]
@ -239,7 +240,10 @@
(mf/set-ref-val! cancel-ref node)))
;; Name
touched-name? (mf/use-state false)
touched-name* (mf/use-state false)
touched-name? (deref touched-name*)
warning-name-change* (mf/use-state false)
warning-name-change? (deref warning-name-change*)
name-ref (mf/use-var (:name token))
name-errors (mf/use-state nil)
validate-name
@ -252,13 +256,15 @@
on-blur-name
(mf/use-fn
(mf/deps cancel-ref)
(mf/deps cancel-ref touched-name? warning-name-change?)
(fn [e]
(let [node (dom/get-related-target e)
on-cancel-btn (= node (mf/ref-val cancel-ref))]
(when-not on-cancel-btn
(let [value (dom/get-target-val e)
errors (validate-name value)]
(when touched-name?
(reset! warning-name-change* true))
(reset! name-errors errors))))))
on-update-name-debounced
@ -273,7 +279,7 @@
(mf/use-fn
(mf/deps on-update-name-debounced)
(fn [e]
(reset! touched-name? true)
(reset! touched-name* true)
(reset! name-ref (dom/get-target-val e))
(on-update-name-debounced e)))
@ -416,7 +422,13 @@
:key error
:typography "body-small"
:class (stl/css :error)}
error])]
error])
(when (and warning-name-change? (= action "edit"))
[:div {:class (stl/css :warning-name-change-notification-wrapper)}
[:> context-notification
{:level :warning
:content (tr "workspace.token.warning-name-change")}]])]
[:div {:class (stl/css :input-row)}
[:> input-tokens*

4
frontend/src/app/main/ui/workspace/tokens/form.scss
View file

@ -44,6 +44,10 @@
font-size: $fs-12;
}
.warning-name-change-notification-wrapper {
margin-block-start: $s-16;
}
.error {
padding: $s-4 $s-6;
margin-bottom: 0;

4
frontend/translations/en.po
View file

@ -6713,6 +6713,10 @@ msgstr "Enter %s token name"
msgid "workspace.token.token-value"
msgstr "Value"
#: src/app/main/ui/workspace/tokens/form.cljs
msgid "workspace.token.warning-name-change"
msgstr "Renaming this token will break any reference to its old name."
#: src/app/main/ui/workspace/tokens/form.cljs
msgid "workspace.token.enter-token-value"
msgstr "Enter token value or alias"

4
frontend/translations/es.po
View file

@ -6704,6 +6704,10 @@ msgstr "Introduce un nombre para el token %s"
msgid "workspace.token.token-value"
msgstr "Valor"
#: src/app/main/ui/workspace/tokens/form.cljs
msgid "workspace.token.warning-name-change"
msgstr "Al renombrar este token se romperán las referencias al nombre anterior"
#: src/app/main/ui/workspace/tokens/form.cljs
msgid "workspace.token.enter-token-value"
msgstr "Introduce un valor o alias"