diff --git a/frontend/src/app/main/ui/ds/controls/input.cljs b/frontend/src/app/main/ui/ds/controls/input.cljs index d16f35b836..48fa730c0c 100644 --- a/frontend/src/app/main/ui/ds/controls/input.cljs +++ b/frontend/src/app/main/ui/ds/controls/input.cljs @@ -36,7 +36,7 @@ {::mf/props :obj ::mf/forward-ref true ::mf/schema schema:input} - [{:keys [id class label is-optional type max-length variant hint-message hint-type children] :rest props} ref] + [{:keys [id class label is-optional type max-length variant hint-message hint-type] :rest props} ref] (let [id (or id (mf/use-id)) variant (d/nilv variant "dense") is-optional (d/nilv is-optional false) @@ -58,7 +58,7 @@ :has-hint has-hint))} (when has-label [:> label* {:for id :is-optional is-optional} label]) - [:> input-field* props children] + [:> input-field* props] (when has-hint [:> hint-message* {:id id :message hint-message diff --git a/frontend/src/app/main/ui/ds/controls/utilities/input_field.cljs b/frontend/src/app/main/ui/ds/controls/utilities/input_field.cljs index 3266f15cbd..d98fe55458 100644 --- a/frontend/src/app/main/ui/ds/controls/utilities/input_field.cljs +++ b/frontend/src/app/main/ui/ds/controls/utilities/input_field.cljs @@ -25,13 +25,15 @@ [:hint-type {:optional true} [:maybe [:enum "hint" "error" "warning"]]] [:type {:optional true} :string] [:max-length {:optional true} :int] - [:variant {:optional true} [:enum "seamless" "dense" "comfortable"]]]) + [:variant {:optional true} [:enum "seamless" "dense" "comfortable"]] + [:slot-start {:optional true} [:maybe some?]] + [:slot-end {:optional true} [:maybe some?]]]) (mf/defc input-field* {::mf/props :obj ::mf/forward-ref true ::mf/schema schema:input-field} - [{:keys [id icon has-hint hint-type class type max-length variant children] :rest props} ref] + [{:keys [id icon has-hint hint-type class type max-length variant slot-start slot-end] :rest props} ref] (let [input-ref (mf/use-ref) type (d/nilv type "text") variant (d/nilv variant "dense") @@ -65,8 +67,10 @@ :variant-seamless (= variant "seamless") :variant-dense (= variant "dense") :variant-comfortable (= variant "comfortable")))} + (when (some? slot-start) + slot-start) (when (some? icon) [:> icon* {:icon-id icon :class (stl/css :icon) :on-click on-icon-click}]) [:> "input" props] - (when (some? children) - [:div {:class (stl/css :input-actions)} children])])) + (when (some? slot-end) + slot-end)])) diff --git a/frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens_value.cljs b/frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens_value.cljs index 105bf1e284..aec102c30b 100644 --- a/frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens_value.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens_value.cljs @@ -11,6 +11,7 @@ [app.common.data.macros :as dm] [app.main.ui.ds.controls.utilities.input-field :refer [input-field*]] [app.main.ui.ds.controls.utilities.label :refer [label*]] + [app.main.ui.workspace.tokens.components.controls.input-token-color-bullet :refer [input-token-color-bullet*]] [rumext.v2 :as mf])) (def ^:private schema::input-tokens-value @@ -19,15 +20,25 @@ [:placeholder {:optional true} :string] [:value {:optional true} [:maybe :string]] [:class {:optional true} :string] + [:color {:optional true} [:maybe :string]] + [:display-colorpicker {:optional true} fn?] [:error {:optional true} :boolean]]) + (mf/defc input-tokens-value* {::mf/props :obj ::mf/forward-ref true ::mf/schema schema::input-tokens-value} - [{:keys [class label placeholder error value children] :rest props} ref] + [{:keys [class label placeholder error value color display-colorpicker] :rest props} ref] (let [id (mf/use-id) input-ref (mf/use-ref) + swatch + (when color + (mf/html [:> input-token-color-bullet* + {:color color + :class (stl/css :slot-start) + :on-click display-colorpicker}])) + props (mf/spread-props props {:id id :type "text" :class (stl/css :input) @@ -35,11 +46,9 @@ :value (d/nilv value "") :variant "comfortable" :hint-type (when error "error") + :slot-start swatch :ref (or ref input-ref)})] [:div {:class (dm/str class " " (stl/css-case :wrapper true :input-error error))} [:> label* {:for id} label] - [:div {:class (stl/css :input-wrapper)} - (when (some? children) - [:div {:class (stl/css :input-swatch)} children]) - [:> input-field* props]]])) + [:> input-field* props]])) diff --git a/frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens_value.scss b/frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens_value.scss index c9ec7b2c6a..3a097cddc9 100644 --- a/frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens_value.scss +++ b/frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens_value.scss @@ -31,28 +31,3 @@ @include textEllipsis; color: var(--label-color); } - -.input-wrapper { - display: flex; - flex: 1; - align-items: center; - - &:has(.input-swatch) { - position: relative; - - & .input { - --input-text-indent: var(--sp-xxl); - } - } -} - -.input-swatch { - position: absolute; - display: flex; - inset-inline-start: var(--sp-s); - z-index: 2; -} - -.input { - flex: 1; -} diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs index 2b97877b46..783f136254 100644 --- a/frontend/src/app/main/ui/workspace/tokens/form.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs @@ -31,7 +31,6 @@ [app.main.ui.ds.notifications.context-notification :refer [context-notification*]] [app.main.ui.workspace.colorpicker :as colorpicker] [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector*]] - [app.main.ui.workspace.tokens.components.controls.input-token-color-bullet :refer [input-token-color-bullet*]] [app.main.ui.workspace.tokens.components.controls.input-tokens-value :refer [input-tokens-value*]] [app.util.dom :as dom] [app.util.functions :as uf] @@ -563,13 +562,11 @@ :label (tr "workspace.token.token-value") :value (mf/ref-val value-ref) :ref value-input-ref + :color color :on-change on-update-value :error (not (nil? (:errors token-resolve-result))) - :on-blur on-update-value} - (when color? - [:> input-token-color-bullet* - {:color color - :on-click on-display-colorpicker'}])] + :display-colorpicker on-display-colorpicker' + :on-blur on-update-value}] (when color-ramp-open? [:> ramp* {:color (some-> color (tinycolor/valid-color)) :on-change on-update-color}])