Skip to content

feat: MUI 4 to BUI migration - replace Accordion with BUI Accordion #124

Description

@schultzp2020

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

  1. Replace the MUI accordion imports with Accordion, AccordionTrigger, and AccordionPanel from @backstage/ui.
  2. Map simple summary text to the title prop on AccordionTrigger.
  3. Move AccordionDetails children into AccordionPanel.
  4. Drop or TODO-mark custom expandIcon props when the BUI destination pattern no longer needs them.
  5. 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

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