Skip to content

BS5 follow-up: should the Accordion component adopt BS5-era markup? #95

@malberts

Description

@malberts

The question

PR #93 left the Accordion component's emitted DOM unchanged. The
component continues to emit its BC-original structure rather than
BS5's native accordion primitives. Should BC adopt BS5-era markup
in 6.x?

Current state

When used per the documented <bootstrap_card> pane pattern, BC's
accordion produces a recognisable, working card-stack accordion in
both BS4 and BS5: card-shaped header bars stacked, single-pane-open
behaviour via data-bs-parent, smooth expand/collapse. The
component is not broken — the question is purely aesthetic.

Current DOM (what #93 ships)

<div class="panel-group bsc_accordion" id="my_accordion">
  <div class="card">
    <div class="card-header" data-bs-toggle="collapse" data-bs-target="#pane_1">
      <h4 class="card-title">Item 1</h4>
    </div>
    <div id="pane_1" class="card-collapse collapse fade" data-bs-parent="#my_accordion">
      <div class="card-body">First item</div>
    </div>
  </div>
  ...
</div>

panel-group is not a framework class in BS4 or BS5. bsc_accordion
is BC's own class; accordion.fix.css uses it to trim radii at the
joins between adjacent cards.

Visual: stack of independently-bordered cards with squared corners
at the joins and rounded corners on the outer edges.

BS5-era DOM (what porting would emit)

<div class="accordion" id="my_accordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#pane_1">Item 1</button>
    </h2>
    <div id="pane_1" class="accordion-collapse collapse" data-bs-parent="#my_accordion">
      <div class="accordion-body">First item</div>
    </div>
  </div>
  ...
</div>

Visual: single-piece outline, built-in chevron indicator, larger
button-shaped header targets, padded .accordion-body.

Options

  1. Keep BC's DOM structure. No code change. The current aesthetic
    is preserved.

    Context for the choice: the current structure was intentionally
    adopted in BC 5.1.0 (March 2023). The in-line comment in
    Accordion.php cites BS4's .accordion > .card { border-bottom: 0 }
    rule as the specific reason for sidestepping the framework's
    class="accordion". That rule is gone in BS5 (BS5's .accordion
    operates on .accordion-item, not .card), but the broader design
    preference for BC's own accordion look rather than the framework's
    combined-outline treatment remains a defensible position. The
    in-line comment could be updated to drop the BS4-specific reference
    if this option wins.

  2. Port to BS5-era markup. Restructure Accordion.php and
    Card.php (when used as accordion pane) to emit .accordion-item
    / .accordion-header / .accordion-button / .accordion-collapse
    / .accordion-body. Drop accordion.fix.css (BS5 framework rules
    handle the join treatment via .accordion-item:last-child).

    Downsides:

    • Visual changes from BC's current stack-of-cards look to BS5's
      single-outline + chevron + larger touch targets. Deliberate
      departure from BC 5.1.0's design choice.
    • Downstream wiki CSS targeting .bsc_accordion, .panel-group,
      or .card-inside-accordion stops applying.
    • Downstream wiki JS attaching to .card.collapse (rare) breaks.

Originally raised on #93.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions