Summary
Add a codemod that migrates the common MUI TextField usage to BUI TextField, including the important onChange signature rewrite from event objects to direct string values.
This deserves its own codemod because the handler-shape change is easy to miss and appears repeatedly across form code.
Detection Criteria
TextField imports from @material-ui/core/TextField
- props such as
required, label, value, onChange, and fullWidth
onChange handlers that read event.target.value directly in JSX or local callback functions
Transformation Logic
- Replace the MUI import with
TextField from @backstage/ui.
- Map
required to isRequired.
- Preserve
label and value when they already match the BUI API.
- Rewrite the common direct value handler shapes from
event.target.value to the BUI string callback shape.
- When
name is a literal and id is absent, prefer preserving or promoting it only if the destination API clearly supports the result; otherwise leave the prop unchanged.
- Insert
TODO(backstage-codemod): finish TextField migration manually for adornments, multiline fields, helper text, select mode, or nontrivial event handling.
Before / After Example
Basic controlled text field:
// Before
import TextField from '@material-ui/core/TextField';
<TextField
required
label="Title"
value={value}
onChange={e => setValue(e.target.value)}
/>
// After
import { TextField } from '@backstage/ui';
<TextField
isRequired
label="Title"
value={value}
onChange={newValue => setValue(newValue)}
/>
Notes / Edge Cases
- This codemod should not guess how to migrate helper text, adornments, or multiline behavior unless the BUI destination prop is explicitly documented.
- Keep this issue separate from the select-family codemod even though MUI
TextField can run in select mode.
- Representative migration guidance comes from the MUI to BUI skill and the usage counts in the migration tracker.
- If a file already imports BUI
TextField, merge imports and dedupe names cleanly.
Changeset (when implementing)
- Package:
@backstage/migrate-mui-textfield-to-bui-textfield
- Bump: minor (initial release)
- Summary example:
Add codemod to migrate mui textfield to bui textfield for the Backstage MUI 4 to BUI migration
Implementation notes
- Target directory:
codemods/misc/migrate-mui-textfield-to-bui-textfield/
- Branch/worktree:
.worktrees/feat/mui4-to-bui/migrate-mui-textfield-to-bui-textfield
- Open PR when ready; one PR per codemod
Summary
Add a codemod that migrates the common MUI
TextFieldusage to BUITextField, including the importantonChangesignature rewrite from event objects to direct string values.This deserves its own codemod because the handler-shape change is easy to miss and appears repeatedly across form code.
Detection Criteria
TextFieldimports from@material-ui/core/TextFieldrequired,label,value,onChange, andfullWidthonChangehandlers that readevent.target.valuedirectly in JSX or local callback functionsTransformation Logic
TextFieldfrom@backstage/ui.requiredtoisRequired.labelandvaluewhen they already match the BUI API.event.target.valueto the BUI string callback shape.nameis a literal andidis absent, prefer preserving or promoting it only if the destination API clearly supports the result; otherwise leave the prop unchanged.TODO(backstage-codemod): finish TextField migration manuallyfor adornments, multiline fields, helper text, select mode, or nontrivial event handling.Before / After Example
Basic controlled text field:
Notes / Edge Cases
TextFieldcan run inselectmode.TextField, merge imports and dedupe names cleanly.Changeset (when implementing)
@backstage/migrate-mui-textfield-to-bui-textfieldAdd codemod to migrate mui textfield to bui textfield for the Backstage MUI 4 to BUI migrationImplementation notes
codemods/misc/migrate-mui-textfield-to-bui-textfield/.worktrees/feat/mui4-to-bui/migrate-mui-textfield-to-bui-textfield