mirror of
https://github.com/we-promise/sure.git
synced 2026-06-09 04:39:05 +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.
39 lines
1.6 KiB
Plaintext
39 lines
1.6 KiB
Plaintext
<%# locals: (category:) %>
|
|
<% is_selected = category.id === @selected_category&.id %>
|
|
|
|
<%= content_tag :div,
|
|
id: dom_id(category, "category_option"),
|
|
role: "option",
|
|
aria_selected: is_selected.to_s,
|
|
class: ["filterable-item flex justify-between items-center border-none rounded-lg px-2 py-1 group w-full hover:bg-container-inset-hover",
|
|
{ "bg-container-inset": is_selected }],
|
|
data: { filter_name: category.name } do %>
|
|
<%= button_to transaction_category_path(
|
|
@transaction.entry,
|
|
grouped: params[:grouped],
|
|
entry: {
|
|
entryable_type: "Transaction",
|
|
entryable_attributes: { id: @transaction.id, category_id: category.id }
|
|
}
|
|
),
|
|
method: :patch,
|
|
data: { turbo_frame: "category_dropdown" },
|
|
class: "flex w-full items-center gap-1.5 cursor-pointer focus:outline-none" do %>
|
|
|
|
<span class="flex items-center justify-center w-5 h-5 shrink-0">
|
|
<% if is_selected %><%= icon("check") %><% end %>
|
|
</span>
|
|
|
|
<% if category.subcategory? %>
|
|
<%= icon("corner-down-right", size: "sm") %>
|
|
<% end %>
|
|
|
|
<%= render partial: "categories/badge", locals: { category: category } %>
|
|
<% end %>
|
|
|
|
<%= 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 %>
|
|
<% end %>
|