Merge remote-tracking branch 'origin/staging' into develop

CHANGES.md

@@ -81,6 +81,7 @@ on-premises instances** that want to keep up to date.
 - Fix shortcut error pressing G+W from the View Mode [Taiga #11061](https://tree.taiga.io/project/penpot/issue/11061)
 - Fix entering long project name [Taiga #11417](https://tree.taiga.io/project/penpot/issue/11417)
 - Fix slow color picker [Taiga #11019](https://tree.taiga.io/project/penpot/issue/11019)
+- Fix tooltip position after click [Taiga #11405](https://tree.taiga.io/project/penpot/issue/11405)
 
 ## 2.7.2
 

common/src/app/common/types/tokens_lib.cljc

@@ -1298,7 +1298,8 @@ Will return a value that matches this schema:
   "Searches through decoded token file and returns:
    - `:json-format/legacy` when first node satisfies `legacy-node?` predicate
    - `:json-format/dtcg` when first node satisfies `dtcg-node?` predicate
-   - `nil` if neither combination is found"
+   - If neither combination is found, return dtcg format by default (we assume that
+     the file does not contain any token, so the format is irrelevan)."
   ([decoded-json]
    (get-json-format decoded-json legacy-node? dtcg-node?))
   ([decoded-json legacy-node? dtcg-node?]
@@ -1316,9 +1317,10 @@ Will return a value that matches this schema:
                   (check-node node)
                   (when (branch? node)
                     (mapcat walk (children node))))))]
-     (->> (walk decoded-json)
+     (d/nilv (->> (walk decoded-json)
                   (filter some?)
-          first)))) ;; TODO: throw error if format cannot be determined
+                  first)
+             :json-format/dtcg))))
 
 (defn- legacy-json->dtcg-json
   "Converts a decoded json file in legacy format into DTCG format."
@@ -1377,9 +1379,17 @@ Will return a value that matches this schema:
   [set-name decoded-json-tokens]
   (assert (map? decoded-json-tokens) "expected a plain clojure map for `decoded-json-tokens`")
   (assert (= (get-json-format decoded-json-tokens) :json-format/dtcg) "expected a dtcg format for `decoded-json-tokens`")
+
+  (let [set-name (normalize-set-name set-name)
+        tokens   (flatten-nested-tokens-json decoded-json-tokens "")]
+
+    (when (empty? tokens)
+      (throw (ex-info "the file doesn't contain any tokens"
+                      {:error/code :error.import/invalid-json-data})))
+
     (-> (make-tokens-lib)
-      (add-set (make-token-set :name (normalize-set-name set-name)
+        (add-set (make-token-set :name set-name
-                               :tokens (flatten-nested-tokens-json decoded-json-tokens "")))))
+                                 :tokens tokens)))))
 
 (defn- parse-single-set-legacy-json
   "Parse a decoded json file with a single set of tokens in legacy format into a TokensLib."
@@ -1471,6 +1481,10 @@ Will return a value that matches this schema:
                 library
                 active-theme-names)]
 
+    (when (and (empty? sets) (empty? themes))
+      (throw (ex-info "the file doesn't contain any tokens"
+                      {:error/code :error.import/invalid-json-data})))
+
     library))
 
 (defn- parse-multi-set-legacy-json

frontend/src/app/main/ui/ds/tooltip/tooltip.cljs

@@ -36,8 +36,6 @@
 
 (defn- hide-popover
   [node]
-  (dom/unset-css-property! node "block-size")
-  (dom/unset-css-property! node "display")
   (.hidePopover ^js node))
 
 (defn- calculate-placement-bounding-rect
@@ -159,11 +157,9 @@
   (let [tooltip-brect (dom/get-bounding-rect tooltip)
         window-size   (dom/get-window-size)]
     (when-let [[placement placement-rect] (find-matching-placement placement tooltip-brect origin-brect window-size offset)]
-
       (let [height (if (or (= placement "right") (= placement "left"))
                      (- (:height placement-rect) arrow-height)
                      (:height placement-rect))]
-        (dom/set-css-property! tooltip "display" "grid")
         (dom/set-css-property! tooltip "block-size" (dm/str height "px"))
         (dom/set-css-property! tooltip "inset-block-start" (dm/str (:top placement-rect) "px"))
         (dom/set-css-property! tooltip "inset-inline-start" (dm/str (:left placement-rect) "px")))
@@ -212,8 +208,9 @@
 
                    update-position
                    (fn []
-                     (let [placement (update-tooltip-position tooltip placement origin-brect offset)]
+                     (let [new-placement (update-tooltip-position tooltip placement origin-brect offset)]
-                       (reset! placement* placement)))]
+                       (when (not= new-placement placement)
+                         (reset! placement* new-placement))))]
 
                (add-schedule schedule-ref delay update-position)))))
 
@@ -234,7 +231,7 @@
 
         tooltip-class
         (stl/css-case
-         :tooltip true
+         :tooltip-content-wrapper true
          :tooltip-top (identical? placement "top")
          :tooltip-bottom (identical? placement "bottom")
          :tooltip-left (identical? placement "left")
@@ -260,10 +257,11 @@
 
     [:> :div props
      children
-     [:div {:class [class tooltip-class]
+     [:div {:class [class (stl/css :tooltip)]
             :id id
             :popover "auto"
             :role "tooltip"}
+      [:div {:class tooltip-class}
        [:div {:class (stl/css :tooltip-content)} content]
        [:div {:class (stl/css :tooltip-arrow)
-             :id "tooltip-arrow"}]]]))
+              :id "tooltip-arrow"}]]]]))

frontend/src/app/main/ui/ds/tooltip/tooltip.scss

@@ -19,6 +19,12 @@ $arrow-side: 12px;
   block-size: fit-content;
 }
 
+.tooltip-content-wrapper {
+  display: grid;
+  inline-size: fit-content;
+  block-size: fit-content;
+}
+
 .tooltip-arrow {
   background-color: var(--color-background-primary);
   border-radius: var(--sp-xs);

frontend/src/app/plugins/api.cljs

@@ -44,6 +44,7 @@
    [app.plugins.viewport :as viewport]
    [app.util.code-gen :as cg]
    [app.util.object :as obj]
+   [app.util.theme :as theme]
    [beicon.v2.core :as rx]
    [cuerdas.core :as str]))
 
@@ -216,9 +217,15 @@
     :getTheme
     (fn []
       (let [theme (get-in @st/state [:profile :theme])]
-        (if (or (not theme) (= theme "default"))
+        (cond
+          (or (not theme) (= theme "system"))
+          (theme/get-system-theme)
+
+          (= theme "default")
           "dark"
-          (get-in @st/state [:profile :theme]))))
+
+          :else
+          theme)))
 
     :getCurrentUser
     (fn []

frontend/src/app/plugins/events.cljs

@@ -14,6 +14,7 @@
    [app.plugins.parser :as parser]
    [app.plugins.shape :as shape]
    [app.util.object :as obj]
+   [app.util.theme :as theme]
    [goog.functions :as gf]))
 
 (defmulti handle-state-change (fn [type _] type))
@@ -50,10 +51,23 @@
       ::not-changed
       (apply array (map str new-selection)))))
 
+(defn- get-theme
+  [state]
+  (let [theme (get-in state [:profile :theme])]
+    (cond
+      (or (not theme) (= theme "system"))
+      (theme/get-system-theme)
+
+      (= theme "default")
+      "dark"
+
+      :else
+      theme)))
+
 (defmethod handle-state-change "themechange"
   [_ _ old-val new-val _]
-  (let [old-theme (get-in old-val [:profile :theme])
+  (let [old-theme (get-theme old-val)
-        new-theme (get-in new-val [:profile :theme])]
+        new-theme (get-theme new-val)]
     (if (identical? old-theme new-theme)
       ::not-changed
       (if (= new-theme "default")