From 401cd273a56ab547aee57b193d3a1f057bceae84 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Fri, 11 Sep 2026 09:37:14 +0200 Subject: [PATCH] :bug: Fix tokens source label truncation and missing translations (#11533) * :bug: Fix tokens source label truncation and missing translations The tokens source file name always showed, even for the current file, and long names wrapped onto a second line instead of truncating because the header used flex-wrap and overflow-wrap: break-word instead of single-line ellipsis. Show the source row unconditionally (it now displays "This file" when the source is the current file, matching the connected-library case), truncate the file name to one line with an ellipsis, and only attach a tooltip with the full name when the text is actually truncated. Replace the hardcoded UI strings with translated ones and add their English and Spanish entries. AI-assisted-by: claude-sonnet-5 * :bug: Remove redundant effect dependency in tokens source file-name-truncated? was listed as a dependency of the with-effect that checks and observes label truncation, even though it isn't read inside the effect body. Since the effect itself flips that state via check-file-name-truncated, including it as a dependency caused the ResizeObserver to be needlessly disconnected and reconnected on every truncation change. AI-assisted-by: claude-sonnet-5 --- .../app/main/ui/workspace/tokens/sidebar.cljs | 4 +- .../ui/workspace/tokens/tokens_source.cljs | 76 ++++++++++++++++--- .../ui/workspace/tokens/tokens_source.scss | 43 ++++++++++- frontend/translations/en.po | 22 ++++-- frontend/translations/es.po | 22 ++++-- 5 files changed, 138 insertions(+), 29 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 374be524f4..d14f4913cc 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -78,8 +78,8 @@ [:section {:data-testid "token-management-sidebar" :class (stl/css :token-management-section-wrapper) :style {"--resize-height" (str resize-height "px")}} - (when (not= tokens-source (:id current-file-data)) - [:> tokens-source-info* {:tokens-source tokens-source}]) + [:> tokens-source-info* {:tokens-source tokens-source + :file-id (:id current-file-data)}] [:> themes-header* {:tokens-source tokens-source}] [:div {:class (stl/css :sidebar-header)} [:> title-bar* {:title (tr "labels.sets")} diff --git a/frontend/src/app/main/ui/workspace/tokens/tokens_source.cljs b/frontend/src/app/main/ui/workspace/tokens/tokens_source.cljs index 66b944766b..4f95c7521e 100644 --- a/frontend/src/app/main/ui/workspace/tokens/tokens_source.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/tokens_source.cljs @@ -7,21 +7,37 @@ (ns app.main.ui.workspace.tokens.tokens-source (:require-macros [app.main.style :as stl]) (:require + [app.main.data.modal :as modal] [app.main.refs :as refs] [app.main.router :as rt] [app.main.store :as st] [app.main.ui.context :as ctx] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.foundations.typography.text :refer [text*]] + [app.main.ui.ds.tooltip.tooltip :refer [tooltip*]] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) (mf/defc tokens-source-info* {::mf/private true} - [{:keys [tokens-source] :as props}] + [{:keys [tokens-source file-id] :as props}] (let [files (mf/deref refs/files) tokens-source-file (get files tokens-source) + source-file-id (:id tokens-source-file) + file-name (:name tokens-source-file) + + file-name-ref (mf/use-ref nil) + file-name-truncated?* (mf/use-state false) + file-name-truncated? (deref file-name-truncated?*) + + check-file-name-truncated + (mf/use-fn + (fn [] + (when-let [node (mf/ref-val file-name-ref)] + (reset! file-name-truncated?* + (> (.-scrollWidth node) (.-clientWidth node)))))) team-id (mf/use-ctx ctx/current-team-id) @@ -33,20 +49,56 @@ {:team-id team-id :file-id tokens-source :layout :tokens} - ::rt/new-window true))))] + ::rt/new-window true)))) + show-libraries-dialog + (mf/use-fn + (mf/deps file-id) + (fn [] + (modal/show! :libraries-dialog {:file-id file-id})))] + + (mf/with-effect [file-name] + (check-file-name-truncated) + (when-let [node (mf/ref-val file-name-ref)] + (let [ro (js/ResizeObserver. check-file-name-truncated)] + (.observe ro node) + #(.disconnect ro)))) [:div {:class (stl/css :tokens-source-wrapper)} [:div {:class (stl/css :tokens-source-header)} + [:> icon* {:icon-id "tokens" + :size "m" + :class (stl/css :tokens-source-icon)}] [:> text* {:as "span" - :typography "headline-small" - :class (stl/css :tokens-source-title)} - (:name tokens-source-file)] - [:> text* {:as "span" - :typography "body-medium" - :class (stl/css :tokens-source-description)} - (tr "workspace.tokens.connected-library")]] + :typography "body-small" + :class (stl/css :tokens-source-text)} + (tr "workspace.tokens.source")] + (if (= source-file-id file-id) + [:> text* {:as "span" + :typography "body-small" + :class (stl/css :this-file)} + (tr "workspace.tokens.this-file")] + (if file-name-truncated? + [:> tooltip* {:content file-name + :trigger-ref file-name-ref + :class (stl/css :file-name-tooltip)} + [:> text* {:as "span" + :typography "body-small" + :class (stl/css :file-name) + :ref file-name-ref} + file-name]] + [:> text* {:as "span" + :typography "body-small" + :class (stl/css :file-name) + :ref file-name-ref} + file-name]))] [:> icon-button* {:variant "ghost" - :aria-label (tr "workspace.tokens.open-connected-library") - :on-click open-library-new-window - :icon "open-link"}]])) + :aria-label (tr "workspace.tokens.change-token-source") + :on-click show-libraries-dialog + :icon "switch"}] + (when-not (= source-file-id file-id) + [:> icon-button* + {:variant "ghost" + :aria-label (tr "workspace.tokens.open-source-new-tab") + :on-click open-library-new-window + :icon "open-link"}])])) diff --git a/frontend/src/app/main/ui/workspace/tokens/tokens_source.scss b/frontend/src/app/main/ui/workspace/tokens/tokens_source.scss index ece7e1a7c3..0b6dfed9dd 100644 --- a/frontend/src/app/main/ui/workspace/tokens/tokens_source.scss +++ b/frontend/src/app/main/ui/workspace/tokens/tokens_source.scss @@ -9,25 +9,62 @@ @use "ds/_borders.scss" as *; @use "ds/spacing.scss" as *; @use "ds/_utils.scss" as *; +@use "ds/mixins.scss" as *; + +// TODO: this must be a custom property in the design system +:global(.light) { + --low-emphasis-background: #fafafa; +} + +:global(.default) { + --low-emphasis-background: #121214; +} .tokens-source-wrapper { display: flex; padding: 0 0 0 var(--sp-m); + background-color: var(--low-emphasis-background); } .tokens-source-header { display: flex; align-items: center; - flex-wrap: wrap; + flex-wrap: nowrap; gap: var(--sp-s); flex-grow: 1; - padding: var(--sp-s); + min-width: 0; + padding: var(--sp-xs); } -.tokens-source-title { +.tokens-source-icon { + flex-shrink: 0; + color: var(--color-foreground-secondary); +} + +.tokens-source-text { + flex-shrink: 0; + color: var(--color-foreground-secondary); +} + +.file-name, +.this-file { flex: 1 1 auto; min-width: 0; color: var(--color-foreground-primary); +} + +.file-name { + @include text-ellipsis; +} + +.file-name-tooltip { + flex: 1 1 auto; + min-width: 0; +} + +.this-file { + font-style: italic; + color: var(--color-foreground-secondary); overflow-wrap: break-word; } diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 4ba76bc705..5883d2d512 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -10147,22 +10147,32 @@ msgstr "Use a reference" msgid "workspace.tokens.value-not-valid" msgstr "The value is not valid" -#: src/app/main/ui/workspace/tokens/tokens_source.cljs:24 -msgid "workspace.tokens.connected-library" -msgstr "connected library" #: src/app/main/ui/workspace/sidebar/assets/file_library.cljs:102 msgid "workspace.tokens.current-tokens-source-tooltip" msgstr "This is the current Tokens source" -#: src/app/main/ui/workspace/tokens/tokens_source.cljs:25 -msgid "workspace.tokens.open-connected-library" -msgstr "Open connected library" #: src/app/main/data/workspace/libraries.cljs:847 msgid "workspace.tokens.notifications.source-sets-or-themes-updated" msgstr "Tokens source sets or themes have been modified" +#: src/app/main/ui/workspace/tokens/tokens_source.cljs:74 +msgid "workspace.tokens.source" +msgstr "Source:" + +#: src/app/main/ui/workspace/tokens/tokens_source.cljs:79 +msgid "workspace.tokens.this-file" +msgstr "This file" + +#: src/app/main/ui/workspace/tokens/tokens_source.cljs:96 +msgid "workspace.tokens.change-token-source" +msgstr "Change token source" + +#: src/app/main/ui/workspace/tokens/tokens_source.cljs:102 +msgid "workspace.tokens.open-source-new-tab" +msgstr "Open tokens' source in a new tab" + #: src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs #, unused msgid "workspace.tokens.warning-name-change" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index b935e93acb..3851d20747 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -9804,22 +9804,32 @@ msgstr "Usa una referencia" msgid "workspace.tokens.value-not-valid" msgstr "El valor no es válido" -#: src/app/main/ui/workspace/tokens/tokens_source.cljs:24 -msgid "workspace.tokens.connected-library" -msgstr "librería conectada" #: src/app/main/ui/workspace/sidebar/assets/file_library.cljs:102 msgid "workspace.tokens.current-tokens-source-tooltip" msgstr "Esta es la actual fuente de Tokens" -#: src/app/main/ui/workspace/tokens/tokens_source.cljs:25 -msgid "workspace.tokens.open-connected-library" -msgstr "Abrir librería conectada" #: src/app/main/data/workspace/libraries.cljs:847 msgid "workspace.tokens.notifications.source-sets-or-themes-updated" msgstr "Los sets o temas de la fuente de tokens se han modificado" +#: src/app/main/ui/workspace/tokens/tokens_source.cljs:74 +msgid "workspace.tokens.source" +msgstr "Fuente:" + +#: src/app/main/ui/workspace/tokens/tokens_source.cljs:79 +msgid "workspace.tokens.this-file" +msgstr "Este archivo" + +#: src/app/main/ui/workspace/tokens/tokens_source.cljs:96 +msgid "workspace.tokens.change-token-source" +msgstr "Cambiar fuente de tokens" + +#: src/app/main/ui/workspace/tokens/tokens_source.cljs:102 +msgid "workspace.tokens.open-source-new-tab" +msgstr "Abrir la fuente de tokens en una pestaña nueva" + #: src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs #, unused msgid "workspace.tokens.warning-name-change"