Skip to content

feat: MUI 4 to BUI migration - replace Chip with Tag #121

Description

@schultzp2020

Summary

Add a codemod that replaces simple MUI Chip usage with BUI Tag, and recognizes obvious static chip groups that can become TagGroup.

This codemod should stay conservative: display-only chips are in scope, while interactive or avatar chips should be left for manual follow-up.

Detection Criteria

  • Chip imports from @material-ui/core/Chip
  • plain label-driven chips without onDelete, clickable, or avatar behavior
  • obvious static sibling groups of those chips under a common parent

Transformation Logic

  1. Replace the MUI Chip import with Tag from @backstage/ui.
  2. Move the label prop value into the Tag children.
  3. Preserve obvious size="small" mappings when the destination API supports the same size.
  4. When a local sequence of plain display chips is trivially groupable, wrap them in TagGroup.
  5. Insert TODO(backstage-codemod): verify interactive chip migration manually for chips using delete handlers, clickability, avatars, or custom icons.

Before / After Example

Single display chip:

// Before
import Chip from '@material-ui/core/Chip';

<Chip label="Category" size="small" />
// After
import { Tag } from '@backstage/ui';

<Tag size="small">Category</Tag>

Static chip group:

// Before
<>
  <Chip label="A" />
  <Chip label="B" />
</>
// After
<TagGroup>
  <Tag>A</Tag>
  <Tag>B</Tag>
</TagGroup>

Notes / Edge Cases

  • Do not guess how clickable or deletable chips should map to the BUI component set.
  • If chips are used as dense counters or badges, confirm that Tag is still the right destination; otherwise leave a TODO marker.
  • Representative evidence comes from the notifications plugin migration and the migration skill itself.
  • This issue should remain independent from icon migration even if a chip includes a leading icon.

Changeset (when implementing)

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

Implementation notes

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