🎉 Add tooltip information on typography dropdown (#9375)

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 :int :string :float :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,42 @@
    [:selected {:optional true} :boolean]
    [:focused {:optional true} :boolean]])
 
+(mf/defc resolved-value-tooltip*
+  ;; Generates the tooltip content for tokens whose resolved value is a map
+  ;; (e.g. typography tokens). Each key/value pair is rendered as a list item:
+  ;;   - font-family: "AR One Sans"
+  ;;   - font-size: 23
+  ;;   - ...
+  ;;
+  ;; Sequential values are formatted as comma-separated strings with quotes
+  ;; around each item. This is mainly used for font-family values when multiple
+  ;; fonts are present, to preserve the expected CSS-like representation:
+  ;;  - font-family: "Font A", "Font B"
+  [{: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 [[sub-prop prop-value] resolved-value]
+       [:li {:key (d/name sub-prop)}
+        [:span {:class (stl/css :resolved-key)} (str "- " (d/name sub-prop) ": ")]
+        [:span {:class (stl/css :resolved-value)}
+         (if (sequential? prop-value)
+           (str/join ", " (map #(dm/str "\"" % "\"") prop-value))
+           (dm/str prop-value))]])]]])
+
 (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 +84,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/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 :as to]
    [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}]
@@ -59,8 +43,8 @@
                           has-errors
                           (tr "options.deleted-token")
                           :else
-                          (mf/html [:> resolved-value-tooltip* {:token-name token-name
+                          (mf/html [:> to/resolved-value-tooltip* {:token-name token-name
-                                                                :resolved-value resolved-value}]))]
+                                                                   :resolved-value resolved-value}]))]
 
     [:div {:class (stl/css-case :token-typography-row true
                                 :token-typography-row-with-errors has-errors