mirror of
https://github.com/we-promise/sure.git
synced 2026-06-05 18:59:04 +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.
33 lines
1.7 KiB
Plaintext
33 lines
1.7 KiB
Plaintext
<%= tag.div data: { controller: "DS--popover", DS__popover_placement_value: placement, DS__popover_offset_value: offset, DS__popover_mobile_fullwidth_value: mobile_fullwidth, testid: testid } do %>
|
|
<% if variant == :icon %>
|
|
<%= render DS::Button.new(variant: "icon", icon: icon, aria_label: trigger_aria_label, aria: { haspopup: "dialog", expanded: "false", controls: panel_id }, data: { DS__popover_target: "button" }) %>
|
|
<% elsif variant == :button %>
|
|
<%= button %>
|
|
<% elsif variant == :avatar %>
|
|
<%# Avatar trigger needs an explicit accessible name — the inner
|
|
avatar image is decorative. Caller must pass `aria_label:` or
|
|
the fallback `ds.popover.avatar_default_label` is used. %>
|
|
<button type="button"
|
|
data-DS--popover-target="button"
|
|
class="inline-flex items-center justify-center w-11 h-11 cursor-pointer rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 theme-dark:focus-visible:outline-white"
|
|
aria-label="<%= trigger_aria_label %>"
|
|
aria-haspopup="dialog"
|
|
aria-expanded="false"
|
|
aria-controls="<%= panel_id %>">
|
|
<div class="w-9 h-9">
|
|
<%= render "settings/user_avatar", avatar_url: avatar_url, initials: initials %>
|
|
</div>
|
|
</button>
|
|
<% end %>
|
|
|
|
<div id="<%= panel_id %>" data-DS--popover-target="content" class="px-2 lg:px-0 max-w-full hidden z-50">
|
|
<%= tag.div class: "mx-auto min-w-[200px] shadow-border-lg bg-container rounded-lg", style: ("max-width: #{max_width}" if max_width) do %>
|
|
<%= header %>
|
|
|
|
<%= tag.div class: class_names("py-1" => !no_padding) do %>
|
|
<%= custom_content %>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|