Skip to content

Commit

Permalink
docs(ui-codemods): add v10 codemod to docs
Browse files Browse the repository at this point in the history
  • Loading branch information
joyenjoyer authored and balzss committed Jul 31, 2024
1 parent 566751b commit 91eb1ee
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 2 deletions.
5 changes: 3 additions & 2 deletions docs/contributor-docs/v10-upgrade-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,7 @@ If you were using it, you need to switch to the `canvas` or the `canvas-high-con

### Component level color overrides

If you had component level overrides of colors you need to migrate using the following table
(codemods to automate this are coming soon):
If you had component level overrides of colors you need to migrate using the following table:

| Old | New (v10) |
| ------------------ | ----------------------------- |
Expand All @@ -54,6 +53,8 @@ If you had component level overrides of colors you need to migrate using the fol
| `colors.Porcelain` | `colors.contrasts.grey1111` |
| `colors.White` | `colors.contrasts.white1010` |

You can use the latest [codemod](#ui-codemods) to automate this process.

InstUI v9:

```jsx
Expand Down
11 changes: 11 additions & 0 deletions packages/ui-codemods/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,17 @@ jscodeshift -t node_modules/@instructure/ui-codemods/lib/updateV9Breaking.ts <pa

This codemod addresses breaking changes following a v9 upgrade. Notably, it updates `EmotionThemeProvider` to `InstUISettingsProvider`. Execute this in your project post-upgrade to InstUI v9. Prettier is turned on by default for output formatting, and you can also use the `usePrettier` flag. Additionally, the parser flag can specify the parser for jsx and tsx files.

### Codemod for changing the color palette to the v10 color palette

```sh
---
type: code
---
jscodeshift -t node_modules/@instructure/ui-codemods/lib/updateV10Breaking.ts <path> --parser=tsx --usePrettier=false
```

This codemod updates the `canvas` and `canvas-high-contrast` color palettes. Execute this in your project post-upgrade to InstUI v10. Prettier is turned on by default for output formatting, and you can also use the `usePrettier` flag. Additionally, the parser flag can specify the parser for jsx and tsx files.

### Codemod for adding a wrapper to ReactDOM.render()

```sh
Expand Down

0 comments on commit 91eb1ee

Please sign in to comment.