diff --git a/frontend/src/app/main/ui/ds/buttons/button.cljs b/frontend/src/app/main/ui/ds/buttons/button.cljs index 37adcd41da..376d063fc7 100644 --- a/frontend/src/app/main/ui/ds/buttons/button.cljs +++ b/frontend/src/app/main/ui/ds/buttons/button.cljs @@ -36,4 +36,4 @@ (on-ref node)))})] [:> "button" props (when icon [:> icon* {:icon-id icon :size "m"}]) - [:span {:class (stl/css :label-wrapper)} children]])) \ No newline at end of file + [:span {:class (stl/css :label-wrapper)} children]])) diff --git a/frontend/src/app/main/ui/ds/buttons/icon_button.cljs b/frontend/src/app/main/ui/ds/buttons/icon_button.cljs index 33ee369523..43d2c9ed09 100644 --- a/frontend/src/app/main/ui/ds/buttons/icon_button.cljs +++ b/frontend/src/app/main/ui/ds/buttons/icon_button.cljs @@ -9,6 +9,7 @@ [app.common.data.macros :as dm] [app.main.style :as stl]) (:require + [app.common.data :as d] [app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list]] [app.main.ui.ds.tooltip.tooltip :refer [tooltip*]] [rumext.v2 :as mf])) @@ -24,18 +25,31 @@ [:maybe [:enum "primary" "secondary" "ghost" "destructive" "action"]]]]) (mf/defc icon-button* - {::mf/schema schema:icon-button} + {::mf/schema schema:icon-button + ::mf/memo true} [{:keys [class icon icon-class variant aria-label children] :rest props}] - (let [variant (or variant "primary") - tooltip-id (mf/use-id) - class (dm/str class " " (stl/css-case :icon-button true - :icon-button-primary (= variant "primary") - :icon-button-secondary (= variant "secondary") - :icon-button-ghost (= variant "ghost") - :icon-button-action (= variant "action") - :icon-button-destructive (= variant "destructive"))) - props (mf/spread-props props {:class class - :aria-labelledby tooltip-id})] + (let [variant + (d/nilv variant "primary") + + tooltip-id + (mf/use-id) + + class + (dm/str class " " + (stl/css-case :icon-button true + :icon-button-primary (= variant "primary") + :icon-button-secondary (= variant "secondary") + :icon-button-ghost (= variant "ghost") + :icon-button-action (= variant "action") + :icon-button-destructive (= variant "destructive"))) + + props + (mf/spread-props props + {:class class + :aria-labelledby tooltip-id})] + [:> tooltip* {:tooltip-content aria-label :id tooltip-id} - [:> "button" props [:> icon* {:icon-id icon :aria-hidden true :class icon-class}] children]])) \ No newline at end of file + [:> "button" props + [:> icon* {:icon-id icon :aria-hidden true :class icon-class}] + children]]))