feat: yet another fixes

core-ds · Jan 29, 2021 · 6ecd273 · 6ecd273
1 parent 4e378ec
commit 6ecd273
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 39 deletions.
diff --git a/packages/notification/src/Component.stories.mdx b/packages/notification/src/Component.stories.mdx
@@ -52,7 +52,7 @@ import { Notification } from '@alfalab/core-components-notification';
                     badge='positive'
                     title='Компонент нотификации'
                     visible={isVisible}
-                    offset={158}
+                    offset={180}
                     onClickOutside={hideNotification}
                     onClose={hideNotification}
                     onCloseTimeout={hideNotification}

diff --git a/packages/notification/src/__snapshots__/Component.test.tsx.snap b/packages/notification/src/__snapshots__/Component.test.tsx.snap
@@ -22,6 +22,7 @@ exports[`Notification Snapshots tests should match snapshot 1`] = `
             >
               <div
                 class="component m icon positive badge"
+                data-test-id="badge"
               >
                 <svg
                   class="badgeIcon"
@@ -39,10 +40,17 @@ exports[`Notification Snapshots tests should match snapshot 1`] = `
                 </svg>
               </div>
             </div>
-            <div
-              class="title"
-            >
-              title
+            <div>
+              <div
+                class="title"
+              >
+                title
+              </div>
+              <div
+                class="children"
+              >
+                text
+              </div>
             </div>
           </div>
           <button
@@ -66,11 +74,6 @@ exports[`Notification Snapshots tests should match snapshot 1`] = `
             </span>
           </button>
         </div>
-        <div
-          class="children"
-        >
-          text
-        </div>
       </div>
     </div>
   </div>

diff --git a/packages/themes/src/mixins/toast-plate/click.css b/packages/themes/src/mixins/toast-plate/click.css
@@ -2,4 +2,5 @@
 
 @define-mixin toast-plate-click {
     --toast-plate-title-font-weight: 400;
+    --toast-plate-bg-color: var(--color-light-bg-secondary-inverted);
 }
diff --git a/packages/toast-plate/src/__snapshots__/component.test.tsx.snap b/packages/toast-plate/src/__snapshots__/component.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`Notification Snapshots tests should match snapshot 1`] = `
           >
             <div
               class="component m icon positive badge"
+              data-test-id="badge"
             >
               <svg
                 class="badgeIcon"
@@ -34,18 +35,20 @@ exports[`Notification Snapshots tests should match snapshot 1`] = `
               </svg>
             </div>
           </div>
-          <div
-            class="title"
-          >
-            title
+          <div>
+            <div
+              class="title"
+            >
+              title
+            </div>
+            <div
+              class="children"
+            >
+              text
+            </div>
           </div>
         </div>
       </div>
-      <div
-        class="children"
-      >
-        text
-      </div>
     </div>
   </div>
 </body>
@@ -70,6 +73,7 @@ exports[`Notification Snapshots tests should match snapshot with leftAddons 1`]
               leftAddons
             </div>
           </div>
+          <div />
         </div>
       </div>
     </div>
@@ -89,18 +93,20 @@ exports[`Notification Snapshots tests should match snapshot without icon 1`] = `
         <div
           class="mainSection"
         >
-          <div
-            class="title"
-          >
-            title
+          <div>
+            <div
+              class="title"
+            >
+              title
+            </div>
+            <div
+              class="children"
+            >
+              text
+            </div>
           </div>
         </div>
       </div>
-      <div
-        class="children"
-      >
-        text
-      </div>
     </div>
   </div>
 </body>

diff --git a/packages/toast-plate/src/component.tsx b/packages/toast-plate/src/component.tsx
@@ -130,12 +130,16 @@ export const ToastPlate = forwardRef<HTMLDivElement, ToastPlateProps>(
                                             content={iconComponents[badge]}
                                             iconColor={badge}
                                             className={styles.badge}
+                                            dataTestId='badge'
                                         />
                                     ))}
                             </div>
                         )}
 
-                        {title && <div className={styles.title}>{title}</div>}
+                        <div>
+                            {title && <div className={styles.title}>{title}</div>}
+                            {children && <div className={styles.children}>{children}</div>}
+                        </div>
                     </div>
 
                     {needRenderActionsSection && (
@@ -158,8 +162,6 @@ export const ToastPlate = forwardRef<HTMLDivElement, ToastPlateProps>(
                         />
                     )}
                 </div>
-
-                {children && <div className={styles.children}>{children}</div>}
             </div>
         );
     },

diff --git a/packages/toast-plate/src/index.module.css b/packages/toast-plate/src/index.module.css
@@ -72,7 +72,7 @@
 .children {
     @mixin paragraph_primary_small;
 
-    margin: var(--gap-2xs) var(--gap-2xl) 0;
+    margin-top: var(--gap-2xs);
 }
 
 .closeButton {

diff --git a/packages/toast/src/component.tsx b/packages/toast/src/component.tsx
@@ -16,6 +16,13 @@ import { Portal } from '@alfalab/core-components-portal';
 
 import styles from './index.module.css';
 
+const CSS_TRANSITION_CLASS_NAMES = {
+    enter: styles.enter,
+    enterActive: styles.enterActive,
+    exit: styles.exit,
+    exitActive: styles.exitActive,
+};
+
 export type ToastProps = ToastPlateProps &
     Pick<
         PopoverProps,
@@ -157,6 +164,7 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(
                         style={style}
                         ref={mergeRefs([ref, plateRef])}
                         onClose={onClose}
+                        className={className}
                         {...callbacks}
                     />
                 </Popover>
@@ -169,12 +177,7 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(
                     unmountOnExit={true}
                     in={open}
                     timeout={150}
-                    classNames={{
-                        enter: styles.enter,
-                        enterActive: styles.enterActive,
-                        exit: styles.exit,
-                        exitActive: styles.exitActive,
-                    }}
+                    classNames={CSS_TRANSITION_CLASS_NAMES}
                 >
                     <ToastPlate
                         {...restProps}
@@ -183,6 +186,7 @@ export const Toast = forwardRef<HTMLDivElement, ToastProps>(
                         onClose={onClose}
                         className={cn(
                             styles.fixed,
+                            styles.toastPlate,
                             { [styles.centered]: centeredPosition },
                             className,
                         )}

diff --git a/packages/toast/src/index.module.css b/packages/toast/src/index.module.css
@@ -1,9 +1,18 @@
 @import '../../themes/src/default.css';
 
+:root {
+    --toast-box-shadow: var(--shadow-m);
+}
+
+.toastPlate {
+    box-shadow: var(--toast-box-shadow);
+}
+
 .popover {
+    z-index: 100;
     border: none;
     border-radius: var(--toast-plate-border-radius);
-    z-index: 100;
+    box-shadow: var(--toast-box-shadow);
 }
 
 .block {