mirror of
https://github.com/we-promise/sure.git
synced 2026-05-25 13:34:58 +00:00
cc8e2abf18
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.
32 lines
909 B
Ruby
32 lines
909 B
Ruby
class MenuComponentPreview < ViewComponent::Preview
|
|
def icon
|
|
render DS::Menu.new(variant: "icon") do |menu|
|
|
menu_contents(menu)
|
|
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")
|
|
menu_contents(menu)
|
|
end
|
|
end
|
|
|
|
private
|
|
def menu_contents(menu)
|
|
menu.with_item(variant: "link", text: "Link", href: "#", icon: "plus")
|
|
menu.with_item(variant: "button", text: "Action", href: "#", method: :post, icon: "circle")
|
|
menu.with_item(variant: "button", text: "Action destructive", href: "#", method: :delete, icon: "circle")
|
|
|
|
menu.with_item(variant: "divider")
|
|
|
|
menu.with_item(variant: "link", text: "Another link", href: "#", icon: "external-link")
|
|
end
|
|
end
|