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

This commit is contained in:
Andrey Antukh 2025-01-15 16:18:05 +01:00 committed by GitHub
commit b81f4e913f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
34 changed files with 152 additions and 137 deletions

View file

@ -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")

View file

@ -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}]]))

View file

@ -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}

View file

@ -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")))

View file

@ -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])]))

View file

@ -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);
}