♻️ Migrate color-bullet and color-name to modern component syntax (#9433)

Co-authored-by: Andrey Antukh <niwi@niwi.nz>

frontend/src/app/main/ui/components/color_bullet.cljs

@@ -58,9 +58,8 @@
   [title]
   (str/replace title "." ".\u200B"))
 
-(mf/defc color-bullet
+(mf/defc color-bullet*
-  {::mf/wrap [mf/memo]
+  {::mf/wrap [mf/memo]}
-   ::mf/wrap-props false}
   [{:keys [color on-click mini area]}]
   (let [read-only? (nil? on-click)
         on-click
@@ -112,8 +111,7 @@
             [:div {:class (stl/css :color-bullet-right)
                    :style {:background (uc/color->background color)}}]])]))))
 
-(mf/defc color-name
+(mf/defc color-name*
-  {::mf/wrap-props false}
   [{:keys [color size on-click on-double-click origin]}]
   (let [{:keys [name]} (meta color)
         {:keys [color gradient]} (if (string? color) {:color color :opacity 1} color)]

frontend/src/app/main/ui/dashboard/grid.cljs

@@ -199,10 +199,10 @@
                                    :else (:value color))]
                 [:div {:class (stl/css :asset-list-item :color-item)
                        :key (str "assets-color-" (:id color))}
-                 [:& bc/color-bullet {:color {:color (:color color)
+                 [:> bc/color-bullet* {:color {:color (:color color)
-                                              :id (:id color)
+                                               :id (:id color)
-                                              :opacity (:opacity color)}
+                                               :opacity (:opacity color)}
-                                      :mini true}]
+                                       :mini true}]
                  [:div {:class (stl/css :name-block)}
                   [:span {:class (stl/css :color-name)} (:name color)]
                   (when-not (= (:name color) default-name)

frontend/src/app/main/ui/inspect/attributes/common.cljs

@@ -45,8 +45,8 @@
          [:div {:class (stl/css :attributes-color-row)}
           [:div {:class (stl/css :bullet-wrapper)
                  :style #js {"--bullet-size" "16px"}}
-           [:& cb/color-bullet {:color color
+           [:> cb/color-bullet* {:color color
-                                :mini true}]]
+                                 :mini true}]]
 
           [:div {:class (stl/css :format-wrapper)}
            [:div {:class (stl/css :image-format)}
@@ -80,8 +80,8 @@
       [:div {:class (stl/css :attributes-color-row)}
        [:div {:class (stl/css :bullet-wrapper)
               :style #js {"--bullet-size" "16px"}}
-        [:& cb/color-bullet {:color color
+        [:> cb/color-bullet* {:color color
-                             :mini true}]]
+                              :mini true}]]
        ;;  REMOVE this conditional when :inspect-styles flag is removed
        (if (contains? cf/flags :inspect-styles)
          [:div {:class (stl/css :global/attr-label)} property]
@@ -107,9 +107,9 @@
           [:span {:class (stl/css-case :color-value-wrapper true
                                        :gradient-name (:gradient color))}
            (if (:gradient color)
-             [:& cb/color-name {:color color :size 90}]
+             [:> cb/color-name* {:color color :size 90}]
              (case format
-               :hex [:& cb/color-name {:color color}]
+               :hex [:> cb/color-name* {:color color}]
                :rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))
                            result (cc/format-rgba [r g b a])]
                        [:* result])

frontend/src/app/main/ui/workspace/color_palette.cljs

@@ -56,7 +56,7 @@
               :type "button"
               :on-click select-color}
      [:> swatch* {:background color :size "medium"}]
-     [:& cb/color-name {:color color :size size :origin :palette}]]))
+     [:> cb/color-name* {:color color :size size :origin :palette}]]))
 
 (mf/defc palette*
   {::mf/wrap [mf/memo]}

frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs

@@ -70,9 +70,9 @@
           [:div {:class (stl/css :color-sample)
                  :style {:--bullet-size "20px"}}
            (for [color colors]
-             [:& cb/color-bullet {:key (dm/str (:id color))
+             [:> cb/color-bullet* {:key (dm/str (:id color))
-                                  :mini true
+                                   :mini true
-                                  :color color}])]]])
+                                   :color color}])]]])
 
       [:li {:class (stl/css-case
                     :file-library true
@@ -95,9 +95,9 @@
         [:div {:class (stl/css :color-sample)
                :style {:--bullet-size "20px"}}
          (for [color local-colors]
-           [:& cb/color-bullet {:key (dm/str (:id color))
+           [:> cb/color-bullet* {:key (dm/str (:id color))
-                                :mini true
+                                 :mini true
-                                :color color}])]]]
+                                 :color color}])]]]
 
       [:li {:class (stl/css
                     :recent-colors true
@@ -119,6 +119,6 @@
                :style {:--bullet-size "20px"}}
 
          (for [color recent-colors]
-           [:& cb/color-bullet {:key (dm/str (::id color))
+           [:> cb/color-bullet* {:key (dm/str (::id color))
-                                :mini true
+                                 :mini true
-                                :color color}])]]]]]))
+                                 :color color}])]]]]]))

frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs

@@ -137,7 +137,7 @@
        deprecated-icon/swatches]
 
       (for [color current-colors]
-        [:& cb/color-bullet
+        [:> cb/color-bullet*
          {:key (-> color meta ::id)
           :color color
           :on-click on-color-click}])]]))

frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs

@@ -137,8 +137,8 @@
 
      [:div {:class (stl/css :shade-selector)
             :style {:--bullet-size "52px"}}
-      [:& cb/color-bullet {:color bullet-color
+      [:> cb/color-bullet* {:color bullet-color
-                           :area true}]
+                            :area true}]
       [:div {:class (stl/css :sliders-wrapper)}
        [:> slider-selector* {:type :hue
                              :max-value 360

frontend/src/app/main/ui/workspace/libraries.cljs

@@ -580,9 +580,9 @@
                      [:div {:class (stl/css :libraries-updates-item)
                             :key (dm/str (:id color))}
                       [:*
-                       [:& cb/color-bullet {:color {:color (:color color)
+                       [:> cb/color-bullet* {:color {:color (:color color)
-                                                    :id (:id color)
+                                                     :id (:id color)
-                                                    :opacity (:opacity color)}}]
+                                                     :opacity (:opacity color)}}]
                        [:div {:class (stl/css :name-block)}
                         [:span {:class (stl/css :item-name)
                                 :title (:name color)}

frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs

@@ -221,8 +221,8 @@
            :on-drop on-drop}
 
      [:div {:class (stl/css :bullet-block)}
-      [:& cb/color-bullet {:color color
+      [:> cb/color-bullet* {:color color
-                           :mini true}]]
+                            :mini true}]]
 
      (if ^boolean editing?
        [:input