Add dropdown button

frontend/src/app/main/refs.cljs

@@ -244,6 +244,9 @@
   [id]
   (l/derived #(wtts/get-workspace-theme id %) st/state))
 
+(def workspace-token-theme-groups
+  (l/derived wtts/get-workspace-theme-groups st/state))
+
 (def workspace-active-theme-ids
   (l/derived wtts/get-active-theme-ids st/state))
 

frontend/src/app/main/ui/workspace/tokens/common.cljs

@@ -34,7 +34,7 @@
 
 (mf/defc labeled-input
   {::mf/wrap-props false}
-  [{:keys [label input-props auto-complete? error?]}]
+  [{:keys [label input-props auto-complete? error? icon render-right]}]
   (let [input-props (cond-> input-props
                       :always camel-keys
                       ;; Disable auto-complete on form fields for proprietary password managers
@@ -45,4 +45,6 @@
     [:label {:class (stl/css-case :labeled-input true
                                   :labeled-input-error error?)}
      [:span {:class (stl/css :label)} label]
-     [:& :input input-props]]))
+     [:& :input input-props]
+     (when render-right
+       [:& render-right])]))

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

@@ -108,7 +108,7 @@
        "Create theme"]]]))
 
 (mf/defc edit-theme
-  [{:keys [token-sets theme on-back on-submit] :as props}]
+  [{:keys [token-sets theme theme-groups on-back on-submit]}]
   (let [edit? (some? (:id theme))
         theme-state (mf/use-state {:token-sets token-sets
                                    :theme theme})
@@ -153,7 +153,13 @@
       [:div {:class (stl/css :edit-theme-inputs-wrapper)}
        [:& labeled-input {:label "Group"
                           :input-props {:default-value (:group theme)
-                                        :on-change on-update-group}}]
+                                        :on-change on-update-group}
+                          :render-right (mf/fnc []
+                                          [:button {:class (stl/css :group-drop-down-button)
+                                                    :type "button"
+                                                    :on-click (fn [e]
+                                                                (dom/stop-propagation e))}
+                                           i/arrow])}]
        [:& labeled-input {:label "Theme"
                           :input-props {:default-value (:name theme)
                                         :on-change on-update-name}}]]
@@ -189,10 +195,12 @@
   [{:keys [state set-state]}]
   (let [{:keys [theme-id]} @state
         token-sets (mf/deref refs/workspace-ordered-token-sets)
-        theme (mf/deref (refs/workspace-token-theme theme-id))]
+        theme (mf/deref (refs/workspace-token-theme theme-id))
+        theme-groups (mf/deref refs/workspace-token-theme-groups)]
     [:& edit-theme
      {:token-sets token-sets
       :theme theme
+      :theme-groups theme-groups
       :on-back #(set-state (constantly {:type :themes-overview}))
       :on-submit #(st/emit! (wdt/update-token-theme %))}]))
 

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

@@ -211,3 +211,18 @@ hr {
     }
   }
 }
+
+.group-drop-down-button {
+  @include buttonStyle;
+  width: $s-24;
+  height: 100%;
+
+  padding: 0;
+  margin: 0 $s-6;
+
+  svg {
+    @extend .button-icon-small;
+    transform: rotate(90deg);
+    fill: var(--icon-foreground);
+  }
+}

frontend/src/app/main/ui/workspace/tokens/token_set.cljs

@@ -18,6 +18,14 @@
 (defn get-workspace-themes-index [state]
   (get-in state [:workspace-data :token-themes-index] {}))
 
+(defn get-workspace-theme-groups [state]
+  (reduce
+   (fn [acc {:keys [group]}]
+     (if group
+       (conj acc group)
+       acc))
+   #{} (vals (get-workspace-themes-index state))))
+
 (defn get-workspace-token-set-groups [state]
   (get-in state [:workspace-data :token-set-groups]))