3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-03 03:02:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Improve design of input fields

Browse source
This commit is contained in:
alonso.torres 2023-11-30 15:58:12 +01:00
parent fa711cdd75
commit c601cca288
10 changed files with 106 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

63
frontend/src/app/main/ui/components/forms.cljs
View file

@ -27,8 +27,9 @@
(def use-form fm/use-form)
(mf/defc input
[{:keys [label help-icon disabled form hint trim children data-test on-change-value placeholder] :as props}]
[{:keys [label help-icon disabled form hint trim children data-test on-change-value placeholder show-success?] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)
input-type (get props :type "text")
input-name (get props :name)
more-classes (get props :class)
@ -65,25 +66,6 @@
on-change-value (or on-change-value (constantly nil))
klass (str more-classes " "
(dom/classnames
:focus @focus?
:valid (and touched? (not error))
:invalid (and touched? error)
:disabled disabled
:empty (and is-text? (str/empty? value))
:with-icon (not (nil? help-icon'))
:custom-input is-text?
:input-radio is-radio?
:input-checkbox is-checkbox?))
new-classes (dm/str more-classes " "
(stl/css-case
:input-wrapper true
:global/invalid (and touched? error)
:checkbox is-checkbox?
:global/disabled disabled))
swap-text-password
(fn []
(swap! type' (fn [input-type]
@ -100,9 +82,7 @@
on-blur
(fn [_]
(reset! focus? false)
(when-not (get-in @form [:touched input-name])
(swap! form assoc-in [:touched input-name] true)))
(reset! focus? false))
on-click
(fn [_]
@ -126,10 +106,19 @@
(cond-> (and value is-checkbox?) (assoc :default-checked value))
(cond-> (and touched? (:message error)) (assoc "aria-invalid" "true"
"aria-describedby" (dm/str "error-" input-name)))
(obj/clj->props))]
(obj/clj->props))
show-valid? (and show-success? touched? (not error))
show-invalid? (and touched? error)]
(if new-css-system
[:div {:class new-classes}
[:div {:class (dm/str more-classes " "
(stl/css-case
:input-wrapper true
:valid show-valid?
:invalid show-invalid?
:checkbox is-checkbox?
:disabled disabled))}
[:*
(cond
(some? label)
@ -152,7 +141,15 @@
[:span {:class (stl/css :help-icon)
:on-click (when (= "password" input-type)
swap-text-password)}
help-icon'])])]
help-icon'])
(when show-valid?
[:span {:class (stl/css :valid-icon)}
i/tick-refactor])
(when show-invalid?
[:span {:class (stl/css :invalid-icon)}
i/close-refactor])])]
(some? children)
[:label {:for (name input-name)}
@ -171,9 +168,19 @@
(string? hint)
[:div {:class (stl/css :hint)} hint])]]
;;OLD
[:div
{:class klass}
{:class (str more-classes " "
(dom/classnames
:focus @focus?
:valid (and touched? (not error))
:invalid (and touched? error)
:disabled disabled
:empty (and is-text? (str/empty? value))
:with-icon (not (nil? help-icon'))
:custom-input is-text?
:input-radio is-radio?
:input-checkbox is-checkbox?))}
[:*
[:> :input props]
(cond

60
frontend/src/app/main/ui/components/forms.scss
View file

@ -51,12 +51,31 @@
caret-color: var(--input-foreground-color-active);
}
}
&:global(.invalid) {
&.valid {
input {
border: $s-1 solid var(--input-border-color-success);
@extend .disabled-input;
&:hover,
&:focus {
border: $s-1 solid var(--input-border-color-success);
}
}
}
&.invalid {
input {
border: $s-1 solid var(--input-border-color-error);
@extend .disabled-input;
&:hover,
&:focus {
border: $s-1 solid var(--input-border-color-error);
}
}
}
&.valid .help-icon,
&.invalid .help-icon {
right: $s-40;
}
}
.input-and-icon {
@ -69,7 +88,7 @@
.help-icon {
cursor: pointer;
position: absolute;
right: $s-12;
right: $s-16;
top: calc(50% - $s-8);
svg {
@extend .button-icon-small;
@ -78,6 +97,43 @@
height: $s-16;
}
}
.invalid-icon {
width: $s-16;
height: $s-16;
background: var(--input-border-color-error);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: $s-16;
top: calc(50% - $s-8);
svg {
width: $s-12;
height: $s-12;
stroke: var(--input-background-color);
}
}
.valid-icon {
width: $s-16;
height: $s-16;
background: var(--input-border-color-success);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: $s-16;
top: calc(50% - $s-8);
svg {
width: $s-12;
height: $s-12;
fill: var(--input-border-color-success);
stroke: var(--input-background-color);
}
}
.error {
color: var(--input-border-color-error);
width: 100%;