✨ Add slots feature to DS input component

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

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)
+     (when (some? slot-end)
-       [:div {:class (stl/css :input-actions)} children])]))
+       slot-end)]))

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)}
+     [:> input-field* props]]))
-      (when (some? children)
-        [:div {:class (stl/css :input-swatch)} children])
-      [:> input-field* props]]]))

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

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}
+         :display-colorpicker on-display-colorpicker'
-        (when color?
+         :on-blur on-update-value}]
-          [:> input-token-color-bullet*
-           {:color color
-            :on-click on-display-colorpicker'}])]
        (when color-ramp-open?
          [:> ramp* {:color (some-> color (tinycolor/valid-color))
                     :on-change on-update-color}])