Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-23 15:26:29 -05:00
Code Issues Activity

✨ Add placeholder to themes modal

Browse source
This commit is contained in:
Xavier Julian 2025-02-18 12:50:27 +01:00 • committed by Xaviju
parent adbe29e3d1
commit 0530c57d31
7 changed files with 44 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -60,6 +60,7 @@
[:id {:optional true} :string]
[:options [:vector schema:combobox-option]]
[:class {:optional true} :string]
[:placeholder {:optional true} :string]
[:disabled {:optional true} :boolean]
[:default-selected {:optional true} :string]
[:on-change {:optional true} fn?]
@ -68,7 +69,7 @@
(mf/defc combobox*
{::mf/props :obj
::mf/schema schema:combobox}
[{:keys [id options class disabled has-error default-selected on-change] :rest props}]
[{:keys [id options class placeholder disabled has-error default-selected on-change] :rest props}]
(let [open* (mf/use-state false)
open (deref open*)
@ -241,6 +242,7 @@
:disabled disabled
:value selected
:on-change on-input-change
:placeholder placeholder
:on-key-down on-key-down}]]
(when (d/not-empty? options)

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

@ -70,6 +70,11 @@
inline-size: 100%;
padding-inline-start: var(--sp-xxs);
color: var(--combobox-fg-color);
&::placeholder {
color: var(--input-placeholder-color);
text-overflow: ellipsis;
}
}
.header-icon {

1
frontend/src/app/main/ui/ds/controls/combobox.stories.jsx
View file

@ -23,6 +23,7 @@ export default {
args: {
disabled: false,
hasError: false,
placeholder: "Select a month",
options: [
{ id: "January", label: "January" },
{ id: "February", label: "February" },

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

@ -181,8 +181,11 @@
[:div {:class (stl/css :edit-theme-inputs-wrapper)}
[:div {:class (stl/css :group-input-wrapper)}
[:label {:for "groups-dropdown" :class (stl/css :label)} (tr "workspace.token.label.group")]
[:label {:for "groups-dropdown" :class (stl/css :label)}
[:span (tr "workspace.token.label.group")]
[:span {:class (stl/css :label-optional)} (dm/str "(" "" (tr "workspace.token.label.group-optional") "" ")")]]
[:> combobox* {:id (dm/str "groups-dropdown")
:placeholder (tr "workspace.token.label.group-placeholder")
:default-selected (:group theme)
:options (clj->js options)
:on-change on-update-group}]]
@ -191,6 +194,7 @@
[:> input-tokens* {:id "theme-input"
:label (tr "workspace.token.label.theme")
:type "text"
:placeholder (tr "workspace.token.label.theme-placeholder")
:on-change on-update-name
:value (mf/ref-val theme-name-ref)
:auto-focus true}]]]))

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

@ -202,3 +202,8 @@
@include textEllipsis;
color: var(--color-foreground-primary);
}
.label-optional {
margin-inline-start: 1ex;
color: var(--color-foreground-secondary);
}

12
frontend/translations/en.po
View file

@ -6556,10 +6556,22 @@ msgstr "Add set to this group"
msgid "workspace.token.label.group"
msgstr "Group"
#: src/app/main/ui/workspace/tokens/modals/themes.cljs:179
msgid "workspace.token.label.group-optional"
msgstr "Optional"
#: src/app/main/ui/workspace/tokens/modals/themes.cljs:191
msgid "workspace.token.label.group-placeholder"
msgstr "Add group (i.e. Mode)"
#: src/app/main/ui/workspace/tokens/modals/themes.cljs:187
msgid "workspace.token.label.theme"
msgstr "Theme"
#: src/app/main/ui/workspace/tokens/modals/themes.cljs:200
msgid "workspace.token.label.theme-placeholder"
msgstr "Add a theme (i.e. Light)"
#: src/app/main/ui/workspace/tokens/modals/themes.cljs:56
msgid "workspace.token.new-theme"
msgstr "New theme"

13
frontend/translations/es.po
View file

@ -6567,10 +6567,23 @@ msgstr "La agrupación de sets aun no está soportada."
msgid "workspace.token.label.group"
msgstr "Grupo"
#: src/app/main/ui/workspace/tokens/modals/themes.cljs:179
msgid "workspace.token.label.group-optional"
msgstr "Opcional"
#: src/app/main/ui/workspace/tokens/modals/themes.cljs:191
msgid "workspace.token.label.group-placeholder"
msgstr "Añade un grupo (p. ej. Modo)"
#: src/app/main/ui/workspace/tokens/modals/themes.cljs:187
msgid "workspace.token.label.theme"
msgstr "Tema"
#: src/app/main/ui/workspace/tokens/modals/themes.cljs:200
msgid "workspace.token.label.theme-placeholder"
msgstr "Añade un Tema (p. ej. Claro)"
#: src/app/main/ui/workspace/tokens/modals/themes.cljs:56
msgid "workspace.token.new-theme"
msgstr "Nuevo tema"