🐛 Fix line-height/letter-spacing inputs behaviour

CHANGES.md

@@ -33,6 +33,7 @@
 - Fix problem exporting shapes from handoff mode [Taiga #2386](https://tree.taiga.io/project/penpot/issue/2386)
 - Fix lock/hide elements in context menu when multiples shapes selected [Taiga #2340](https://tree.taiga.io/project/penpot/issue/2340)
 - Fix problem with booleans [Taiga #2356](https://tree.taiga.io/project/penpot/issue/2356)
+- Fix line-height/letter-spacing inputs behaviour [Taiga #2331](https://tree.taiga.io/project/penpot/issue/2331)
 
 ### :arrow_up: Deps updates
 ### :heart: Community contributions by (Thank you!)

common/src/app/common/path/bool.cljc

@@ -284,8 +284,7 @@
 
 (defn create-exclusion [content-a content-b]
   ;; Pick all segments
-  (let []
+  (d/concat-vec content-a content-b))
-    (d/concat-vec content-a content-b)))
 
 (defn content-bool-pair
   [bool-type content-a content-b]

frontend/src/app/main/ui/components/numeric_input.cljs

@@ -20,17 +20,26 @@
        (not (math/nan? val))
        (math/finite? val)))
 
+(defn fixed [value precision]
+  (try
+    (.toFixed value precision)
+    (catch :default _
+      (str value))))
+
 (mf/defc numeric-input
   {::mf/wrap-props false
    ::mf/forward-ref true}
   [props external-ref]
-  (let [value-str   (obj/get props "value")
+  (let [value-str    (obj/get props "value")
-        min-val-str (obj/get props "min")
+        min-val-str  (obj/get props "min")
-        max-val-str (obj/get props "max")
+        max-val-str  (obj/get props "max")
-        wrap-value? (obj/get props "data-wrap")
+        step-val-str (obj/get props "step")
-        on-change   (obj/get props "onChange")
+        wrap-value?  (obj/get props "data-wrap")
-        title       (obj/get props "title")
+        on-change    (obj/get props "onChange")
-        default-val (obj/get props "default" 0)
+        on-blur      (obj/get props "onBlur")
+        title        (obj/get props "title")
+        default-val  (obj/get props "default" 0)
+        precision    (obj/get props "precision")
 
         ;; We need a ref pointing to the input dom element, but the user
         ;; of this component may provide one (that is forwarded here).
@@ -56,6 +65,15 @@
                      (string? max-val-str)
                      (d/parse-integer max-val-str))
 
+        step-val   (cond
+                     (number? step-val-str)
+                     step-val-str
+
+                     (string? step-val-str)
+                     (d/parse-integer step-val-str)
+
+                     :else 1)
+
         parse-value
         (mf/use-callback
           (mf/deps ref min-val max-val value)
@@ -65,7 +83,10 @@
                                 (sm/expr-eval value))]
               (when (num? new-value)
                 (-> new-value
-                    (math/round)
+                    (cond-> (number? precision)
+                      (math/precision precision))
+                    (cond-> (nil? precision)
+                      (math/round))
                     (cljs.core/max us/min-safe-int)
                     (cljs.core/min us/max-safe-int)
                     (cond->
@@ -80,7 +101,9 @@
           (mf/deps ref)
           (fn [new-value]
             (let [input-node (mf/ref-val ref)]
-              (dom/set-value! input-node (str new-value)))))
+              (dom/set-value! input-node (if (some? precision)
+                                           (fixed new-value precision)
+                                           (str new-value))))))
 
         apply-value
         (mf/use-callback
@@ -97,18 +120,18 @@
            (let [current-value (parse-value)]
              (when current-value
                (let [increment (if (kbd/shift? event)
-                                 (if up? 10 -10)
+                                 (if up? (* step-val 10) (* step-val -10))
-                                 (if up? 1 -1))
+                                 (if up? step-val (- step-val)))
 
                      new-value (+ current-value increment)
                      new-value (cond
                                  (and wrap-value? (num? max-val) (num? min-val)
                                       (> new-value max-val) up?)
-                                 (-> new-value (- max-val) (+ min-val) (- 1))
+                                 (-> new-value (- max-val) (+ min-val) (- step-val))
 
                                  (and wrap-value? (num? min-val) (num? max-val)
                                       (< new-value min-val) down?)
-                                 (-> new-value (- min-val) (+ max-val) (+ 1))
+                                 (-> new-value (- min-val) (+ max-val) (+ step-val))
 
                                  (and (num? min-val) (< new-value min-val))
                                  min-val
@@ -144,12 +167,13 @@
 
         handle-blur
         (mf/use-callback
-          (mf/deps parse-value apply-value update-input)
+          (mf/deps parse-value apply-value update-input on-blur)
           (fn [_]
             (let [new-value (or (parse-value) default-val)]
               (if new-value
                 (apply-value new-value)
-                (update-input new-value)))))
+                (update-input new-value)))
+            (when on-blur (on-blur))))
 
         props (-> props
                   (obj/without ["value" "onChange"])

frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs

@@ -15,6 +15,7 @@
    [app.main.fonts :as fonts]
    [app.main.store :as st]
    [app.main.ui.components.editable-select :refer [editable-select]]
+   [app.main.ui.components.numeric-input :refer [numeric-input]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
    [app.util.dom :as dom]
@@ -350,20 +351,19 @@
         letter-spacing (or letter-spacing "0")
 
         handle-change
-        (fn [event attr]
+        (fn [value attr]
-          (let [new-spacing (dom/get-target-val event)]
+          (on-change {attr (str value)}))]
-            (on-change {attr new-spacing})))]
 
     [:div.spacing-options
      [:div.input-icon
       [:span.icon-before.tooltip.tooltip-bottom
        {:alt (tr "workspace.options.text-options.line-height")}
        i/line-height]
-      [:input.input-text
+      [:> numeric-input
-       {:type "number"
+       {:min -200
-        :step "0.1"
+        :max 200
-        :min "-200"
+        :step 0.1
-        :max "200"
+        :precision 2
         :value (attr->string line-height)
         :placeholder (tr "settings.multiple")
         :on-change #(handle-change % :line-height)
@@ -373,11 +373,11 @@
       [:span.icon-before.tooltip.tooltip-bottom
        {:alt (tr "workspace.options.text-options.letter-spacing")}
        i/letter-spacing]
-      [:input.input-text
+      [:> numeric-input
-       {:type "number"
+       {:min -200
-        :step "0.1"
+        :max 200
-        :min "-200"
+        :step 0.1
-        :max "200"
+        :precision 2
         :value (attr->string letter-spacing)
         :placeholder (tr "settings.multiple")
         :on-change #(handle-change % :letter-spacing)