fix(Toast): fix overflows (gravity-ui#1079)

IsaevAlexandr · Nov 14, 2023 · 7f3271f · 7f3271f
1 parent 38eb167
commit 7f3271f
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 8 deletions.
diff --git a/src/components/Toaster/Toast/Toast.scss b/src/components/Toaster/Toast/Toast.scss
@@ -92,6 +92,8 @@ $block: '.#{variables.$ns}toast';
         width: 100%;
         height: 100%;
         min-height: var(--g-text-body-2-line-height);
+        min-width: 0;
+        grid-template-columns: 100%;
 
         &:before {
             content: '';

diff --git a/src/components/Toaster/Toast/Toast.tsx b/src/components/Toaster/Toast/Toast.tsx
@@ -57,6 +57,7 @@ function renderActions({actions, onClose}: RenderActionsProps) {
                         type="button"
                         size={'l'}
                         view={view}
+                        width="auto"
                     >
                         {label}
                     </Button>

diff --git a/src/components/Toaster/__stories__/Toaster.stories.tsx b/src/components/Toaster/__stories__/Toaster.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type {ComponentMeta, ComponentStory} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
 import type {ButtonView} from '../../Button';
 import {ToasterProvider} from '../Provider/ToasterProvider';
@@ -85,9 +85,11 @@ export default {
             );
         },
     ],
-} as ComponentMeta<typeof Toast>;
+} as Meta<typeof Toast>;
 
-const DefaultTemplate: ComponentStory<typeof Toast & typeof ToasterDemo> = (args) => (
-    <ToasterDemo {...args} />
-);
-export const Default = DefaultTemplate.bind({});
+type Story = StoryObj<typeof Toast & typeof ToasterDemo>;
+
+export const Default: Story = {
+    args: {},
+    render: (props) => <ToasterDemo {...props} />,
+};
diff --git a/src/components/Toaster/__stories__/ToasterShowcase.tsx b/src/components/Toaster/__stories__/ToasterShowcase.tsx
@@ -4,7 +4,7 @@ import {faker} from '@faker-js/faker/locale/en';
 import {CircleCheck, CircleInfo, Thunderbolt, TriangleExclamation} from '@gravity-ui/icons';
 
 import {ToasterComponent, useToaster} from '..';
-import type {ToastProps} from '..';
+import type {ToastAction, ToastProps} from '..';
 import {Button} from '../../Button';
 import type {ButtonView} from '../../Button';
 import {Icon} from '../../Icon';
@@ -75,6 +75,7 @@ export const ToasterDemo = ({
         type?: ToastProps['type'];
         className?: string;
         content?: React.ReactNode;
+        actions?: ToastAction[];
     }): ToastProps {
         let content: React.ReactNode = null;
         let title;
@@ -108,7 +109,7 @@ export const ToasterDemo = ({
                       ...action,
                       view: index === 0 ? action1View : action2View,
                   }))
-                : undefined,
+                : extra.actions,
         };
     }
 
@@ -232,6 +233,28 @@ export const ToasterDemo = ({
         setState((state) => ({...state, lastToastName: toastProps.name}));
     };
 
+    const createToastLongContent = () => {
+        const toastProps = getToastProps({
+            name: 'overflow',
+            type: 'error',
+            title: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+            content:
+                'Excepturi cumque dicta, et a repellat culpa totam minus vero, error ducimus nesciunt? Dicta soluta earum sapiente explicabo commodi pariatur nulla eius?',
+            actions: [
+                {
+                    label: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+                    onClick: () => {
+                        console.log('Lorem ipsum dolor sit amet consectetur adipisicing elit.');
+                    },
+                },
+            ],
+        });
+
+        toaster.add(toastProps);
+
+        setState((state) => ({...state, lastToastName: toastProps.name}));
+    };
+
     const createDynamicallyUpdatingToast = () => {
         const toastProps = getToastProps({
             name: 'UpdatingToast',
@@ -324,6 +347,12 @@ export const ToasterDemo = ({
         </Button>
     );
 
+    const toastWithLongContent = (
+        <Button view="outlined" size="l" onClick={createToastLongContent} style={btnStyle}>
+            Create toast with long content
+        </Button>
+    );
+
     const dynamicallyUpdatingToast = (
         <Button size="l" onClick={createDynamicallyUpdatingToast} style={btnStyle}>
             Create dynamically updating toast
@@ -353,6 +382,7 @@ export const ToasterDemo = ({
             <p>{errorToastBtn}</p>
             <p>{utilityToastBtn}</p>
             <p>{customToastBtn}</p>
+            <p>{toastWithLongContent}</p>
             <p>{dynamicallyUpdatingToast}</p>
             <p>{overrideToastBtn}</p>
             <p>{clearBtn}</p>