From de9fc463d64bc444177c966032ba33e07ca9b635 Mon Sep 17 00:00:00 2001
From: Eldar <61377022+EldarMuhamethanov@users.noreply.github.com>
Date: Fri, 13 Dec 2024 14:14:30 +0300
Subject: [PATCH] fix(UsersStack): make counter width adaptive (#8066)
* fix(UsersStack): make counter width adaptive
* fix: add screenshots
* test: update screenshots
* fix: remove unused selectors
---
.../UsersStack/UsersStack.e2e-playground.tsx | 6 +++
.../UsersStack/UsersStack.module.css | 44 ++++++++++++-------
.../src/components/UsersStack/UsersStack.tsx | 9 +++-
...sersstack-android-chromium-dark-1-snap.png | 4 +-
...ersstack-android-chromium-light-1-snap.png | 4 +-
.../usersstack-ios-webkit-dark-1-snap.png | 4 +-
.../usersstack-ios-webkit-light-1-snap.png | 4 +-
.../usersstack-vkcom-chromium-dark-1-snap.png | 4 +-
...usersstack-vkcom-chromium-light-1-snap.png | 4 +-
.../usersstack-vkcom-firefox-dark-1-snap.png | 4 +-
.../usersstack-vkcom-firefox-light-1-snap.png | 4 +-
.../usersstack-vkcom-webkit-dark-1-snap.png | 4 +-
.../usersstack-vkcom-webkit-light-1-snap.png | 4 +-
13 files changed, 60 insertions(+), 39 deletions(-)
diff --git a/packages/vkui/src/components/UsersStack/UsersStack.e2e-playground.tsx b/packages/vkui/src/components/UsersStack/UsersStack.e2e-playground.tsx
index 697b7faf1e..101abefb58 100644
--- a/packages/vkui/src/components/UsersStack/UsersStack.e2e-playground.tsx
+++ b/packages/vkui/src/components/UsersStack/UsersStack.e2e-playground.tsx
@@ -39,6 +39,12 @@ export const UsersStackPlayground = (props: ComponentPlaygroundProps) => {
[base64Image, base64Image, base64Image, base64Image],
],
},
+ {
+ children: [undefined],
+ size: ['m', 'l'],
+ photos: [[base64Image, base64Image, base64Image]],
+ count: [99],
+ },
]}
>
{(props: UsersStackProps) => }
diff --git a/packages/vkui/src/components/UsersStack/UsersStack.module.css b/packages/vkui/src/components/UsersStack/UsersStack.module.css
index 5cd8f86a12..c14515daba 100644
--- a/packages/vkui/src/components/UsersStack/UsersStack.module.css
+++ b/packages/vkui/src/components/UsersStack/UsersStack.module.css
@@ -2,6 +2,20 @@
display: flex;
align-items: center;
color: var(--vkui--color_text_secondary);
+
+ --vkui_internal--UsersStack_item_size: 16px;
+}
+
+.sizeS {
+ --vkui_internal--UsersStack_item_size: 16px;
+}
+
+.sizeM {
+ --vkui_internal--UsersStack_item_size: 24px;
+}
+
+.sizeL {
+ --vkui_internal--UsersStack_item_size: 32px;
}
.avatarsPositionInlineEnd {
@@ -21,28 +35,24 @@
fill: var(--vkui--color_image_placeholder_alpha);
}
-.photoOthers {
+.item {
+ block-size: var(--vkui_internal--UsersStack_item_size);
+ min-inline-size: var(--vkui_internal--UsersStack_item_size);
+}
+
+.photo {
+ max-inline-size: var(--vkui_internal--UsersStack_item_size);
+}
+
+.counter {
display: flex;
align-items: center;
justify-content: center;
+ box-sizing: border-box;
+ padding-inline: var(--vkui--spacing_size_xs);
color: var(--vkui--color_text_contrast_themed);
background: var(--vkui--color_icon_secondary);
- border-radius: 50%;
-}
-
-.sizeS .photo {
- inline-size: 16px;
- block-size: 16px;
-}
-
-.sizeM .photo {
- inline-size: 24px;
- block-size: 24px;
-}
-
-.sizeL .photo {
- inline-size: 32px;
- block-size: 32px;
+ border-radius: calc(var(--vkui_internal--UsersStack_item_size) / 2);
}
.photoWrapper {
diff --git a/packages/vkui/src/components/UsersStack/UsersStack.tsx b/packages/vkui/src/components/UsersStack/UsersStack.tsx
index 15c753e0f9..87074e99c8 100644
--- a/packages/vkui/src/components/UsersStack/UsersStack.tsx
+++ b/packages/vkui/src/components/UsersStack/UsersStack.tsx
@@ -168,7 +168,12 @@ export const UsersStack = ({
const photoSrc = isPhotoType ? photo.src : photo;
let photoElement = (
-