feat(Toaster): replace <Link/> in actions with <Button/> (#254)

gravity-ui · Jul 20, 2022 · f603711 · f603711
1 parent 20c5ddf
commit f603711
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 14 deletions.
diff --git 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 `<Button/>` |
+| 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
@@ -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
@@ -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 (
         <div className={b('actions')}>
-            {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 (
-                    <Link
+                    <Button
                         key={`${label}__${index}`}
                         className={b('action')}
                         onClick={onActionClick}
+                        type="button"
+                        view={view}
                     >
                         {label}
-                    </Link>
+                    </Button>
                 );
             })}
         </div>

diff --git 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
@@ -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<ToasterDemoState>({
@@ -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
@@ -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;
 };