Skip to content

feat: MUI 4 to BUI migration - replace List family primitives with BUI List #120

Description

@schultzp2020

Summary

Add a codemod that migrates the common List / ListItem / ListItemIcon / ListItemText pattern to BUI List and ListRow.

This is a good candidate for one issue because the MUI source primitives almost always appear together and collapse into one destination row component.

Detection Criteria

  • List, ListItem, ListItemIcon, and ListItemText imports from @material-ui/core
  • list rows with a single icon and primary/secondary text pair
  • plain noninteractive list structures that do not depend on nested list semantics

Transformation Logic

  1. Replace the MUI list imports with List and ListRow from @backstage/ui when the row pattern is recognized.
  2. Move ListItemIcon content into the icon prop on ListRow.
  3. Move ListItemText primary into the row children and secondary into the description prop.
  4. Preserve the outer List wrapper and row ordering.
  5. Insert TODO(backstage-codemod): verify nonstandard list row manually when the row contains actions, nested lists, selected state, or custom layout markup.

Before / After Example

Primary and secondary list item text:

// Before
<List>
  <ListItem>
    <ListItemIcon><DocsIcon /></ListItemIcon>
    <ListItemText primary="Docs" secondary="Read the docs" />
  </ListItem>
</List>
// After
<List>
  <ListRow icon={<DocsIcon />} description="Read the docs">
    Docs
  </ListRow>
</List>

Notes / Edge Cases

  • Interactive lists with selection, drag-and-drop, or custom trailing actions should be left with TODO markers rather than force-fit into ListRow.
  • This codemod should not attempt to rewrite arbitrary <ul> / <li> markup.
  • If a file mixes simple and complex list rows, migrate only the simple rows and leave the others explicit for review.
  • The scaffolder actions migration and the BUI list docs provide representative destination structures.

Changeset (when implementing)

  • Package: @backstage/migrate-mui-list-family-to-bui-list
  • Bump: minor (initial release)
  • Summary example: Add codemod to migrate mui list family to bui list for the Backstage MUI 4 to BUI migration

Implementation notes

  • Target directory: codemods/misc/migrate-mui-list-family-to-bui-list/
  • Branch/worktree: .worktrees/feat/mui4-to-bui/migrate-mui-list-family-to-bui-list
  • Open PR when ready; one PR per codemod

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions