From cc8e2abf183a72e789dedb0d5727f01d3ca7de02 Mon Sep 17 00:00:00 2001
From: Guillem Arias Fauste <accounts@gariasf.com>
Date: Sat, 23 May 2026 09:18:16 +0200
Subject: [PATCH] fix(design-system): DS::Menu add :icon_sm variant for dense
 action lists (#1930)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PR #1840 bumped DS::Button icon-only `:md` size from `w-9 h-9` (36×36)
to `w-11 h-11` (44×44) for WCAG 2.5.5 enhanced touch target. DS::Menu's
`:icon` variant uses DS::Button at the default `:md` size, so every
row-level "..." action-list trigger grew from 36×36 to 44×44.

For dense lists where each row has a trigger — most visibly the
transaction category dropdown (`category/dropdowns/_row.html.erb`) —
the per-row height bump (+8px) compounds: a 5-category panel that
used to fit in ~220px now wants ~260px, the badges look smaller
relative to the row chrome, and the overall density that made the
dropdown scannable regresses visibly.

Add an `:icon_sm` variant that renders the trigger as DS::Button at
`size: :sm` (32×32). Meets WCAG 2.5.8 AA (24×24) — appropriate for
compact in-row triggers where 44×44 isn't required. Standalone
toolbar / row-action `...` triggers should keep `:icon` for AAA.

Migrate `category/dropdowns/_row.html.erb` to `:icon_sm` to restore
the pre-#1840 dropdown density.
---
 app/components/DS/menu.html.erb               |  4 ++--
 app/components/DS/menu.rb                     | 20 ++++++++++++++++++-
 app/views/category/dropdowns/_row.html.erb    |  2 +-
 .../previews/menu_component_preview.rb        |  6 ++++++
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/app/components/DS/menu.html.erb b/app/components/DS/menu.html.erb
index 27c262a59..c77895cbd 100644
--- a/app/components/DS/menu.html.erb
+++ b/app/components/DS/menu.html.erb
@@ -1,6 +1,6 @@
 <%= tag.div data: { controller: "DS--menu", DS__menu_placement_value: placement, DS__menu_offset_value: offset, DS__menu_mobile_fullwidth_value: mobile_fullwidth, testid: testid } do %>
-  <% if variant == :icon %>
-    <%= render DS::Button.new(variant: "icon", icon: icon_vertical ? "more-vertical" : "more-horizontal", aria: { haspopup: "menu", expanded: "false", controls: menu_id }, data: { DS__menu_target: "button" }) %>
+  <% if icon_only? %>
+    <%= render DS::Button.new(variant: "icon", size: icon_button_size, icon: icon_vertical ? "more-vertical" : "more-horizontal", aria: { haspopup: "menu", expanded: "false", controls: menu_id }, data: { DS__menu_target: "button" }) %>
   <% elsif variant == :button %>
     <%= button %>
   <% end %>
diff --git a/app/components/DS/menu.rb b/app/components/DS/menu.rb
index cd4372443..778d48702 100644
--- a/app/components/DS/menu.rb
+++ b/app/components/DS/menu.rb
@@ -31,7 +31,7 @@ class DS::Menu < DesignSystemComponent
 
   renders_many :items, DS::MenuItem
 
-  VARIANTS = %i[icon button].freeze
+  VARIANTS = %i[icon icon_sm button].freeze
 
   def initialize(variant: "icon", placement: "bottom-end", offset: 12, icon_vertical: false, no_padding: false, testid: nil, mobile_fullwidth: true, max_width: nil)
     @variant = variant.to_sym
@@ -46,4 +46,22 @@ class DS::Menu < DesignSystemComponent
 
     raise ArgumentError, "Invalid variant: #{@variant}. DS::Menu is for action lists only; use DS::Popover for mixed content (forms, pickers, account dropdowns)." unless VARIANTS.include?(@variant)
   end
+
+  # `:icon_sm` renders the dropdown trigger as a 32x32 icon button (DS::Button
+  # `size: :sm`) instead of the default 44x44 `:md`. Use for action menus
+  # embedded in dense lists (e.g. the category dropdown row trigger) where the
+  # 44x44 enhanced-touch-target trigger introduced in #1840 makes every row
+  # ~8px taller and the cumulative list height regresses visibly.
+  #
+  # Trade-off: the `sm` icon button is 32x32, which meets WCAG 2.5.8 AA
+  # (24x24) but not 2.5.5 AAA enhanced (44x44). Acceptable for compact
+  # dropdown rows that aren't primary touch surfaces; do not use on
+  # standalone toolbar / row-action triggers where 44x44 should remain.
+  def icon_only?
+    variant == :icon || variant == :icon_sm
+  end
+
+  def icon_button_size
+    variant == :icon_sm ? "sm" : "md"
+  end
 end
diff --git a/app/views/category/dropdowns/_row.html.erb b/app/views/category/dropdowns/_row.html.erb
index d9fab35e5..067286e24 100644
--- a/app/views/category/dropdowns/_row.html.erb
+++ b/app/views/category/dropdowns/_row.html.erb
@@ -29,7 +29,7 @@
     <%= render partial: "categories/badge", locals: { category: category } %>
   <% end %>
 
-  <%= render DS::Menu.new do |menu| %>
+  <%= render DS::Menu.new(variant: :icon_sm) do |menu| %>
     <% menu.with_item(variant: "link", text: t(".edit"), icon: "pencil-line", href: edit_category_path(category), data: { turbo_frame: :modal }) %>
     <% menu.with_item(variant: "link", text: t(".delete"), icon: "trash-2", href: new_category_deletion_path(category), data: { turbo_frame: :modal }, destructive: true) %>
   <% end %>
diff --git a/test/components/previews/menu_component_preview.rb b/test/components/previews/menu_component_preview.rb
index cf5e1b8e9..6fffb7ca3 100644
--- a/test/components/previews/menu_component_preview.rb
+++ b/test/components/previews/menu_component_preview.rb
@@ -5,6 +5,12 @@ class MenuComponentPreview < ViewComponent::Preview
     end
   end
 
+  def icon_sm
+    render DS::Menu.new(variant: "icon_sm") do |menu|
+      menu_contents(menu)
+    end
+  end
+
   def button
     render DS::Menu.new(variant: "button") do |menu|
       menu.with_button(text: "Open menu", variant: "secondary")