From c33a334a162c6b6d52778427a9d3573c38e4c79c Mon Sep 17 00:00:00 2001 From: Akcent1132 Date: Mon, 18 Mar 2024 19:04:44 +0300 Subject: [PATCH 1/2] feat(snackbar): compensate bottom margin --- .../subcomponents/Basic/Basic.module.css | 29 +++++++++++++++++++ .../Snackbar/subcomponents/Basic/Basic.tsx | 8 +++++ 2 files changed, 37 insertions(+) diff --git a/packages/vkui/src/components/Snackbar/subcomponents/Basic/Basic.module.css b/packages/vkui/src/components/Snackbar/subcomponents/Basic/Basic.module.css index 6a3fa71b04..824ce28c18 100644 --- 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 index 6c1534e1a3..998c443ca6 100644 --- 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,6 +67,7 @@ export function Basic({ children, ...restProps }: SnackbarBasicProps) { + const { sizeY = 'none' } = useAdaptivity(); const layout = after || subtitle ? 'vertical' : layoutProps; return ( @@ -68,6 +75,7 @@ export function Basic({ baseClassName={classNames( styles['Snackbar__body'], stylesLayout[layout], + sizeY !== 'compact' && sizeYClassNames[sizeY], mode === 'dark' && styles['Snackbar--mode-dark'], )} {...restProps} From 9607ac21e2e0a608c42d3122dd4a61d0786ef772 Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Mon, 18 Mar 2024 16:52:12 +0000 Subject: [PATCH 2/2] CHORE: Update screenshots --- .../snackbarbasic-android-chromium-dark-1-snap.png | 4 ++-- .../snackbarbasic-android-chromium-light-1-snap.png | 4 ++-- .../snackbarbasic-ios-webkit-dark-1-snap.png | 4 ++-- .../snackbarbasic-ios-webkit-light-1-snap.png | 4 ++-- .../snackbarbasic-vkcom-chromium-dark-1-snap.png | 4 ++-- .../snackbarbasic-vkcom-chromium-light-1-snap.png | 4 ++-- .../snackbarbasic-vkcom-firefox-dark-1-snap.png | 4 ++-- .../snackbarbasic-vkcom-firefox-light-1-snap.png | 4 ++-- .../snackbarbasic-vkcom-webkit-dark-1-snap.png | 4 ++-- .../snackbarbasic-vkcom-webkit-light-1-snap.png | 4 ++-- 10 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-android-chromium-dark-1-snap.png index 5d15dd59b8..b260b18ac2 100644 --- a/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2103c5c79c5c332f9de7acf25b77b0a071697eecf44244b60bb6a8d1635e4311 -size 41258 +oid sha256:06e6e599437b8a9079c6f26f0e21ebd7266d1035cf92833a004f0969cadbf579 +size 41219 diff --git a/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-android-chromium-light-1-snap.png b/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-android-chromium-light-1-snap.png index a601900a60..872873030a 100644 --- a/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f23eee4b95440a7fd66930dcebc0814e036b9b81dae185eb73dd5f08b1bf5b36 -size 49447 +oid sha256:cc4f280f026db8c3561bfc6141d4d5710417a511005ff46bdecb0fb89997c690 +size 49562 diff --git a/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-ios-webkit-dark-1-snap.png index 601046815e..beffdcaa65 100644 --- a/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1ad4f25cae191e1fadc4ea12677639f093e083e5ab81f5755137887e0708c5ab -size 37247 +oid sha256:8d057af026ff7bc32406d542d50f445495155fbe28c9933175a332f1642ad3cc +size 37375 diff --git a/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-ios-webkit-light-1-snap.png index b2c1195d9b..abac2875a7 100644 --- a/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fd2201322ed36b2b113403d5c71314403dda2a670f3cd91fd97edca5bc0cd192 -size 44912 +oid sha256:ca4408633e797de5cbe6b8ba5dd58e9dd01798084535f7ddfc1e658f1fb5835f +size 45006 diff --git a/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-chromium-dark-1-snap.png index 2d5f61d2cb..3378c37f84 100644 --- a/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1c54b0841cc5fd6a8065f3583e553d7c770d4db85909361d8d71cf57e2569fbb -size 39276 +oid sha256:bd366e2301b9f7340b8df22175be5ff29a38bf608884b6c468889fbd4822e935 +size 39263 diff --git a/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-chromium-light-1-snap.png index c6297fd75e..8b04e5d734 100644 --- a/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2160fe5f508daecfa7f15131e129edbba138a728fc8b0e0ec8a629d366d9157d -size 42463 +oid sha256:238280d4758999b9aba3343f5cf38d60f610bdac5520c264d617316096b8f5c2 +size 42264 diff --git a/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-firefox-dark-1-snap.png index cd35c68bc5..c5a841389b 100644 --- a/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b80d48491ae3c28964d35112bc06e571e756fd08b1beb486590aea66af1ef941 -size 48753 +oid sha256:5e954d720b405ffd5d3bd318aa7554ce10d180a1efd721b0ff25b2d12b583a7a +size 48901 diff --git a/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-firefox-light-1-snap.png index 4ac22cbb09..d1415d6899 100644 --- a/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4a68d906f82a9ae2e37e3007cca95746fc73155318787be75a9e7b0ead9b5bfb -size 52342 +oid sha256:e798dd13886b4c7ddc7e9e4e3065df7dd3d7f95b46207365b470af3dfa4266ec +size 52609 diff --git a/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-webkit-dark-1-snap.png index 3271f3b3e3..d8e8c1af57 100644 --- a/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3cfcebdce52b46548a2315ae9e2508484ba6f51bff9a0351f03dd25c13f64626 -size 35067 +oid sha256:22fcdc8953124a931426eefa4613974633be2e545603703370491946549a6496 +size 35159 diff --git a/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-webkit-light-1-snap.png index 872e186992..62e158ce8a 100644 --- a/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Snackbar/subcomponents/Basic/__image_snapshots__/snackbarbasic-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e567ff4f5214227e6de1f5dafadc7b30368fe7b30f5b5e853783309ef9fe6958 -size 38485 +oid sha256:4a06e1c796b64ba83ea16f8602c722aecb154fc0b4630fc339dd68d0a342e6b1 +size 38399