feat(snackbar): compensate bottom margin

VKCOM · Mar 18, 2024 · c33a334 · c33a334
1 parent cdb6723
commit c33a334
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
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,6 +28,35 @@
   overflow: hidden;
 }
 
+.Snackbar--layout-vertical .Snackbar__action {
+  margin-block-end: calc(
+    -1 * (
+        var(--vkui--size_button_small_height--compact) -
+          var(--vkui--font_subhead--line_height--compact)
+      ) / 2
+  );
+}
+
+.Snackbar--sizeY-regular.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
+  );
+}
+
+@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 { useAdaptivity } from '../../../../hooks/useAdaptivity';
 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 {
   /**
    * Элемент действия.
@@ -61,13 +67,15 @@ export function Basic({
   children,
   ...restProps
 }: SnackbarBasicProps) {
+  const { sizeY = 'none' } = useAdaptivity();
   const layout = after || subtitle ? 'vertical' : layoutProps;
 
   return (
     <RootComponent
       baseClassName={classNames(
         styles['Snackbar__body'],
         stylesLayout[layout],
+        sizeY !== 'compact' && sizeYClassNames[sizeY],
         mode === 'dark' && styles['Snackbar--mode-dark'],
       )}
       {...restProps}