Skip to content

feat: modernize List-related components to the latest MD3 specs - #5143

Open
roksanaz wants to merge 25 commits into
callstack:mainfrom
roksanaz:feat/modernize-list-md3
Open

roksanaz wants to merge 25 commits into
callstack:mainfrom
roksanaz:feat/modernize-list-md3

Conversation

@roksanaz

@roksanaz roksanaz commented Oct 20, 2026 •

Copy link
Copy Markdown

Motivation

Brings List.Item and List.Accordion in line with the latest MD3 list spec:

  • tokens, spacing and typography instead of hardcoded sizes
  • MD3 selected colors
  • expand/collapse animation on the accordion
  • typed leading and trailing slots on List.Item, which take precedence over left and right

This combines #5041, #5057 and #5042, which were stacked on each other.

Related issue

Related to #4976, #4930

Screenshots / Videos

List.Accordion
Screenshot_1792580189
Screenshot 2026-10-21 at 13 45 11

List.Item screenshots are in the comment below.

Test plan

Open the List example and:

  1. Compare one, two and three line rows against the spec.
  2. Expand and collapse an accordion and check the chevron and content animate.
  3. Check a selected row uses the primary container colors.
  4. Check the leading and trailing slots render and pick up the item color, including in a selected row.

…s-spacing

# Conflicts:
#	src/components/List/ListItem.tsx
#	src/components/__tests__/ListAccordion.test.tsx
#	src/components/__tests__/ListImage.test.tsx
…ist-typed-slots

# Conflicts:
#	src/components/List/ListItem.tsx
…s-spacing

# Conflicts:
#	src/components/List/ListAccordion.tsx
#	src/components/List/ListItem.tsx
#	src/components/__tests__/ListAccordion.test.tsx
…nd-accordion-animation

# Conflicts:
#	src/components/List/ListAccordion.tsx
#	src/components/List/ListItem.tsx
#	src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
#	src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
#	src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
…ist-typed-slots

# Conflicts:
#	src/components/List/ListItem.tsx
@github-actions

github-actions Bot commented Oct 20, 2026 •

Copy link
Copy Markdown

Found potential problems with the pull request:

  • The description is too long. Please keep it under 1000 characters.

@roksanaz

Copy link
Copy Markdown
Author

List.Item (mobile):

Screenshot_1792580208 Screenshot_1792580216 Screenshot_1792580223 Screenshot_1792580227

@roksanaz

Copy link
Copy Markdown
Author

List.Item (web):
Screenshot 2026-10-21 at 13 45 25
Screenshot 2026-10-21 at 13 45 30
Screenshot 2026-10-21 at 13 45 38
Screenshot 2026-10-21 at 13 45 44

@roksanaz
roksanaz marked this pull request as ready for review October 21, 2026 14:13

This branch has not been deployed

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants