feat(Toaster): make title optional (#879)

gravity-ui · Aug 10, 2023 · 37a434d · 37a434d
1 parent d969193
commit 37a434d
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 8 deletions.
diff --git a/src/components/Toaster/README.md b/src/components/Toaster/README.md
@@ -113,7 +113,7 @@ 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                                                                                                                                                  |
+| title      | `string`                                |          |             | 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)  |

diff --git a/src/components/Toaster/Toast/Toast.scss b/src/components/Toaster/Toast/Toast.scss
@@ -110,6 +110,10 @@ $block: '.#{variables.$ns}toast';
         line-height: 24px;
     }
 
+    &__content_without-title {
+        padding-right: $closeButtonTitleSpacing + $closeButtonSize;
+    }
+
     &__action {
         margin-right: 8px;
     }

diff --git a/src/components/Toaster/Toast/Toast.tsx b/src/components/Toaster/Toast/Toast.tsx
@@ -101,12 +101,15 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastUnitedProps>(function
         [type || 'default']: true,
     };
 
+    const hasTitle = Boolean(title);
+    const hasContent = Boolean(content);
+
     const icon = renderIcon ? renderIcon(props) : renderIconByType({type});
     return (
         <div ref={ref} className={b(mods, className)} {...closeOnTimeoutProps} data-toast>
             {icon && <div className={b('icon-container')}>{icon}</div>}
             <div className={b('container')}>
-                <h3 className={b('title')}>{title}</h3>
+                {hasTitle && <h3 className={b('title')}>{title}</h3>}
                 {isClosable && (
                     <Button
                         size={'s'}
@@ -118,7 +121,9 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastUnitedProps>(function
                         <Icon data={Xmark} />
                     </Button>
                 )}
-                {Boolean(content) && <div className={b('content')}>{content}</div>}
+                {hasContent && (
+                    <div className={b('content', {'without-title': !hasTitle})}>{content}</div>
+                )}
                 {renderActions({actions, onClose})}
             </div>
         </div>

diff --git a/src/components/Toaster/__stories__/Toaster.stories.tsx b/src/components/Toaster/__stories__/Toaster.stories.tsx
@@ -40,10 +40,9 @@ const disabledControl = {
     },
 };
 
-function booleanControl(label: string, defaultValue = false) {
+function booleanControl(label: string) {
     return {
         name: label,
-        defaultValue,
         control: 'boolean',
     };
 }
@@ -63,14 +62,20 @@ export default {
         actions: disabledControl,
         removeCallback: disabledControl,
         createSameName: booleanControl('Same name'),
-        showCloseIcon: booleanControl('Show close icon', true),
+        showCloseIcon: booleanControl('Show close icon'),
         setTimeout: booleanControl('Set custom timeout'),
-        allowAutoHiding: booleanControl('Allow auto hiding', true),
+        allowAutoHiding: booleanControl('Allow auto hiding'),
+        setTitle: booleanControl('Add title'),
         setContent: booleanControl('Add content'),
         setActions: booleanControl('Add action'),
         action1View: viewSelect('Action 1 view'),
         action2View: viewSelect('Action 2 view'),
     },
+    args: {
+        setTitle: true,
+        showCloseIcon: true,
+        allowAutoHiding: true,
+    },
     decorators: [
         function withToasters(Story) {
             return (

diff --git a/src/components/Toaster/__stories__/ToasterShowcase.tsx b/src/components/Toaster/__stories__/ToasterShowcase.tsx
@@ -36,6 +36,7 @@ interface Props {
     showCloseIcon: boolean;
     setTimeout: boolean;
     allowAutoHiding: boolean;
+    setTitle: boolean;
     setContent: boolean;
     setActions: boolean;
     action1View: ButtonView;
@@ -49,6 +50,7 @@ export const ToasterDemo = ({
     showCloseIcon,
     setTimeout,
     allowAutoHiding,
+    setTitle,
     setContent,
     setActions,
     action1View,
@@ -75,13 +77,18 @@ export const ToasterDemo = ({
         content?: React.ReactNode;
     }): ToastProps {
         let content: React.ReactNode = null;
+        let title;
 
         if (extra.content) {
             content = extra.content;
         } else if (setContent) {
             content = CONTENT;
         }
 
+        if (extra.title && setTitle) {
+            title = extra.title;
+        }
+
         let timeout = allowAutoHiding ? 5000 : false;
 
         if (setTimeout) {
@@ -92,7 +99,7 @@ export const ToasterDemo = ({
             content,
             name: getToastName(extra.name),
             className: extra.className,
-            title: extra.title,
+            title,
             type: extra.type,
             isClosable: showCloseIcon,
             autoHiding: timeout,