Codemod to migrate from inverted prop to InvertedColorScheme component

[nlopin]

The context

With the introduction of the dark theme in Wave (#356), we decided to remove inverted props from the components where they existed:

• Input
• Password
• Textarea
• Button
• Select
• SelectList
• PhoneInput
• Datepicker
• Tooltip
• Breadcrumbs
• Logo

The inverted colours were used to assemble the dark theme, which means the dark theme is fully compatible with the previous look and feel.

Problem

We have users of the inverted prop who must migrate their code to the new version. They must delete the inverted prop and wrap the piece of the interface with the FlipTheme component to switch it to the dark mode:

Before

<Box as="form">
  <Input name="hello" inverted />
  <Textarea inverted />
  <Button type="submit" inverted>Submit</Button>
</Box>

After:

<FlipTheme>
  <Box as="form">
    <Input name="hello" />
    <Textarea />
    <Button type="submit">Submit</Button>
  </Box>
</FlipTheme>

Solution

In the ideal case, our code mode can detect components with the inverted prop, find their common parent and wrap it with the FlipTheme component. At the same time, it requires precision and knowledge about the product UI, so I doubt we can provide a good migration experience and not break the UI at the same time by putting the wrapper too high up the component tree.

The solution with the okay-ish migration experience is to work on the component level and wrap each component with the inverted prop with the FilpTheme component. The downside of this approach is the potential decline in performance (the DOM becomes deeper).

We should highlight this issue in the migration guide and recommend refactoring the migrated code to keep as few FlipTheme components as possible

[martimalek]

Should Text also be in the list? I see it has an inverted prop