From b1df0ac194bf36ed57a1bbc729ec2a2a4a6911eb Mon Sep 17 00:00:00 2001 From: Xavier Julian Date: Wed, 26 Mar 2025 14:02:50 +0100 Subject: [PATCH] :sparkles: Add a default 256 maxlength value to all input fields --- frontend/src/app/main/constants.cljs | 2 ++ frontend/src/app/main/ui/ds/controls/combobox.cljs | 5 ++++- frontend/src/app/main/ui/ds/controls/input.cljs | 5 ++++- .../workspace/tokens/components/controls/input_tokens.cljs | 6 +++++- .../src/app/main/ui/workspace/tokens/modals/themes.cljs | 1 + frontend/src/app/main/ui/workspace/tokens/sets.cljs | 1 + frontend/src/app/main/ui/workspace/tokens/sidebar.scss | 5 +++++ 7 files changed, 22 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/main/constants.cljs b/frontend/src/app/main/constants.cljs index 31bd4dfd6..e9d3137c4 100644 --- a/frontend/src/app/main/constants.cljs +++ b/frontend/src/app/main/constants.cljs @@ -192,3 +192,5 @@ :height 720}]) (def zoom-half-pixel-precision 8) + +(def max-input-length 255) diff --git a/frontend/src/app/main/ui/ds/controls/combobox.cljs b/frontend/src/app/main/ui/ds/controls/combobox.cljs index 8e3ceba5c..04a16ace0 100644 --- a/frontend/src/app/main/ui/ds/controls/combobox.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/ds/controls/input.cljs b/frontend/src/app/main/ui/ds/controls/input.cljs index 266f15ef3..93674b4da 100644 --- a/frontend/src/app/main/ui/ds/controls/input.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens.cljs b/frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens.cljs index ad4e1ebce..3746e3217 100644 --- a/frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs index d07a99281..1f4c0799a 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs +++ b/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) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 7050e47a0..44785ed57 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/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}])) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss index 70d9584a6..8c287aee7 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss +++ b/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 {