feat: Allow ReactNode as children/content of the Toast - closes #6038

packages/@react-spectrum/toast/chromatic/Toast.chromatic.tsx

@@ -51,3 +51,11 @@ export const LongContent = {
 export const LongContentAction = {
   args: {variant: 'positive', children: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.', actionLabel: 'Undo'}
 };
+
+export const WithReactNodeContent = {
+  args: {variant: 'positive', children: <React.Fragment><strong>Neutral</strong> <i>toast</i> <b>with</b> <em>ReactNode</em> content</React.Fragment>}
+};
+
+export const WithReactNodeContentAction = {
+  args: {variant: 'positive', children: <React.Fragment><strong>Neutral</strong> <i>toast</i> <b>with</b> <em>ReactNode</em> content</React.Fragment>, actionLabel: 'Undo'}
+};

packages/@react-spectrum/toast/docs/Toast.mdx

@@ -165,6 +165,20 @@ function Example() {
 }
 ```
 
+## ReactNode as content
+
+Toasts can accept a `ReactNode` as content, allowing for more complex content, such as formatted text or other components. When using a `ReactNode`, be sure to provide an accessible description for screen readers.
+
+```tsx example
+<Button
+  ///- begin highlight -///
+  onPress={() => ToastQueue.info(<div><b>Bold</b> and <i>italic</i> toast</div>)}
+  ///- end highlight -///
+  variant="primary">
+  Show toast
+</Button>
+```
+
 ## API
 
 ### ToastQueue

packages/@react-spectrum/toast/src/Toast.tsx

@@ -28,7 +28,7 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useToast} from '@react-aria/toast';
 
 export interface SpectrumToastValue {
-  children: string,
+  children: string | React.ReactNode,
   variant: 'positive' | 'negative' | 'info' | 'neutral',
   actionLabel?: string,
   onAction?: () => void,

packages/@react-spectrum/toast/src/ToastContainer.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaToastRegionProps} from '@react-aria/toast';
+import type {AriaToastRegionProps} from '@react-aria/toast';
 import React, {ReactElement, useEffect, useRef} from 'react';
 import {SpectrumToastValue, Toast} from './Toast';
 import {Toaster} from './Toaster';
@@ -119,7 +119,7 @@ export function ToastContainer(props: SpectrumToastContainerProps): ReactElement
   return null;
 }
 
-function addToast(children: string, variant: SpectrumToastValue['variant'], options: SpectrumToastOptions = {}) {
+function addToast(children: string | React.ReactNode, variant: SpectrumToastValue['variant'], options: SpectrumToastOptions = {}) {
   // Dispatch a custom event so that toasts can be intercepted and re-targeted, e.g. when inside an iframe.
   if (typeof CustomEvent !== 'undefined' && typeof window !== 'undefined') {
     let event = new CustomEvent('react-spectrum-toast', {
@@ -157,19 +157,19 @@ function addToast(children: string, variant: SpectrumToastValue['variant'], opti
 
 const SpectrumToastQueue = {
   /** Queues a neutral toast. */
-  neutral(children: string, options: SpectrumToastOptions = {}): CloseFunction {
+  neutral(children: string | React.ReactNode, options: SpectrumToastOptions = {}): CloseFunction {
     return addToast(children, 'neutral', options);
   },
   /** Queues a positive toast. */
-  positive(children: string, options: SpectrumToastOptions = {}): CloseFunction {
+  positive(children: string | React.ReactNode, options: SpectrumToastOptions = {}): CloseFunction {
     return addToast(children, 'positive', options);
   },
   /** Queues a negative toast. */
-  negative(children: string, options: SpectrumToastOptions = {}): CloseFunction {
+  negative(children: string | React.ReactNode, options: SpectrumToastOptions = {}): CloseFunction {
     return addToast(children, 'negative', options);
   },
   /** Queues an informational toast. */
-  info(children: string, options: SpectrumToastOptions = {}): CloseFunction {
+  info(children: string | React.ReactNode, options: SpectrumToastOptions = {}): CloseFunction {
     return addToast(children, 'info', options);
   }
 };

packages/@react-spectrum/toast/stories/Toast.stories.tsx

@@ -64,6 +64,21 @@ Default.story = {
   }
 };
 
+export const WithReactNode = (args) => <RenderProviderWithReactNode {...args} />;
+Default.story = {
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          {id: 'landmark-main-is-top-level', enabled: false},
+          {id: 'landmark-no-duplicate-main', enabled: false},
+          {id: 'landmark-unique', enabled: false}
+        ]
+      }
+    }
+  }
+};
+
 
 export const WithAction = (args) => (
   <RenderProvider {...args} actionLabel="Action" onAction={action('onAction')} />
@@ -192,6 +207,34 @@ function RenderProvider(options: SpectrumToastOptions) {
   );
 }
 
+function RenderProviderWithReactNode(options: SpectrumToastOptions) {
+  return (
+    <ButtonGroup>
+      <Button
+        onPress={() => ToastQueue.neutral(<div>Toast <i>available</i></div>, {...options, onClose: action('onClose')})}
+        variant="secondary">
+        Show Neutral Toast
+      </Button>
+      <Button
+        onPress={() => ToastQueue.positive(<span>Toast is <b>done</b>!</span>, {...options, onClose: action('onClose')})}
+        variant="primary">
+        Show Positive Toast
+      </Button>
+      <Button
+        onPress={() => ToastQueue.negative(<div>Toast is <em>burned</em>!</div>, {...options, onClose: action('onClose')})}
+        variant="negative">
+        Show Negative Toast
+      </Button>
+      <Button
+        onPress={() => ToastQueue.info(<span><strong>Toasting</strong>…</span>, {...options, onClose: action('onClose')})}
+        variant="accent"
+        style="outline">
+        Show Info Toast
+      </Button>
+    </ButtonGroup>
+  );
+}
+
 function ToastToggle(options: SpectrumToastOptions) {
   let [close, setClose] = useState(null);
 

packages/@react-spectrum/toast/test/ToastContainer.test.js

@@ -22,7 +22,7 @@ function RenderToastButton(props = {}) {
   return (
     <div>
       <Button
-        onPress={() => ToastQueue[props.variant || 'neutral']('Toast is default', props)}
+        onPress={() => ToastQueue[props.variant || 'neutral'](props.content ?? 'Toast is default', props)}
         variant="primary">
         Show Default Toast
       </Button>
@@ -372,4 +372,26 @@ describe('Toast Provider and Container', function () {
     let region = getByRole('region');
     expect(region).toHaveAttribute('aria-label', 'Toasts');
   });
+
+  it('should support ReactNode as children/content', () => {
+    let {getByRole} = renderComponent(
+      <RenderToastButton
+        content={
+          <React.Fragment>
+            <strong>My new folder</strong> created within <b>Week 1</b>
+          </React.Fragment>
+        } />
+    );
+
+    const button = getByRole('button');
+    triggerPress(button);
+
+    const alert = getByRole('alert');
+    expect(alert).toBeVisible();
+    expect(alert).toHaveTextContent('My new folder created within Week 1');
+    expect(alert.querySelector('strong')).toBeVisible();
+    expect(alert.querySelector('strong')).toHaveTextContent('My new folder');
+    expect(alert.querySelector('b')).toBeVisible();
+    expect(alert.querySelector('b')).toHaveTextContent('Week 1');
+  });
 });