feat(element-theme): support element list inside cards - #2745
Open
kfenner wants to merge 2 commits into
Open
Conversation
The Bootstrap based list group is superseded by the Element list. Remove the
list group documentation page and mark the styles and Sass variables as
deprecated. The styles, the example and its tests stay in place so existing
applications keep working, the list group is just no longer recommended.
DEPRECATED: The list group styles are deprecated, use the Element list (`.list` / `.list-item`) instead. The list group is only a bordered container and has no notion of the list anatomy, so migrating means restructuring the markup, it is not a plain class rename.
| Deprecated | Replacement |
| --- | --- |
| `.list-group` | `.list`, optionally with `.list-divider`, `.list-filled` or `.list-outline` |
| `.list-group-item` | `.list-item`, wrap the content in slot classes such as `.list-item-title` and `.list-item-description` |
| `.list-group-item-action` | `.list-item-action` on a `<button>` or `<a>` inside the `.list-item` |
| `.list-group-flush` | `.list`, the list has no outer border |
| `.list-group-md`, `.list-group-lg` | No replacement, the height of a list item follows its content |
| `.list-group-horizontal*` | No replacement, use flex or grid utilities |
| `.list-group-numbered` | No replacement, use an ordered list |
| `.list-group-item-secondary`, `.list-group-item-success`, `.list-group-item-warning`, `.list-group-item-caution`, `.list-group-item-danger`, `.list-group-item-info` | No replacement, use background and text utilities, or a list item indicator |
| `.list-header` | No replacement, use a heading element |
| `$list-group-*` Sass variables | No replacement |
Before:
<ul class="list-group">
<li class="list-group-item">Item</li>
</ul>
After:
<ul class="list">
<li class="list-item">
<span class="list-item-title">Item</span>
</li>
</ul>
The deprecated styles remain available and there is no removal planned at this point, so applications can keep using them. They will not receive further design updates and may be removed in a future major version. See the list documentation for the full migration guide.
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Add card styling for the new element `.list` component so it can be used in place of the deprecated Bootstrap `.list-group`. The list inherits the rounded corners of the card, so the background of a hovered, filled or outlined item no longer paints over them. It is also pushed behind the inset focus ring that a scrollable list gets when it follows a `.card-header`, which previously left the ring broken as soon as an item had a background. Migrate the remaining examples and the card and list documentation to `.list`. NOTE: The change is purely additive. Existing `.list-group` markup inside cards keeps its current styling. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
This was referenced Sep 8, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow-up to #2742 (base branch
kaspar-fenner-deprecate-list-group). That PR deprecates the Bootstrap.list-group; this one makes the Element.lista working replacement inside.card, and migrates the remaining examples and docs.The library change is purely additive — no
.list-grouprule is removed or altered, so existing markup is unaffected._card.scssTwo things were missing for
.listin a card.1. Rounded corners. A
.listas first/last child now gets the card's inner radius, and the outer corners of the first/last item inherit it, so the background of a hovered, filled or outlined item no longer paints over the card's rounded corners.The per-corner rules are written as
> :first-child { &, > .list-item { ... } }because.list-itemsits either on the<li>itself or on a wrapped<button class="list-item list-item-action">. Specificity works out:.card > .list > :first-child > .list-itemis (0,4,0) and beats.list.list-filled .list-itemat (0,3,0).2. Focus ring.
.listwas added to the existing.card-header + :is(...)rule that switches the focus outline to an inset offset. That half alone is a regression, so it is paired with thez-indextreatment that.list-groupalready has — extending the precedent from ec3d92f (fix(theme): fix card spacing for focus outline).Focus-visibility bug
A scrollable list following a
.card-headerdraws its focus ring inside itself. Without the pairing, any item background paints over it. This is not a filled/outline edge case — plain.list-divideritems are transparent at rest but paint$si-sys-background-hoveron hover, and hovering the top row of a scrollable list in a card is ordinary interaction..list-divider, first item hovered — before / after:.list-filled, focused — before / after (previously the ring survived only in thegapbetween items):Verified across all six states (
list-divider/list-filled/list-outline, each focused and focused+hovered) — all show an unbroken ring after the change.Note the rule targets
> lirather than.list-item.z-indexonly applies to positioned elements and flex items; in a.listthe flex items are the<li>children, so a.list-itemrule would silently no-op for the wrapped-button shape. Pushing theliback takes any wrapped button with it.z-index: 0on the container scopes the negative children to the list instead of letting them sink behind the card background.si-cardis not affectedThe Angular
si-cardcomponent projects[body]into a.content-containerthat already setsoverflow: hidden; border-radius: inherit, so.card > .listnever matches projected content. Its header is<si-card-header>, not.card-header. These rules only affect native.cardmarkup.Examples
Five examples still used
.list-groupand were migrated. Slot mapping:.list-item-indicatorreplaces themy-n4 me-5/ps-4spacing hacks,.list-item-titlecarries h5 typography (sosi-h5is dropped),.list-item-primary-actionreplaces manual action alignment.Two needed more than a class swap — both had long runs of hand-duplicated markup, partly mangled by prettier into the
</li\n>form, which is not reasonably editable by hand:si-fixed-height-layout-side-panel— 16 near-identical<li>blocks →@forover alistItemsarraysi-list-widget-css— 6 blocks →@forover abuildingsarrayThese are template restructures, not scope creep. In
si-list-widget-cssthe rows were all literally labelled "Building B"; they are now B–G. That example is not VRT-covered, so the rename is safe.si-weather-widget-configurablealso had invalid HTML — a<button>as a direct child of<ul>— now wrapped in an<li>.Docs
cards.md— all three card+list snippets and surrounding prose rewritten; nolist-groupreferences remain.list.md— new "List in a card" section. The migration table from the base branch is deliberately untouched.Verification
@forconversions and both.tschanges)stylelintandprettierclean over all touched filesVRT snapshots are not regenerated in this PR — only
si-card/si-cardandsi-fixed-height-layout-side-panelare snapshot-covered, and both change visually as intended. They need a run in the Docker image.Documentation.
Examples.
Dashboards Demo.
Playwright report.
Coverage Reports: