Merge pull request #5581 from penpot/eva-fix-broken-token-context-menu

frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs

@@ -198,7 +198,6 @@
     (tr "shortcuts.toggle-lock")
     (tr "shortcuts.toggle-lock-size")
     (tr "shortcuts.toggle-rulers")
-    (tr "shortcuts.toggle-rules")
     (tr "shortcuts.toggle-snap-guides")
     (tr "shortcuts.toggle-snap-ruler-guide")
     (tr "shortcuts.toggle-textpalette")

frontend/src/app/main/ui/workspace/tokens/context_menu.cljs

@@ -321,8 +321,9 @@
          children]])]))
 
 (mf/defc menu-tree
-  [{:keys [selected-shapes submenu-offset submenu-direction type] :as context-data}]
-  (let [entries (if (seq selected-shapes)
+  [{:keys [selected-shapes submenu-offset submenu-direction type errors] :as context-data}]
+  (let [entries (if (and (not (some? errors))
+                         (seq selected-shapes))
                   (if (some? type)
                     (submenu-actions-selection-actions context-data)
                     (selection-actions context-data))
@@ -343,7 +344,7 @@
                  :selected? selected?}])])))
 
 (mf/defc token-context-menu-tree
-  [{:keys [width direction] :as mdata}]
+  [{:keys [width direction errors] :as mdata}]
   (let [objects (mf/deref refs/workspace-page-objects)
         selected (mf/deref refs/selected-shapes)
         selected-shapes (into [] (keep (d/getf objects)) selected)
@@ -354,6 +355,7 @@
      [:& menu-tree {:submenu-offset width
                     :submenu-direction direction
                     :token token
+                    :errors errors
                     :selected-token-set-path selected-token-set-path
                     :selected-shapes selected-shapes}]]))
 

frontend/src/app/main/ui/workspace/tokens/sidebar.cljs

@@ -83,6 +83,7 @@
                            (st/emit! (dt/show-token-context-menu
                                       {:type :token
                                        :position (dom/get-client-position event)
+                                       :errors (:errors token)
                                        :token-name (:name token)}))))
 
         on-toggle-open-click (mf/use-fn
@@ -121,6 +122,7 @@
        [:> icon-button* {:on-click on-popover-open-click
                          :variant "ghost"
                          :icon "add"
+                        ;;  TODO: This needs translation
                          :aria-label (str "Add token: " title)}]]
       (when open?
         [:& cmm/asset-section-block {:role :content}

frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs

@@ -174,6 +174,7 @@
   [err]
   (let [[header-1 header-2 & errors] (str/split err "\n")]
     (when (and
+          ;; TODO: This needs translations
            (= header-1 "Error: ")
            (= header-2 "Reference Errors:"))
       errors)))
@@ -206,10 +207,11 @@
 
 ;; === Errors
 
-(defn humanize-errors [{:keys [errors value] :as _token}]
+(defn humanize-errors [{:keys [errors] :as token}]
   (->> (map (fn [err]
-              (case err
-                :error.style-dictionary/missing-reference (str "Could not resolve reference token with the name: " value)
+              (case (:error/code err)
+                ;; TODO: This needs translations
+                :error.style-dictionary/missing-reference (str "Could not resolve reference token with the name: " (:error/value err))
                 nil))
             errors)
        (str/join "\n")))

frontend/src/app/main/ui/workspace/tokens/token_pill.cljs

@@ -1,12 +1,14 @@
 (ns app.main.ui.workspace.tokens.token-pill
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.files.helpers :as cfh]
    [app.common.types.tokens-lib :as ctob]
    [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]]
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
@@ -16,11 +18,18 @@
   [{:keys [on-click token theme-token full-applied on-context-menu half-applied]}]
   (let [{:keys [name value resolved-value errors]} token
         errors? (or (nil? theme-token) (and (seq errors) (seq (:errors theme-token))))
-
         color (when (seq (ctob/find-token-value-references value))
                 (wtt/resolved-value-hex theme-token))
-
+        contains-path? (str/includes? name ".")
+        splitted-name (cfh/split-string-half name)
         color (or color (wtt/resolved-value-hex token))
+        on-click
+        (mf/use-callback
+         (mf/deps errors? on-click)
+         (fn [event]
+           (dom/stop-propagation event)
+           (when (and (not (seq errors)) on-click)
+             (on-click event))))
 
         token-status-id (cond
                           half-applied
@@ -35,25 +44,34 @@
                                    :token-pill-invalid-applied (and full-applied errors?))
               :type "button"
               :title (cond
-                       errors? (sd/humanize-errors token)
+                       errors? (if (nil? theme-token)
+                                 (tr "workspace.token-set.not-active")
+                                 (sd/humanize-errors token))
                        :else (->> [(str "Token: " name)
                                    (tr "workspace.token.original-value" value)
                                    (tr "workspace.token.resolved-value" resolved-value)]
                                   (str/join "\n")))
               :on-click on-click
-              :on-context-menu on-context-menu
-              :disabled errors?}
+              :on-context-menu on-context-menu}
      (cond
-       color
-       [:& color-bullet {:color color
-                         :mini true}]
        errors?
        [:> icon*
         {:icon-id "broken-link"
          :class (stl/css :token-pill-icon)}]
-
+       color
+       [:& color-bullet {:color color
+                         :mini true}]
        :else
        [:> token-status-icon*
         {:icon-id token-status-id
          :class (stl/css :token-pill-icon)}])
-     name]))
+     (if contains-path?
+       [:span {:class (stl/css :divided-name-wrapper)
+               :aria-label name}
+        [:span {:class (stl/css :first-name-wrapper)}
+         (first splitted-name)]
+        [:span {:class (stl/css :last-name-wrapper)}
+         (last splitted-name)]]
+       [:span {:class (stl/css :name-wrapper)
+               :aria-label name}
+        name])]))

frontend/src/app/main/ui/workspace/tokens/token_pill.scss

@@ -53,6 +53,32 @@
     --token-pill-accent: var(--color-background-tertiary);
   }
 }
+.name-wrapper {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.divided-name-wrapper {
+  height: $s-16;
+}
+
+.first-name-wrapper {
+  display: inline-block;
+  max-width: 50%;
+  overflow: hidden;
+  white-space: pre;
+  text-overflow: ellipsis;
+}
+
+.last-name-wrapper {
+  display: inline-block;
+  max-width: 50%;
+  overflow: hidden;
+  white-space: pre;
+  direction: rtl;
+}
 
 .token-pill-applied {
   --token-pill-background: var(--color-token-background);
@@ -84,8 +110,7 @@
   }
 }
 
-.token-pill-invalid,
-.token-pill-invalid-applied {
+.token-pill-invalid {
   --token-pill-background: var(--color-background-tertiary);
   --token-pill-foreground: var(--color-foreground-error);
   --token-pill-border: var(--color-background-tertiary);
@@ -101,6 +126,15 @@
   }
 }
 
+.token-pill-invalid-applied {
+  --token-pill-border: var(--color-foreground-error);
+  &:hover,
+  &:focus-visible,
+  &:disabled {
+    --token-pill-border: var(--color-foreground-error);
+  }
+}
+
 .token-pill-icon {
   color: var(--token-pill-accent);
 }