Files
sure/app/components/DS/disclosure.html.erb
Guillem Arias Fauste c8b1d8cf92 fix(design-system): DS::Disclosure :default variant summary_content layout (#1929)
PRs #1855, #1857, #1858 (DS::Disclosure :card/:card_inset/:inline
variants) introduced a `<div class="w-full">` wrapper around
`summary_content`. The wrapper is required for non-default variants —
their `<summary>` is `display: list-item` (no flex), so a caller's
inner flex+justify-between div would shrink-wrap to content width.

But for the `:default` variant, `<summary>` is already
`flex items-center justify-between`. Wrapping caller siblings in a
single `w-full` block collapses them into one flex child, killing the
justify-between distribution. This regressed the only default-variant
summary_content caller — `accounts/_accountable_group.html.erb` (the
homepage account sidebar) — where the group name and total/sparkline
divs no longer aligned across the row.

Render `summary_content` bare for `:default` (summary is the flex
container) and keep the `w-full` wrapper for `:card`, `:card_inset`,
`:inline`.
2026-05-23 09:06:17 +02:00

40 lines
1.5 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 %>
<div class="mt-2">
<%= content %>
</div>
<% end %>