From 9f6fc030b14ad02c86d830b59a269983128953ce Mon Sep 17 00:00:00 2001 From: Xavier Julian Date: Wed, 22 Apr 2026 14:10:38 +0200 Subject: [PATCH] :tada: Display autocomplete combobox on token creation --- common/src/app/common/types/token.cljc | 9 ++- .../management/forms/controls/combobox.cljs | 4 ++ .../management/forms/form_container.cljs | 21 ++++-- .../tokens/management/forms/generic_form.cljs | 1 + .../tokens/management/forms/modals.cljs | 72 +++++++++---------- .../tokens/management/token_tree.scss | 1 + 6 files changed, 66 insertions(+), 42 deletions(-) diff --git a/common/src/app/common/types/token.cljc b/common/src/app/common/types/token.cljc index 1ece712296..31657983d3 100644 --- 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 diff --git 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 index 137551c260..37dd3c5257 100644 --- 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 diff --git 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 index 0e6d55df03..9e122543ca 100644 --- 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]))) \ No newline at end of file + [:> generic/form* props]))) diff --git 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 index a4cc813bbc..28d3e90aff 100644 --- 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)) diff --git a/frontend/src/app/main/ui/workspace/tokens/management/forms/modals.cljs b/frontend/src/app/main/ui/workspace/tokens/management/forms/modals.cljs index 9356d45725..6d0ae946da 100644 --- 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]) diff --git a/frontend/src/app/main/ui/workspace/tokens/management/token_tree.scss b/frontend/src/app/main/ui/workspace/tokens/management/token_tree.scss index 9edd7caf40..b09a151e32 100644 --- 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));