mirror of
https://github.com/we-promise/sure.git
synced 2026-07-12 21:05:20 +00:00
beec50b4a4
Commit 5d0eb7f4 replaced the color picker's DS::Disclosure with a raw
<details> because DS::Disclosure wraps its body in an mt-2 div, and that
normal-flow margin shoved the form down ~8px whenever the absolutely-
positioned picker popover opened. DS Drift Patrol flagged the raw
<details> in #2272 and #2316.
Add a body_class: option to DS::Disclosure (default mt-2) so callers can
drop the body margin, and migrate the color picker back onto the
component with body_class: nil. The summary's accessible name moves from
aria-label to an sr-only span in the summary content (verified: the
summary still reads as "Choose color and icon").
40 lines
1.6 KiB
Plaintext
40 lines
1.6 KiB
Plaintext
<%= tag.details class: details_classes, open: open, **details_opts do %>
|
|
<%= tag.summary class: summary_classes do %>
|
|
<% if summary_content? %>
|
|
<% if variant == :default %>
|
|
<%# `:default` summary is already `flex justify-between`, so
|
|
caller-provided sibling divs get distributed directly.
|
|
Wrapping would collapse them into a single flex child and
|
|
kill the justify-between distribution. %>
|
|
<%= summary_content %>
|
|
<% else %>
|
|
<%# Non-default summaries are `list-item` (no flex), so a flex
|
|
caller div would shrink-wrap to content width and any
|
|
`justify-between` inside has nothing to distribute. Wrap
|
|
in `w-full` so caller flex rows stretch across the card. %>
|
|
<div class="w-full">
|
|
<%= summary_content %>
|
|
</div>
|
|
<% end %>
|
|
<% else %>
|
|
<div class="flex items-center gap-3">
|
|
<% if align == :left %>
|
|
<%= helpers.icon "chevron-right", class: "group-open:rotate-90 motion-safe:transition-transform motion-safe:duration-150" %>
|
|
<% end %>
|
|
|
|
<%= tag.span class: class_names("font-medium", align == :left ? "text-sm text-primary" : "text-xs uppercase text-secondary") do %>
|
|
<%= title %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<% if align == :right %>
|
|
<%= helpers.icon "chevron-down", class: "group-open:rotate-180 motion-safe:transition-transform motion-safe:duration-150" %>
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<%= tag.div class: body_class.presence do %>
|
|
<%= content %>
|
|
<% end %>
|
|
<% end %>
|