wip

frontend/src/app/main/ui/ds/controls/select.cljs

@@ -112,7 +112,7 @@
              (reset! focused-id* nil)
              (reset! is-open* false)
              (when (fn? on-change)
-               (on-change id)))))
+               (on-change id event)))))
 
         on-click
         (mf/use-fn

frontend/src/app/main/ui/inspect/right_sidebar.cljs

@@ -69,7 +69,7 @@
         handle-change-tab
         (mf/use-fn
          (mf/deps from on-change-section)
-         (fn [new-section]
+         (fn [new-section _e ]
            (reset! section (keyword new-section))
            (when on-change-section
              (on-change-section (keyword new-section))
@@ -89,7 +89,7 @@
 
         handle-change-color-space
         (mf/use-fn
-         (fn [color-space]
+         (fn [color-space _e]
            (reset! color-space* color-space)))
 
         color-spaces

frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs

@@ -490,7 +490,7 @@
         switch-component
         (mf/use-fn
          (mf/deps shapes)
-         (fn [pos val]
+         (fn [pos val _e]
            (if (= val mixed-label)
              (reset! key* (uuid/next))
              (let [error-msg (if (> (count shapes) 1)

frontend/src/app/main/ui/workspace/tokens/management/create/shadow.cljs

@@ -11,6 +11,7 @@
 
    [app.common.types.token :as cto]
    [app.main.data.style-dictionary :as sd]
+   [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.controls.select :refer [select*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
@@ -22,7 +23,34 @@
 
 (mf/defc inset-type-select*
   {::mf/private true}
-  [{:keys [default-value shadow-idx on-change]}]
+  [{:keys [default-value on-change]}]
+  (let [selected* (mf/use-state (or (str default-value) "false"))
+        selected (deref selected*)
+        
+        on-change
+        (mf/use-fn
+         (mf/deps on-change selected)
+         (fn [value evento]
+         (.log js/console (clj->js value))
+           (.log js/console (clj->js evento))
+           (obj/set! evento "tokenValue" (if (= "true" value) true false))
+
+           (on-change evento)
+           (reset! selected* (str value))))
+        
+        options 
+        (mf/with-memo []
+          [{:id "false" :label "drop-shadow" :icon i/drop-shadow}
+           {:id "true" :label "inner-shadow" :icon i/inner-shadow}])]
+    
+    [:div {:class (stl/css :input-row)}
+     [:> select* {:default-selected selected
+                  :variant "ghost"
+                  :options options
+                  :on-change on-change}]]))
+
+#_(mf/defc inset-type-select*
+  [{:keys [default-value shadow-idx label on-change]}]
   (let [selected* (mf/use-state (or (str default-value) "false"))
         selected (deref selected*)
 
@@ -30,20 +58,26 @@
         (mf/use-fn
          (mf/deps on-change selected shadow-idx)
          (fn [value e]
-           #_(obj/set! e "tokenValue" (if (= "true" value) true false))
+           (.log js/console (clj->js value))
-           (prn value)
+           (.log js/console (clj->js e))
-          ;;  (on-change e)
+           (obj/set! e "tokenValue" (if (= "true" value) true false))
-           #_(reset! selected* value)))
+
-        options 
+           (on-change e)
-        (mf/with-memo []
+           (reset! selected* (str value))))]
-          [{:id "drop-shadow" :label "drop-shadow" :icon i/drop-shadow}
+
-           {:id "inner-shadow" :label "inner-shadow" :icon i/inner-shadow}])]
-    
     [:div {:class (stl/css :input-row)}
-     [:> select* {:default-selected selected
+     [:div {:class (stl/css :inset-label)} label]
-                  :variant "ghost"
+     [:& radio-buttons {:selected selected
-                  :options options
+                        :on-change on-change
-                  :on-change on-change}]]))
+                        :name (str "inset-select-" shadow-idx)}
+      [:& radio-button {:value "false"
+                        :title "false"
+                        :icon "❌"
+                        :id (str "inset-default-" shadow-idx)}]
+      [:& radio-button {:value "true"
+                        :title "true"
+                        :icon "✅"
+                        :id (str "inset-false-" shadow-idx)}]]]))
 
 (def ^:private shadow-inputs
   #(d/ordered-map
@@ -99,11 +133,12 @@
   {::mf/private true}
   [{:keys [default-value label placeholder shadow-idx input-type on-update-value on-external-update-value token-resolve-result errors-by-key shadow-color]}]
   (let [color-input-ref (mf/use-ref)
+
         on-change
         (mf/use-fn
          (mf/deps shadow-idx input-type on-update-value)
-         (fn [e]
+         (fn [evento]
-           (-> (obj/set! e "tokenTypeAtIndex" [shadow-idx input-type])
+           (-> (obj/set! evento "tokenTypeAtIndex" [shadow-idx input-type])
                (on-update-value))))
 
         on-external-update-value'
@@ -129,7 +164,7 @@
         :shadow-idx shadow-idx
         :label label
         :on-change on-change}]
-      
+
       :color
       [:> shadow-color-picker-wrapper*
        {:placeholder placeholder
@@ -141,7 +176,7 @@
         :token-resolve-result token-prop
         :shadow-color (or shadow-color nil)
         :data-testid (str "shadow-color-input-" shadow-idx)}]
-      
+
       [:div {:class (stl/css :input-row)
              :data-testid (str "shadow-" (name input-type) "-input-" shadow-idx)}
        [:> input-token*
@@ -151,9 +186,9 @@
          :default-value default-value
          :on-change on-change
          :slot-start (cond (= input-type :blur)
-                       (mf/html [:span {:class (stl/css :shadow-prop-label)} "Blur"])
+                           (mf/html [:span {:class (stl/css :shadow-prop-label)} "Blur"])
-                       (= input-type :spread)
+                           (= input-type :spread)
-                       (mf/html [:span {:class (stl/css :shadow-prop-label)} "Spread"]))
+                           (mf/html [:span {:class (stl/css :shadow-prop-label)} "Spread"]))
          :token-resolve-result token-prop}]])))
 
 (mf/defc shadow-input-fields*