diff --git a/jest.config.js b/jest.config.js index ab3417a1f7..ae7a804e99 100644 --- a/jest.config.js +++ b/jest.config.js @@ -7,7 +7,8 @@ module.exports = { }, coverageDirectory: './coverage', testEnvironment: 'jsdom', - setupFilesAfterEnv: ['/src/setup-tests.ts'], + setupFiles: ['/test-utils/setup-tests.ts'], + setupFilesAfterEnv: ['/test-utils/setup-tests-after.ts'], moduleNameMapper: { '\\.(css|less|scss|sass)$': 'jest-transform-css', }, diff --git a/src/components/Toaster/Toast/Toast.scss b/src/components/Toaster/Toast/Toast.scss index 682347ad69..27a63f7dcb 100644 --- a/src/components/Toaster/Toast/Toast.scss +++ b/src/components/Toaster/Toast/Toast.scss @@ -11,7 +11,7 @@ $block: '.#{$ns}toast'; position: absolute; width: inherit; margin-bottom: 10px; - padding: 18px; + padding: 16px 16px 16px 48px; font-size: 13px; border-radius: 8px; box-shadow: 0px 0px 15px var(--yc-color-sfx-shadow); @@ -34,10 +34,20 @@ $block: '.#{$ns}toast'; animation: toast-set-indents 0.35s ease forwards, toast-move-left 0.25s ease forwards 0.35s; } + &_show-animation#{&}_default { + animation: toast-set-symmetrical-indents 0.35s ease forwards, + toast-move-left 0.25s ease forwards 0.35s; + } + &_show-animation#{&}_mobile { animation: toast-set-indents 0.35s ease forwards, toast-move-top 0.25s ease forwards 0.35s; } + &_show-animation#{&}_mobile#{&}_default { + animation: toast-set-symmetrical-indents 0.35s ease forwards, + toast-move-top 0.25s ease forwards 0.35s; + } + &_hide-animation { animation: toast-move-right 0.25s ease forwards, toast-remove-height 0.35s ease forwards 0.25s; @@ -53,6 +63,7 @@ $block: '.#{$ns}toast'; } &_default { + padding: 16px; background-color: var(--yc-color-base-float); } @@ -97,6 +108,8 @@ $block: '.#{$ns}toast'; } #{$containerClass} { + display: grid; + row-gap: 8px; width: 100%; height: 100%; @@ -123,7 +136,9 @@ $block: '.#{$ns}toast'; } #{$iconClass} { - margin-right: 6px; + position: absolute; + top: 16px; + left: 16px; } &__action { @@ -133,8 +148,8 @@ $block: '.#{$ns}toast'; & &__btn-close { position: absolute; - top: 16px; - right: 16px; + top: 14px; + right: 14px; } } @@ -192,9 +207,17 @@ $block: '.#{$ns}toast'; } } +// with extra space for icon placement @keyframes toast-set-indents { to { margin-bottom: 10px; - padding: 18px; + padding: 16px 16px 16px 48px; + } +} + +@keyframes toast-set-symmetrical-indents { + to { + margin-bottom: 10px; + padding: 16px; } } diff --git a/src/components/Toaster/Toast/Toast.tsx b/src/components/Toaster/Toast/Toast.tsx index d6a345143a..cbaeb0fbd1 100644 --- a/src/components/Toaster/Toast/Toast.tsx +++ b/src/components/Toaster/Toast/Toast.tsx @@ -162,20 +162,28 @@ function renderActions({actions, onClose}: RenderActionsProps) { return null; } - return actions.map(({label, onClick, removeAfterClick = true}, index) => { - const onActionClick = () => { - onClick(); - if (removeAfterClick) { - onClose(); - } - }; - - return ( - - {label} - - ); - }); + return ( +
+ {actions.map(({label, onClick, removeAfterClick = true}, index) => { + const onActionClick = () => { + onClick(); + if (removeAfterClick) { + onClose(); + } + }; + + return ( + + {label} + + ); + })} +
+ ); } interface RenderIconProps { @@ -231,16 +239,14 @@ export function Toast(props: ToastUnitedProps) { {...closeOnTimeoutProps} >
-
- {renderIcon({type})} - {title} -
+ {renderIcon({type})} +
{title}
{isClosable && ( )} - {content} + {Boolean(content) &&
{content}
} {renderActions({actions, onClose: handleClose})}
diff --git a/src/components/Toaster/ToastList/ToastList.scss b/src/components/Toaster/ToastList/ToastList.scss index 5424bfd109..2df5c024ab 100644 --- a/src/components/Toaster/ToastList/ToastList.scss +++ b/src/components/Toaster/ToastList/ToastList.scss @@ -6,7 +6,7 @@ $block: '.#{$ns}toaster'; position: fixed; bottom: 0; right: 10px; - width: 312px; + width: var(--yc-toaster-desktop-width); z-index: 100000; display: flex; flex-direction: column; @@ -18,3 +18,7 @@ $block: '.#{$ns}toaster'; width: calc(100% - 20px); } } + +.yc-root { + --yc-toaster-desktop-width: 312px; +} diff --git a/src/components/Toaster/__stories__/ToasterShowcase.tsx b/src/components/Toaster/__stories__/ToasterShowcase.tsx index 7bd80c4305..aa3217d66b 100644 --- a/src/components/Toaster/__stories__/ToasterShowcase.tsx +++ b/src/components/Toaster/__stories__/ToasterShowcase.tsx @@ -11,7 +11,7 @@ import './ToasterShowcase.scss'; const b = block('toaster-story'); -const CONTENT =

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, atque!

; +const CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, atque!'; const ACTIONS = [ { diff --git a/src/setup-tests.ts b/test-utils/setup-tests-after.ts similarity index 100% rename from src/setup-tests.ts rename to test-utils/setup-tests-after.ts diff --git a/test-utils/setup-tests.ts b/test-utils/setup-tests.ts new file mode 100644 index 0000000000..6ff8e35a62 --- /dev/null +++ b/test-utils/setup-tests.ts @@ -0,0 +1,3 @@ +import {configure} from '@testing-library/dom'; + +configure({testIdAttribute: 'data-qa'});