[LG-4952] feat(codemods): add modal-v20 codemod for automatic Modal v20 upgrade #3049
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: e7c4141 The changes in this PR will be included in the next version bump. This PR includes changesets to release 6 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
3 tasks
|
Size Change: 0 B Total Size: 1.99 MB ℹ️ View Unchanged
|
stephl3
force-pushed
the
steph/modal-dialog-codemod
branch
from
8f62307 to
e7c4141
Compare
shaneeza
reviewed
Aug 18, 2025
| Key changes include: | ||
|
|
||
| - `className` → `backdropClassName` | ||
| - **Note:** `backdropClassName` is also deprecated in v20 and only provided for migration ease. For custom backdrop styles, use the CSS `::backdrop` pseudo-element to target and style the dialog backdrop instead of relying on this prop. |
There was a problem hiding this comment.
nit: Can you provide an example of where you would use ::backdrop?
shaneeza
reviewed
Aug 18, 2025
|
|
||
| 1. In the root of your project, install [@lg-tools/cli](https://github.com/mongodb/leafygreen-ui/blob/main/tools/cli/README.md#installation) and [@lg-tools/codemods](https://github.com/mongodb/leafygreen-ui/blob/main/tools/codemods/README.md#installation). | ||
| 2. Bump to the version of the Modal packages you'd like to upgrade and install the bumped packages. | ||
| 3. Run [modal-v20 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#modal-v20). By default, this will apply for all relevant packages in the specified directory. The `--packages` flag can be used to only modify specified packages. However, it is recommended to upgrade all packages simultaneously. If necessary, re-lint your project. |
There was a problem hiding this comment.
nit: Could you provide the snippet to run?
shaneeza
reviewed
Aug 18, 2025
| * This must happen after step 1 to avoid className being renamed to backdropClassName | ||
| */ | ||
| packagesToCheck.forEach(packageName => { | ||
| const componentsToTransform = getImportSpecifiersForDeclaration({ |
There was a problem hiding this comment.
Can getImportSpecifiersForDeclaration be called before steps 1, 2, and 3, so you don't have to call it for each step?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✍️ Proposed changes
This PR adds the
modal-v20codemod to automatically upgrade Modal components to v20 breaking changes. The codemod provides seamless migration from the old prop structure to the new top-layer rendering architecture, handling all the breaking changes automatically while preserving developer intent.Key features:
className→backdropClassName,contentClassName→classNameinitialFocusprop with helpful guidanceModal as LGModal)--packagesflagModal v20 changes made in PR #3048
🎟️ Jira ticket: LG-4952
✅ Checklist
pnpm changesetand documented my changes🧪 How to test changes
Testing the Modal v20 Codemod
Build the codemods package:
Run the test suite:
pnpm run test tools/codemods/src/codemods/modal-v20Verify all test scenarios pass:
rename-className-props: Sequential prop renamingremove-initialFocus: Prop removal with guidance commentshandle-aliases: Alias handling (e.g.,MyModal,LGConfirmationModal)filter-packages: Selective package transformation