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
- Replace the MUI choice-control imports with the matching BUI group and option components where the pattern is straightforward.
- Convert
FormControlLabel label text into the children of the destination Radio or Checkbox node.
- Preserve simple
value, checked, and local change handlers when their destination mapping is mechanical.
- Use
CheckboxGroup when the source is clearly a grouped checkbox set rather than isolated standalone checkboxes.
- 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
Summary
Add a codemod that migrates the common MUI radio-group and checkbox-group patterns to BUI
RadioGroup/RadioandCheckboxGroup/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, andFormGroupimports from@material-ui/coreFormControlLabelTransformation Logic
FormControlLabellabel text into the children of the destinationRadioorCheckboxnode.value,checked, and local change handlers when their destination mapping is mechanical.CheckboxGroupwhen the source is clearly a grouped checkbox set rather than isolated standalone checkboxes.TODO(backstage-codemod): finish choice-group migration manuallyfor custom labels, validation wrappers, or option layouts that are not simple text labels.Before / After Example
Radio group:
Checkbox group:
Notes / Edge Cases
Changeset (when implementing)
@backstage/migrate-mui-radio-checkbox-groups-to-bui-groupsAdd codemod to migrate mui radio checkbox groups to bui groups for the Backstage MUI 4 to BUI migrationImplementation notes
codemods/misc/migrate-mui-radio-checkbox-groups-to-bui-groups/.worktrees/feat/mui4-to-bui/migrate-mui-radio-checkbox-groups-to-bui-groups