From cd6e254edbc4d97e33a7dd1766392ab1fe66d441 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Wed, 22 Jan 2025 15:44:01 +0100 Subject: [PATCH] :bug: Fix broken reference pills --- .../app/main/ui/workspace/tokens/sidebar.cljs | 1 + .../app/main/ui/workspace/tokens/sidebar.scss | 4 +- .../main/ui/workspace/tokens/token_pill.cljs | 38 +++++++++++++------ .../main/ui/workspace/tokens/token_pill.scss | 18 +++++---- frontend/translations/en.po | 9 ++++- frontend/translations/es.po | 8 ++++ 6 files changed, 55 insertions(+), 23 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 1fc420ee2..40c5a4065 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -142,6 +142,7 @@ :token-type-props token-type-props :token token :selected-shapes selected-shapes + :active-theme-tokens active-theme-tokens :theme-token theme-token :half-applied (or (and applied multiple-selection) (and applied (not full-applied))) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss index 070f8470e..ba6520e50 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss @@ -82,8 +82,8 @@ .section-text-icon { font-size: $fs-12; - width: 16px; - height: 16px; + width: $s-16; + height: $s-16; display: flex; place-content: center; } diff --git a/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs b/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs index 734098199..c585eedc0 100644 --- a/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs @@ -9,7 +9,6 @@ [app.main.ui.components.color-bullet :refer [color-bullet]] [app.main.ui.ds.foundations.assets.icon :refer [icon*]] [app.main.ui.ds.foundations.utilities.token.token-status :refer [token-status-icon*]] - [app.main.ui.workspace.tokens.style-dictionary :as sd] [app.main.ui.workspace.tokens.token :as wtt] [app.util.dom :as dom] [app.util.i18n :refer [tr]] @@ -97,15 +96,15 @@ (defn token-pill-tooltip "Generates a tooltip for a given token." - [theme-token is-viewer shape token-type-props token half-applied] - (let [{:keys [name value resolved-value errors type]} token + [is-viewer shape token-type-props token half-applied no-valid-value ref-not-in-active-set] + (let [{:keys [name value resolved-value type]} token {:keys [title]} token-type-props applied-tokens (:applied-tokens shape) app-token-vals (set (vals applied-tokens)) app-token-keys (keys applied-tokens) is-applied? (contains? app-token-vals name) - no-token-active (nil? theme-token) - errors? (or no-token-active (seq errors)) + + applied-to (if half-applied (partially-applied-attr app-token-keys is-applied? token-type-props) (tr "labels.all")) @@ -117,9 +116,12 @@ (cond ;; If there are errors, show the appropriate message - errors? (if no-token-active - (tr "workspace.token-set.not-active") - (sd/humanize-errors token)) + ref-not-in-active-set + (tr "workspace.token.ref-not-valid") + + no-valid-value + (tr "workspace.token.value-not-valid") + ;; If the token is applied and the user is a is-viewer, show the details (and is-applied? is-viewer) (->> [base-title @@ -128,17 +130,29 @@ (translate-and-format grouped-values) (str "- " title ": " applied-to))] (str/join "\n")) + ;; Otherwise only show the base title :else base-title))) +(defn contains-reference-value? + "Extracts the value between `{}` in a string and checks if it's in the provided vector." + [text values] + (let [match (second (re-find #"\{([^}]+)\}" text))] + (boolean (some #(= % match) values)))) + (mf/defc token-pill {::mf/wrap-props false} - [{:keys [on-click token theme-token full-applied on-context-menu half-applied selected-shapes token-type-props]}] + [{:keys [on-click token theme-token full-applied on-context-menu half-applied selected-shapes token-type-props active-theme-tokens]}] (let [{:keys [name value errors]} token - + is-reference (some #(= % "{") value) can-edit? (:can-edit (deref refs/permissions)) + is-viewer (not can-edit?) - errors? (and (seq errors) (seq (:errors theme-token))) + ref-not-in-active-set (and is-reference + (not (contains-reference-value? value (keys active-theme-tokens)))) + no-valid-value (seq errors) + errors? (or ref-not-in-active-set + no-valid-value) color (when (seq (ctob/find-token-value-references value)) (wtt/resolved-value-hex theme-token)) contains-path? (str/includes? name ".") @@ -182,7 +196,7 @@ (mf/deps selected-shapes is-viewer) (fn [event] (let [node (dom/get-current-target event) - title (token-pill-tooltip theme-token is-viewer (first selected-shapes) token-type-props token half-applied)] + title (token-pill-tooltip is-viewer (first selected-shapes) token-type-props token half-applied no-valid-value ref-not-in-active-set)] (dom/set-attribute! node "title" title))))] [:button {:class (stl/css-case :token-pill true diff --git a/frontend/src/app/main/ui/workspace/tokens/token_pill.scss b/frontend/src/app/main/ui/workspace/tokens/token_pill.scss index 927b68713..e58271ca5 100644 --- a/frontend/src/app/main/ui/workspace/tokens/token_pill.scss +++ b/frontend/src/app/main/ui/workspace/tokens/token_pill.scss @@ -106,19 +106,21 @@ --token-pill-outline: none; --token-pill-accent: var(--color-foreground-error); - &:focus-visible { - --token-pill-foreground: var(--color-foreground-error); - } - &:hover { - --token-pill-foreground: var(--color-foreground-primary); - } &:hover, &:focus-visible { --token-pill-background: var(--color-background-tertiary); - --token-pill-outline: var(--color-background-tertiary); - --token-pill-border: var(--color-accent-primary); --token-pill-accent: var(--color-foreground-error); } + &:hover { + --token-pill-foreground: var(--color-foreground-primary); + --token-pill-outline: none; + --token-pill-border: var(--color-foreground-error); + } + &:focus-visible { + --token-pill-foreground: var(--color-foreground-error); + --token-pill-border: var(--color-accent-primary); + --token-pill-outline: var(--color-foreground-error); + } } .token-pill-invalid-applied { diff --git a/frontend/translations/en.po b/frontend/translations/en.po index e3296a5e4..ff015d8cd 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -6318,7 +6318,6 @@ msgstr "You currently have no themes." msgid "workspace.token.num-sets" msgstr "%s sets" - #: src/app/main/ui/workspace/tokens/form.cljs:55 msgid "workspace.token.token-name-validation-error" msgstr " is not a valid token name. @@ -6357,6 +6356,14 @@ msgstr "Themes" msgid "workspace.token-set.not-active" msgstr "Token set is not active" +#: src/app/main/ui/workspace/tokens/token_pill.cljs +msgid "workspace.token.value-not-valid" +msgstr "The value is not valid" + +#: src/app/main/ui/workspace/tokens/token_pill.cljs +msgid "workspace.token.ref-not-valid" +msgstr "Reference is not valid or is not in any active set" + #: src/app/main/ui/workspace/sidebar.cljs:117, src/app/main/ui/workspace/sidebar.cljs:126 msgid "workspace.toolbar.assets" msgstr "Assets" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index c091f4044..974d0a53b 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -6773,6 +6773,14 @@ msgstr "Temas" msgid "workspace.token-set.not-active" msgstr "El set de tokens no está aplicado" +#: src/app/main/ui/workspace/tokens/token_pill.cljs +msgid "workspace.token.value-not-valid" +msgstr "El valor no es válido" + +#: src/app/main/ui/workspace/tokens/token_pill.cljs +msgid "workspace.token.ref-not-valid" +msgstr "La referencia no es válida o no se encuentra en ningún set activo." + #: src/app/main/ui/workspace/tokens/modals/themes.cljs msgid "workspace.token.theme-name" msgstr "Tema %s"