Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-09 21:41:23 -05:00
Code Issues Activity

✨ Add a default 256 maxlength value to all input fields

Browse source
This commit is contained in:
Xavier Julian 2025-03-26 14:02:50 +01:00 • committed by Xaviju
parent c1853a71a9
commit b1df0ac194
7 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/constants.cljs
View file

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

5
frontend/src/app/main/ui/ds/controls/combobox.cljs
View file

@ -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

5
frontend/src/app/main/ui/ds/controls/input.cljs
View file

@ -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

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

@ -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

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

@ -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)

1
frontend/src/app/main/ui/workspace/tokens/sets.cljs
View file

@ -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}]))

5
frontend/src/app/main/ui/workspace/tokens/sidebar.scss
View file

@ -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 {