You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file contains 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
Reordered ToastManager to be above PortalManager in the main application component and usage examples to ensure proper layering for toast notifications.
Updated documentation for PortalManager and ToastManager to provide clearer setup instructions and simplified code examples.
Changes walkthrough 📝
Relevant files
Enhancement
_app.page.js
Reorder ToastManager above PortalManager in App component
packages/react-docs/pages/_app.page.js
Reordered ToastManager to be above PortalManager.
Adjusted transition properties for toast placement.
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Add explanation about nesting PortalManager inside ToastManager
Consider adding a brief explanation of why PortalManager should be wrapped inside ToastManager. This will provide context for developers and align with the changes made in other files.
-Next, wrap your application with `PortalManager`:+Next, wrap your application with `PortalManager`. Note that `PortalManager` should be nested inside `ToastManager` to enable adding toast notifications within a portal:
```jsx disabled
-<PortalManager>- <App />-</PortalManager>+<ToastManager>+ <PortalManager>+ <App />+ </PortalManager>+</ToastManager>
- [ ] **Apply this suggestion** <!-- /improve --apply_suggestion=0 -->
<details><summary>Suggestion importance[1-10]: 8</summary>
Why: The suggestion enhances the documentation by explaining the nesting order, which is crucial for proper functionality. This aligns with the changes in the PR and provides valuable context for developers.
</details></details></td><td align=center>8
</td></tr><tr><td>
<details><summary>Add information about wrapping PortalManager with ToastManager in the setup instructions</summary>
___
**Consider mentioning that <code>ToastManager</code> should wrap <code>PortalManager</code> to ensure proper <br>functionality when using toasts within portals. This will provide a more complete <br>setup instruction and align with the changes made in other files.**
[packages/react-docs/pages/components/toast-manager/index.page.mdx [13-37]](https://github.com/trendmicro-frontend/tonic-ui/pull/936/files#diff-3aea5a94f2dfd32a155e165c3342bc413b27975a2ad7d3d04cd9cb1b682d560aR13-R37)
```diff
-Next, wrap your application with `ToastManager`:
+Next, wrap your application with `ToastManager`. Make sure `ToastManager` wraps `PortalManager` to enable adding toast notifications within a portal:
```jsx disabled
<ToastManager
TransitionProps={{
sx: {
'[data-toast-placement^="top"] > &:first-of-type': {
mt: '4x', // the space to the top edge of the screen
},
'[data-toast-placement^="bottom"] > &:last-of-type': {
mb: '4x', // the space to the bottom edge of the screen
},
'[data-toast-placement$="left"] > &': {
ml: '4x', // the space to the left edge of the screen
},
'[data-toast-placement$="right"] > &': {
mr: '4x', // the space to the right edge of the screen
},
},
}}
placement="bottom-right"
>
- <App />
+ <PortalManager>
+ <App />
+ </PortalManager>
</ToastManager>
- [ ] **Apply this suggestion** <!-- /improve --apply_suggestion=1 -->
<details><summary>Suggestion importance[1-10]: 8</summary>
Why: This suggestion improves the setup instructions by clarifying the component hierarchy, which is essential for correct usage. It aligns with the PR changes and aids in preventing potential integration issues.
</details></details></td><td align=center>8
</td></tr><tr><td rowspan=1><strong>Maintainability</strong></td>
<td>
<details><summary>Add a comment explaining the order of ToastManager and PortalManager components</summary>
___
**Consider adding a comment explaining why <code>ToastManager</code> needs to be above <br><code>PortalManager</code>. This will help future developers understand the importance of this <br>order and prevent accidental changes that could break the functionality.**
[packages/react-docs/pages/_app.page.js [136-154]](https://github.com/trendmicro-frontend/tonic-ui/pull/936/files#diff-49f34385f9684300c85addd1b7dc358db1cfc469e159754c0ea81c147fa99672R136-R154)
```diff
+{/* ToastManager needs to be above PortalManager to enable adding toast notifications within a portal */}
<ToastManager
TransitionProps={{
sx: {
'[data-toast-placement^="top"] > &:first-of-type': {
mt: '4x', // the space to the top edge of the screen
},
'[data-toast-placement^="bottom"] > &:last-of-type': {
mb: '4x', // the space to the bottom edge of the screen
},
'[data-toast-placement$="left"] > &': {
ml: '4x', // the space to the left edge of the screen
},
'[data-toast-placement$="right"] > &': {
mr: '4x', // the space to the right edge of the screen
},
},
}}
>
<PortalManager>
Apply this suggestion
Suggestion importance[1-10]: 7
Why: Adding a comment to explain the order of components improves code maintainability by providing context for future developers. This suggestion is relevant and aligns with the changes made in the PR.
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.
PR Type
enhancement, documentation
Description
ToastManagerto be abovePortalManagerin the main application component and usage examples to ensure proper layering for toast notifications.PortalManagerandToastManagerto provide clearer setup instructions and simplified code examples.Changes walkthrough 📝
_app.page.js
Reorder ToastManager above PortalManager in App componentpackages/react-docs/pages/_app.page.js
ToastManagerto be abovePortalManager.index.page.mdx
Reorder ToastManager above PortalManager in usage examplepackages/react-docs/pages/getting-started/usage/index.page.mdx
ToastManagerto be abovePortalManagerin example.index.page.mdx
Update PortalManager setup documentationpackages/react-docs/pages/components/portal-manager/index.page.mdx
PortalManager.index.page.mdx
Update ToastManager setup documentationpackages/react-docs/pages/components/toast-manager/index.page.mdx
ToastManager.