🎉 Make icon-button tooltip optional

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]))))

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