diff --git a/src/components/Toaster/README.md b/src/components/Toaster/README.md index 3d8ae21239..34b5f30327 100644 --- 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 index 44ba22d988..6ae39ce8e6 100644 --- 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 index 994adbe0b6..282d192ed3 100644 --- a/src/components/Toaster/Toast/Toast.tsx +++ b/src/components/Toaster/Toast/Toast.tsx @@ -101,12 +101,15 @@ export const Toast = React.forwardRef(function [type || 'default']: true, }; + const hasTitle = Boolean(title); + const hasContent = Boolean(content); + const icon = renderIcon ? renderIcon(props) : renderIconByType({type}); return (
{icon &&
{icon}
}
-

{title}

+ {hasTitle &&

{title}

} {isClosable && ( )} - {Boolean(content) &&
{content}
} + {hasContent && ( +
{content}
+ )} {renderActions({actions, onClose})}
diff --git a/src/components/Toaster/__stories__/Toaster.stories.tsx b/src/components/Toaster/__stories__/Toaster.stories.tsx index 07dcafacc7..eb49c68fc1 100644 --- 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 index b01f1ac94e..76c125bb6c 100644 --- 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,6 +77,7 @@ export const ToasterDemo = ({ content?: React.ReactNode; }): ToastProps { let content: React.ReactNode = null; + let title; if (extra.content) { content = extra.content; @@ -82,6 +85,10 @@ export const ToasterDemo = ({ 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,