From c4a5f0098ef32a1383676ce01e254e41a2dc9b1d Mon Sep 17 00:00:00 2001 From: Dexterity <173429049+Dexterity104@users.noreply.github.com> Date: Fri, 29 May 2026 03:56:12 -0400 Subject: [PATCH] :recycle: Migrate color-bullet and color-name to modern component syntax (#9433) Co-authored-by: Andrey Antukh --- .../app/main/ui/components/color_bullet.cljs | 8 +++----- frontend/src/app/main/ui/dashboard/grid.cljs | 8 ++++---- .../app/main/ui/inspect/attributes/common.cljs | 12 ++++++------ .../app/main/ui/workspace/color_palette.cljs | 2 +- .../ui/workspace/color_palette_ctx_menu.cljs | 18 +++++++++--------- .../ui/workspace/colorpicker/libraries.cljs | 2 +- .../main/ui/workspace/colorpicker/ramp.cljs | 4 ++-- .../src/app/main/ui/workspace/libraries.cljs | 6 +++--- .../ui/workspace/sidebar/assets/colors.cljs | 4 ++-- 9 files changed, 31 insertions(+), 33 deletions(-) diff --git a/frontend/src/app/main/ui/components/color_bullet.cljs b/frontend/src/app/main/ui/components/color_bullet.cljs index 55d9e4c57c..18d53f7a7c 100644 --- a/frontend/src/app/main/ui/components/color_bullet.cljs +++ b/frontend/src/app/main/ui/components/color_bullet.cljs @@ -58,9 +58,8 @@ [title] (str/replace title "." ".\u200B")) -(mf/defc color-bullet - {::mf/wrap [mf/memo] - ::mf/wrap-props false} +(mf/defc color-bullet* + {::mf/wrap [mf/memo]} [{: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/wrap-props false} +(mf/defc color-name* [{: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)] diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs index d7504f42ef..53cb2338de 100644 --- a/frontend/src/app/main/ui/dashboard/grid.cljs +++ b/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) - :id (:id color) - :opacity (:opacity color)} - :mini true}] + [:> bc/color-bullet* {:color {:color (:color color) + :id (:id color) + :opacity (:opacity color)} + :mini true}] [:div {:class (stl/css :name-block)} [:span {:class (stl/css :color-name)} (:name color)] (when-not (= (:name color) default-name) diff --git a/frontend/src/app/main/ui/inspect/attributes/common.cljs b/frontend/src/app/main/ui/inspect/attributes/common.cljs index 8dc1d7088f..60aed1de58 100644 --- a/frontend/src/app/main/ui/inspect/attributes/common.cljs +++ b/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 - :mini true}]] + [:> cb/color-bullet* {:color color + :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 - :mini true}]] + [:> cb/color-bullet* {:color color + :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]) diff --git a/frontend/src/app/main/ui/workspace/color_palette.cljs b/frontend/src/app/main/ui/workspace/color_palette.cljs index 92c6fa25de..84d45eb7e9 100644 --- a/frontend/src/app/main/ui/workspace/color_palette.cljs +++ b/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]} diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs index a1550df877..1d621b575e 100644 --- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs +++ b/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)) - :mini true - :color color}])]]]) + [:> cb/color-bullet* {:key (dm/str (:id color)) + :mini true + :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)) - :mini true - :color color}])]]] + [:> cb/color-bullet* {:key (dm/str (:id color)) + :mini true + :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)) - :mini true - :color color}])]]]]])) + [:> cb/color-bullet* {:key (dm/str (::id color)) + :mini true + :color color}])]]]]])) diff --git a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs index 6e2101e53a..97c8e4e5b2 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs +++ b/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}])]])) diff --git a/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs b/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs index 68eab222cd..6dd7f421b9 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs +++ b/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 - :area true}] + [:> cb/color-bullet* {:color bullet-color + :area true}] [:div {:class (stl/css :sliders-wrapper)} [:> slider-selector* {:type :hue :max-value 360 diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index b904d5b5e1..9e6fb87a95 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/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) - :id (:id color) - :opacity (:opacity color)}}] + [:> cb/color-bullet* {:color {:color (:color color) + :id (:id color) + :opacity (:opacity color)}}] [:div {:class (stl/css :name-block)} [:span {:class (stl/css :item-name) :title (:name color)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs index 0cf5d8ae98..1c02c9977a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs +++ b/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 - :mini true}]] + [:> cb/color-bullet* {:color color + :mini true}]] (if ^boolean editing? [:input