feat(Toaster)!: rename timeout to autoHiding (#248)

* `timeout` renamed to `autoHiding` * `allowAutoHiding` option removed, use `autoHiding=false` instead
gravity-ui · Jan 26, 2023 · ed0585a · ed0585a
1 parent c3b1aeb
commit ed0585a
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 23 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                                                                                                                                                           |
+| autoHiding | `number` or `false` |          | 5000        | Time (in milliseconds) after which the notification will hide. Use `false` to disable toast hiding after 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,
+        autoHiding: 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__/Toaster.stories.tsx b/src/components/Toaster/__stories__/Toaster.stories.tsx
@@ -53,7 +53,7 @@ export default {
         name: disabledControl,
         title: disabledControl,
         className: disabledControl,
-        timeout: disabledControl,
+        autoHiding: disabledControl,
         content: disabledControl,
         type: disabledControl,
         isClosable: disabledControl,

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 : false;
+
+        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,
+            autoHiding: timeout,
             actions: setActions
                 ? ACTIONS.map((action, index) => ({
                       ...action,

diff --git a/src/components/Toaster/__tests__/ToasterProvider.test.tsx b/src/components/Toaster/__tests__/ToasterProvider.test.tsx
@@ -83,7 +83,7 @@ describe('api.remove', () => {
         act(() => {
             providerAPI.add({
                 ...toastProps,
-                timeout: toastTimeout,
+                autoHiding: toastTimeout,
             });
         });
 
@@ -106,7 +106,7 @@ it('should remove toast after timeout', function () {
     act(() => {
         providerAPI.add({
             ...toastProps,
-            timeout: toastTimeout,
+            autoHiding: toastTimeout,
         });
     });
 
@@ -134,7 +134,7 @@ it('should preserve toast on hover', function () {
     act(() => {
         providerAPI.add({
             ...toastProps,
-            timeout: toastTimeout,
+            autoHiding: toastTimeout,
         });
     });
 
@@ -172,7 +172,7 @@ describe('api.update', () => {
         act(() => {
             providerAPI.add({
                 ...toastProps,
-                timeout: toastTimeout,
+                autoHiding: toastTimeout,
             });
         });
 
@@ -204,7 +204,7 @@ describe('api.update', () => {
         act(() => {
             providerAPI.add({
                 ...toastProps,
-                timeout: toastTimeout,
+                autoHiding: toastTimeout,
             });
         });
 

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;
+    autoHiding?: number | false;
     content?: React.ReactNode;
     type?: ToastType;
     isClosable?: boolean;