feat: add an option for a custom container className for toasts container (#800)

Author: Bloomca

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# v21.3.0
+
+-   [Feat] `ToastProvider` accepts an optional `containerClassName` property, which let's you to add your own class for the container of all toasts.
+
 # v21.2.3
 
 -   [Fix] Prevent horizontal expansion of `TextArea` with `autoExpand={true}`.

package-lock.json

@@ -6,7 +6,7 @@
         "email": "henning@doist.com",
         "url": "http://doist.com"
     },
-    "version": "21.2.3",
+    "version": "21.3.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

package.json

@@ -47,6 +47,17 @@ describe('useToast', () => {
         }
     }
 
+    describe('ToastsProvider', () => {
+        it('allows to pass a custom className for the container', () => {
+            const { showToast } = renderTestCase({
+                containerClassName: 'customContainerClassName',
+            })
+            showToast()
+
+            expect(screen.getByTestId('toasts-container')).toHaveClass('customContainerClassName')
+        })
+    })
+
     it('renders a semantic alert with the given message', () => {
         const { showToast } = renderTestCase()
         showToast({ message: 'Project has been published' })

src/toast/toast.test.tsx

@@ -186,6 +186,11 @@ type ToastsProviderProps = {
      * The app wrapped by the provider.
      */
     children: NonNullable<React.ReactNode>
+
+    /**
+     * Custom classname for the toasts container, if you need to fine-tune the position or other styles
+     */
+    containerClassName?: string
 }
 
 /**
@@ -200,6 +205,7 @@ function ToastsProvider({
     padding = 'large',
     defaultAutoDismissDelay = 10 /* seconds */,
     defaultDismissLabel = 'Close',
+    containerClassName,
 }: ToastsProviderProps) {
     const [toasts, setToasts] = React.useState<ToastsList>([])
     const { mappedRef, animateRemove } = useToastsAnimation()
@@ -240,11 +246,12 @@ function ToastsProvider({
             <Portal>
                 {toasts.length === 0 ? null : (
                     <Box
-                        className={styles.stackedToastsView}
+                        className={[styles.stackedToastsView, containerClassName]}
                         position="fixed"
                         width="full"
                         paddingX={padding}
                         paddingBottom={padding}
+                        data-testid="toasts-container"
                     >
                         <Stack space="medium">
                             {toasts.map(({ toastId, ...props }) => (