From 4c2debdf44a85fb77841c4903f47df9b2106fb2b Mon Sep 17 00:00:00 2001 From: Xavier Julian Date: Thu, 14 May 2026 13:31:26 +0200 Subject: [PATCH] :tada: Make icon-button tooltip optional --- .../app/main/ui/ds/buttons/icon_button.cljs | 73 ++++++++++++------- .../main/ui/ds/tool_toolbar/tool_toolbar.cljs | 7 +- 2 files changed, 53 insertions(+), 27 deletions(-) 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 3879202304..af815bc73d 100644 --- a/frontend/src/app/main/ui/ds/buttons/icon_button.cljs +++ b/frontend/src/app/main/ui/ds/buttons/icon_button.cljs @@ -15,14 +15,15 @@ (def ^:private schema:icon-button [:map - [:class {:optional true} :string] + [:class {:optional true} [:maybe :string]] [:tooltip-class {:optional true} [:maybe :string]] [:type {:optional true} [:maybe [:enum "button" "submit" "reset"]]] - [:icon-class {:optional true} :string] + [:icon-class {:optional true} [:maybe :string]] [:icon-size {:optional true} [:maybe [:enum "s" "m" "l"]]] [:icon [:and :string [:fn #(contains? icon-list %)]]] [:aria-label :string] + [:has-tooltip {:optional true} [:maybe :boolean]] [:tooltip-placement {:optional true} [:maybe [:enum "top" "bottom" "left" "right" "top-right" "bottom-right" "bottom-left" "top-left"]]] ;; Indicates that the button has a flyout menu, and should display an indicator @@ -30,19 +31,41 @@ [:variant {:optional true} [:maybe [:enum "primary" "secondary" "ghost" "destructive" "action"]]]]) +(def ^:private schema:icon-button-internal + [:map + [:icon-class {:optional true} [:maybe :string]] + [:icon-size {:optional true} [:maybe [:enum "s" "m" "l"]]] + [:icon + [:and :string [:fn #(contains? icon-list %)]]] + ;; Indicates that the button has a flyout menu, and should display an indicator + [:flyout-indicator {:optional true} [:maybe :boolean]]]) + +(mf/defc icon-button-internal* + {::mf/schema schema:icon-button-internal + ::mf/memo true} + [{:keys [icon icon-class icon-size flyout-indicator children] :rest props}] + [:> :button props + [:> icon* {:icon-id icon + :aria-hidden true + :class icon-class + :size icon-size}] + (when flyout-indicator + [:svg {:view-box "0 0 6 6" + :aria-hidden true + :class (stl/css :flyout-indicator)} + [:path {:d "M4,2 L4,3.15 C4,3.62 3.62,4 3.15,4 L2,4" + :stroke-linecap "round"}]]) + children]) + (mf/defc icon-button* {::mf/schema schema:icon-button ::mf/memo true} - [{:keys [class icon icon-class icon-size variant aria-label children tooltip-placement tooltip-class type flyout-indicator] :rest props}] - (let [variant - (d/nilv variant "primary") - + [{:keys [class icon icon-class icon-size variant aria-label children tooltip-placement tooltip-class type flyout-indicator has-tooltip] :rest props}] + (let [variant (d/nilv variant "primary") flyout-indicator (d/nilv flyout-indicator false) - + has-tooltip (d/nilv has-tooltip true) button-ref (mf/use-ref nil) - - tooltip-id - (mf/use-id) + tooltip-id (mf/use-id) button-class (stl/css-case :icon-button true @@ -57,19 +80,19 @@ {:class [class button-class] :ref button-ref :type (d/nilv type "button") - :aria-labelledby tooltip-id})] + :icon icon + :icon-size icon-size + :icon-class icon-class + :flyout-indicator flyout-indicator})] - [:> tooltip* {:content aria-label - :class tooltip-class - :trigger-ref button-ref - :placement tooltip-placement - :id tooltip-id} - [:> :button props - [:> icon* {:icon-id icon :aria-hidden true :class icon-class :size icon-size}] - (when flyout-indicator - [:svg {:view-box "0 0 6 6" - :aria-hidden true - :class (stl/css :flyout-indicator)} - [:path {:d "M4,2 L4,3.15 C4,3.62 3.62,4 3.15,4 L2,4" - :stroke-linecap "round"}]]) - children]])) + (if has-tooltip + (let [tooltip-props (mf/spread-props props {:aria-labelledby tooltip-id})] + [:> tooltip* {:content aria-label + :class tooltip-class + :trigger-ref button-ref + :placement tooltip-placement + :id tooltip-id} + [:> icon-button-internal* tooltip-props children]]) + + (let [no-tooltip-props (mf/spread-props props {:aria-label aria-label})] + [:> icon-button-internal* no-tooltip-props children])))) diff --git a/frontend/src/app/main/ui/ds/tool_toolbar/tool_toolbar.cljs b/frontend/src/app/main/ui/ds/tool_toolbar/tool_toolbar.cljs index 77d018f4a8..bdf9bcd557 100644 --- a/frontend/src/app/main/ui/ds/tool_toolbar/tool_toolbar.cljs +++ b/frontend/src/app/main/ui/ds/tool_toolbar/tool_toolbar.cljs @@ -49,6 +49,7 @@ :circle (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse)) :text (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text)) :path (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path)) + :image (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image)) :curve (tr "workspace.toolbar.curve" (sc/get-tooltip :draw-curve)) :plugins (tr "workspace.toolbar.plugins" (sc/get-tooltip :plugins)) :debug "Debugging tool" @@ -71,18 +72,19 @@ (mf/defc tool-button* {::mf/wrap [mf/memo]} - [{:keys [selected has-flyout title icon on-click aria-haspopup aria-expanded role data-tool]}] + [{:keys [selected has-flyout has-tooltip title icon on-click aria-haspopup aria-expanded role data-tool]}] [:> icon-button* {:variant "ghost" :aria-haspopup aria-haspopup :aria-expanded aria-expanded :aria-pressed selected :role role :aria-label title - :tooltip-placement "top" + :tooltip-placement "bottom" :class (stl/css :main-toolbar-options-button) :on-click on-click :icon icon :flyout-indicator has-flyout + :has-tooltip has-tooltip :data-tool data-tool}]) (def grouped-tools @@ -152,6 +154,7 @@ [:div {:role "group" :aria-label menu-label} [:> tool-button* {:title (tool-label default-tool) + :has-tooltip false :selected selected :icon default-icon :on-click on-select-tool