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 `` |
+| removeAfterClick | `boolean` | | `true` | If notification should be closed after click on action |
diff --git a/src/components/Toaster/Toast/Toast.scss b/src/components/Toaster/Toast/Toast.scss
index a739ceae1b..8506887fb9 100644
--- a/src/components/Toaster/Toast/Toast.scss
+++ b/src/components/Toaster/Toast/Toast.scss
@@ -159,8 +159,7 @@ $block: '.#{$ns}toast';
padding-right: 28px;
}
- &__title,
- &__action {
+ &__title {
line-height: 24px;
}
@@ -172,7 +171,6 @@ $block: '.#{$ns}toast';
&__action {
margin-right: 8px;
- color: var(--yc-color-text-link);
}
& &__btn-close {
diff --git a/src/components/Toaster/Toast/Toast.tsx b/src/components/Toaster/Toast/Toast.tsx
index ed79a30d2d..960701f994 100644
--- a/src/components/Toaster/Toast/Toast.tsx
+++ b/src/components/Toaster/Toast/Toast.tsx
@@ -3,7 +3,6 @@ import {block} from '../../utils/cn';
import {useCloseOnTimeout} from '../../utils/useCloseOnTimeout';
import {Icon, IconProps} from '../../Icon';
import {Button} from '../../Button';
-import {Link} from '../../Link';
import {Alarm, CrossIcon, Info, Success} from '../../icons';
import type {ToastAction, ToastProps, ToastType} from '../types';
@@ -133,7 +132,7 @@ function renderActions({actions, onClose}: RenderActionsProps) {
return (
- {actions.map(({label, onClick, removeAfterClick = true}, index) => {
+ {actions.map(({label, onClick, view = 'outlined', removeAfterClick = true}, index) => {
const onActionClick = () => {
onClick();
if (removeAfterClick) {
@@ -142,13 +141,15 @@ function renderActions({actions, onClose}: RenderActionsProps) {
};
return (
-
{label}
-
+
);
})}
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;
};