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