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
- Replace the MUI list imports with
List and ListRow from @backstage/ui when the row pattern is recognized.
- Move
ListItemIcon content into the icon prop on ListRow.
- Move
ListItemText primary into the row children and secondary into the description prop.
- Preserve the outer
List wrapper and row ordering.
- 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
Summary
Add a codemod that migrates the common
List/ListItem/ListItemIcon/ListItemTextpattern to BUIListandListRow.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, andListItemTextimports from@material-ui/coreTransformation Logic
ListandListRowfrom@backstage/uiwhen the row pattern is recognized.ListItemIconcontent into theiconprop onListRow.ListItemText primaryinto the row children andsecondaryinto thedescriptionprop.Listwrapper and row ordering.TODO(backstage-codemod): verify nonstandard list row manuallywhen the row contains actions, nested lists, selected state, or custom layout markup.Before / After Example
Primary and secondary list item text:
Notes / Edge Cases
ListRow.<ul>/<li>markup.Changeset (when implementing)
@backstage/migrate-mui-list-family-to-bui-listAdd codemod to migrate mui list family to bui list for the Backstage MUI 4 to BUI migrationImplementation notes
codemods/misc/migrate-mui-list-family-to-bui-list/.worktrees/feat/mui4-to-bui/migrate-mui-list-family-to-bui-list