Summary
Add a codemod that migrates the common MUI Accordion / AccordionSummary / AccordionDetails structure to the BUI accordion API.
This family appears often enough in the migration tracker that it is worth a dedicated issue, even though some real-world cases will still need TODO markers for custom summary markup or controlled state.
Detection Criteria
Accordion, AccordionSummary, and AccordionDetails imports from @material-ui/core
- plain summary text or summary text wrapped in a simple
Typography node
- optional
expandIcon props on AccordionSummary
Transformation Logic
- Replace the MUI accordion imports with
Accordion, AccordionTrigger, and AccordionPanel from @backstage/ui.
- Map simple summary text to the
title prop on AccordionTrigger.
- Move
AccordionDetails children into AccordionPanel.
- Drop or TODO-mark custom
expandIcon props when the BUI destination pattern no longer needs them.
- Insert
TODO(backstage-codemod): finish accordion migration manually for controlled accordions, heavily custom summary markup, or nested interactive content that changes the trigger semantics.
Before / After Example
Simple accordion:
// Before
<Accordion>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
Section title
</AccordionSummary>
<AccordionDetails>Body</AccordionDetails>
</Accordion>
// After
<Accordion>
<AccordionTrigger title="Section title" />
<AccordionPanel>Body</AccordionPanel>
</Accordion>
Notes / Edge Cases
- Do not auto-collapse multiple accordions into
AccordionGroup unless the parent grouping semantics are explicit.
- This issue is separate from the older Backstage
Collapsible -> Accordion codemod because the source API here is MUI, not @backstage/ui.
- Keep custom expansion state logic explicit and marked for review rather than guessing a new state model.
- The migration skill and the tracker counts are the primary sources of truth for this family.
Changeset (when implementing)
- Package:
@backstage/migrate-mui-accordion-to-bui-accordion
- Bump: minor (initial release)
- Summary example:
Add codemod to migrate mui accordion to bui accordion for the Backstage MUI 4 to BUI migration
Implementation notes
- Target directory:
codemods/misc/migrate-mui-accordion-to-bui-accordion/
- Branch/worktree:
.worktrees/feat/mui4-to-bui/migrate-mui-accordion-to-bui-accordion
- Open PR when ready; one PR per codemod
Summary
Add a codemod that migrates the common MUI
Accordion/AccordionSummary/AccordionDetailsstructure to the BUI accordion API.This family appears often enough in the migration tracker that it is worth a dedicated issue, even though some real-world cases will still need TODO markers for custom summary markup or controlled state.
Detection Criteria
Accordion,AccordionSummary, andAccordionDetailsimports from@material-ui/coreTypographynodeexpandIconprops onAccordionSummaryTransformation Logic
Accordion,AccordionTrigger, andAccordionPanelfrom@backstage/ui.titleprop onAccordionTrigger.AccordionDetailschildren intoAccordionPanel.expandIconprops when the BUI destination pattern no longer needs them.TODO(backstage-codemod): finish accordion migration manuallyfor controlled accordions, heavily custom summary markup, or nested interactive content that changes the trigger semantics.Before / After Example
Simple accordion:
Notes / Edge Cases
AccordionGroupunless the parent grouping semantics are explicit.Collapsible->Accordioncodemod because the source API here is MUI, not@backstage/ui.Changeset (when implementing)
@backstage/migrate-mui-accordion-to-bui-accordionAdd codemod to migrate mui accordion to bui accordion for the Backstage MUI 4 to BUI migrationImplementation notes
codemods/misc/migrate-mui-accordion-to-bui-accordion/.worktrees/feat/mui4-to-bui/migrate-mui-accordion-to-bui-accordion