feat(snackbar): actionless adaptive solution

VKCOM · Mar 12, 2024 · 507809a · 507809a
1 parent bcbe7b6
commit 507809a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/packages/vkui/src/components/Snackbar/Snackbar.module.css b/packages/vkui/src/components/Snackbar/Snackbar.module.css
@@ -39,6 +39,24 @@
   padding-block-end: var(--vkui_internal--safe_area_inset_bottom);
 }
 
+.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__action {
+  margin-block-end: calc(
+    -1 * (
+        var(--vkui--size_button_small_height--regular) -
+          var(--vkui--font_subhead--line_height--regular)
+      ) / 2
+  );
+}
+
 /* iOS */
 .Snackbar--ios .Snackbar__in,
 .Snackbar--ios .Snackbar__snackbar {

diff --git a/packages/vkui/src/components/Snackbar/Snackbar.tsx b/packages/vkui/src/components/Snackbar/Snackbar.tsx
@@ -59,7 +59,7 @@ export const Snackbar = ({
   ...restProps
 }: SnackbarProps) => {
   const platform = usePlatform();
-  const { viewWidth } = useAdaptivityWithJSMediaQueries();
+  const { sizeY, viewWidth } = useAdaptivityWithJSMediaQueries();
   const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
   const { waitTransitionFinish } = useWaitTransitionFinish();
 
@@ -180,6 +180,7 @@ export const Snackbar = ({
           closing && styles['Snackbar--closing'],
           touched && styles['Snackbar--touched'],
           isDesktop && styles['Snackbar--desktop'],
+          sizeY === 'regular' && styles['Snackbar--sizeY-regular'],
         )}
         style={offsetY ? { ...style, bottom: offsetY } : style}
       >