feat(Toaster): remove allowAutoHiding in favour of timeout

gravity-ui · Dec 19, 2022 · fef4ca8 · fef4ca8
1 parent 5f96f62
commit fef4ca8
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 17 deletions.
diff --git a/src/components/Toaster/README.md b/src/components/Toaster/README.md
@@ -90,17 +90,16 @@ On initialization it is possible to pass className, that will be assigned to dom
 
 Accepts argument `toastOptions` with ongoing notification details:
 
-| Parameter       | Type            | Required | Default     | Description                                                                                                                                                         |
-| :-------------- | :-------------- | :------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| name            | `string`        | yes      |             | Notification unique name. Notifications with same names collapse into one                                                                                           |
-| title           | `string`        | yes      |             | Notification title                                                                                                                                                  |
-| className       | `string`        |          |             | CSS-class                                                                                                                                                           |
-| allowAutoHiding | `boolean`       |          | `true`      | Configuration that manages notification automatic hiding                                                                                                            |
-| timeout         | `number`        |          | 5000        | Time (in milliseconds)after which the notification will hide                                                                                                        |
-| content         | `node`          |          | `undefined` | Notification content. [Anything that can be rendered: numbers, strings, elements or an array](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes)  |
-| type            | `string`        |          | `undefined` | Notification type. Possible values: `error`, `success`. If `type` is set, icon (success/error) will be added into notification title. _By default there is no icon_ |
-| isClosable      | `boolean`       |          | `true`      | Configuration that manages visibility of cross icon, which allows to close notification                                                                             |
-| actions         | `ToastAction[]` |          | `undefined` | Array of [actions](./types.ts#L9) which displays after `content`                                                                                                    |
+| Parameter  | Type               | Required | Default     | Description                                                                                                                                                         |
+| :--------- | :----------------- | :------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| name       | `string`           | yes      |             | Notification unique name. Notifications with same names collapse into one                                                                                           |
+| title      | `string`           | yes      |             | Notification title                                                                                                                                                  |
+| className  | `string`           |          |             | CSS-class                                                                                                                                                           |
+| timeout    | `number` or `null` |          | 5000        | Time (in milliseconds) after which the notification will hide. Use `null` to disable toast hiding on timeout.                                                       |
+| content    | `node`             |          | `undefined` | Notification content. [Anything that can be rendered: numbers, strings, elements or an array](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes)  |
+| type       | `string`           |          | `undefined` | Notification type. Possible values: `error`, `success`. If `type` is set, icon (success/error) will be added into notification title. _By default there is no icon_ |
+| isClosable | `boolean`          |          | `true`      | Configuration that manages visibility of cross icon, which allows to close notification                                                                             |
+| actions    | `ToastAction[]`    |          | `undefined` | Array of [actions](./types.ts#L9) which displays after `content`                                                                                                    |
 
 Every `action` is an object with following parameters:
 

diff --git a/src/components/Toaster/Toast/Toast.tsx b/src/components/Toaster/Toast/Toast.tsx
@@ -176,7 +176,7 @@ export function Toast(props: ToastUnitedProps) {
         title,
         className,
         type,
-        allowAutoHiding = true,
+        timeout: timeoutProp = DEFAULT_TIMEOUT,
         isClosable = true,
         isOverride = false,
         mobile = false,
@@ -190,7 +190,7 @@ export function Toast(props: ToastUnitedProps) {
 
     const heightProps = useToastHeight({isOverride, status});
 
-    const timeout = allowAutoHiding ? props.timeout || DEFAULT_TIMEOUT : undefined;
+    const timeout = typeof timeoutProp === 'number' ? timeoutProp : undefined;
     const closeOnTimeoutProps = useCloseOnTimeout<HTMLDivElement>({onClose: handleClose, timeout});
 
     const mods = {

diff --git a/src/components/Toaster/__stories__/ToasterShowcase.tsx b/src/components/Toaster/__stories__/ToasterShowcase.tsx
@@ -77,15 +77,20 @@ export const ToasterDemo = ({
             content = CONTENT;
         }
 
+        let timeout = allowAutoHiding ? 5000 : null;
+
+        if (setTimeout) {
+            timeout = customTimeout;
+        }
+
         return {
             content,
             name: getToastName(extra.name),
             className: extra.className,
             title: extra.title,
             type: extra.type,
             isClosable: showCloseIcon,
-            timeout: setTimeout ? Number(customTimeout) : undefined,
-            allowAutoHiding: allowAutoHiding,
+            timeout,
             actions: setActions
                 ? ACTIONS.map((action, index) => ({
                       ...action,

diff --git a/src/components/Toaster/types.ts b/src/components/Toaster/types.ts
@@ -22,8 +22,7 @@ export type ToastProps = {
     name: string;
     title?: string;
     className?: string;
-    timeout?: number;
-    allowAutoHiding?: boolean;
+    timeout?: number | null;
     content?: React.ReactNode;
     type?: ToastType;
     isClosable?: boolean;