✨ Add a default 256 maxlength value to all input fields

frontend/src/app/main/constants.cljs

@@ -192,3 +192,5 @@
     :height 720}])
 
 (def zoom-half-pixel-precision 8)
+
+(def max-input-length 255)

frontend/src/app/main/ui/ds/controls/combobox.cljs

@@ -10,6 +10,7 @@
    [app.main.style :as stl])
   (:require
    [app.common.data :as d]
+   [app.main.constants :refer [max-input-length]]
    [app.main.ui.ds.controls.shared.options-dropdown :refer [options-dropdown*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list] :as i]
    [app.util.array :as array]
@@ -60,6 +61,7 @@
    [:id {:optional true} :string]
    [:options [:vector schema:combobox-option]]
    [:class {:optional true} :string]
+   [:max-length {:optional true} :int]
    [:placeholder {:optional true} :string]
    [:disabled {:optional true} :boolean]
    [:default-selected {:optional true} :string]
@@ -69,7 +71,7 @@
 (mf/defc combobox*
   {::mf/props :obj
    ::mf/schema schema:combobox}
-  [{:keys [id options class placeholder disabled has-error default-selected on-change] :rest props}]
+  [{:keys [id options class placeholder disabled has-error default-selected on-change max-length] :rest props}]
   (let [open* (mf/use-state false)
         open  (deref open*)
 
@@ -240,6 +242,7 @@
                 :aria-activedescendant focused
                 :class (stl/css :input)
                 :data-testid "combobox-input"
+                :maxlength (d/nilv max-length max-input-length)
                 :disabled disabled
                 :value selected
                 :on-change on-input-change

frontend/src/app/main/ui/ds/controls/input.cljs

@@ -10,6 +10,7 @@
    [app.main.style :as stl])
   (:require
    [app.common.data :as d]
+   [app.main.constants :refer [max-input-length]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list]]
    [app.util.dom :as dom]
    [rumext.v2 :as mf]))
@@ -20,13 +21,14 @@
    [:icon {:optional true}
     [:and :string [:fn #(contains? icon-list %)]]]
    [:type {:optional true} :string]
+   [:max-length {:optional true} :int]
    [:variant {:optional true} :string]])
 
 (mf/defc input*
   {::mf/props :obj
    ::mf/forward-ref true
    ::mf/schema schema:input}
-  [{:keys [icon class type variant] :rest props} ref]
+  [{:keys [icon class type max-length variant] :rest props} ref]
   (let [ref   (or ref (mf/use-ref))
         type  (d/nilv type "text")
         props (mf/spread-props props
@@ -34,6 +36,7 @@
                                         :input true
                                         :input-with-icon (some? icon))
                                 :ref ref
+                                :maxlength (d/nilv max-length (str max-input-length))
                                 :type type})
 
         on-icon-click

frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens.cljs

@@ -7,7 +7,9 @@
 (ns app.main.ui.workspace.tokens.components.controls.input-tokens
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.main.constants :refer [max-input-length]]
    [app.main.ui.ds.controls.input :refer [input*]]
    [rumext.v2 :as mf]))
 
@@ -18,6 +20,7 @@
    [:placeholder {:optional true} :string]
    [:default-value {:optional true} [:maybe :string]]
    [:class {:optional true} :string]
+   [:max-length {:optional true} :int]
    [:error {:optional true} :boolean]
    [:value {:optional true} :string]])
 
@@ -25,12 +28,13 @@
   {::mf/props :obj
    ::mf/forward-ref true
    ::mf/schema schema::input-tokens}
-  [{:keys [class label id error value children] :rest props} ref]
+  [{:keys [class label id max-length error value children] :rest props} ref]
   (let [ref   (or ref (mf/use-ref))
         props (mf/spread-props props {:id id
                                       :type "text"
                                       :class (stl/css :input)
                                       :aria-invalid error
+                                      :max-length (d/nilv max-length max-input-length)
                                       :value value
                                       :ref ref})]
     [:div {:class (dm/str class " " (stl/css-case :wrapper true

frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs

@@ -205,6 +205,7 @@
       [:> input-tokens* {:id "theme-input"
                          :label (tr "workspace.token.label.theme")
                          :type "text"
+                         :max-length 256
                          :placeholder (tr "workspace.token.label.theme-placeholder")
                          :on-change on-update-name
                          :value (mf/ref-val theme-name-ref)

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

@@ -94,6 +94,7 @@
       :type "text"
       :on-blur on-submit
       :on-key-down on-key-down
+      :maxlength "256"
       :auto-focus true
       :placeholder (tr "workspace.token.set-edit-placeholder")
       :default-value default-value}]))

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

@@ -44,6 +44,11 @@
   margin-bottom: $s-8;
   padding-left: $s-8;
   color: var(--title-foreground-color);
+  word-break: break-word;
+}
+
+.sets-header {
+  margin-block-start: $s-8;
 }
 
 .themes-wrapper {