feat(snackbar): improvement

VKCOM · Mar 14, 2024 · b784c9e · b784c9e
1 parent e5bee1a
commit b784c9e
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 10 deletions.
diff --git a/packages/vkui/src/components/Snackbar/Snackbar.module.css b/packages/vkui/src/components/Snackbar/Snackbar.module.css
@@ -39,13 +39,15 @@
   padding-block-end: var(--vkui_internal--safe_area_inset_bottom);
 }
 
-.Snackbar--sizeY-regular .Snackbar__action {
-  margin-block-end: calc(
-    -1 * (
-        var(--vkui--size_button_small_height--regular) -
-          var(--vkui--font_subhead--line_height--regular)
-      ) / 2
-  );
+@media (--sizeY-regular) {
+  .Snackbar--sizeY-none.Snackbar--layout-vertical .Snackbar__action {
+    margin-block-end: calc(
+      -1 * (
+          var(--vkui--size_button_small_height--regular) -
+            var(--vkui--font_subhead--line_height--regular)
+        ) / 2
+    );
+  }
 }
 
 /* iOS */

diff --git a/packages/vkui/src/components/Snackbar/Snackbar.tsx b/packages/vkui/src/components/Snackbar/Snackbar.tsx
@@ -13,7 +13,10 @@ import { RootComponent } from '../RootComponent/RootComponent';
 import { Touch, TouchEvent } from '../Touch/Touch';
 import { Basic, BasicProps } from './subcomponents/Basic/Basic';
 import styles from './Snackbar.module.css';
-
+const sizeYClassNames = {
+  none: styles['Snackbar--sizeY-none'],
+  regular: styles['Snackbar--sizeY-regular'],
+};
 export interface SnackbarProps extends HTMLAttributesWithRootRef<HTMLElement>, BasicProps {
   /**
    * Название кнопки действия в уведомлении
@@ -179,7 +182,7 @@ export const Snackbar = ({
           closing && styles['Snackbar--closing'],
           touched && styles['Snackbar--touched'],
           isDesktop && styles['Snackbar--desktop'],
-          sizeY === 'regular' && styles['Snackbar--sizeY-regular'],
+          sizeY !== 'compact' && sizeYClassNames[sizeY],
         )}
         style={offsetY ? { ...style, bottom: offsetY } : style}
       >
@@ -193,6 +196,7 @@ export const Snackbar = ({
           <Basic
             className={styles['Snackbar__snackbar']}
             getRootRef={bodyElRef}
+            sizeY={sizeY}
             layout={layout}
             mode={mode}
             before={before}

diff --git a/packages/vkui/src/components/Snackbar/subcomponents/Basic/Basic.module.css b/packages/vkui/src/components/Snackbar/subcomponents/Basic/Basic.module.css
@@ -28,7 +28,7 @@
   overflow: hidden;
 }
 
-.Snackbar__action {
+.Snackbar--layout-vertical .Snackbar__action {
   margin-block-end: calc(
     -1 * (
         var(--vkui--size_button_small_height--compact) -
@@ -37,6 +37,26 @@
   );
 }
 
+.Snackbar--sizeY-regular .Snackbar__action {
+  margin-block-end: calc(
+    -1 * (
+        var(--vkui--size_button_small_height--regular) -
+          var(--vkui--font_subhead--line_height--regular)
+      ) / 2
+  );
+}
+
+@media (--sizeY-regular) {
+  .Snackbar--sizeY-none.Snackbar--layout-vertical .Snackbar__action {
+    margin-block-end: calc(
+      -1 * (
+          var(--vkui--size_button_small_height--regular) -
+            var(--vkui--font_subhead--line_height--regular)
+        ) / 2
+    );
+  }
+}
+
 .Snackbar--layout-vertical .Snackbar__content {
   flex-direction: column;
   align-items: flex-start;

diff --git a/packages/vkui/src/components/Snackbar/subcomponents/Basic/Basic.tsx b/packages/vkui/src/components/Snackbar/subcomponents/Basic/Basic.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { SizeTypeValues } from '../../../../lib/adaptivity/constants';
 import { HTMLAttributesWithRootRef } from '../../../../types';
 import { RootComponent } from '../../../RootComponent/RootComponent';
 import { Paragraph } from '../../../Typography/Paragraph/Paragraph';
@@ -11,6 +12,11 @@ const stylesLayout = {
   horizontal: styles['Snackbar--layout-horizontal'],
 };
 
+const sizeYClassNames = {
+  none: styles['Snackbar--sizeY-none'],
+  regular: styles['Snackbar--sizeY-regular'],
+};
+
 export interface BasicProps {
   /**
    * Элемент действия.
@@ -47,6 +53,11 @@ export interface BasicProps {
    * Не может использоваться одновременно с `action`
    */
   subtitle?: React.ReactNode;
+
+  /**
+   * Параметр адаптивности для динамического расчета отступов
+   */
+  sizeY?: SizeTypeValues | 'none';
 }
 
 export interface SnackbarBasicProps extends HTMLAttributesWithRootRef<HTMLDivElement>, BasicProps {}
@@ -59,6 +70,7 @@ export function Basic({
   mode,
   subtitle,
   children,
+  sizeY,
   ...restProps
 }: SnackbarBasicProps) {
   const layout = after || subtitle ? 'vertical' : layoutProps;
@@ -69,6 +81,7 @@ export function Basic({
         styles['Snackbar__body'],
         stylesLayout[layout],
         mode === 'dark' && styles['Snackbar--mode-dark'],
+        sizeY && sizeY !== 'compact' && sizeYClassNames[sizeY],
       )}
       {...restProps}
     >