♻️ Add tooltip to typography tooltip

frontend/src/app/main/ui/ds/controls/shared/searchable_options_dropdown.cljs

@@ -33,7 +33,7 @@
    [:resolved-value {:optional true}
     [:or :int :string :float :map]]
    [:name {:optional true} :string]
-   [:value {:optional true} :keyword]
+   [:value {:optional true} [:or :keyword :map]]
    [:icon {:optional true} schema:icon-list]
    [:label {:optional true} :string]
    [:aria-label {:optional true} :string]])

frontend/src/app/main/ui/ds/controls/shared/token_option.cljs

@@ -12,6 +12,8 @@
    [app.common.data.macros :as dm]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.ds.tooltip.tooltip :refer [tooltip*]]
+   [app.util.i18n :as i18n :refer [tr]]
+   [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
 (def ^:private schema:token-option
@@ -25,12 +27,34 @@
    [:selected {:optional true} :boolean]
    [:focused {:optional true} :boolean]])
 
+(mf/defc resolved-value-tooltip*
+  [{:keys [token-name resolved-value]}]
+  [:*
+   [:span (dm/str (tr "workspace.tokens.token-name") ": ")]
+   [:span {:class (stl/css :token-name-tooltip)} token-name]
+   [:div
+    [:span (tr "inspect.tabs.styles.token-resolved-value")]
+    [:ul
+     (for [[k v] resolved-value]
+       [:li {:key (d/name k)}
+        [:span {:class (stl/css :resolved-key)} (str "- " (d/name k) ": ")]
+        [:span {:class (stl/css :resolved-value)}
+         (if (sequential? v)
+           (str/join ", " (map #(dm/str "\"" % "\"") v))
+           (dm/str v))]])]]])
+
 (mf/defc token-option*
   {::mf/schema schema:token-option}
   [{:keys [id name on-click selected ref focused resolved value] :rest props}]
   (let [internal-id (mf/use-id)
         id          (d/nilv id internal-id)
-        element-ref (mf/use-ref nil)]
+        element-ref (mf/use-ref nil)
+        tooltip-content (if (map? resolved)
+                          (mf/html
+                           [:> resolved-value-tooltip*
+                            {:token-name name
+                             :resolved-value resolved}])
+                          name)]
     [:li {:value id
           :class (stl/css-case :token-option true
                                :option-with-pill true
@@ -52,7 +76,7 @@
          :class (stl/css :option-check)
          :aria-hidden (when name true)}]
        [:span {:class (stl/css :icon-placeholder)}])
-     [:> tooltip* {:content name
+     [:> tooltip* {:content tooltip-content
                    :trigger-ref element-ref
                    :id (dm/str id "-name")
                    :class (stl/css :option-text)}

frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs

@@ -294,7 +294,7 @@
         sorted-tokens     (sort-combined-tokens filtered-combined)]
     (if (seq combined-tokens)
       [:div {:class (stl/css :color-tokens-section)}
-       [:> input* {:placeholder "Search by token name"
+       [:> input* {:placeholder (tr "workspace.tokens.search-by-token")
                    :icon i/search
                    :max-length max-input-length
                    :variant "comfortable"

frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs

@@ -411,6 +411,7 @@
 
         detach-token
         (mf/use-fn
+         (mf/deps ids)
          (fn [token-name]
            (st/emit! (dwta/unapply-token {:token-name  token-name
                                           :attributes  #{:typography}
@@ -445,7 +446,7 @@
 
     (mf/with-effect [applied-token-name dropdown-options]
       (reset! selected-token-id*
-              (when (and (not= :multiple applied-token-name)applied-token-name)
+              (when (and (not= :multiple applied-token-name) applied-token-name)
                 (:id (get-option-by-name dropdown-options applied-token-name)))))
 
     (mf/with-effect [token-dropdown-open?]
@@ -479,7 +480,7 @@
         (cond
           (and token-typography-row-enabled? (= :multiple current-token-name) (= typography-id :multiple))
           [:div "Texts have multiple typography assets and typography tokens applied"]
-          
+
           (and token-typography-row-enabled? (= :multiple current-token-name))
           [:div "token-multiple"]
 
@@ -529,4 +530,5 @@
                                          :options      (resolve-delay dropdown-options)
                                          :selected     selected-token-id
                                          :align        "right"
+                                         :placeholder  (tr "workspace.tokens.search-by-token")
                                          :ref          set-option-ref}])]))

frontend/src/app/main/ui/workspace/sidebar/options/menus/token_typography_row.cljs

@@ -10,28 +10,12 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.controls.shared.token-option :refer [resolved-value-tooltip*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.ds.tooltip :refer [tooltip*]]
    [app.util.i18n :as i18n :refer [tr]]
-   [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
-(mf/defc resolved-value-tooltip*
-  {::mf/private true}
-  [{:keys [token-name resolved-value]}]
-  [:*
-   [:span (dm/str (tr "workspace.tokens.token-name") ": ")]
-   [:span {:class (stl/css :token-name-tooltip)} token-name]
-   [:div
-    [:span (tr "inspect.tabs.styles.token-resolved-value")]
-    [:ul
-     (for [[k v] resolved-value]
-       [:li {:key (d/name k)}
-        [:span {:class (stl/css :resolved-key)} (str "- " (d/name k) ": ")]
-        [:span {:class (stl/css :resolved-value)}
-         (if (sequential? v)
-           (str/join ", " (map #(dm/str "\"" % "\"") v))
-           (dm/str v))]])]]])
 
 (mf/defc token-typography-row*
   [{:keys [token-name active-tokens detach-token] :rest props}]

frontend/translations/en.po

@@ -8885,6 +8885,10 @@ msgstr "Duplicate Tokens Group"
 msgid "workspace.tokens.rename-group-name-hint"
 msgstr "Your tokens will automatically be renamed to %s.(suffix).(tokenName)"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs, src/app/main/ui/workspace/colorpicker/color_tokens.cljs
+msgid "workspace.tokens.search-by-token"
+msgstr "Search by token name"
+
 #: src/app/main/ui/workspace/sidebar.cljs:159, src/app/main/ui/workspace/sidebar.cljs:166
 msgid "workspace.toolbar.assets"
 msgstr "Assets"

frontend/translations/es.po

@@ -8613,6 +8613,10 @@ msgstr "Duplicar grupo de tokens"
 msgid "workspace.tokens.rename-group-name-hint"
 msgstr "Tus tokens serán automáticamente renombrados a %s.(sufijo).(token)"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs, src/app/main/ui/workspace/colorpicker/color_tokens.cljs
+msgid "workspace.tokens.search-by-token"
+msgstr "Buscar por el nombre del token"
+
 #: src/app/main/ui/workspace/sidebar.cljs:159, src/app/main/ui/workspace/sidebar.cljs:166
 msgid "workspace.toolbar.assets"
 msgstr "Recursos"