Skip to content

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

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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