feat(Toaster): add support for rendering user component in actions (#2462)

Author: ogonkov

src/components/Toaster/README-ru.md

@@ -109,7 +109,7 @@ const FoobarWithToaster = withToaster()(FoobarComponent);
 | content    | `node`                                  |              | `undefined`           | Содержимое уведомления. Оно может включать [все, что можно отобразить: числа, строки, элементы или массив](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes).                                                                        |
 | theme      | `string`                                |              | `"normal"`            | Тема уведомления. Возможные значения: `"normal"`, `"info"`, `"success"`, `"warning"`, `danger`, `"utility"`. Если для `theme` установить любое значение, кроме `"normal"`, в заголовок уведомления добавится иконка. _По умолчанию иконка отсутствует_. |
 | isClosable | `boolean`                               |              | `true`                | Конфигурация, управляющая отображением иконки X, которая позволяет пользователю закрыть уведомление.                                                                                                                                                    |
-| actions    | `ToastAction[]`                         |              | `undefined`           | Массив [действий](./types.ts#L9), отображаемых после `content`.                                                                                                                                                                                         |
+| actions    | `ToastAction[] \| () => ReactElement`   |              | `undefined`           | Массив [действий](./types.ts#L9), отображаемых после `content`, или коллбек, возвращающий элемент React.                                                                                                                                                |
 | renderIcon | `(toastProps: ToastProps) => ReactNode` |              | `undefined`           | Используется для кастомизации иконки тоста. По умолчанию используется поведение на основе типа.                                                                                                                                                         |
 
 Каждое действие (`action`) — это объект со следующими параметрами:

src/components/Toaster/README.md

@@ -111,7 +111,7 @@ It accepts the `toastOptions` argument with the ongoing notification details:
 | content    | `node`                                  |          | `undefined` | Notification content. This may be [anything that can be rendered: numbers, strings, elements, or an array](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes)                                                                          |
 | theme      | `string`                                |          | `"normal"`  | Notification theme. The possible values are `"normal"`, `"info"`, `"success"`, `"warning"`, `danger`, and `"utility"`. If `theme` is set to anything but `"normal"`, the icon will be added into the notification title. _By default, there is no icon_. |
 | isClosable | `boolean`                               |          | `true`      | Configuration that manages the visibility of the X icon, which allows the user to close the notification                                                                                                                                                 |
-| actions    | `ToastAction[]`                         |          | `undefined` | Array of [actions](./types.ts#L9) that are displayed after `content`                                                                                                                                                                                     |
+| actions    | `ToastAction[] \| () => ReactElement`   |          | `undefined` | Array of [actions](./types.ts#L9) that are displayed after `content`, or callback, that returned required actions                                                                                                                                        |
 | renderIcon | `(toastProps: ToastProps) => ReactNode` |          | `undefined` | Used to customize the toast icon. Type-based behavior is used by default                                                                                                                                                                                 |
 
 Every `action` is an object with following parameters:

src/components/Toaster/Toast/Toast.tsx

@@ -33,18 +33,16 @@ interface ToastInnerProps {
 interface ToastUnitedProps extends InternalToastProps, ToastInnerProps {}
 
 interface RenderActionsProps {
-    actions?: ToastAction[];
+    actions?: (() => React.ReactElement) | ToastAction[];
     onClose: VoidFunction;
 }
 
 function renderActions({actions, onClose}: RenderActionsProps) {
-    if (!actions || !actions.length) {
-        return null;
-    }
+    let component: React.ReactElement | React.ReactElement[] | undefined;
 
-    return (
-        <div className={b('actions')}>
-            {actions.map(({label, onClick, view = 'outlined', removeAfterClick = true}, index) => {
+    if (Array.isArray(actions)) {
+        component = actions.map(
+            ({label, onClick, view = 'outlined', removeAfterClick = true}, index) => {
                 const onActionClick = () => {
                     onClick();
                     if (removeAfterClick) {
@@ -55,7 +53,6 @@ function renderActions({actions, onClose}: RenderActionsProps) {
                 return (
                     <Button
                         key={`${label}__${index}`}
-                        className={b('action')}
                         onClick={onActionClick}
                         type="button"
                         size="l"
@@ -65,9 +62,21 @@ function renderActions({actions, onClose}: RenderActionsProps) {
                         {label}
                     </Button>
                 );
-            })}
-        </div>
-    );
+            },
+        );
+
+        if (!actions.length) {
+            return null;
+        }
+    } else {
+        component = actions?.();
+
+        if (!component) {
+            return null;
+        }
+    }
+
+    return <div className={b('actions')}>{component}</div>;
 }
 
 interface RenderIconProps {

src/components/Toaster/__tests__/Toast.visual.test.tsx

@@ -3,18 +3,23 @@ import type * as React from 'react';
 import {test} from '~playwright/core';
 
 import type {Toast} from '../Toast/Toast';
+import type {ToastAction} from '../types';
 
 import {ToastStories} from './helpersPlaywright';
 
 const wrapperOptions = {
     width: 312,
 };
 
-function getToastActions(
+function getToastActions({
     contrastButton = true,
-): Required<React.ComponentProps<typeof Toast>>['actions'] {
+    firstLabel = 'Action',
+}: {
+    contrastButton?: boolean;
+    firstLabel?: string;
+} = {}): ToastAction[] {
     return [
-        {onClick() {}, label: 'Action', view: contrastButton ? 'normal-contrast' : 'normal'},
+        {onClick() {}, label: firstLabel, view: contrastButton ? 'normal-contrast' : 'normal'},
         {onClick() {}, label: 'Something More', view: 'outlined'},
     ];
 }
@@ -33,7 +38,7 @@ test.describe('Toast', {tag: '@Toaster'}, () => {
         await mount(
             <ToastStories.ToastPlayground
                 {...simpleToastProps}
-                actions={getToastActions(false)}
+                actions={getToastActions({contrastButton: false})}
                 theme="normal"
             />,
             wrapperOptions,
@@ -88,9 +93,9 @@ test.describe('Toast', {tag: '@Toaster'}, () => {
     });
 
     test('actions wrap', async ({mount, expectScreenshot}) => {
-        const actions = getToastActions();
-
-        actions[0].label = 'Really long button text that cause buttons to wrap';
+        const actions = getToastActions({
+            firstLabel: 'Really long button text that cause buttons to wrap',
+        });
 
         await mount(
             <ToastStories.ToastPlayground

src/components/Toaster/types.ts

@@ -24,7 +24,7 @@ export type ToastProps = {
     content?: React.ReactNode;
     theme?: ToastTheme;
     isClosable?: boolean;
-    actions?: ToastAction[];
+    actions?: (() => React.ReactElement) | ToastAction[];
 
     onClose?: () => void;