From 0530c57d3175708c20fa01616844ab76b28e51c4 Mon Sep 17 00:00:00 2001 From: Xavier Julian Date: Tue, 18 Feb 2025 12:50:27 +0100 Subject: [PATCH] :sparkles: Add placeholder to themes modal --- frontend/src/app/main/ui/ds/controls/combobox.cljs | 4 +++- frontend/src/app/main/ui/ds/controls/combobox.scss | 5 +++++ .../app/main/ui/ds/controls/combobox.stories.jsx | 1 + .../app/main/ui/workspace/tokens/modals/themes.cljs | 6 +++++- .../app/main/ui/workspace/tokens/modals/themes.scss | 5 +++++ frontend/translations/en.po | 12 ++++++++++++ frontend/translations/es.po | 13 +++++++++++++ 7 files changed, 44 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/main/ui/ds/controls/combobox.cljs b/frontend/src/app/main/ui/ds/controls/combobox.cljs index f66008d14..a43c1c8b7 100644 --- a/frontend/src/app/main/ui/ds/controls/combobox.cljs +++ b/frontend/src/app/main/ui/ds/controls/combobox.cljs @@ -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) diff --git a/frontend/src/app/main/ui/ds/controls/combobox.scss b/frontend/src/app/main/ui/ds/controls/combobox.scss index 1bb19bb8f..1fc660cb3 100644 --- a/frontend/src/app/main/ui/ds/controls/combobox.scss +++ b/frontend/src/app/main/ui/ds/controls/combobox.scss @@ -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 { diff --git a/frontend/src/app/main/ui/ds/controls/combobox.stories.jsx b/frontend/src/app/main/ui/ds/controls/combobox.stories.jsx index 57bd095cf..92c901305 100644 --- a/frontend/src/app/main/ui/ds/controls/combobox.stories.jsx +++ b/frontend/src/app/main/ui/ds/controls/combobox.stories.jsx @@ -23,6 +23,7 @@ export default { args: { disabled: false, hasError: false, + placeholder: "Select a month", options: [ { id: "January", label: "January" }, { id: "February", label: "February" }, 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 bfdd503fe..8a1603000 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs @@ -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}]]])) diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss b/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss index cb9f87147..668e2d053 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss +++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.scss @@ -202,3 +202,8 @@ @include textEllipsis; color: var(--color-foreground-primary); } + +.label-optional { + margin-inline-start: 1ex; + color: var(--color-foreground-secondary); +} diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 3b18194d0..706d77ce4 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -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" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index bb1891214..207cf7d91 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -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"