diff --git a/src/components/Toaster/README.md b/src/components/Toaster/README.md index ea8acb512b..b8e2305548 100644 --- a/src/components/Toaster/README.md +++ b/src/components/Toaster/README.md @@ -104,8 +104,9 @@ Accepts argument `toastOptions` with ongoing notification details: Every `action` is an object with following parameters: -| Parameter | Type | Required | Default | Description | -| :--------------- | :----------- | :------- | :------ | :----------------------------------------------------- | -| label | `string` | yes | | Action text description | -| onClick | `() => void` | yes | | On action click handler | -| removeAfterClick | `boolean` | | `true` | If notification should be closed after click on action | +| Parameter | Type | Required | Default | Description | +| :--------------- | :---------------------------------------- | :------- | :--------- | :---------------------------------------------------------- | +| label | `string` | yes | | Action text description | +| onClick | `() => void` | yes | | On action click handler | +| view | [`ButtonView`](../Button/README.md#props) | | `outlined` | Appearance of the action, same to `view` of the ` ); })} diff --git a/src/components/Toaster/__stories__/Toaster.stories.tsx b/src/components/Toaster/__stories__/Toaster.stories.tsx index 95e66a7874..70c4fac844 100644 --- a/src/components/Toaster/__stories__/Toaster.stories.tsx +++ b/src/components/Toaster/__stories__/Toaster.stories.tsx @@ -1,9 +1,36 @@ import React from 'react'; import {ComponentStory, ComponentMeta} from '@storybook/react'; +import {ButtonView} from '../../Button'; import {Toast} from '../Toast/Toast'; import {ToasterDemo} from './ToasterShowcase'; import {ToasterProvider} from '../Provider/ToasterProvider'; +const views: ButtonView[] = [ + 'normal', + 'action', + 'outlined', + 'outlined-info', + 'outlined-danger', + 'raised', + 'flat', + 'flat-info', + 'flat-danger', + 'flat-secondary', + 'normal-contrast', + 'outlined-contrast', + 'flat-contrast', +]; + +function viewSelect(name: string) { + return { + name, + control: 'select', + defaultValue: 'outlined', + options: views, + if: {arg: 'setActions'}, + }; +} + const disabledControl = { table: { disable: true, @@ -39,6 +66,8 @@ export default { allowAutoHiding: booleanControl('Allow auto hiding', true), setContent: booleanControl('Add content'), setActions: booleanControl('Add action'), + action1View: viewSelect('Action 1 view'), + action2View: viewSelect('Action 2 view'), }, decorators: [ function withToasters(Story) { diff --git a/src/components/Toaster/__stories__/ToasterShowcase.tsx b/src/components/Toaster/__stories__/ToasterShowcase.tsx index a3f965dd15..84289eb9da 100644 --- a/src/components/Toaster/__stories__/ToasterShowcase.tsx +++ b/src/components/Toaster/__stories__/ToasterShowcase.tsx @@ -3,7 +3,7 @@ import {block} from '../../utils/cn'; import {Alarm, Info, Success} from '../../icons'; import {ToasterComponent, ToastProps, useToaster} from '..'; import {Icon} from '../../Icon'; -import {Button} from '../../Button'; +import {Button, ButtonView} from '../../Button'; import './ToasterShowcase.scss'; @@ -33,6 +33,8 @@ interface Props { allowAutoHiding: boolean; setContent: boolean; setActions: boolean; + action1View: ButtonView; + action2View: ButtonView; } const customTimeout = 3000; @@ -44,6 +46,8 @@ export const ToasterDemo = ({ allowAutoHiding, setContent, setActions, + action1View, + action2View, }: Props) => { const toaster = useToaster(); const [{lastToastName}, setState] = React.useState({ @@ -82,7 +86,12 @@ export const ToasterDemo = ({ isClosable: showCloseIcon, timeout: setTimeout ? Number(customTimeout) : undefined, allowAutoHiding: allowAutoHiding, - actions: setActions ? ACTIONS : undefined, + actions: setActions + ? ACTIONS.map((action, index) => ({ + ...action, + view: index === 0 ? action1View : action2View, + })) + : undefined, }; } diff --git a/src/components/Toaster/types.ts b/src/components/Toaster/types.ts index f6668b9e9b..725f3ddec4 100644 --- a/src/components/Toaster/types.ts +++ b/src/components/Toaster/types.ts @@ -1,3 +1,6 @@ +import React from 'react'; +import {ButtonView} from '../Button'; + export type ToasterArgs = { // FIXME: BREAKING CHANGE. Remove in the next major /** @deprecated Will be deleted in te next major. Use className instead */ @@ -11,6 +14,7 @@ export type ToastType = 'info' | 'success' | 'warning' | 'error'; export type ToastAction = { onClick: VoidFunction; label: string; + view?: ButtonView; removeAfterClick?: boolean; };