🐛 Use DS icon button

frontend/src/app/main/ui/ds/buttons/icon_button.cljs

@@ -25,16 +25,20 @@
    [:aria-label :string]
    [: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
+   [:flyout-indicator {:optional true} :boolean]
    [:variant {:optional true}
     [:maybe [:enum "primary" "secondary" "ghost" "destructive" "action"]]]])
 
 (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] :rest props}]
+  [{: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")
 
+        flyout-indicator (d/nilv flyout-indicator false)
+
         button-ref (mf/use-ref nil)
 
         tooltip-id
@@ -62,4 +66,10 @@
                   :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]]))

frontend/src/app/main/ui/ds/buttons/icon_button.scss

@@ -49,3 +49,13 @@
   --button-width: #{$sz-24};
   --button-height: #{$sz-24};
 }
+
+.flyout-indicator {
+  position: absolute;
+  inset-block-end: 4px;
+  inset-inline-end: 4px;
+  stroke: var(--stroke-color);
+  fill: none;
+  inline-size: $sz-6;
+  block-size: $sz-6;
+}

frontend/src/app/main/ui/ds/tool_toolbar/tool_toolbar.cljs

@@ -19,7 +19,8 @@
    [app.main.store :as st]
    [app.main.ui.components.file-uploader :as file-uploader]
    [app.main.ui.context :as ctx]
-   [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.foundations.assets.icon :as i]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
    [app.util.timers :as ts]
@@ -70,26 +71,19 @@
 
 (mf/defc tool-button*
   {::mf/wrap [mf/memo]}
-  [{:keys [selected variant title icon on-click aria-haspopup aria-expanded role data-tool]}]
-  [:button {:type "button"
-            :title title
-            :aria-label title
-            :aria-haspopup aria-haspopup
-            :aria-expanded aria-expanded
-            :aria-pressed selected
-            :role role
-            :class (stl/css :main-toolbar-options-button)
-            :on-click on-click
-            :data-tool data-tool}
-   [:> icon* {:icon-id icon
-              :aria-hidden true
-              :class (stl/css :main-toolbar-icon)}]
-   (when (= variant :has-flyout)
-     [:svg {:view-box "0 0 6 6"
-            :aria-hidden true
-            :class (stl/css :main-toolbar-flyout-indicator)}
-      [:path {:d "M4,2 L4,3.15 C4,3.62 3.62,4 3.15,4 L2,4"
-              :stroke-linecap "round"}]])])
+  [{:keys [selected has-flyout title icon on-click aria-haspopup aria-expanded role data-tool]}]
+  [:> icon-button* {:variant "ghost"
+                    :title title
+                    :aria-haspopup aria-haspopup
+                    :aria-expanded aria-expanded
+                    :aria-pressed selected
+                    :role role
+                    :aria-label title
+                    :class (stl/css :main-toolbar-options-button)
+                    :on-click on-click
+                    :icon icon
+                    :flyout-indicator has-flyout
+                    :data-tool data-tool}])
 
 (def grouped-tools
   {:shapes {:default-tool :rect
@@ -158,11 +152,11 @@
      [:div {:role "group"
             :aria-label menu-label}
       [:> tool-button* {:title (tool-label default-tool)
-                        :variant :has-flyout
                         :selected selected
                         :icon default-icon
                         :on-click on-select-tool
                         :data-tool (name default-tool)
+                        :has-flyout true
                         :aria-haspopup true
                         :aria-expanded open}]
 

frontend/src/app/main/ui/ds/tool_toolbar/tool_toolbar.scss

@@ -151,16 +151,6 @@
   }
 }
 
-.main-toolbar-flyout-indicator {
-  position: absolute;
-  inset-block-end: 5px;
-  inset-inline-end: 5px;
-  stroke: var(--stroke-color);
-  fill: none;
-  inline-size: $sz-6;
-  block-size: $sz-6;
-}
-
 .toolbar-handler {
   block-size: $sz-12;
   display: flex;