From 26e583c2a6d9e5fa2dbfa32e0004c367c7d2f770 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Mon, 18 May 2026 09:42:28 +0200 Subject: [PATCH] :tada: Add tooltip information on typography dropdown (#9375) --- .../shared/searchable_options_dropdown.cljs | 2 +- .../ui/ds/controls/shared/token_option.cljs | 36 +++++++++++++++++-- .../options/menus/token_typography_row.cljs | 22 ++---------- 3 files changed, 38 insertions(+), 22 deletions(-) diff --git a/frontend/src/app/main/ui/ds/controls/shared/searchable_options_dropdown.cljs b/frontend/src/app/main/ui/ds/controls/shared/searchable_options_dropdown.cljs index 6e5d8e7d51..c90df863c8 100644 --- a/frontend/src/app/main/ui/ds/controls/shared/searchable_options_dropdown.cljs +++ b/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]]) diff --git a/frontend/src/app/main/ui/ds/controls/shared/token_option.cljs b/frontend/src/app/main/ui/ds/controls/shared/token_option.cljs index 2d989bca02..5e8ca43503 100644 --- a/frontend/src/app/main/ui/ds/controls/shared/token_option.cljs +++ b/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)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/token_typography_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/token_typography_row.cljs index 9d9944a1d2..1b3015afab 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/token_typography_row.cljs +++ b/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 - :resolved-value resolved-value}]))] + (mf/html [:> to/resolved-value-tooltip* {:token-name token-name + :resolved-value resolved-value}]))] [:div {:class (stl/css-case :token-typography-row true :token-typography-row-with-errors has-errors