angular / angular/components

[List] support "expand and collapse" from List spec

Open
#14,994 3 comments 5 reactions 0 assignees View on GitHub
area: material/expansion area: material/list feature needs: discussion P5
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Please describe the feature you would like to request.
The [List spec](https://material.io/design/components/lists.html#types) includes an "Expand and collapse" control. This functions more or less like an Expansion Panel but with List Item styling: dividers are used instead of a surrounding border / different background color, and the expand/collapse button is placed according to the rules for secondary action buttons.

#### What is the use-case or motivation for this proposal?
Support full capabilities of List as described in the spec

#### Is there anything else we should know?
I put together [a StackBlitz](https://stackblitz.com/edit/angular-material2-issue-list-expand) showing the current behavior when an expansion panel is placed in a list. The behavior is more or less as expected but the styling does not work as a list item, and just "fixing up" the current behavior is a lot to ask of consumers.

In my own project I built a component to implement this behavior, but it's not going to be as robust as it would be if supported directly here. Of course, styling an expansion panel to behave correctly when used as a list item is only one approach, and I don't mean to suggest a specific design. My custom component tracks its own expansion state and handles divider logic, etc, internally.

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz to reproduce the current behavior, then compare the existing List and Expansion Panel components with the linked List spec. The work is done when expand/collapse behavior, dividers, list-item styling, and secondary-action button placement match the requested design; the payload does not name specific files or tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.