✨ Add placeholder to themes modal

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)

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 {

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" },

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

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);
+}

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"

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"