From dcf90f9e28734963d9c1ad54a1aa786f9c35668e Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Tue, 1 Sep 2026 15:49:50 +0200 Subject: [PATCH] :bug: Add a tokens source icon to libraries section (#11439) * :bug: Add a tokens source icon to libraries section * :bug: Fix ellipsis on library names * :recycle: Remove code under flag on legacy component * :bug: Fix token theme name on inspect tab --- .../src/app/main/ui/components/title_bar.scss | 1 + .../main/ui/ds/foundations/assets/icon.cljs | 8 +- .../app/main/ui/ds/product/empty_state.cljs | 2 +- frontend/src/app/main/ui/inspect/styles.cljs | 7 +- .../inspect/styles/panels/tokens_panel.cljs | 6 +- .../src/app/main/ui/workspace/libraries.cljs | 55 ++----- .../src/app/main/ui/workspace/libraries.scss | 19 +-- .../app/main/ui/workspace/sidebar/assets.cljs | 15 +- .../sidebar/assets/file_library.cljs | 39 +++-- .../sidebar/assets/file_library.scss | 138 +++++++++++------- frontend/translations/en.po | 4 + frontend/translations/es.po | 4 + 12 files changed, 171 insertions(+), 127 deletions(-) diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss index 198ca4b657..78fd3b915f 100644 --- a/frontend/src/app/main/ui/components/title_bar.scss +++ b/frontend/src/app/main/ui/components/title_bar.scss @@ -57,6 +57,7 @@ .icon { color: var(--arrow-icon-color); + flex-shrink: 0; } .title-wrapper { diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs index c4d697fd47..afa7d24f78 100644 --- a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs +++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs @@ -313,7 +313,8 @@ "A collection of all icons" (collect-icons)) -(def ^:private ^:const icon-size-l 32) +(def ^:private ^:const icon-size-xl 32) +(def ^:private ^:const icon-size-l 24) (def ^:private ^:const icon-size-m 16) (def ^:private ^:const icon-size-s 12) @@ -322,12 +323,13 @@ [:class {:optional true} [:maybe :string]] [:icon-id [:and :string [:fn #(contains? icon-list %)]]] [:size {:optional true} - [:maybe [:enum "s" "m" "l"]]]]) + [:maybe [:enum "s" "m" "l" "xl"]]]]) (mf/defc icon* {::mf/schema schema:icon} [{:keys [icon-id size class] :rest props}] - (let [size-px (cond (= size "l") icon-size-l + (let [size-px (cond (= size "xl") icon-size-xl + (= size "l") icon-size-l (= size "s") icon-size-s :else icon-size-m) offset (if (or (= size "s") (= size "m")) diff --git a/frontend/src/app/main/ui/ds/product/empty_state.cljs b/frontend/src/app/main/ui/ds/product/empty_state.cljs index bad9db3781..f5b2b09e48 100644 --- a/frontend/src/app/main/ui/ds/product/empty_state.cljs +++ b/frontend/src/app/main/ui/ds/product/empty_state.cljs @@ -25,6 +25,6 @@ (when icon [:div {:class (stl/css :icon-wrapper)} [:> icon* {:icon-id icon - :size "l" + :size "xl" :class (stl/css :icon)}]]) [:div {:class (stl/css :text)} text]])) diff --git a/frontend/src/app/main/ui/inspect/styles.cljs b/frontend/src/app/main/ui/inspect/styles.cljs index ec97505469..8eddf353e8 100644 --- a/frontend/src/app/main/ui/inspect/styles.cljs +++ b/frontend/src/app/main/ui/inspect/styles.cljs @@ -113,7 +113,10 @@ tokens-lib (mf/deref refs/tokens-lib) tokens-status (mf/deref refs/tokens-status) - active-themes (mf/deref refs/workspace-active-theme-ids) + active-theme-ids (mf/deref refs/workspace-active-theme-ids) + active-themes (mf/with-memo [active-theme-ids tokens-lib] + (when tokens-lib + (keep #(some-> (ctob/get-theme tokens-lib %) ctob/get-name) active-theme-ids))) active-sets (mf/with-memo [tokens-status tokens-lib] (when (and tokens-status tokens-lib) (cfo/get-active-sets tokens-status tokens-lib))) @@ -156,7 +159,7 @@ (when (or (seq active-themes) (seq active-sets)) [:li [:> style-box* {:panel :token} - [:> tokens-panel* {:theme-paths active-themes :set-names (map ctob/get-name active-sets)}]]]) + [:> tokens-panel* {:theme-names active-themes :set-names (map ctob/get-name active-sets)}]]]) (for [panel panels] [:li {:key (d/name panel)} (case panel diff --git a/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.cljs b/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.cljs index 2a86d196ca..836a10c547 100644 --- a/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.cljs +++ b/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.cljs @@ -13,10 +13,10 @@ [rumext.v2 :as mf])) (mf/defc tokens-panel* - [{:keys [theme-paths set-names]}] + [{:keys [theme-names set-names]}] [:div {:class (stl/css :tokens-panel)} - (when (seq theme-paths) - (let [theme-list (str/join ", " theme-paths)] + (when (seq theme-names) + (let [theme-list (str/join ", " theme-names)] [:> properties-row* {:class (stl/css :token-theme) :term (tr "inspect.tabs.styles.active-themes") :detail theme-list}])) diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index a1c81f6012..48f3f691b3 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -370,13 +370,6 @@ :tokens/import-from-library {:file-id file-id :library-id library-id}))))) - set-as-tokens-source - (mf/use-fn - (fn [event] - (let [library-id (some-> (dom/get-current-target event) - (dom/get-data "library-id") - (uuid/parse))] - (st/emit! (dwtl/set-tokens-source library-id))))) on-delete-accept (mf/use-fn @@ -430,16 +423,7 @@ [:div {:class (stl/css :item-content)} [:div {:class (stl/css :item-title)} (tr "workspace.libraries.file-library")] [:ul {:class (stl/css :item-contents-legacy)} - [:> library-description* {:summary summary}]] - (when (contains? cf/flags :token-lib-sync) - (if (cfo/effective-tokens-source? local-library (:id local-library)) - [:div (tr "workspace.libraries.tokens-source")] - (when (not= (cfo/get-tokens-source local-library) (:id local-library)) - [:> button* {:variant "secondary" - :type "button" - :data-library-id (dm/str (:id local-library)) - :on-click set-as-tokens-source} - (tr "workspace.libraries.set-as-tokens-source")])))] + [:> library-description* {:summary summary}]]] (if ^boolean is-shared [:> button* {:variant "secondary" @@ -460,8 +444,7 @@ :key (dm/str id) :data-testid "library-item"} [:div {:class (stl/css :item-content)} - [:div {:class (stl/css-case :item-name true - :item-name-short has-tokens?)} name] + [:div {:class (stl/css :item-name)} name] [:ul {:class (stl/css :item-contents-legacy)} (let [summary (get-library-summary data)] [:* @@ -470,28 +453,17 @@ [:div {:class (stl/css :connected-to-wrapper-legacy)} [:span "(" (tr "workspace.libraries.connected-to") " "] [:span {:class (stl/css :connected-to-values)} (str/join ", " connected-to-names)] - [:span ")"]])])] - (when (contains? cf/flags :token-lib-sync) - (when (cfo/effective-tokens-source? local-library id) - [:div (tr "workspace.libraries.tokens-source")]))] + [:span ")"]])])]] [:div {:class (stl/css :library-actions)} - (if (contains? cf/flags :token-lib-sync) - (when (and (cfo/tokens-provider? (:data library)) - (not (cfo/effective-tokens-source? local-library id))) - [:> button* {:variant "secondary" - :type "button" - :data-library-id (dm/str id) - :on-click set-as-tokens-source} - (tr "workspace.libraries.set-as-tokens-source")]) - (when ^boolean has-tokens? - [:> icon-button* - {:type "button" - :aria-label (tr "workspace.tokens.import-tokens") - :icon i/import-export - :data-library-id (dm/str id) - :variant "secondary" - :on-click import-tokens}])) + (when ^boolean has-tokens? + [:> icon-button* + {:type "button" + :aria-label (tr "workspace.tokens.import-tokens") + :icon i/import-export + :data-library-id (dm/str id) + :variant "secondary" + :on-click import-tokens}]) [:> icon-button* {:type "button" :aria-label (tr "workspace.libraries.unlink-library-btn") @@ -875,8 +847,7 @@ :key (dm/str id) :data-testid "library-item"} [:div {:class (stl/css :item-content)} - [:div {:class (stl/css-case :item-name true - :item-name-short has-tokens?)} name] + [:div {:class (stl/css :item-name)} name] [:ul {:class (stl/css :item-contents)} (let [summary (get-library-summary data)] [:> library-description* {:summary summary :hint-name parent-name}])]] @@ -1017,7 +988,7 @@ [:div {:class (stl/css :section-list-item) :key (dm/str id)} [:div {:class (stl/css :item-content)} - [:div {:class (stl/css :item-name-long)} name] + [:div {:class (stl/css :item-name)} name] [:ul {:class (stl/css :item-contents)} (describe-library (count components) 0 diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss index 4182dfb7d4..a6d5daca78 100644 --- a/frontend/src/app/main/ui/workspace/libraries.scss +++ b/frontend/src/app/main/ui/workspace/libraries.scss @@ -97,7 +97,7 @@ %section-list-item-placeholder { display: grid; - grid-template-columns: 1fr auto; + grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-s); border: $b-1 solid var(--color-background-quaternary); @@ -108,7 +108,7 @@ .section-list-publish { @extend %section-list-item-placeholder; - grid-template-columns: 1fr auto auto; + grid-template-columns: minmax(0, 1fr) auto auto; border: none; } @@ -129,11 +129,12 @@ .section-list-item-double-icon { @extend %section-list-item-placeholder; - grid-template-columns: 1fr auto auto; + grid-template-columns: minmax(0, 1fr) auto auto; } .item-content { height: fit-content; + min-width: 0; } .close-btn { @@ -253,7 +254,6 @@ @include text-ellipsis; margin: 0; - max-width: px2rem(236); color: var(--library-name-foreground-color); } @@ -261,16 +261,6 @@ @extend %item-name; } -.item-name-short { - max-width: px2rem(206); -} - -.item-name-long { - @extend %item-name; - - max-width: px2rem(450); -} - .item-title { @include t.use-typography("body-large"); @@ -308,6 +298,7 @@ .library-actions { display: flex; + flex-shrink: 0; gap: var(--sp-xs); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index f345c514f2..3c196b1986 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -8,6 +8,7 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.data.macros :as dm] + [app.common.files.tokens :as cfo] [app.common.types.components-list :as ctkl] [app.main.data.modal :as modal] [app.main.data.workspace :as dw] @@ -33,6 +34,12 @@ [{:keys [filters]}] (let [file-id (mf/use-ctx ctx/current-file-id) files (mf/deref refs/files) + current-file-data + (mf/deref refs/workspace-data) + tokens-source + (mf/with-memo [current-file-data] + (cfo/get-effective-tokens-source current-file-data)) + libraries (mf/with-memo [files file-id] (->> (refs/select-libraries files file-id) (vals) @@ -46,6 +53,7 @@ {:key (dm/str (:id file)) :file file :is-local false + :is-tokens-source (= (:id file) tokens-source) :is-default-open false :filters filters}]))) @@ -57,11 +65,16 @@ (mf/defc assets-local-library* {::mf/private true} [{:keys [filters]}] - (let [file (mf/deref ref:local-library)] + (let [file (mf/deref ref:local-library) + + is-tokens-source + (mf/with-memo [file] + (cfo/effective-tokens-source? (:data file) (:id file)))] [:> file-library* {:file file :is-local true :is-default-open true + :is-tokens-source is-tokens-source :filters filters}])) (defn- toggle-values diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs index b0d9747a6e..8792ec2921 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs @@ -22,7 +22,8 @@ [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.context :as ctx] - [app.main.ui.icons :as deprecated-icon] + [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]] + [app.main.ui.ds.tooltip :refer [tooltip*]] [app.main.ui.workspace.sidebar.assets.colors :refer [colors-section*]] [app.main.ui.workspace.sidebar.assets.common :as cmm] [app.main.ui.workspace.sidebar.assets.components :refer [components-section*]] @@ -76,7 +77,7 @@ (mf/defc file-library-title* {::mf/private true} - [{:keys [is-open is-local file-id page-id file-name]}] + [{:keys [is-open is-local file-id page-id file-name is-tokens-source]}] (let [router (mf/deref refs/router) team-id (mf/use-ctx ctx/current-team-id) url (rt/resolve router :workspace @@ -93,7 +94,15 @@ (mf/use-fn (fn [ev] (dom/stop-propagation ev) - (st/emit! (ev/event {::ev/name "navigate-to-library-file"}))))] + (st/emit! (ev/event {::ev/name "navigate-to-library-file"})))) + + tokens-source-icon + (when is-tokens-source + (mf/html [:> tooltip* {:content (tr "workspace.tokens.current-tokens-source-tooltip")} + [:span {:class (stl/css :tokens-source-icon-wrapper)} + [:> icon* {:icon-id i/tokens + :size "m" + :class (stl/css :tokens-source-icon)}]]]))] [:div {:class (stl/css-case :library-title true @@ -103,17 +112,24 @@ :on-collapsed toggle-open :title (if is-local (mf/html [:div {:class (stl/css :special-title)} - (tr "workspace.assets.local-library")]) + [:span {:class (stl/css :special-title-text)} + (tr "workspace.assets.local-library")] + tokens-source-icon]) ;; Do we need to add shared info here? (mf/html [:div {:class (stl/css :special-title)} - file-name]))} + [:span {:class (stl/css :special-title-text)} + file-name] + tokens-source-icon]))} (when-not ^boolean is-local [:span {:title (tr "workspace.assets.open-library")} [:a {:class (stl/css :file-link) :href (str "#" url) :target "_blank" :on-click on-click} - deprecated-icon/open-link]])]])) + [:> icon* {:icon-id i/open-link + :size "m" + :class (stl/css :file-link-icon)}]]])]])) + (defn- extend-selected [selected type asset-groups asset-id file-id] @@ -299,13 +315,15 @@ (not ^boolean show-colors?) (not ^boolean show-typography?)) [:div {:class (stl/css :asset-title)} - [:span {:class (stl/css :no-found-icon)} - deprecated-icon/search] + [:span {:class (stl/css :no-found-icon-wrapper)} + [:> icon* {:icon-id i/search + :size "l" + :class (stl/css :no-found-icon)}]] [:span {:class (stl/css :no-found-text)} (tr "workspace.assets.not-found")]])])])) (mf/defc file-library* - [{:keys [file is-local is-default-open filters]}] + [{:keys [file is-local is-default-open filters is-tokens-source]}] (let [file-id (:id file) file-name (:name file) page-id (dm/get-in file [:data :pages 0]) @@ -381,7 +399,8 @@ :page-id page-id :file-name file-name :is-open open? - :is-local is-local}] + :is-local is-local + :is-tokens-source is-tokens-source}] (when ^boolean open? [:> file-library-content* diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss index 266718c00b..d365207070 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss @@ -4,95 +4,131 @@ // // Copyright (c) KALEIDOS SUBSIDIARY SL -@use "ds/typography.scss" as t; -@use "refactor/common-refactor.scss" as deprecated; +@use "ds/_borders.scss" as *; +@use "ds/_sizes.scss" as *; +@use "ds/_utils.scss" as *; +@use "ds/typography.scss" as *; .tool-window { - padding: 0 0 deprecated.$s-24 deprecated.$s-12; + padding-inline-start: var(--sp-m); + padding-block-end: var(--sp-xxl); display: grid; grid-auto-rows: max-content; - gap: deprecated.$s-4; - height: 100%; -} - -.file-name { - @include t.use-typography("body-small"); - - display: flex; - justify-content: flex-start; - align-items: center; - flex-grow: 100; - height: 100%; + gap: var(--sp-xs); + block-size: 100%; } .loading { - @include t.use-typography("body-small"); + @include use-typography("body-small"); display: flex; align-items: center; justify-content: flex-start; - height: deprecated.$s-32; - padding-left: calc(deprecated.$s-12 + deprecated.$s-2); + block-size: $sz-32; + padding-inline-start: calc(var(--sp-m) + var(--sp-xxs)); color: var(--color-foreground-secondary); } .special-title { - @include deprecated.text-ellipsis; - - color: var(--title-foreground-color-hover); - margin-left: deprecated.$s-2; + box-sizing: border-box; + inline-size: 100%; + min-inline-size: 0; + display: flex; + align-items: center; + gap: var(--sp-xs); + color: var(--color-foreground-primary); + padding-inline-start: var(--sp-xxs); text-align: left; } +.special-title-text { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.tokens-source-icon-wrapper { + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + border: $b-1 solid var(--color-accent-select); + border-radius: $br-4; + padding: var(--sp-xxs); +} + +.tokens-source-icon { + flex-shrink: 0; + color: var(--color-accent-tertiary); +} + .file-link { - @extend %button-tertiary; + --file-link-background-color: transparent; + --file-link-border-color: transparent; + --file-link-foreground-color: var(--color-foreground-secondary); - height: deprecated.$s-32; - width: deprecated.$s-28; - border-radius: deprecated.$br-8; + display: grid; + place-content: center; + block-size: $sz-32; + inline-size: $sz-28; + border: $b-2 solid var(--file-link-border-color); + border-radius: $br-8; + background-color: var(--file-link-background-color); + color: var(--file-link-foreground-color); + cursor: pointer; - svg { - @extend %button-icon; + &:hover { + --file-link-background-color: var(--color-background-quaternary); + --file-link-border-color: var(--color-background-quaternary); + --file-link-foreground-color: var(--color-accent-primary); + } - stroke: var(--icon-foreground); - fill: var(--title-foreground-color-hover); + &:active { + --file-link-background-color: var(--color-background-secondary); + --file-link-border-color: transparent; + --file-link-foreground-color: var(--color-accent-primary); + + outline: none; + } + + &:focus-visible { + --file-link-background-color: var(--color-background-tertiary); + --file-link-foreground-color: var(--color-foreground-primary); + + outline: none; + border: $b-1 solid var(--color-accent-primary); } } .library-content { - width: 100%; + inline-size: 100%; display: grid; grid-auto-rows: max-content; - gap: deprecated.$s-4; + gap: var(--sp-xs); } .asset-title { - margin-left: deprecated.$s-28; + margin-inline-start: px2rem(28); display: flex; flex-direction: column; align-items: center; - gap: deprecated.$s-8; + gap: var(--sp-s); } -.no-found-icon { - @include deprecated.flex-center; - - background-color: var(--not-found-background-color); - border-radius: deprecated.$br-circle; - height: deprecated.$s-48; - width: deprecated.$s-48; - - svg { - @extend %button-icon; - - height: deprecated.$s-24; - width: deprecated.$s-24; - stroke: var(--not-found-foreground-color); - } +.no-found-icon-wrapper { + display: flex; + align-items: center; + justify-content: center; + background-color: var(--color-background-tertiary); + border-radius: $br-circle; + block-size: $sz-48; + inline-size: $sz-48; + color: var(--color-foreground-secondary); } .no-found-text { - @include deprecated.body-small-typography; + @include use-typography("body-small"); - color: var(--not-found-foreground-color); + color: var(--color-foreground-secondary); } diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 7db6d057b3..58410429db 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -10151,6 +10151,10 @@ msgstr "The value is not valid" 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" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 016cf4f9e9..d710e7fde7 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -9808,6 +9808,10 @@ msgstr "El valor no es válido" 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"