From c229a99f7cec63e678179abe4bf698d4e0c6574c Mon Sep 17 00:00:00 2001 From: Daniil Suvorov Date: Tue, 27 Jun 2023 12:21:35 +0300 Subject: [PATCH] =?UTF-8?q?fix(Group):=20spacing=20adaptivity=20-=20=D0=B8?= =?UTF-8?q?=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB=20=D0=B0=D0=B4=D0=B0?= =?UTF-8?q?=D0=BF=D1=82=D0=B8=D0=B2=D0=BD=D0=BE=D1=81=D1=82=D1=8C(=D0=B2?= =?UTF-8?q?=D1=8B=D0=BD=D0=B5=D1=81=20=D0=BE=D0=BF=D1=80=D0=B5=D0=B4=D0=B5?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20mode=20=D0=BD=D0=B0=20js)=20-?= =?UTF-8?q?=20=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB=20=D1=80?= =?UTF-8?q?=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=D0=B8=D1=82=D0=B5=D0=BB=D0=B8=20?= =?UTF-8?q?=D0=BC=D0=B5=D0=B6=D0=B4=D1=83=20=D0=B3=D1=80=D1=83=D0=BF=D0=BF?= =?UTF-8?q?=D0=B0=D0=BC=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../cardscroll-vkcom-chromium-dark-1-snap.png | 4 +- ...cardscroll-vkcom-chromium-light-1-snap.png | 4 +- .../cardscroll-vkcom-firefox-dark-1-snap.png | 4 +- .../cardscroll-vkcom-firefox-light-1-snap.png | 4 +- .../cardscroll-vkcom-webkit-dark-1-snap.png | 4 +- .../cardscroll-vkcom-webkit-light-1-snap.png | 4 +- .../src/components/Group/Group.module.css | 45 ++++++++----------- packages/vkui/src/components/Group/Group.tsx | 7 ++- 8 files changed, 35 insertions(+), 41 deletions(-) diff --git a/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-chromium-dark-1-snap.png index 865794f096..c0b4b92e58 100644 --- a/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:41e7afd2aba7f6bbf88b6216d438770fa0398b1f290e4dc1bf4061428d5e27ff -size 23210 +oid sha256:d24ddbbcd24397ac37503c1cf8b2d374ad65a57d48ee1597702c12a3d1784fe6 +size 20940 diff --git a/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-chromium-light-1-snap.png index af0e767f81..77bbfb6c8d 100644 --- a/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:209f0f5ee4bbc5938fd03aeaaab84a69c66cd8eb5a5f70f16bf707559bbe5438 -size 23569 +oid sha256:c89d3eedf8de5dea84290d284ecdf7cfdaa5b3c979c875a2368886393567e833 +size 20683 diff --git a/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-firefox-dark-1-snap.png index 905391655b..2180d46d72 100644 --- a/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6185dc832b1f05a726da45be2474d7684647973e9751b43579657b772dca1ac1 -size 36865 +oid sha256:8d735c7ef7331561f22dbb99b4e75fcd4548b1672e42fc76f5bde1155c3baa9d +size 30466 diff --git a/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-firefox-light-1-snap.png index 72d953e3e5..d3f965cd7a 100644 --- a/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2af14f6dbdcc8bf32b4abb9441b2d8c7326f0009f051c93048fd0a546d35fb93 -size 35381 +oid sha256:e3e2884c886929eab615776e302a8afe87dd9811e06f0d84ebca1b9b47c1266d +size 28806 diff --git a/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-webkit-dark-1-snap.png index 94fd8a8746..d38734ba1d 100644 --- a/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4c386c9ea3e412b82b71d6f2810e861aed2e0a1381f8db4a7c3804c4b0bdd8da -size 21572 +oid sha256:9eea7407b26373aed9a17a53a12194d5e7246dbccfb27a4853fbd7f962f7563c +size 19469 diff --git a/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-webkit-light-1-snap.png index 470401761c..1567079661 100644 --- a/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/CardScroll/__image_snapshots__/cardscroll-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b66e8f7730a9ccedb72b2713ac69c0ed51418a3d4e50513d56dde1c75d3a2625 -size 21551 +oid sha256:438fea1d189fb42e3953311a7a1a6d369ea63ef89bd2c91bc7ae5c1ed2efc4d5 +size 18947 diff --git a/packages/vkui/src/components/Group/Group.module.css b/packages/vkui/src/components/Group/Group.module.css index 56ca6a42b7..53043bea8d 100644 --- a/packages/vkui/src/components/Group/Group.module.css +++ b/packages/vkui/src/components/Group/Group.module.css @@ -9,18 +9,17 @@ display: none; } -.Group--sizeX-compact + .Group__separator--spacing + .Group__separator--separator, -.Group--mode-plain + .Group__separator--spacing + .Group__separator--separator { +.Group--mode-plain + * + .Group__separator--separator { display: block; } @media (--sizeX-compact) { - .Group--sizeX-none + .Group__separator--spacing + .Group__separator--separator { + .Group--sizeX-none.Group--mode-none + * + .Group__separator--separator { display: block; } } -.Group--sizeX-regular.Group--mode-none + .Group__separator--spacing { +.Group--mode-card + .Group__separator--spacing { display: block; } @@ -30,12 +29,25 @@ } } -.Group--sizeX-regular.Group--mode-none.Group--padding-s, +.Group:last-of-type ~ .Group__separator { + display: none; +} + +.Group:last-of-type ~ .Group__separator--force, +.Group--mode-card:last-of-type + .Group__separator--spacing { + display: block; +} + +@media (--sizeX-regular) { + .Group--sizeX-none.Group--mode-none:last-of-type + .Group__separator--spacing { + display: block; + } +} + .Group--mode-card.Group--padding-s { padding: 4px; } -.Group--sizeX-regular.Group--mode-none.Group--padding-m, .Group--mode-card.Group--padding-m { padding: 8px; } @@ -62,7 +74,6 @@ } } -.Group--sizeX-regular.Group--mode-none, .Group--mode-card { background: var(--vkui--color_background_content); border-radius: var(--vkui--size_border_radius_paper--regular); @@ -77,7 +88,6 @@ } } -.Group--sizeX-regular.Group--mode-none::after, .Group--mode-card::after { content: ''; left: 0; @@ -104,8 +114,6 @@ } } -.Group--sizeX-compact.Group--mode-none + .Group__separator, -.Group--sizeX-compact.Group--mode-none + .Group__separator + .Group__separator, .Group--mode-plain + .Group__separator, .Group--mode-plain + .Group__separator + .Group__separator { padding-top: 8px; @@ -120,23 +128,6 @@ } } -.Group:last-of-type ~ .Group__separator { - display: none; -} - -.Group:last-of-type ~ .Group__separator--force, -.Group--sizeX-regular.Group--mode-none:last-of-type + .Group__separator--spacing, -.Group--sizeX-regular.Group--mode-card:last-of-type + .Group__separator--spacing { - display: block; -} - -@media (--sizeX-regular) { - .Group--sizeX-none.Group--mode-card:last-of-type + .Group__separator--spacing, - .Group--sizeX-none.Group--mode-none:last-of-type + .Group__separator--spacing { - display: block; - } -} - .Group__description { display: block; padding: 4px 16px 16px; diff --git a/packages/vkui/src/components/Group/Group.tsx b/packages/vkui/src/components/Group/Group.tsx index be36ed406f..6e766a3254 100644 --- a/packages/vkui/src/components/Group/Group.tsx +++ b/packages/vkui/src/components/Group/Group.tsx @@ -15,7 +15,6 @@ import styles from './Group.module.css'; const sizeXClassNames = { none: styles['Group--sizeX-none'], [SizeType.COMPACT]: styles['Group--sizeX-compact'], - [SizeType.REGULAR]: styles['Group--sizeX-regular'], }; export interface GroupProps @@ -70,6 +69,10 @@ export const Group = ({ mode = isInsideModal ? 'plain' : 'none'; } + if (mode === 'none' && sizeX !== 'none') { + mode = sizeX === SizeType.REGULAR ? 'card' : 'plain'; + } + const isTabPanel = restProps.role === 'tabpanel'; if ( @@ -99,7 +102,7 @@ export const Group = ({ 'vkuiInternalGroup', styles['Group'], platform === Platform.IOS && styles['Group--ios'], - sizeXClassNames[sizeX], + sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], mode && { none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),