mirror of
https://github.com/we-promise/sure.git
synced 2026-06-08 12:19:03 +00:00
7a0665a8f6
* fix(ds): put icon buttons on the text-button height rail Icon-only DS::Button containers were 32/44/48px squares while text buttons of the same nominal size render ~28/36/48px tall, so every mixed header row (icon menu trigger next to text buttons — the transactions index, account pages, the app header) sat misaligned. - buttonish SIZES: icon containers now share the text rail (sm w-7, md w-9, lg w-12 unchanged). - DS::Popover's hand-rolled w-11 trigger joins the rail at w-9. - The layout's hand-rolled privacy toggle (mobile + desktop) matches the md icon-button chrome: w-9, rounded-lg, container-inset hover — it sat at w-8 with a different hover next to a DS icon button. - DS::Select's panel adopts shadow-border-lg, the elevation Menu and Popover already use, replacing the weaker shadow-lg+border-xs combo. Measured on the transactions header after the change: 36/38/36px. * fix(ds): keep the 44px touch target on coarse pointers The height rail trades icon-button size for row alignment, which is a pointer-precision tradeoff: WCAG 2.5.5's 44x44 minimum is about fingers, not mice. sm/md icon containers (and the two off-rail consumers: the popover trigger and the layout privacy toggles) gain pointer-coarse:w-11/h-11, so touch devices keep the full target while fine-pointer layouts get the aligned 36px row. Measured via Playwright: desktop 36x36, iPhone emulation 44x44 on both the menu trigger and the privacy toggle.
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-9 h-9 pointer-coarse:w-11 pointer-coarse: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 %>
|