♻️ Use a DS icon button for the guide defaults menu (#12391)

* ♻️ Use a DS icon button for the guide defaults menu

Replace the raw three dots button that opens the use default / set as
default menu of a guide with the DS ghost icon button. It had no label, so
it gets a new "Guide defaults" one, shown in the DS tooltip, and
aria-pressed while the menu is open instead of the selected class.

The add, show/hide and remove guide buttons, and the new one, sit at the
right edge of the sidebar: open their tooltips above and to the left.

The advanced options toggle stays a raw button: it is one segment of the
guide type control and an icon button would break that shape.

Add a visual test that adds a guide to a board and opens its advanced
options.

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

* ♻️ Remove guide defaults button styles

The three dots guide defaults button is a DS icon button now: delete the
.show-more-options rule, its state variables and its svg rule. The rest of
frame_grid.scss already uses DS tokens.

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

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

@@ -320,6 +320,36 @@ test.describe("Assets tab", () => {
   });
 });
 
+test.describe("Guides", () => {
+  test("Shows the advanced options of a square guide", async ({ page }) => {
+    // A taller window keeps the whole Design tab visible: a scrolled
+    // sidebar can land on a fractional offset and change the antialiasing.
+    await page.setViewportSize({ width: 1280, height: 900 });
+    const workspace = new WorkspacePage(page);
+    await workspace.setupEmptyFile();
+    await workspace.goToWorkspace();
+
+    await workspace.boardButton.click();
+    await workspace.clickWithDragViewportAt(128, 128, 200, 200);
+    await workspace.rightSidebar
+      .getByRole("button", { name: "Add guide" })
+      .click();
+
+    // The advanced options toggle has no accessible name yet.
+    await workspace.rightSidebar
+      .locator("button[class*='frame_grid__show-options']")
+      .click();
+    await expect(workspace.rightSidebar.getByText("Color")).toBeVisible();
+    // The guide options are a small part of the sidebar: compare every
+    // pixel. The color rows antialias their rounded corners one color step
+    // differently between runs, so allow that much and nothing more.
+    await expect(workspace.rightSidebar).toHaveScreenshot({
+      maxDiffPixelRatio: 0,
+      threshold: 0.02,
+    });
+  });
+});
+
 test.describe("Left header", () => {
   test("Shows the shared badge and the save status", async ({ page }) => {
     const workspace = new WorkspacePage(page);

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

@@ -40,14 +40,13 @@
    params. Shared by the square, column and row grid-type layouts, each of
    which places it at a different point in their own layout."
   [{:keys [show disabled on-toggle]}]
-  [:button {:class (stl/css-case :show-more-options true
-                                 :selected show)
-            :on-click on-toggle
-            :disabled disabled}
-   [:> icon* {:icon-id i/menu
-              :size "m"
-              :aria-hidden true
-              :class (stl/css :show-options-icon)}]])
+  [:> icon-button* {:variant "ghost"
+                    :aria-label (tr "workspace.options.grid.params.guide-defaults")
+                    :aria-pressed show
+                    :on-click on-toggle
+                    :disabled disabled
+                    :tooltip-placement "top-left"
+                    :icon i/menu}])
 
 (mf/defc default-options-dropdown*
   "Dropdown menu with the reset/save-as-default options for a grid's params.
@@ -230,10 +229,12 @@
        [:> icon-button* {:variant "ghost"
                          :aria-label (tr "workspace.options.guides.toggle-guide")
                          :on-click handle-toggle-visibility
+                         :tooltip-placement "top-left"
                          :icon (if display "shown" "hide")}]
        [:> icon-button* {:variant "ghost"
                          :aria-label (tr "workspace.options.guides.remove-guide")
                          :on-click on-remove
+                         :tooltip-placement "top-left"
                          :icon i/remove}]]]
 
      (when (:display grid)
@@ -365,6 +366,7 @@
        [:> icon-button* {:variant "ghost"
                          :aria-label (tr "workspace.options.guides.add-guide")
                          :on-click handle-create-grid
+                         :tooltip-placement "top-left"
                          :icon i/add}]]]
 
      (when (and open? (seq grids))

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

@@ -272,65 +272,6 @@
   inline-size: px2rem(156);
 }
 
-.show-more-options {
-  --show-more-options-background-color: transparent;
-  --show-more-options-border-color: transparent;
-  --show-more-options-color: var(--color-foreground-secondary);
-
-  background: none;
-  cursor: pointer;
-  display: grid;
-  place-content: center;
-  block-size: $sz-32;
-  inline-size: $sz-32;
-  border-radius: $br-8;
-  background-color: var(--show-more-options-background-color);
-  border: $b-2 solid var(--show-more-options-border-color);
-  color: var(--show-more-options-color);
-
-  &:focus-visible {
-    outline: none;
-    border: $b-1 solid var(--color-accent-primary);
-
-    --show-more-options-background-color: var(--color-background-tertiary);
-    --show-more-options-color: var(--color-foreground-primary);
-  }
-
-  &:hover {
-    --show-more-options-background-color: var(--color-background-quaternary);
-    --show-more-options-border-color: var(--color-background-quaternary);
-    --show-more-options-color: var(--color-accent-primary);
-  }
-
-  &:active {
-    outline: none;
-
-    --show-more-options-background-color: var(--color-background-secondary);
-    --show-more-options-border-color: transparent;
-    --show-more-options-color: var(--color-accent-primary);
-  }
-
-  &[disabled],
-  &:disabled {
-    --show-more-options-color: var(--color-foreground-disabled);
-
-    cursor: unset;
-    pointer-events: none;
-  }
-
-  &.selected {
-    outline: none;
-
-    --show-more-options-background-color: var(--color-background-quaternary);
-    --show-more-options-border-color: var(--color-background-quaternary);
-    --show-more-options-color: var(--color-accent-primary);
-  }
-}
-
-.show-more-options svg {
-  stroke: var(--show-more-options-color);
-}
-
 .height,
 .gutter,
 .margin {

frontend/translations/en.po

@@ -7361,6 +7361,10 @@ msgstr "Columns"
 msgid "workspace.options.grid.params.color"
 msgstr "Color"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs:44
+msgid "workspace.options.grid.params.guide-defaults"
+msgstr "Guide defaults"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs:302
 msgid "workspace.options.grid.params.gutter"
 msgstr "Gutter"

frontend/translations/es.po

@@ -7448,6 +7448,10 @@ msgstr "Columnas"
 msgid "workspace.options.grid.params.color"
 msgstr "Color"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs:44
+msgid "workspace.options.grid.params.guide-defaults"
+msgstr "Valores por defecto de la guía"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs:302
 msgid "workspace.options.grid.params.gutter"
 msgstr "Espaciado"