3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-29 10:46:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Add slots feature to DS input component

Browse source
This commit is contained in:
Xavier Julian 2025-05-12 12:07:52 +02:00 • committed by Xaviju
parent d9f98008f4
commit 887fa6b77b
5 changed files with 27 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -36,7 +36,7 @@
{::mf/props :obj
::mf/forward-ref true
::mf/schema schema:input}
[{:keys [id class label is-optional type max-length variant hint-message hint-type children] :rest props} ref]
[{:keys [id class label is-optional type max-length variant hint-message hint-type] :rest props} ref]
(let [id (or id (mf/use-id))
variant (d/nilv variant "dense")
is-optional (d/nilv is-optional false)
@ -58,7 +58,7 @@
:has-hint has-hint))}
(when has-label
[:> label* {:for id :is-optional is-optional} label])
[:> input-field* props children]
[:> input-field* props]
(when has-hint
[:> hint-message* {:id id
:message hint-message

12
frontend/src/app/main/ui/ds/controls/utilities/input_field.cljs
View file

@ -25,13 +25,15 @@
[:hint-type {:optional true} [:maybe [:enum "hint" "error" "warning"]]]
[:type {:optional true} :string]
[:max-length {:optional true} :int]
[:variant {:optional true} [:enum "seamless" "dense" "comfortable"]]])
[:variant {:optional true} [:enum "seamless" "dense" "comfortable"]]
[:slot-start {:optional true} [:maybe some?]]
[:slot-end {:optional true} [:maybe some?]]])
(mf/defc input-field*
{::mf/props :obj
::mf/forward-ref true
::mf/schema schema:input-field}
[{:keys [id icon has-hint hint-type class type max-length variant children] :rest props} ref]
[{:keys [id icon has-hint hint-type class type max-length variant slot-start slot-end] :rest props} ref]
(let [input-ref (mf/use-ref)
type (d/nilv type "text")
variant (d/nilv variant "dense")
@ -65,8 +67,10 @@
:variant-seamless (= variant "seamless")
:variant-dense (= variant "dense")
:variant-comfortable (= variant "comfortable")))}
(when (some? slot-start)
slot-start)
(when (some? icon)
[:> icon* {:icon-id icon :class (stl/css :icon) :on-click on-icon-click}])
[:> "input" props]
(when (some? children)
[:div {:class (stl/css :input-actions)} children])]))
(when (some? slot-end)
slot-end)]))

19
frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens_value.cljs
View file

@ -11,6 +11,7 @@
[app.common.data.macros :as dm]
[app.main.ui.ds.controls.utilities.input-field :refer [input-field*]]
[app.main.ui.ds.controls.utilities.label :refer [label*]]
[app.main.ui.workspace.tokens.components.controls.input-token-color-bullet :refer [input-token-color-bullet*]]
[rumext.v2 :as mf]))
(def ^:private schema::input-tokens-value
@ -19,15 +20,25 @@
[:placeholder {:optional true} :string]
[:value {:optional true} [:maybe :string]]
[:class {:optional true} :string]
[:color {:optional true} [:maybe :string]]
[:display-colorpicker {:optional true} fn?]
[:error {:optional true} :boolean]])
(mf/defc input-tokens-value*
{::mf/props :obj
::mf/forward-ref true
::mf/schema schema::input-tokens-value}
[{:keys [class label placeholder error value children] :rest props} ref]
[{:keys [class label placeholder error value color display-colorpicker] :rest props} ref]
(let [id (mf/use-id)
input-ref (mf/use-ref)
swatch
(when color
(mf/html [:> input-token-color-bullet*
{:color color
:class (stl/css :slot-start)
:on-click display-colorpicker}]))
props (mf/spread-props props {:id id
:type "text"
:class (stl/css :input)
@ -35,11 +46,9 @@
:value (d/nilv value "")
:variant "comfortable"
:hint-type (when error "error")
:slot-start swatch
:ref (or ref input-ref)})]
[:div {:class (dm/str class " " (stl/css-case :wrapper true
:input-error error))}
[:> label* {:for id} label]
[:div {:class (stl/css :input-wrapper)}
(when (some? children)
[:div {:class (stl/css :input-swatch)} children])
[:> input-field* props]]]))
[:> input-field* props]]))

25
frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens_value.scss
View file

@ -31,28 +31,3 @@
@include textEllipsis;
color: var(--label-color);
}
.input-wrapper {
display: flex;
flex: 1;
align-items: center;
&:has(.input-swatch) {
position: relative;
& .input {
--input-text-indent: var(--sp-xxl);
}
}
}
.input-swatch {
position: absolute;
display: flex;
inset-inline-start: var(--sp-s);
z-index: 2;
}
.input {
flex: 1;
}

9
frontend/src/app/main/ui/workspace/tokens/form.cljs
View file

@ -31,7 +31,6 @@
[app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
[app.main.ui.workspace.colorpicker :as colorpicker]
[app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector*]]
[app.main.ui.workspace.tokens.components.controls.input-token-color-bullet :refer [input-token-color-bullet*]]
[app.main.ui.workspace.tokens.components.controls.input-tokens-value :refer [input-tokens-value*]]
[app.util.dom :as dom]
[app.util.functions :as uf]
@ -563,13 +562,11 @@
:label (tr "workspace.token.token-value")
:value (mf/ref-val value-ref)
:ref value-input-ref
:color color
:on-change on-update-value
:error (not (nil? (:errors token-resolve-result)))
:on-blur on-update-value}
(when color?
[:> input-token-color-bullet*
{:color color
:on-click on-display-colorpicker'}])]
:display-colorpicker on-display-colorpicker'
:on-blur on-update-value}]
(when color-ramp-open?
[:> ramp* {:color (some-> color (tinycolor/valid-color))
:on-change on-update-color}])