🎉 Display autocomplete combobox on token creation

2026-04-25 11:18:36 +00:00 · 2026-04-22 14:10:38 +02:00 · 2026-04-22 14:10:38 +02:00 · 9f6fc030b1
commit 9f6fc030b1
parent a3c330d6e7
6 changed files with 66 additions and 42 deletions
--- a/common/src/app/common/types/token.cljc
+++ b/common/src/app/common/types/token.cljc
@ -554,10 +554,17 @@
   :opacity            [:opacity]
   :stroke-width       [:stroke-width :dimensions]
   :font-size          [:font-size]
+   :font-weight        [:font-weight]
+   :text-decoration    [:text-decoration]
+   :text-case          [:text-case]
   :letter-spacing     [:letter-spacing]
+   :dimensions         [:dimensions]
   :fill               [:color]
   :stroke-color       [:color]
-   :typography         [:typography]})
+   :typography         [:typography]
+   :number             [:number]
+   :sizing             [:sizing :dimensions]
+   :spacing            [:spacing :dimensions]})

 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; HELPERS for tokens application
--- a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/combobox.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/combobox.cljs
@ -29,6 +29,7 @@
   [app.util.i18n :refer [tr]]
   [app.util.object :as obj]
   [beicon.v2.core :as rx]
+   [cljs.pprint :as pp]
   [cuerdas.core :as str]
   [rumext.v2 :as mf]))

@ -105,6 +106,9 @@
        (mf/with-memo [raw-tokens-by-type token-type]
          (csu/filter-tokens-for-input raw-tokens-by-type token-type))

+        _ (pp/pprint raw-tokens-by-type)
+        _ (pp/pprint filtered-tokens-by-type)
+
        visible-options
        (mf/with-memo [filtered-tokens-by-type token]
          (if token
--- a/frontend/src/app/main/ui/workspace/tokens/management/forms/form_container.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/form_container.cljs
@ -38,10 +38,21 @@
        props
        (mf/spread-props props {:token-type token-type
                                :tokens-tree-in-selected-set tokens-tree-in-selected-set
-                                :token token})
-        text-case-props (mf/spread-props props {:input-value-placeholder (tr "workspace.tokens.text-case-value-enter")})
-        text-decoration-props (mf/spread-props props {:input-value-placeholder (tr "workspace.tokens.text-decoration-value-enter")})
-        font-weight-props (mf/spread-props props {:input-value-placeholder (tr "workspace.tokens.font-weight-value-enter")})
+                                :token token
+                                :input-component token.controls/value-combobox*})
+        text-case-props (if (contains? cf/flags :token-combobox)
+                          (mf/spread-props props {:input-value-placeholder (tr "workspace.tokens.text-case-value-enter")
+                                                  :input-component token.controls/value-combobox*})
+                          (mf/spread-props props {:input-value-placeholder (tr "workspace.tokens.text-case-value-enter")}))
+        text-decoration-props (if (contains? cf/flags :token-combobox)
+                                (mf/spread-props props {:input-value-placeholder (tr "workspace.tokens.text-decoration-value-enter")
+                                                        :input-component token.controls/value-combobox*})
+                                (mf/spread-props props {:input-value-placeholder (tr "workspace.tokens.text-decoration-value-enter")}))
+
+        font-weight-props (if (contains? cf/flags :token-combobox)
+                            (mf/spread-props props {:input-component token.controls/value-combobox*})
+                            props)
+
        border-radius-props (if (contains? cf/flags :token-combobox)
                              (mf/spread-props props {:input-component token.controls/value-combobox*})
                              props)]
@ -55,4 +66,4 @@
      :text-decoration [:> generic/form* text-decoration-props]
      :font-weight [:> generic/form* font-weight-props]
      :border-radius [:> generic/form* border-radius-props]
-      [:> generic/form* props])))
+      [:> generic/form* props])))
--- a/frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs
@ -69,6 +69,7 @@
  (let [make-schema     (or make-schema #(-> (cfo/make-token-schema % token-type)
                                             (sm/dissoc-key :id)))
        input-component (or input-component token.controls/input*)
+        _ (prn "Rendering generic form with input-component:" input-component)
        validate-token  (or validator default-validate-token)

        active-tab*     (mf/use-state #(if (cfo/is-reference? token) :reference :composite))
--- a/frontend/src/app/main/ui/workspace/tokens/management/forms/modals.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/modals.cljs
@ -118,27 +118,15 @@
  [properties]
  [:& token-update-create-modal properties])

-(mf/defc color-modal
-  {::mf/register modal/components
-   ::mf/register-as :tokens/color}
-  [properties]
-  [:& token-update-create-modal properties])
-
-(mf/defc stroke-width-modal
-  {::mf/register modal/components
-   ::mf/register-as :tokens/stroke-width}
-  [properties]
-  [:& token-update-create-modal properties])
-
 (mf/defc box-shadow-modal
  {::mf/register modal/components
   ::mf/register-as :tokens/shadow}
  [properties]
  [:& token-update-create-modal properties])

-(mf/defc sizing-modal
+(mf/defc color-modal
  {::mf/register modal/components
-   ::mf/register-as :tokens/sizing}
+   ::mf/register-as :tokens/color}
  [properties]
  [:& token-update-create-modal properties])

@ -148,6 +136,30 @@
  [properties]
  [:& token-update-create-modal properties])

+(mf/defc font-familiy-modal
+  {::mf/register modal/components
+   ::mf/register-as :tokens/font-family}
+  [properties]
+  [:& token-update-create-modal properties])
+
+(mf/defc font-size-modal
+  {::mf/register modal/components
+   ::mf/register-as :tokens/font-size}
+  [properties]
+  [:& token-update-create-modal properties])
+
+(mf/defc font-weight-modal
+  {::mf/register modal/components
+   ::mf/register-as :tokens/font-weight}
+  [properties]
+  [:& token-update-create-modal properties])
+
+(mf/defc letter-spacing-modal
+  {::mf/register modal/components
+   ::mf/register-as :tokens/letter-spacing}
+  [properties]
+  [:& token-update-create-modal properties])
+
 (mf/defc number-modal
  {::mf/register modal/components
   ::mf/register-as :tokens/number}
@ -172,6 +184,12 @@
  [properties]
  [:& token-update-create-modal properties])

+(mf/defc sizing-modal
+  {::mf/register modal/components
+   ::mf/register-as :tokens/sizing}
+  [properties]
+  [:& token-update-create-modal properties])
+
 (mf/defc spacing-modal
  {::mf/register modal/components
   ::mf/register-as :tokens/spacing}
@ -184,27 +202,9 @@
  [properties]
  [:& token-update-create-modal properties])

-(mf/defc typography-modal
+(mf/defc stroke-width-modal
  {::mf/register modal/components
-   ::mf/register-as :tokens/typography}
-  [properties]
-  [:& token-update-create-modal properties])
-
-(mf/defc font-size-modal
-  {::mf/register modal/components
-   ::mf/register-as :tokens/font-size}
-  [properties]
-  [:& token-update-create-modal properties])
-
-(mf/defc letter-spacing-modal
-  {::mf/register modal/components
-   ::mf/register-as :tokens/letter-spacing}
-  [properties]
-  [:& token-update-create-modal properties])
-
-(mf/defc font-familiy-modal
-  {::mf/register modal/components
-   ::mf/register-as :tokens/font-family}
+   ::mf/register-as :tokens/stroke-width}
  [properties]
  [:& token-update-create-modal properties])

@ -220,8 +220,8 @@
  [properties]
  [:& token-update-create-modal properties])

-(mf/defc font-weight-modal
+(mf/defc typography-modal
  {::mf/register modal/components
-   ::mf/register-as :tokens/font-weight}
+   ::mf/register-as :tokens/typography}
  [properties]
  [:& token-update-create-modal properties])
--- a/frontend/src/app/main/ui/workspace/tokens/management/token_tree.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/management/token_tree.scss
@ -11,6 +11,7 @@

  padding-block-end: var(--sp-s);
  display: flex;
+  gap: var(--sp-s);
  flex-wrap: wrap;
  padding-inline-start: calc(var(--node-spacing));