Betters toasts (#521)

* feat(toast-plate): add className for width control, refactor styles * feat(notification): fix content width only BREAKING CHANGE: --notification-desktop-width var removed
core-ds · Feb 18, 2021 · 628b032 · 628b032
1 parent 8658107
commit 628b032
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 32 deletions.
diff --git a/packages/notification/src/Component.stories.mdx b/packages/notification/src/Component.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
 import { select, text, boolean, number } from '@storybook/addon-knobs';
 import { ComponentHeader } from 'storybook/blocks/component-header';
-import { Button } from "@alfalab/core-components-button/src";
+import { Button } from "@alfalab/core-components-button";
 import { Notification } from './Component';
 import { name, version } from '../package.json';
 
@@ -19,6 +19,7 @@ import { name, version } from '../package.json';
         title={text('title', 'Поздравляем, полный успех')}
         visible={boolean('visible', true)}
         hasCloser={boolean('hasCloser', true)}
+        actionButton={boolean('renderActionButton', false) ? <Button view="ghost" size="s">Action Button</Button> : null }
         offset={number('offset', 48)}
         onClose={() => {}}
     >

diff --git a/packages/notification/src/Component.tsx b/packages/notification/src/Component.tsx
@@ -169,6 +169,7 @@ export const Notification = forwardRef<HTMLDivElement, NotificationProps>(
                             },
                             className,
                         )}
+                        contentClassName={styles.toastContent}
                         style={{
                             top: offset,
                             ...style,

diff --git a/packages/notification/src/__snapshots__/Component.test.tsx.snap b/packages/notification/src/__snapshots__/Component.test.tsx.snap
@@ -12,10 +12,10 @@ exports[`Notification Snapshots tests should match snapshot 1`] = `
         style="top: 108px;"
       >
         <div
-          class="mainContentWrap"
+          class="contentWrap"
         >
           <div
-            class="mainSection hasRightSection"
+            class="toastContent content"
           >
             <div
               class="leftAddons"

diff --git a/packages/notification/src/index.module.css b/packages/notification/src/index.module.css
@@ -1,7 +1,7 @@
 @import '../../themes/src/default.css';
 
 :root {
-    --notification-desktop-width: 350px;
+    --notification-desktop-content-width: 278px;
 }
 
 .notificationComponent {
@@ -18,7 +18,7 @@
 
     @media screen and (min-width: 600px) {
         right: var(--gap-4xl);
-        width: var(--notification-desktop-width);
+        width: auto;
         transform: translate(var(--notification-desktop-width), 0);
     }
 
@@ -36,3 +36,9 @@
         }
     }
 }
+
+.toastContent {
+    @media screen and (min-width: 600px) {
+        width: var(--notification-desktop-content-width);
+    }
+}
diff --git a/packages/themes/src/mixins/toast-plate/click.css b/packages/themes/src/mixins/toast-plate/click.css
@@ -4,6 +4,6 @@
     --toast-plate-title-font-weight: 400;
     --toast-plate-bg-color: var(--color-light-bg-secondary-inverted);
     --toast-plate-action-align: flex-start;
-    --toast-plate-action-padding: 0;
+    --toast-plate-action-padding: 0 0 0 var(--gap-xl);
     --toast-plate-action-divider-display: none;
 }
diff --git a/packages/toast-plate/src/__snapshots__/component.test.tsx.snap b/packages/toast-plate/src/__snapshots__/component.test.tsx.snap
@@ -7,10 +7,10 @@ exports[`Notification Snapshots tests should match snapshot 1`] = `
       class="component"
     >
       <div
-        class="mainContentWrap"
+        class="contentWrap"
       >
         <div
-          class="mainSection"
+          class="content"
         >
           <div
             class="leftAddons"
@@ -61,10 +61,10 @@ exports[`Notification Snapshots tests should match snapshot with leftAddons 1`]
       class="component"
     >
       <div
-        class="mainContentWrap"
+        class="contentWrap"
       >
         <div
-          class="mainSection"
+          class="content"
         >
           <div
             class="leftAddons"
@@ -88,10 +88,10 @@ exports[`Notification Snapshots tests should match snapshot without icon 1`] = `
       class="component"
     >
       <div
-        class="mainContentWrap"
+        class="contentWrap"
       >
         <div
-          class="mainSection"
+          class="content"
         >
           <div>
             <div

diff --git a/packages/toast-plate/src/component.stories.mdx b/packages/toast-plate/src/component.stories.mdx
@@ -19,11 +19,11 @@ import { name, version } from '../package.json';
         return (
             <ToastPlate
                 badge={select('badge', ['negative', 'positive', 'attention', undefined], 'positive')}
-                title={text('title', 'Toast Message')}
+                title={text('title', 'Toast Title')}
                 hasCloser={boolean('hasCloser', true)}
                 block={boolean('block', false)}
                 onClose={Function.prototype}
-                actionButton={boolean('renderActionButton', true) ? <Button view="ghost" size="s">Button Ghost S</Button> : null }
+                actionButton={boolean('renderActionButton', false) ? <Button view="ghost" size="s">Action Button</Button> : null }
             >
                 {text('children', '')}
             </ToastPlate>

diff --git a/packages/toast-plate/src/component.tsx b/packages/toast-plate/src/component.tsx
@@ -22,6 +22,11 @@ export type ToastPlateProps = HTMLAttributes<HTMLDivElement> & {
      */
     className?: string;
 
+    /**
+     * Дополнительный класс для контентной области
+     */
+    contentClassName?: string;
+
     /**
      * Дочерние элементы
      */
@@ -84,6 +89,7 @@ export const ToastPlate = forwardRef<HTMLDivElement, ToastPlateProps>(
         {
             dataTestId,
             className,
+            contentClassName,
             hasCloser,
             leftAddons,
             badge,
@@ -123,12 +129,8 @@ export const ToastPlate = forwardRef<HTMLDivElement, ToastPlateProps>(
                 data-test-id={dataTestId}
                 {...restProps}
             >
-                <div className={styles.mainContentWrap}>
-                    <div
-                        className={cn(styles.mainSection, {
-                            [styles.hasRightSection]: actionButton || hasCloser,
-                        })}
-                    >
+                <div className={styles.contentWrap}>
+                    <div className={cn(contentClassName, styles.content)}>
                         {needRenderLeftAddons && (
                             <div className={styles.leftAddons}>
                                 {leftAddons || (

diff --git a/packages/toast-plate/src/index.module.css b/packages/toast-plate/src/index.module.css
@@ -7,7 +7,7 @@
     --toast-plate-border-radius: 8px;
     --toast-plate-title-font-weight: 700;
     --toast-plate-action-align: center;
-    --toast-plate-action-padding: 0 var(--gap-2xl) 0 var(--gap-xs);
+    --toast-plate-action-padding: 0 var(--gap-2xl);
     --toast-plate-action-divider-display: block;
 }
 
@@ -26,11 +26,12 @@
     box-shadow: var(--shadow-s);
 
     &.hasCloser {
-        padding-right: var(--gap-4xl);
+        /* 2×16 + 24 */
+        padding-right: 56px;
     }
 }
 
-.mainContentWrap {
+.contentWrap {
     display: flex;
 }
 
@@ -39,13 +40,9 @@
     width: 100%;
 }
 
-.mainSection {
+.content {
     display: flex;
     flex-grow: 1;
-
-    &.hasRightSection {
-        margin-right: var(--gap-xl);
-    }
 }
 
 .actionSection {
@@ -55,8 +52,8 @@
     margin: 2px 0;
     padding: var(--toast-plate-action-padding);
 
-    &.hasCloser {
-        margin-right: var(--gap-xs);
+    &:last-child {
+        padding-right: 0;
     }
 }
 
@@ -106,8 +103,8 @@
         display: var(--toast-plate-action-divider-display);
         position: absolute;
         right: 44px;
-        top: 0;
-        bottom: 0;
+        top: var(--gap-2xs);
+        bottom: var(--gap-2xs);
         width: 1px;
         background-color: var(--color-light-bg-tertiary-inverted);
         content: '';