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..81d9dcd0fe 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 :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..d289040bfc 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,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)} 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 89be5ed48f..c06eeaab81 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs +++ b/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" diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs index 9465eb9e0f..211f75d51e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs +++ b/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}])])) 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..3cee5230ad 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 :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}] diff --git a/frontend/translations/en.po b/frontend/translations/en.po index f80d4beb21..278afa1752 100644 --- a/frontend/translations/en.po +++ b/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" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 1b9a2f166f..866605500b 100644 --- a/frontend/translations/es.po +++ b/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"