🐛 Fix some errors from reviews (#7421)

* 🐛 Fix errors con colorpicker

* 🐛 Fix modal size

* 🐛 Fix form padding

* 🐛 Fix edit modal title

* 🐛 Fix resolved value message

* 🐛 Fix CI

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))
 

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})
+                       (when path-set
-                       (dwtl/set-selected-token-set-id (ctob/get-id 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) ")")
+    (str group " (" (str/join ", " (map :name sets)) ")")
-    (first 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*])))
 

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);
 }
 

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:
+   Callback props:
-validate-token: Function to validate and resolve an editing token, see `default-validate-token`.
+   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
+   on-value-resolve: Will be called when a token value is resolved
-                  Used to sync external state (like color picker)
+                     Used to sync external state (like color picker)
-on-get-token-value: Custom function to get the input value from the dom
+   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`)
+                       (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)
+                       Can also be used to manipulate the value (E.g.: Auto-prepending # for hex colors)
 
-Custom component props:
+   Custom component props:
-custom-input-token-value: Custom component for editing/displaying the token value
+   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-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]
+     (for [[token-type {:keys [label placeholder icon]}] typography-inputs]
-       (let [value (get default-value k)
+       (let [value (get default-value token-type)
-             token-resolve-result
+             resolved (get-in token-resolve-result [:resolved-value token-type])
-             (when composite-token?
+             errors   (get errors-by-key token-type)
-               (-> {:resolved-value (let [v (get-in token-resolve-result [:resolved-value k])]
+
-                                      (when-not (str/empty? v) v))
+             should-show? (or (and (some? resolved)
-                    :errors (get errors-by-key k)}
+                                   (not= value (str resolved)))
-                   (d/without-nils)))
+                              (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)]
+                (let [element (mf/ref-val input-ref)]
-                  (dom/set-value! el next-value)
+                  (dom/set-value! element next-value)
-                  (on-update-value #js {:target el
+                  (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]
+              (fn [event]
-                (-> (obj/set! e "tokenType" k)
+                (-> (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}]
+  [{:keys [token token-type] :rest props}]
-  (let [token-type' (or (:type token) token-type)]
+  (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])))

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 {

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;
   }
 }
 

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"

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"

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"

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"

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"

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 "ערך האסימון לא יכול להישאר ריק"

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 "टोकन मान रिक्त नहीं हो सकता"

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"

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"

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"

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"

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"

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"

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 "Значення токену не може бути порожнім"

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。"

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)名稱"