Skip to content

feat: MUI 4 to BUI migration - replace TextField with BUI TextField #123

Description

@schultzp2020

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

  1. Replace the MUI import with TextField from @backstage/ui.
  2. Map required to isRequired.
  3. Preserve label and value when they already match the BUI API.
  4. Rewrite the common direct value handler shapes from event.target.value to the BUI string callback shape.
  5. 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.
  6. 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

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