From 333cc5996c6badfa29dc30759b5775503803926a Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 4 Feb 2025 18:47:26 +0100 Subject: [PATCH] :lipstick: Add mainly cosmetic changes to tokens pill Simplify the component logic removing duplicate token prop handling --- .../app/main/ui/workspace/tokens/sidebar.cljs | 7 +- .../app/main/ui/workspace/tokens/token.cljs | 5 ++ .../main/ui/workspace/tokens/token_pill.cljs | 90 +++++++++---------- 3 files changed, 52 insertions(+), 50 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 9c18e15cd0..3f9b5a2071 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -33,7 +33,7 @@ [app.main.ui.workspace.tokens.style-dictionary :as sd] [app.main.ui.workspace.tokens.theme-select :refer [theme-select]] [app.main.ui.workspace.tokens.token :as wtt] - [app.main.ui.workspace.tokens.token-pill :refer [token-pill]] + [app.main.ui.workspace.tokens.token-pill :refer [token-pill*]] [app.main.ui.workspace.tokens.token-types :as wtty] [app.util.dom :as dom] [app.util.i18n :refer [tr]] @@ -140,13 +140,12 @@ on-token-click (fn [e] (on-token-pill-click e token)) on-context-menu (fn [e] (on-context-menu e token))] - [:& token-pill + [:> token-pill* {:key (:name token) :token-type-props token-type-props - :token token + :token (d/nilv theme-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))) :full-applied (if multiple-selection diff --git a/frontend/src/app/main/ui/workspace/tokens/token.cljs b/frontend/src/app/main/ui/workspace/tokens/token.cljs index 97f9c7701e..dff5ebb107 100644 --- a/frontend/src/app/main/ui/workspace/tokens/token.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/token.cljs @@ -122,6 +122,11 @@ (defn color-token? [token] (= (:type token) :color)) + +;; FIXME: this should be precalculated ? +(defn is-reference? [token] + (str/includes? (:value token) "{")) + (defn color-bullet-color [token-color-value] (when-let [tc (tinycolor/valid-color token-color-value)] (if (tinycolor/alpha tc) 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 395291c856..d84baba50d 100644 --- a/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/token_pill.cljs @@ -4,7 +4,6 @@ [app.main.style :as stl]) (:require [app.common.files.helpers :as cfh] - [app.common.types.tokens-lib :as ctob] [app.main.refs :as refs] [app.main.ui.components.color-bullet :refer [color-bullet]] [app.main.ui.ds.foundations.assets.icon :refer [icon*]] @@ -94,8 +93,8 @@ (str/join ", " (map attribute-dictionary values)) "."))) grouped-values))) -(defn token-pill-tooltip - "Generates a tooltip for a given token." +(defn- generate-tooltip + "Generates a tooltip for a given 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 @@ -142,34 +141,29 @@ (let [match (second (re-find #"\{([^}]+)\}" text))] (contains? active-tokens match))) -(mf/defc token-pill +(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 active-theme-tokens]}] + [{:keys [on-click token full-applied on-context-menu half-applied selected-shapes token-type-props active-theme-tokens]}] (let [{:keys [name value errors]} token - is-reference? (str/includes? value "{") + is-reference? (wtt/is-reference? token) contains-path? (str/includes? name ".") - ;; FIXME: move to context or props can-edit? (:can-edit (deref refs/permissions)) is-viewer (not can-edit?) - ref-not-in-active-set (and is-reference? - (not (contains-reference-value? value active-theme-tokens))) + + ref-not-in-active-set + (and is-reference? + (not (contains-reference-value? value active-theme-tokens))) no-valid-value (seq errors) errors? (or ref-not-in-active-set no-valid-value) - ;; FIXME: :zap: this performs a duplicate operation for - ;; nothing, this generates a lot of garbage objects for - ;; finally not using them - color (when (seq (ctob/find-token-value-references value)) - (wtt/resolved-token-bullet-color theme-token)) - - splitted-name (cfh/split-by-last-period name) - color (or color (wtt/resolved-token-bullet-color token)) + color (when (wtt/color-token? token) + (wtt/resolved-token-bullet-color token)) on-click (mf/use-fn @@ -179,13 +173,14 @@ (when (and (not (seq errors)) on-click) (on-click event)))) - token-status-id (cond - half-applied - "token-status-partial" - full-applied - "token-status-full" - :else - "token-status-non-applied") + token-status-id + (cond + half-applied + "token-status-partial" + full-applied + "token-status-full" + :else + "token-status-non-applied") on-context-menu (mf/use-fn @@ -203,28 +198,30 @@ (when (and can-edit? (not (seq errors)) on-click) (on-click event)))) + ;; FIXME: missing deps on-hover (mf/use-fn (mf/deps selected-shapes is-viewer) (fn [event] - (let [node (dom/get-current-target event) - title (token-pill-tooltip is-viewer (first selected-shapes) - token-type-props token - half-applied no-valid-value ref-not-in-active-set)] + (let [node (dom/get-current-target event) + title (generate-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 - :token-pill-default can-edit? - :token-pill-applied (and can-edit? (or half-applied full-applied)) - :token-pill-invalid (and can-edit? errors?) - :token-pill-invalid-applied (and full-applied errors? can-edit?) - :token-pill-viewer is-viewer - :token-pill-applied-viewer (and is-viewer - (or half-applied full-applied)) - :token-pill-invalid-viewer (and is-viewer - errors?) - :token-pill-invalid-applied-viewer (and is-viewer - (and full-applied errors?))) + [:button {:class (stl/css-case + :token-pill true + :token-pill-default can-edit? + :token-pill-applied (and can-edit? (or half-applied full-applied)) + :token-pill-invalid (and can-edit? errors?) + :token-pill-invalid-applied (and full-applied errors? can-edit?) + :token-pill-viewer is-viewer + :token-pill-applied-viewer (and is-viewer + (or half-applied full-applied)) + :token-pill-invalid-viewer (and is-viewer + errors?) + :token-pill-invalid-applied-viewer (and is-viewer + (and full-applied errors?))) :type "button" :on-click on-click :on-mouse-enter on-hover @@ -234,6 +231,7 @@ [:> icon* {:icon-id "broken-link" :class (stl/css :token-pill-icon)}] + color [:& color-bullet {:color color :mini true}] @@ -241,13 +239,13 @@ [:> token-status-icon* {:icon-id token-status-id :class (stl/css :token-pill-icon)}]) + (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)]] + (let [[first-part last-part] (cfh/split-by-last-period name)] + [:span {:class (stl/css :divided-name-wrapper) + :aria-label name} + [:span {:class (stl/css :first-name-wrapper)} first-part] + [:span {:class (stl/css :last-name-wrapper)} last-part]]) [:span {:class (stl/css :name-wrapper) :aria-label name} name])]))