From fc8029abf730fa5072cfccf065e8bcc5f3826ad3 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Fri, 3 Oct 2025 11:25:56 +0200 Subject: [PATCH] :bug: Fix some errors from reviews (#7421) * :bug: Fix errors con colorpicker * :bug: Fix modal size * :bug: Fix form padding * :bug: Fix edit modal title * :bug: Fix resolved value message * :bug: Fix CI --- .../app/main/ui/workspace/colorpicker.cljs | 10 ++- .../workspace/colorpicker/color_tokens.cljs | 21 +++--- .../workspace/colorpicker/color_tokens.scss | 12 ++-- .../tokens/management/create/form.cljs | 70 +++++++++++-------- .../tokens/management/create/form.scss | 2 +- .../tokens/management/create/modals.scss | 2 +- frontend/translations/cs.po | 4 -- frontend/translations/de.po | 4 -- frontend/translations/en.po | 2 +- frontend/translations/es.po | 2 +- frontend/translations/fr.po | 4 -- frontend/translations/he.po | 4 -- frontend/translations/hi.po | 4 -- frontend/translations/hr.po | 4 -- frontend/translations/id.po | 4 -- frontend/translations/it.po | 4 -- frontend/translations/lv.po | 4 -- frontend/translations/nl.po | 4 -- frontend/translations/sv.po | 4 -- frontend/translations/ukr_UA.po | 4 -- frontend/translations/zh_CN.po | 4 -- frontend/translations/zh_Hant.po | 4 -- 22 files changed, 67 insertions(+), 110 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index 76d075edf6..75a370ccb9 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -627,14 +627,17 @@ (map (fn [[group grouped-sets]] (if group {:group group - :sets (map #(last (str/split (:set %) #"/")) grouped-sets) + :sets (map (fn [{:keys [id set]}] + {:id id + :name (last (str/split set #"/"))}) + grouped-sets) :tokens (->> grouped-sets (mapcat :tokens) (map :name) distinct)} - (map (fn [{:keys [set tokens]}] + (map (fn [{:keys [id set tokens]}] {:group nil - :sets [set] + :sets [{:id id :name set}] :tokens (map :name tokens)}) grouped-sets)))) flatten)) @@ -694,6 +697,7 @@ [sets] (map (fn [s] {:set (ctob/get-name s) + :id (ctob/get-id s) :tokens (vals (ctob/get-tokens- s))}) ;; TODO: this function should be moved to common.logic and refactored sets)) diff --git a/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs b/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs index bbe16bfffc..e9ae216a31 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs @@ -9,7 +9,6 @@ (:require [app.common.data :as d] [app.common.data.macros :as dm] - [app.common.types.tokens-lib :as ctob] [app.main.constants :refer [max-input-length]] [app.main.data.common :as dcm] [app.main.data.event :as-alias ev] @@ -104,7 +103,7 @@ (mf/defc set-section* {::mf/private true} - [{:keys [collapsed toggle-sets-open set name color-origin on-token-change] :rest props}] + [{:keys [collapsed toggle-sets-open group-or-set name color-origin on-token-change] :rest props}] (let [list-style* (mf/use-state :list) list-style (deref list-style*) @@ -143,14 +142,16 @@ create-token-on-set (mf/use-fn - (mf/deps set) + (mf/deps group-or-set) (fn [_] (let [;; We want to create a token on the first set ;; if there are many in this group - path-set (group->paths set)] + path-set (group->paths group-or-set) + id (:id (first (:sets group-or-set)))] (st/emit! (dcm/go-to-workspace :layout :tokens) - (ptk/data-event :expand-token-sets {:paths path-set}) - (dwtl/set-selected-token-set-id (ctob/get-id set)) + (when path-set + (ptk/data-event :expand-token-sets {:paths path-set})) + (dwtl/set-selected-token-set-id id) (dwtl/set-token-type-section-open :color true) (let [{:keys [modal title]} (get dwta/token-properties :color) window-size (dom/get-window-size) @@ -202,7 +203,7 @@ :list-view (= list-style :list) :grid-view (= list-style :grid))} - (for [token (:tokens set)] + (for [token (:tokens group-or-set)] (let [selected? (if (= color-origin :fill) (= has-color-tokens? (:name token)) (= has-stroke-tokens? (:name token)))] @@ -218,8 +219,8 @@ (defn- label-group-or-set [{:keys [group sets]}] (if group - (str group " (" (str/join ", " sets) ")") - (first sets))) + (str group " (" (str/join ", " (map :name sets)) ")") + (:name (first sets)))) (defn- filter-combined-tokens "Filters the combined-tokens structure by token name. @@ -307,7 +308,7 @@ :color-origin color-origin :on-token-change on-token-change :name name - :set combined-sets}]))] + :group-or-set combined-sets}]))] [:> token-empty-state*])] [:> token-empty-state*]))) diff --git a/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.scss b/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.scss index 936882e085..97a0d4de36 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.scss @@ -23,10 +23,10 @@ grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-xs); - width: 100%; + inline-size: 100%; border-radius: $br-8; padding: var(--sp-xs); - height: var(--sp-xxl); + block-size: $sz-28; border: none; cursor: pointer; &:hover { @@ -48,7 +48,7 @@ .color-token-selected-grid { border: $b-1 solid var(--color-accent-primary); border-radius: $br-4; - width: fit-content; + inline-size: fit-content; } .token-selected-icon { @@ -63,7 +63,7 @@ } .color-tokens-section { - max-height: $sz-430; + max-block-size: $sz-430; display: flex; flex-direction: column; gap: var(--sp-s); @@ -98,7 +98,7 @@ text-transform: none; display: flex; overflow: hidden; - min-height: var(--sp-xxxl); + min-block-size: var(--sp-xxxl); padding-block-start: var(--sp-xs); } @@ -120,7 +120,7 @@ .set-title-icon { color: var(--arrow-color); - height: $sz-28; + block-size: $sz-28; padding-block-start: var(--sp-xxs); } diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs b/frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs index bdfe9292e7..b6a9e4386c 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs @@ -266,17 +266,17 @@ (mf/defc form* "Form component to edit or create a token of any token type. -Callback props: -validate-token: Function to validate and resolve an editing token, see `default-validate-token`. -on-value-resolve: Will be called when a token value is resolved - Used to sync external state (like color picker) -on-get-token-value: Custom function to get the input value from the dom - (As there might be multiple inputs passed for `custom-input-token-value`) - Can also be used to manipulate the value (E.g.: Auto-prepending # for hex colors) + Callback props: + validate-token: Function to validate and resolve an editing token, see `default-validate-token`. + on-value-resolve: Will be called when a token value is resolved + Used to sync external state (like color picker) + on-get-token-value: Custom function to get the input value from the dom + (As there might be multiple inputs passed for `custom-input-token-value`) + Can also be used to manipulate the value (E.g.: Auto-prepending # for hex colors) -Custom component props: -custom-input-token-value: Custom component for editing/displaying the token value -custom-input-token-value-props: Custom props passed to the custom-input-token-value merged with the default props" + Custom component props: + custom-input-token-value: Custom component for editing/displaying the token value + custom-input-token-value-props: Custom props passed to the custom-input-token-value merged with the default props" [{:keys [is-create token token-type @@ -378,7 +378,7 @@ custom-input-token-value-props: Custom props passed to the custom-input-token-va value-ref (mf/use-ref (:value token)) token-resolve-result* (mf/use-state (get resolved-tokens (cft/token-identifier token))) - token-resolve-result (deref token-resolve-result*) + token-resolve-result (deref token-resolve-result*) clear-resolve-value (mf/use-fn @@ -1060,14 +1060,19 @@ custom-input-token-value-props: Custom props passed to the custom-input-token-va typography-inputs (mf/use-memo typography-inputs) errors-by-key (sd/collect-typography-errors token-resolve-result)] [:div {:class (stl/css :nested-input-row)} - (for [[k {:keys [label placeholder icon]}] typography-inputs] - (let [value (get default-value k) - token-resolve-result - (when composite-token? - (-> {:resolved-value (let [v (get-in token-resolve-result [:resolved-value k])] - (when-not (str/empty? v) v)) - :errors (get errors-by-key k)} - (d/without-nils))) + (for [[token-type {:keys [label placeholder icon]}] typography-inputs] + (let [value (get default-value token-type) + resolved (get-in token-resolve-result [:resolved-value token-type]) + errors (get errors-by-key token-type) + + should-show? (or (and (some? resolved) + (not= value (str resolved))) + (seq errors)) + + token-prop (when (and composite-token? should-show?) + (d/without-nils + {:resolved-value (when-not (str/empty? resolved) resolved) + :errors errors})) input-ref (mf/use-ref) @@ -1075,21 +1080,22 @@ custom-input-token-value-props: Custom props passed to the custom-input-token-va (mf/use-fn (mf/deps on-update-value) (fn [next-value] - (let [el (mf/ref-val input-ref)] - (dom/set-value! el next-value) - (on-update-value #js {:target el + (let [element (mf/ref-val input-ref)] + (dom/set-value! element next-value) + (on-update-value #js {:target element :tokenType :font-family})))) on-change (mf/use-fn + (mf/deps token-type) ;; Passing token-type via event to prevent deep function adapting & passing of type - (fn [e] - (-> (obj/set! e "tokenType" k) + (fn [event] + (-> (obj/set! event "tokenType" token-type) (on-update-value))))] - [:div {:key (str k) + [:div {:key (str token-type) :class (stl/css :input-row)} - (case k + (case token-type :font-family [:> font-picker-combobox* {:aria-label label @@ -1099,7 +1105,7 @@ custom-input-token-value-props: Custom props passed to the custom-input-token-va :on-blur on-blur :on-update-value on-change :on-external-update-value on-external-update-value - :token-resolve-result (when (seq token-resolve-result) token-resolve-result)}] + :token-resolve-result token-prop}] [:> input-token* {:aria-label label :placeholder placeholder @@ -1107,7 +1113,7 @@ custom-input-token-value-props: Custom props passed to the custom-input-token-va :on-blur on-blur :icon icon :on-change on-change - :token-resolve-result (when (seq token-resolve-result) token-resolve-result)}])]))])) + :token-resolve-result token-prop}])]))])) (mf/defc typography-form* [{:keys [token] :rest props}] @@ -1145,8 +1151,10 @@ custom-input-token-value-props: Custom props passed to the custom-input-token-va :update-composite-backup-value update-composite-backup-value})])) (mf/defc form-wrapper* - [{:keys [token token-type] :as props}] - (let [token-type' (or (:type token) token-type)] + [{:keys [token token-type] :rest props}] + (let [token-type' (or (:type token) token-type) + props (mf/spread-props props {:token-type token-type' + :token token})] (case token-type' :color [:> color-form* props] :typography [:> typography-form* props] @@ -1154,4 +1162,4 @@ custom-input-token-value-props: Custom props passed to the custom-input-token-va :text-case [:> text-case-form* props] :text-decoration [:> text-decoration-form* props] :font-weight [:> font-weight-form* props] - [:> form* props]))) + [:> form* props]))) \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/form.scss b/frontend/src/app/main/ui/workspace/tokens/management/create/form.scss index 86000c0220..08164ffa83 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/create/form.scss +++ b/frontend/src/app/main/ui/workspace/tokens/management/create/form.scss @@ -55,7 +55,7 @@ .typography-inputs { border-inline-start: $b-1 solid var(--color-accent-primary-muted); - padding-inline-start: var(--sp-l); + padding-inline-start: var(--sp-m); } .title-bar { diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/modals.scss b/frontend/src/app/main/ui/workspace/tokens/management/create/modals.scss index 2b876264ba..666bbab5f9 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/create/modals.scss +++ b/frontend/src/app/main/ui/workspace/tokens/management/create/modals.scss @@ -16,7 +16,7 @@ overflow-y: auto; overflow-x: hidden; &.token-modal-large { - min-block-size: 38rem; + max-block-size: 95vh; } } diff --git a/frontend/translations/cs.po b/frontend/translations/cs.po index 56dcc07b4a..afd4f27eb7 100644 --- a/frontend/translations/cs.po +++ b/frontend/translations/cs.po @@ -6395,10 +6395,6 @@ msgstr "Upravit motiv" msgid "workspace.tokens.edit-themes" msgstr "Upravit motivy" -#: src/app/main/ui/workspace/tokens/management/create/form.cljs:533 -msgid "workspace.tokens.edit-token" -msgstr "Upravit token" - #: src/app/main/ui/workspace/tokens/management/create/form.cljs:540 msgid "workspace.tokens.enter-token-name" msgstr "Zadejte název tokenu %s" diff --git a/frontend/translations/de.po b/frontend/translations/de.po index b8c8fdbac3..a0d861ec17 100644 --- a/frontend/translations/de.po +++ b/frontend/translations/de.po @@ -6829,10 +6829,6 @@ msgstr "Theme bearbeiten" msgid "workspace.tokens.edit-themes" msgstr "Themes bearbeiten" -#: src/app/main/ui/workspace/tokens/management/create/form.cljs:533 -msgid "workspace.tokens.edit-token" -msgstr "Token bearbeiten" - #: src/app/main/ui/workspace/tokens/management/create/form.cljs:540 msgid "workspace.tokens.enter-token-name" msgstr "%s Token-Name eingeben" diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 25b06304b4..b0034bde0b 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -7428,7 +7428,7 @@ msgstr "Edit themes" #: src/app/main/ui/workspace/tokens/management/create/form.cljs:533 msgid "workspace.tokens.edit-token" -msgstr "Edit token" +msgstr "Edit token %s" #: src/app/main/data/workspace/tokens/errors.cljs:41 msgid "workspace.tokens.empty-input" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index ff8b86aa0b..895957d694 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -7411,7 +7411,7 @@ msgstr "Editar temas" #: src/app/main/ui/workspace/tokens/management/create/form.cljs:533 msgid "workspace.tokens.edit-token" -msgstr "Editar token" +msgstr "Editar token de %s" #: src/app/main/data/workspace/tokens/errors.cljs:41 msgid "workspace.tokens.empty-input" diff --git a/frontend/translations/fr.po b/frontend/translations/fr.po index a1ed730f33..7d2fb1cc66 100644 --- a/frontend/translations/fr.po +++ b/frontend/translations/fr.po @@ -7176,10 +7176,6 @@ msgstr "Modifier le thème" msgid "workspace.tokens.edit-themes" msgstr "Modifier les thèmes" -#: src/app/main/ui/workspace/tokens/management/create/form.cljs:533 -msgid "workspace.tokens.edit-token" -msgstr "Modifier l'unité de style" - #: src/app/main/data/workspace/tokens/errors.cljs:41 msgid "workspace.tokens.empty-input" msgstr "La valeur du token doit être renseignée" diff --git a/frontend/translations/he.po b/frontend/translations/he.po index 4b2bc21544..2305a74efc 100644 --- a/frontend/translations/he.po +++ b/frontend/translations/he.po @@ -7136,10 +7136,6 @@ msgstr "עריכת ערכת עיצוב" msgid "workspace.tokens.edit-themes" msgstr "עריכת ערכות עיצוב" -#: src/app/main/ui/workspace/tokens/management/create/form.cljs:533 -msgid "workspace.tokens.edit-token" -msgstr "עריכת אסימון" - #: src/app/main/data/workspace/tokens/errors.cljs:41 msgid "workspace.tokens.empty-input" msgstr "ערך האסימון לא יכול להישאר ריק" diff --git a/frontend/translations/hi.po b/frontend/translations/hi.po index 275a057406..d6a5a27ddd 100644 --- a/frontend/translations/hi.po +++ b/frontend/translations/hi.po @@ -7029,10 +7029,6 @@ msgstr "थीम संपादित करें" msgid "workspace.tokens.edit-themes" msgstr "थीम्स संपादित करें" -#: src/app/main/ui/workspace/tokens/management/create/form.cljs:533 -msgid "workspace.tokens.edit-token" -msgstr "टोकन संपादित करें" - #: src/app/main/data/workspace/tokens/errors.cljs:41 msgid "workspace.tokens.empty-input" msgstr "टोकन मान रिक्त नहीं हो सकता" diff --git a/frontend/translations/hr.po b/frontend/translations/hr.po index 16bf381dc9..6b3a7e5f6c 100644 --- a/frontend/translations/hr.po +++ b/frontend/translations/hr.po @@ -6416,10 +6416,6 @@ msgstr "Uredite temu" msgid "workspace.tokens.edit-themes" msgstr "Uredite teme" -#: src/app/main/ui/workspace/tokens/management/create/form.cljs:533 -msgid "workspace.tokens.edit-token" -msgstr "Uredite token" - #: src/app/main/ui/workspace/tokens/management/create/form.cljs:540 msgid "workspace.tokens.enter-token-name" msgstr "Unesite %s naziv tokena" diff --git a/frontend/translations/id.po b/frontend/translations/id.po index d4bb01f557..6eaaf8ce8e 100644 --- a/frontend/translations/id.po +++ b/frontend/translations/id.po @@ -6670,10 +6670,6 @@ msgstr "Sunting tema" msgid "workspace.tokens.edit-themes" msgstr "Sunting tema" -#: src/app/main/ui/workspace/tokens/management/create/form.cljs:533 -msgid "workspace.tokens.edit-token" -msgstr "Sunting token" - #: src/app/main/ui/workspace/tokens/management/create/form.cljs:540 msgid "workspace.tokens.enter-token-name" msgstr "Masukkan nama token %s" diff --git a/frontend/translations/it.po b/frontend/translations/it.po index 50fb538314..785cb36fff 100644 --- a/frontend/translations/it.po +++ b/frontend/translations/it.po @@ -7079,10 +7079,6 @@ msgstr "Modifica tema" msgid "workspace.tokens.edit-themes" msgstr "Modifica temi" -#: src/app/main/ui/workspace/tokens/management/create/form.cljs:533 -msgid "workspace.tokens.edit-token" -msgstr "Modifica token" - #: src/app/main/data/workspace/tokens/errors.cljs:41 msgid "workspace.tokens.empty-input" msgstr "Il valore del token non può essere vuoto" diff --git a/frontend/translations/lv.po b/frontend/translations/lv.po index 8e6119be10..bdce6b4a37 100644 --- a/frontend/translations/lv.po +++ b/frontend/translations/lv.po @@ -7167,10 +7167,6 @@ msgstr "Labot izskatu" msgid "workspace.tokens.edit-themes" msgstr "Labot izskatus" -#: src/app/main/ui/workspace/tokens/management/create/form.cljs:533 -msgid "workspace.tokens.edit-token" -msgstr "Labot tekstvienību" - #: src/app/main/data/workspace/tokens/errors.cljs:41 msgid "workspace.tokens.empty-input" msgstr "Tekstvienības vērtība nevar būt tukša" diff --git a/frontend/translations/nl.po b/frontend/translations/nl.po index 5b204af761..b96bac854f 100644 --- a/frontend/translations/nl.po +++ b/frontend/translations/nl.po @@ -7231,10 +7231,6 @@ msgstr "Thema bewerken" msgid "workspace.tokens.edit-themes" msgstr "Thema's bewerken" -#: src/app/main/ui/workspace/tokens/management/create/form.cljs:533 -msgid "workspace.tokens.edit-token" -msgstr "Token bewerken" - #: src/app/main/data/workspace/tokens/errors.cljs:41 msgid "workspace.tokens.empty-input" msgstr "De tokenwaarde mag niet leeg zijn" diff --git a/frontend/translations/sv.po b/frontend/translations/sv.po index a80247192c..ba08cce701 100644 --- a/frontend/translations/sv.po +++ b/frontend/translations/sv.po @@ -6395,10 +6395,6 @@ msgstr "Redigera tema" msgid "workspace.tokens.edit-themes" msgstr "Redigera teman" -#: src/app/main/ui/workspace/tokens/management/create/form.cljs:533 -msgid "workspace.tokens.edit-token" -msgstr "Redigera token" - #: src/app/main/ui/workspace/tokens/management/create/form.cljs:540 msgid "workspace.tokens.enter-token-name" msgstr "Ange %s tokennamn" diff --git a/frontend/translations/ukr_UA.po b/frontend/translations/ukr_UA.po index ac08462143..896774c1ca 100644 --- a/frontend/translations/ukr_UA.po +++ b/frontend/translations/ukr_UA.po @@ -7163,10 +7163,6 @@ msgstr "Редагувати тему" msgid "workspace.tokens.edit-themes" msgstr "Редагувати теми" -#: src/app/main/ui/workspace/tokens/management/create/form.cljs:533 -msgid "workspace.tokens.edit-token" -msgstr "Редагувати токен" - #: src/app/main/data/workspace/tokens/errors.cljs:41 msgid "workspace.tokens.empty-input" msgstr "Значення токену не може бути порожнім" diff --git a/frontend/translations/zh_CN.po b/frontend/translations/zh_CN.po index 7f50e477ae..49b1629c75 100644 --- a/frontend/translations/zh_CN.po +++ b/frontend/translations/zh_CN.po @@ -6783,10 +6783,6 @@ msgstr "编辑主题" msgid "workspace.tokens.edit-themes" msgstr "编辑主题" -#: src/app/main/ui/workspace/tokens/management/create/form.cljs:533 -msgid "workspace.tokens.edit-token" -msgstr "编辑 token" - #: src/app/main/data/workspace/tokens/errors.cljs:15 msgid "workspace.tokens.error-parse" msgstr "导入错误:不能解析 JSON。" diff --git a/frontend/translations/zh_Hant.po b/frontend/translations/zh_Hant.po index a8ab707d87..283be8db9c 100644 --- a/frontend/translations/zh_Hant.po +++ b/frontend/translations/zh_Hant.po @@ -6234,10 +6234,6 @@ msgstr "編輯主題" msgid "workspace.tokens.edit-themes" msgstr "編輯主題" -#: src/app/main/ui/workspace/tokens/management/create/form.cljs:533 -msgid "workspace.tokens.edit-token" -msgstr "編輯權杖(token)" - #: src/app/main/ui/workspace/tokens/management/create/form.cljs:540 msgid "workspace.tokens.enter-token-name" msgstr "輸入 %s 權杖(token)名稱"