docs: revise ToastManager usage to address toast animation issue (#822

) * docs: revise ToastManager usage to address toast animation issue * docs: specify custom CSS variable for the toast spacing example
trendmicro-frontend · Jan 5, 2024 · 58cb30e · 58cb30e
1 parent 7c24914
commit 58cb30e
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 52 deletions.
diff --git a/packages/react-docs/pages/_app.page.js b/packages/react-docs/pages/_app.page.js
@@ -104,15 +104,9 @@ const App = (props) => {
                   '[data-toast-placement^="top"] > &:first-of-type': {
                     mt: '4x', // the space to the top edge of the screen
                   },
-                  '[data-toast-placement^="top"] > &:not(:first-of-type)': {
-                    mt: '2x', // the space between toasts
-                  },
                   '[data-toast-placement^="bottom"] > &:last-of-type': {
                     mb: '4x', // the space to the bottom edge of the screen
                   },
-                  '[data-toast-placement^="bottom"] > &:not(:last-of-type)': {
-                    mb: '2x', // the space between toasts
-                  },
                   '[data-toast-placement$="left"] > &': {
                     ml: '4x', // the space to the left edge of the screen
                   },

diff --git a/packages/react-docs/pages/components/toast-manager/faq-control-spacing-between-toasts.js b/packages/react-docs/pages/components/toast-manager/faq-control-spacing-between-toasts.js
@@ -8,17 +8,24 @@ const FormGroup = (props) => (
 const ToastApp = () => {
   const counterRef = useRef(0);
   const toast = useToastManager();
-  const placement = 'bottom-right';
-  const isTop = placement.includes('top');
 
   return (
     <Button
       onClick={() => {
+        const placement = 'bottom-right';
+        const isTop = placement.includes('top');
         const render = ({ data, onClose, placement }) => {
+          const toastSpacingKey = isTop ? 'pb' : 'pt';
+          const styleProps = {
+            [toastSpacingKey]: 'var(--data-toast-spacing)',
+            width: 320,
+          };
           return (
-            <Toast isClosable onClose={onClose} minWidth={320}>
-              This is a toast message #{data.index + 1}
-            </Toast>
+            <Box sx={styleProps}>
+              <Toast isClosable onClose={onClose}>
+                This is a toast message #{data.index + 1}
+              </Toast>
+            </Box>
           );
         };
 
@@ -96,18 +103,13 @@ const App = () => {
       <ToastManager
         TransitionProps={{
           sx: {
+            '--data-toast-spacing': `${toastSpacing}px`,
             '[data-toast-placement^="top"] > &:first-of-type': {
               mt: edgeSpacing, // the space to the top edge of the screen
             },
-            '[data-toast-placement^="top"] > &:not(:first-of-type)': {
-              mt: toastSpacing, // the space between toasts
-            },
             '[data-toast-placement^="bottom"] > &:last-of-type': {
               mb: edgeSpacing, // the space to the bottom edge of the screen
             },
-            '[data-toast-placement^="bottom"] > &:not(:last-of-type)': {
-              mb: toastSpacing, // the space between toasts
-            },
             '[data-toast-placement$="left"] > &': {
               ml: edgeSpacing, // the space to the left edge of the screen
             },

diff --git a/packages/react-docs/pages/components/toast-manager/index.page.mdx b/packages/react-docs/pages/components/toast-manager/index.page.mdx
@@ -18,15 +18,9 @@ function App() {
             '[data-toast-placement^="top"] > &:first-of-type': {
               mt: '4x', // the space to the top edge of the screen
             },
-            '[data-toast-placement^="top"] > &:not(:first-of-type)': {
-              mt: '2x', // the space between toasts
-            },
             '[data-toast-placement^="bottom"] > &:last-of-type': {
               mb: '4x', // the space to the bottom edge of the screen
             },
-            '[data-toast-placement^="bottom"] > &:not(:last-of-type)': {
-              mb: '2x', // the space between toasts
-            },
             '[data-toast-placement$="left"] > &': {
               ml: '4x', // the space to the left edge of the screen
             },
@@ -53,8 +47,15 @@ function MyComponent() {
   const toast = useToastManager();
   const handleClickOpenToast = () => {
     const render = ({ onClose, placement }) => {
+      const isTop = placement.includes('top');
+      const toastSpacingKey = isTop ? 'pb' : 'pt';
+      const styleProps = {
+        [toastSpacingKey]: '2x',
+        width: 320,
+      };
+
       return (
-        <Box width={320}>
+        <Box sx={styleProps}>
           <Toast isClosable onClose={onClose}>
             This is a toast notification
           </Toast>
@@ -96,9 +97,9 @@ See the [useToastManager](./toast-manager/useToastManager) Hook for detailed usa
 
 ## Commonly Asked Questions
 
-### Control the spacing between toasts
+### Control the spacing to the edges of the screen
 
-To control the spacing between toasts, make use of the `TransitionProps` prop in the `ToastManager`. Pass the `sx` prop to the transition component with your preferred spacing.
+To control the spacing to the edges of the screen, make use of the `TransitionProps` prop in the `ToastManager`. Pass the `sx` prop to the transition component with your preferred spacing.
 
 ```jsx disabled
 <ToastManager
@@ -107,15 +108,9 @@ To control the spacing between toasts, make use of the `TransitionProps` prop in
       '[data-toast-placement^="top"] > &:first-of-type': {
         mt: edgeSpacing, // the space to the top edge of the screen
       },
-      '[data-toast-placement^="top"] > &:not(:first-of-type)': {
-        mt: toastSpacing, // the space between toasts
-      },
       '[data-toast-placement^="bottom"] > &:last-of-type': {
         mb: edgeSpacing, // the space to the bottom edge of the screen
       },
-      '[data-toast-placement^="bottom"] > &:not(:last-of-type)': {
-        mb: toastSpacing, // the space between toasts
-      },
       '[data-toast-placement$="left"] > &': {
         ml: edgeSpacing, // the space to the left edge of the screen
       },

diff --git a/packages/react-docs/pages/components/toast-manager/useToastManager.js b/packages/react-docs/pages/components/toast-manager/useToastManager.js
@@ -11,8 +11,15 @@ const App = () => {
   const toast = useToastManager();
   const handleClickOpenToast = useCallback(() => {
     const render = ({ onClose, placement }) => {
+      const isTop = placement.includes('top');
+      const toastSpacingKey = isTop ? 'pb' : 'pt';
+      const styleProps = {
+        [toastSpacingKey]: '2x',
+        width: 320,
+      };
+
       return (
-        <Box width={320}>
+        <Box sx={styleProps}>
           <Toast isClosable onClose={onClose}>
             <Text>This is a toast notification</Text>
           </Toast>

diff --git a/packages/react-docs/pages/components/toast/appearances.js b/packages/react-docs/pages/components/toast/appearances.js
@@ -60,7 +60,6 @@ const ToastLayout = (props) => {
       lineHeight="sm"
       textAlign="left"
       boxShadow={boxShadow}
-      width={320}
       {...props}
     />
   );
@@ -70,8 +69,15 @@ const App = () => {
   const toast = useToastManager();
   const handleClickBy = (ToastNotification) => () => {
     toast(({ onClose, placement }) => {
+      const isTop = placement.includes('top');
+      const toastSpacingKey = isTop ? 'pb' : 'pt';
+      const styleProps = {
+        [toastSpacingKey]: '2x',
+        width: 320,
+      };
+
       return (
-        <ToastLayout>
+        <ToastLayout sx={styleProps}>
           <ToastNotification onClose={onClose} />
         </ToastLayout>
       );

diff --git a/packages/react-docs/pages/components/toast/icons.js b/packages/react-docs/pages/components/toast/icons.js
@@ -64,7 +64,6 @@ const ToastLayout = (props) => {
       lineHeight="sm"
       textAlign="left"
       boxShadow={boxShadow}
-      width={320}
       {...props}
     />
   );
@@ -74,8 +73,15 @@ const App = () => {
   const toast = useToastManager();
   const handleClickBy = (ToastNotification) => () => {
     toast(({ onClose, placement }) => {
+      const isTop = placement.includes('top');
+      const toastSpacingKey = isTop ? 'pb' : 'pt';
+      const styleProps = {
+        [toastSpacingKey]: '2x',
+        width: 320,
+      };
+
       return (
-        <ToastLayout>
+        <ToastLayout sx={styleProps}>
           <ToastNotification onClose={onClose} />
         </ToastLayout>
       );
@@ -95,10 +101,12 @@ const App = () => {
     <Stack direction="column" spacing="6x">
       {alertToasts.map((ToastNotification, idx) => (
         <Box key={idx}>
-          <Button variant="secondary" onClick={handleClickBy(ToastNotification)}>
-            Show
-          </Button>
-          <ToastLayout mt="4x">
+          <Box mb="4x">
+            <Button variant="secondary" onClick={handleClickBy(ToastNotification)}>
+              Show
+            </Button>
+          </Box>
+          <ToastLayout>
             <ToastNotification />
           </ToastLayout>
         </Box>

diff --git a/packages/react-docs/pages/components/toast/layout.js b/packages/react-docs/pages/components/toast/layout.js
@@ -133,7 +133,6 @@ const ToastLayout = (props) => {
       lineHeight="sm"
       textAlign="left"
       boxShadow={boxShadow}
-      width={320}
       {...props}
     />
   );
@@ -143,8 +142,15 @@ const App = () => {
   const toast = useToastManager();
   const handleClickBy = (ToastNotification) => () => {
     toast(({ onClose, placement }) => {
+      const isTop = placement.includes('top');
+      const toastSpacingKey = isTop ? 'pb' : 'pt';
+      const styleProps = {
+        [toastSpacingKey]: '2x',
+        width: 320,
+      };
+
       return (
-        <ToastLayout>
+        <ToastLayout sx={styleProps}>
           <ToastNotification onClose={onClose} />
         </ToastLayout>
       );

diff --git a/packages/react-docs/pages/getting-started/usage/index.page.mdx b/packages/react-docs/pages/getting-started/usage/index.page.mdx
@@ -66,15 +66,9 @@ function App(props) {
               '[data-toast-placement^="top"] > &:first-of-type': {
                 mt: '4x', // the space to the top edge of the screen
               },
-              '[data-toast-placement^="top"] > &:not(:first-of-type)': {
-                mt: '2x', // the space between toasts
-              },
               '[data-toast-placement^="bottom"] > &:last-of-type': {
                 mb: '4x', // the space to the bottom edge of the screen
               },
-              '[data-toast-placement^="bottom"] > &:not(:last-of-type)': {
-                mb: '2x', // the space between toasts
-              },
               '[data-toast-placement$="left"] > &': {
                 ml: '4x', // the space to the left edge of the screen
               },

diff --git a/packages/react-docs/pages/patterns/notification/app-toast.js b/packages/react-docs/pages/patterns/notification/app-toast.js
@@ -56,8 +56,16 @@ const App = () => {
     };
 
     toast.notify(({ onClose, placement }) => {
+      const isTop = placement.includes('top');
+      const toastSpacingKey = isTop ? 'pb' : 'pt';
+
       return (
-        <ToastLayout>
+        <ToastLayout
+          sx={{
+            [toastSpacingKey]: '2x',
+            width: 320,
+          }}
+        >
           <Toast appearance={appearance} isClosable onClose={onClose}>
             {content}
           </Toast>
@@ -139,11 +147,9 @@ const ToastLayout = (props) => {
       lineHeight="sm"
       textAlign="left"
       boxShadow={boxShadow}
-      width={320}
       {...props}
     />
   );
 };
 
-
 export default App;