fix(Toaster): change spacing before actions (#1891)

src/components/Button/Button.tsx

@@ -9,31 +9,11 @@ import {eventBroker} from '../utils/event-broker';
 import {isOfType} from '../utils/isOfType';
 
 import {ButtonIcon, getIconSide} from './ButtonIcon';
+import type {BUTTON_VIEWS} from './constants';
 
 import './Button.scss';
 
-export type ButtonView =
-    | 'normal' // Grey background, no border
-    | 'action' // Branded background, no border
-    | 'outlined' // No background, grey border
-    | 'outlined-info' // No background, with info-type border color
-    | 'outlined-success' // No background, with success-type border color
-    | 'outlined-warning' // No background, with warning-type border color
-    | 'outlined-danger' // No background, with danger-type border color
-    | 'outlined-utility' // No background, with utility-type border color
-    | 'outlined-action' // No background, with branded border color
-    | 'raised' // With white background and shadow
-    | 'flat' // No background, no border
-    | 'flat-secondary' // No background, no border, secondary-type text color
-    | 'flat-info' // No background, no border, info-type text color
-    | 'flat-success' // No background, no border, success-type text color
-    | 'flat-warning' // No background, no border, warning-type text color
-    | 'flat-danger' // No background, no border, danger-type text color
-    | 'flat-utility' // No background, no border, utility-type text color
-    | 'flat-action' // No background, no border, branded text color
-    | 'normal-contrast' // normal button appearance with contrast background
-    | 'outlined-contrast' // outlined button appearance with contrast background
-    | 'flat-contrast'; // flat button appearance with contrast background
+export type ButtonView = (typeof BUTTON_VIEWS)[number];
 
 export type ButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl';
 

src/components/Button/constants.ts

@@ -0,0 +1,23 @@
+export const BUTTON_VIEWS = [
+    'normal', // Grey background, no border
+    'action', // Branded background, no border
+    'outlined', // No background, grey border
+    'outlined-info', // No background, with info-type border color
+    'outlined-success', // No background, with success-type border color
+    'outlined-warning', // No background, with warning-type border color
+    'outlined-danger', // No background, with danger-type border color
+    'outlined-utility', // No background, with utility-type border color
+    'outlined-action', // No background, with branded border color
+    'raised', // With white background and shadow
+    'flat', // No background, no border
+    'flat-secondary', // No background, no border, secondary-type text color
+    'flat-info', // No background, no border, info-type text color
+    'flat-success', // No background, no border, success-type text color
+    'flat-warning', // No background, no border, warning-type text color
+    'flat-danger', // No background, no border, danger-type text color
+    'flat-utility', // No background, no border, utility-type text color
+    'flat-action', // No background, no border, branded text color
+    'normal-contrast', // normal button appearance with contrast background
+    'outlined-contrast', // outlined button appearance with contrast background
+    'flat-contrast', // flat button appearance with contrast background
+] as const;

src/components/Toaster/Toast/Toast.scss

@@ -62,13 +62,10 @@ $block: '.#{variables.$ns}toast';
 
     &__container {
         flex: 1 1 auto;
-        display: grid;
-        row-gap: 8px;
-        width: 100%;
-        height: 100%;
+        display: flex;
+        flex-flow: column nowrap;
         min-height: var(--g-text-body-2-line-height);
         min-width: 0;
-        grid-template-columns: 100%;
 
         &:before {
             content: '';
@@ -88,6 +85,7 @@ $block: '.#{variables.$ns}toast';
         padding-inline-end: 8px;
         padding-block-start: 2px;
         color: var(--_--icon-color);
+        min-width: 0;
     }
 
     &__title {
@@ -96,8 +94,17 @@ $block: '.#{variables.$ns}toast';
         padding-inline-end: $closeButtonTitleSpacing + $closeButtonSize;
     }
 
-    &__content_without-title {
-        padding-inline-end: $closeButtonTitleSpacing + $closeButtonSize;
+    &__content {
+        margin-block-start: var(--g-spacing-2);
+
+        &_without-title {
+            margin-block-start: 0;
+            padding-inline-end: $closeButtonTitleSpacing + $closeButtonSize;
+        }
+    }
+
+    &__actions {
+        margin-block-start: var(--g-spacing-3);
     }
 
     &__action {

src/components/Toaster/__stories__/Toaster.stories.tsx

@@ -1,10 +1,16 @@
 import React from 'react';
 
+import {faker} from '@faker-js/faker/locale/en';
 import type {Meta, StoryObj} from '@storybook/react';
 
 import type {ButtonView} from '../../Button';
+import {BUTTON_VIEWS} from '../../Button/constants';
 import {ToasterProvider} from '../Provider/ToasterProvider';
 import {Toast} from '../Toast/Toast';
+import {ToasterComponent} from '../ToasterComponent/ToasterComponent';
+import {TOAST_THEMES} from '../constants';
+import {useToaster} from '../hooks/useToaster';
+import type {ToastAction} from '../types';
 
 import {ToasterDemo} from './ToasterShowcase';
 
@@ -27,7 +33,7 @@ const views: ButtonView[] = [
 function viewSelect(name: string) {
     return {
         name,
-        control: 'select',
+        control: 'select' as const,
         defaultValue: 'outlined',
         options: views,
         if: {arg: 'setActions'},
@@ -43,21 +49,42 @@ const disabledControl = {
 function booleanControl(label: string) {
     return {
         name: label,
-        control: 'boolean',
+        control: 'boolean' as const,
     };
 }
 
 export default {
     title: 'Components/Feedback/Toaster',
     component: Toast,
+    decorators: [
+        function withToasters(Story) {
+            return (
+                <ToasterProvider>
+                    <Story />
+                </ToasterProvider>
+            );
+        },
+    ],
+} as Meta<typeof Toast>;
+
+type Story = StoryObj<
+    React.ComponentProps<typeof Toast> & React.ComponentProps<typeof ToasterDemo>
+>;
+
+export const Default: Story = {
+    args: {
+        setTitle: true,
+        showCloseIcon: true,
+        allowAutoHiding: true,
+    },
     argTypes: {
         mobile: disabledControl,
         name: disabledControl,
         title: disabledControl,
         className: disabledControl,
         autoHiding: disabledControl,
         content: disabledControl,
-        type: disabledControl,
+        theme: disabledControl,
         isClosable: disabledControl,
         actions: disabledControl,
         removeCallback: disabledControl,
@@ -71,25 +98,51 @@ export default {
         action1View: viewSelect('Action 1 view'),
         action2View: viewSelect('Action 2 view'),
     },
+    render: (props) => <ToasterDemo {...props} />,
+};
+
+function getAction(): ToastAction {
+    return {
+        onClick: () => {},
+        label: faker.lorem.words(1),
+        view: faker.helpers.arrayElement(BUTTON_VIEWS),
+        removeAfterClick: false,
+    };
+}
+
+export const ToastPlayground: Story = {
+    name: 'Toast (Playground)',
     args: {
-        setTitle: true,
-        showCloseIcon: true,
-        allowAutoHiding: true,
+        mobile: false,
+        autoHiding: false,
+        isClosable: faker.datatype.boolean(),
+        title: faker.lorem.words(5),
+        content: faker.lorem.sentences(2),
+        theme: faker.helpers.arrayElement(TOAST_THEMES),
+        actions: faker.helpers.uniqueArray(getAction, faker.number.int({min: 1, max: 2})),
     },
-    decorators: [
-        function withToasters(Story) {
-            return (
-                <ToasterProvider>
-                    <Story />
-                </ToasterProvider>
-            );
-        },
-    ],
-} as Meta<typeof Toast>;
+    argTypes: {
+        name: disabledControl,
+        addedAt: disabledControl,
+        renderIcon: disabledControl,
+        removeCallback: disabledControl,
+    },
+    render: (args) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const toaster = useToaster();
 
-type Story = StoryObj<typeof Toast & typeof ToasterDemo>;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        React.useEffect(() => {
+            const toastId = 'demo-toast';
 
-export const Default: Story = {
-    args: {},
-    render: (props) => <ToasterDemo {...props} />,
+            toaster.add({
+                ...args,
+                name: toastId,
+            });
+
+            return () => toaster.remove(toastId);
+        }, [args, toaster]);
+
+        return <ToasterComponent mobile={args.mobile} />;
+    },
 };

src/components/Toaster/constants.ts

@@ -0,0 +1 @@
+export const TOAST_THEMES = ['normal', 'info', 'success', 'warning', 'danger', 'utility'] as const;

src/components/Toaster/types.ts

@@ -1,11 +1,13 @@
 import type {ButtonView} from '../Button';
 
+import type {TOAST_THEMES} from './constants';
+
 export type ToasterArgs = {
     className?: string;
     mobile?: boolean;
 };
 
-export type ToastTheme = 'normal' | 'info' | 'success' | 'warning' | 'danger' | 'utility';
+export type ToastTheme = (typeof TOAST_THEMES)[number];
 
 export type ToastAction = {
     onClick: VoidFunction;