Skip to content

feat: MUI 4 to BUI migration - replace radio and checkbox group patterns with BUI groups #125

Description

@schultzp2020

Summary

Add a codemod that migrates the common MUI radio-group and checkbox-group patterns to BUI RadioGroup / Radio and CheckboxGroup / Checkbox.

This issue intentionally covers the labeled choice-group families together because the source patterns overlap around FormControlLabel, FormGroup, and local option markup.

Detection Criteria

  • RadioGroup, Radio, Checkbox, FormControlLabel, and FormGroup imports from @material-ui/core
  • simple labeled radio and checkbox options where the label text is passed directly via FormControlLabel
  • group wrappers with local selection handlers and no custom option rendering

Transformation Logic

  1. Replace the MUI choice-control imports with the matching BUI group and option components where the pattern is straightforward.
  2. Convert FormControlLabel label text into the children of the destination Radio or Checkbox node.
  3. Preserve simple value, checked, and local change handlers when their destination mapping is mechanical.
  4. Use CheckboxGroup when the source is clearly a grouped checkbox set rather than isolated standalone checkboxes.
  5. Insert TODO(backstage-codemod): finish choice-group migration manually for custom labels, validation wrappers, or option layouts that are not simple text labels.

Before / After Example

Radio group:

// Before
<RadioGroup value={value} onChange={handleChange}>
  <FormControlLabel value="a" control={<Radio />} label="Option A" />
</RadioGroup>
// After
<RadioGroup value={value} onChange={handleChange}>
  <Radio value="a">Option A</Radio>
</RadioGroup>

Checkbox group:

// Before
<FormGroup>
  <FormControlLabel control={<Checkbox checked={enabled} onChange={toggleEnabled} />} label="Enabled" />
</FormGroup>
// After
<CheckboxGroup>
  <Checkbox isSelected={enabled} onChange={toggleEnabled}>Enabled</Checkbox>
</CheckboxGroup>

Notes / Edge Cases

  • Do not conflate standalone one-off checkboxes with grouped checkbox-field migrations unless a wrapper group is clearly present.
  • If the source handler relies on MUI event signatures, preserve the code and add a TODO rather than guessing the new callback shape.
  • This family is intentionally separate from the slider issue because the event and value models are different.
  • The migration skill is the main source of truth for the destination component set here.

Changeset (when implementing)

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

Implementation notes

  • Target directory: codemods/misc/migrate-mui-radio-checkbox-groups-to-bui-groups/
  • Branch/worktree: .worktrees/feat/mui4-to-bui/migrate-mui-radio-checkbox-groups-to-bui-groups
  • 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