material-components / material-components/material-web

Add reordering functionality to lists

Open
#959 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Type: Feature
Dominant language
SCSS
Stars
11.3k
Forks
1.1k
Avg merge
20h 28m
Merged PRs (30d)
13

Description

**Is your feature request related to a problem? Please describe.**
Lists are often reorderable, and list ordering via drag-and-drop is a rather complex and often-used feature that would fit better in this library instead of being reimplemented each time.

**Describe the solution you'd like**
An event, `onreordered`/`reordered`, that's sent to the list (or maybe the list item) for each movement. The event would contain information about which `mwc-list-item` moved, and the index it came from and moved to. Ideally, a parameter on `mwc-list-item` (`reordering`?) would be set, so custom `mwc-list-item` replacement components would be able to change their style and/or layout when being reordered.

**Describe alternatives you've considered**
Building custom list and list-item components to implement this behavior.

**Additional context**

https://material.io/components/lists/#behavior
#525 is potentially related?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the existing list and list-item components, then compare their behavior with the linked Material Design lists guidance and related issue #525. The issue does not name specific files or tests; done would require an agreed reordering interaction and event/API behavior for moved items and their indices.

Written by the indexing model from the issue text.

Assessment

Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.