♻️ Use a DS icon button for flatten in the boolean options (#12368)

* ♻️ Use a DS icon button for flatten in the boolean options

Replace the raw flatten button and its deprecated icon with icon-button*
and the DS boolean-flatten icon. The title text moves to aria-label, so
the DS tooltip shows it. The grid column goes on the tooltip wrapper
through tooltip-class.

Add a visual test that selects two shapes so the boolean options show.

AI-assisted-by: claude-opus-5-5

* ♻️ Remove deprecated button styles from the boolean options

The flatten button is a DS icon button now, so its placeholders, sizes
and icon colors go away; only the grid column stays, on the tooltip
wrapper. Use block-size and drop the refactor/ import.

AI-assisted-by: claude-opus-5-5

frontend/playwright/ui/visual-specs/workspace.spec.js

@@ -54,6 +54,31 @@ test.describe("Viewport", () => {
 });
 
 test.describe("Design tab", () => {
+  test("Shows the boolean options when selecting two shapes", async ({
+    page,
+  }) => {
+    const workspace = new WorkspacePage(page);
+    await workspace.setupEmptyFile();
+    await workspace.goToWorkspace();
+
+    await workspace.rectShapeButton.click();
+    await workspace.clickWithDragViewportAt(128, 128, 200, 100);
+    await workspace.clickLeafLayer("Rectangle");
+    await page.keyboard.press("Control+D");
+    await expect(workspace.layers.getByText("Rectangle")).toHaveCount(2);
+    await page.keyboard.press("Control+A");
+
+    await expect(
+      workspace.rightSidebar.getByRole("button", { name: "Flatten" }),
+    ).toBeVisible();
+    // The boolean options are a small part of the sidebar: compare every
+    // pixel.
+    await expect(workspace.rightSidebar).toHaveScreenshot({
+      maxDiffPixelRatio: 0,
+      threshold: 0,
+    });
+  });
+
   test("Shows the design tab when selecting a shape", async ({ page }) => {
     const workspace = new WorkspacePage(page);
     await workspace.setupEmptyFile();

frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs

@@ -16,14 +16,11 @@
    [app.main.features :as features]
    [app.main.store :as st]
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
-   [app.main.ui.icons :as deprecated-icon]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
-(def ^:private flatten-icon
-  (deprecated-icon/icon-xref :boolean-flatten (stl/css :flatten-icon)))
-
 (mf/defc bool-options*
   [{:keys [total-selected shapes shapes-with-children]}]
   (let [head      (first shapes)
@@ -100,11 +97,9 @@
                            :title (str (tr "workspace.shape.menu.exclude") " (" (sc/get-tooltip :bool-exclude) ")")
                            :id "bool-opt-exclude"}]]]
 
-       [:button
-        {:title (tr "workspace.shape.menu.flatten")
-         :class (stl/css-case
-                 :flatten-button true
-                 :disabled disabled-flatten)
-         :disabled disabled-flatten
-         :on-click flatten-objects}
-        flatten-icon]])))
+       [:> icon-button* {:variant "ghost"
+                         :tooltip-class (stl/css :flatten-button)
+                         :aria-label (tr "workspace.shape.menu.flatten")
+                         :icon i/boolean-flatten
+                         :disabled disabled-flatten
+                         :on-click flatten-objects}]])))

frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss

@@ -4,13 +4,12 @@
 //
 // Copyright (c) KALEIDOS SUBSIDIARY SL
 
-@use "refactor/common-refactor.scss" as deprecated;
 @use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .boolean-options {
   @include sidebar.option-grid-structure;
 
-  height: var(--sp-xxxl);
+  block-size: var(--sp-xxxl);
 }
 
 .bool-group {
@@ -20,32 +19,7 @@
 }
 
 .flatten-button {
-  @extend %button-tertiary;
-
-  height: deprecated.$s-32;
-  width: deprecated.$s-32;
-  border-radius: deprecated.$br-8;
   grid-column: 5 / span 1;
-
-  --flatten-icon-foreground-color: var(--icon-foreground);
-
-  &.disabled {
-    cursor: default;
-
-    --flatten-icon-foreground-color: var(--button-foreground-color-disabled);
-
-    &:hover {
-      background-color: var(--panel-background-color);
-
-      --flatten-icon-foreground-color: var(--button-foreground-color-disabled);
-    }
-  }
-}
-
-.flatten-icon {
-  @extend %button-icon;
-
-  stroke: var(--flatten-icon-foreground-color);
 }
 
 .boolean-radio-btn {