mirror of
https://github.com/we-promise/sure.git
synced 2026-06-06 19:29:03 +00:00
1742f4ef1e
* feat(ds): elevate dropdown overlays and stabilize selection check gutter Menus and popovers floated at the same elevation as inline cards (shadow-border-xs), so dropdowns blended into the content beneath them. Bump DS::Menu and DS::Popover panels to shadow-border-lg. DS::MenuItem rendered its leading icon only when present, so a selection check shifted the row's text out of alignment with the unselected rows. Add a `selected:` param that reserves a fixed-width check gutter (check when selected, empty otherwise) so row text stays aligned. Apply the same reserved gutter to the bespoke category dropdown row, and add a `selectable` menu preview. * fix(ds): expose menu selection via menuitemradio + aria-checked Selectable DS::MenuItem rows conveyed selection only visually. Render them as role="menuitemradio" with aria-checked so assistive tech gets the selection state of single-select lists, merging the menu ARIA contract with any caller-supplied aria. Addresses CodeRabbit review feedback. * fix(ds): include selectable roles in menu roving-focus query DS::MenuItem selectable rows render as role=menuitemradio, but the menu controller built its roving-focus list from [role=menuitem] only, leaving single-select menus with no keyboard focus/arrow handling. Query the menuitemradio/menuitemcheckbox roles too. Addresses Codex review feedback.
44 lines
1.5 KiB
Ruby
44 lines
1.5 KiB
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
|
|
|
|
# Single-select list. `selected:` reserves a fixed-width leading check gutter
|
|
# so the selected row's text stays aligned with every other row.
|
|
def selectable
|
|
render DS::Menu.new(variant: "button") do |menu|
|
|
menu.with_button(text: "30D", variant: "secondary")
|
|
menu.with_item(variant: "link", text: "7D", href: "#", selected: false)
|
|
menu.with_item(variant: "link", text: "30D", href: "#", selected: true)
|
|
menu.with_item(variant: "link", text: "90D", href: "#", selected: false)
|
|
menu.with_item(variant: "link", text: "Year to Date", href: "#", selected: false)
|
|
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
|