docs: ensure ToastManager is layered above PortalManager to enabl…

…e adding toast notifications within a portal (#936)
trendmicro-frontend · Oct 8, 2024 · 5116834 · 5116834
1 parent 2421c20
commit 5116834
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 83 deletions.
diff --git a/packages/react-docs/pages/_app.page.js b/packages/react-docs/pages/_app.page.js
@@ -133,31 +133,31 @@ const App = (props) => {
  theme={customTheme}
  useCSSBaseline
  >
- <PortalManager>
- <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
- },
+ <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>
  <MDXProvider components={MDXComponents}>
  <Page {...props} />
  <GlobalStyles />
  </MDXProvider>
- </ToastManager>
- </PortalManager>
+ </PortalManager>
+ </ToastManager>
  </TonicProvider>
  </EmotionCacheProvider>
  </InstantSearch>

diff --git a/packages/react-docs/pages/components/portal-manager/index.page.mdx b/packages/react-docs/pages/components/portal-manager/index.page.mdx
@@ -4,20 +4,20 @@
 
 ## Setup
 
-To incorporate with `PortalManager`, wrap your root component with the `PortalManager` component. This provides a context that the `usePortalManager` Hook can access.
+First, import the necessary components:
 
-```jsx disabled
-import { TonicProvider, PortalManager } from '@tonic-ui/react';
+```js
+import {
+ PortalManager,
+} from '@tonic-ui/react';
+```
 
-function App() {
- return (
- <TonicProvider>
- <PortalManager>
- {/* Your app goes here */}
- </PortalManager>
- </TonicProvider>
- );
-}
+Next, wrap your application with `PortalManager`:
+
+```jsx disabled
+<PortalManager>
+ <App />
+</PortalManager>
 ```
 
 Once `PortalManager` is set up, any component can use the `usePortalManager` Hook to create and manage portals.

diff --git a/packages/react-docs/pages/components/toast-manager/index.page.mdx b/packages/react-docs/pages/components/toast-manager/index.page.mdx
@@ -4,38 +4,36 @@
 
 ## Setup
 
-To use `ToastManager`, you should wrap your root component with it, along with the `TonicProvider` component, as shown in the example below:
+First, import the `ToastManager` component:
 
-```jsx disabled
-import { TonicProvider, ToastManager } from '@tonic-ui/react';
+```jsx
+import { ToastManager } from '@tonic-ui/react';
+```
 
-function App() {
- return (
- <TonicProvider>
- <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"
- >
- {/* Your app goes here */}
- </ToastManager>
- </TonicProvider>
- );
-}
+Next, wrap your application with `ToastManager`:
+
+```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 />
+</ToastManager>
 ```
 
 Once `ToastManager` is set up, you can use the `useToastManager` Hook to create and manage toasts from any component:

diff --git a/packages/react-docs/pages/getting-started/usage/index.page.mdx b/packages/react-docs/pages/getting-started/usage/index.page.mdx
@@ -45,9 +45,9 @@ import { Global, css } from '@emotion/react';
 import React from 'react';
 import {
  Box,
- TonicProvider,
  PortalManager, // allows you to create and manage portals in the application
  ToastManager, // allows you to create and manage toasts in the application
+ TonicProvider,
  colorStyle,
  theme,
  useColorMode,
@@ -69,30 +69,30 @@ function App(props) {
  theme={theme}
  useCSSBaseline={true} // If `true`, apply CSS reset and base styles
  >
- <PortalManager>
- <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
- },
+ <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>
  <Layout>
  <Box {...props} />
  </Layout>
- </ToastManager>
- </PortalManager>
+ </PortalManager>
+ </ToastManager>
  </TonicProvider>
  );
 }