Skip to content

Commit cfa96d8

Browse files
benax-sebenax-se
authored
feat(AvatarStack): add moreVariant prop and fix 2xs and 3xs size (#2608)
1 parent 01f78bb commit cfa96d8

13 files changed

Lines changed: 54 additions & 16 deletions

File tree

‎src/components/AvatarStack/AvatarStack.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ $block: '.#{variables.$ns}avatar-stack';
7878
&_size {
7979
@each $size-name, $size-value in avatar-variables.$sizes {
8080
&_#{$size-name} {
81-
@if $size-name == '2xs' or $size-name == 'xs' {
81+
@if $size-name == '3xs' or $size-name == '2xs' or $size-name == 'xs' {
8282
font-size: var(--g-text-caption-1-font-size);
8383
}
8484

‎src/components/AvatarStack/AvatarStack.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const AvatarStackComponent = React.forwardRef<HTMLUListElement, AvatarStackProps
2525
children,
2626
className,
2727
renderMore,
28+
moreVariant,
2829
},
2930
ref,
3031
) => {
@@ -73,7 +74,7 @@ const AvatarStackComponent = React.forwardRef<HTMLUListElement, AvatarStackProps
7374
{renderMore ? (
7475
renderMore({count: moreItems})
7576
) : (
76-
<AvatarStackMore count={moreItems} size={size} />
77+
<AvatarStackMore count={moreItems} size={size} variant={moreVariant} />
7778
)}
7879
</AvatarStackItem>
7980
) : null}

‎src/components/AvatarStack/AvatarStackMore.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
import * as React from 'react';
22

3+
import {Ellipsis} from '@gravity-ui/icons';
4+
35
import {DEFAULT_AVATAR_SIZE} from '../Avatar';
6+
import {Icon} from '../Icon';
47
import {block} from '../utils/cn';
58

9+
import {COMPONENT_SIZE_TO_MORE_ICON_SIZE} from './constants';
610
import i18n from './i18n';
711
import type {AvatarStackMoreProps} from './types';
812

@@ -19,6 +23,7 @@ export const AvatarStackMore = React.forwardRef<HTMLDivElement, AvatarStackMoreP
1923
'aria-label': ariaLabel,
2024
borderColor = 'var(--g-color-line-generic-solid)',
2125
size = DEFAULT_AVATAR_SIZE,
26+
variant = 'counter',
2227
},
2328
ref,
2429
) => {
@@ -30,7 +35,11 @@ export const AvatarStackMore = React.forwardRef<HTMLDivElement, AvatarStackMoreP
3035
aria-label={ariaLabel || t('more', {count})}
3136
style={{borderColor}}
3237
>
33-
+{count}
38+
{variant === 'counter' ? (
39+
`+${count}`
40+
) : (
41+
<Icon size={COMPONENT_SIZE_TO_MORE_ICON_SIZE[size]} data={Ellipsis} />
42+
)}
3443
</div>
3544
);
3645
},

‎src/components/AvatarStack/AvatarStackMoreButton.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export const AvatarStackMoreButton = React.forwardRef<
2121
count,
2222
'aria-label': ariaLabel,
2323
borderColor,
24+
variant,
2425
},
2526
ref,
2627
) => {
@@ -37,6 +38,7 @@ export const AvatarStackMoreButton = React.forwardRef<
3738
count={count}
3839
aria-label={ariaLabel}
3940
borderColor={borderColor}
41+
variant={variant}
4042
/>
4143
</button>
4244
);

‎src/components/AvatarStack/README-ru.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,14 @@ import {AvatarStack} from '@gravity-ui/uikit';
2525
## Свойства
2626

2727
| Имя | Описание | Тип | Значение по умолчанию |
28-
| :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------: | :-------------------: |
28+
| :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------: | :-------------------: | --- |
2929
| max | Устанавливает максимальное количество аватаров, которые будут отображаться перед кнопкой `More`. Если количество аватаров меньше `max` всего на 1, кнопка `More` будет заменена на аватар. | `number` | 3 |
3030
| overlapSize | Определяет, насколько каждый элемент должен перекрывать следующий. Для аватаров размером от `xs` до `m` рекомендуется использовать `s`, для `l` — `m`, а для `xl` — `l`. | `s`, `m`, `l` | `s` |
3131
| size | Размер контрола, отображающего дополнительные аватары. Значение соответствует размеру `Avatar`. | `AvatarSize` | |
3232
| className | Имя CSS-класса корневого DOM-узла. | `string` | |
3333
| children | Список аватаров, которые могут иметь дополнительные обертки. | `Object[]` | |
3434
| renderMore | Пользовательская функция для отрисовки контрола, отображающего дополнительные аватары. | `function(options: {count: number}): ReactElement` | |
35+
| moreVariant | Вариант контрола, отображающего дополнительные аватары | `counter`,`dots` | `counter` | |
3536

3637
### AvatarStack.MoreButton
3738

‎src/components/AvatarStack/README.md‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,15 @@ Basically, `AvatarStack` does not have any limitations in terms of what componen
2424

2525
## Properties
2626

27-
| Name | Description | Type | Default |
28-
| :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------: | :-----: |
29-
| max | Determines how many avatars are visible before the `More` button. If avatar count is only 1 short from `max`, the `More` button will be replaced with an avatar. | `number` | 3 |
30-
| overlapSize | Determines how much each item should overlap the next one. You may want to use `s` for `xs` to `m`-sized `Avatar`s , `m` for `l`-sized, and `l`, for `xl`-sized. | `s`, `m`, `l` | `s` |
31-
| size | Size for the control displaying extra avatars. Its value is the same as the `Avatar` size. | `AvatarSize` | |
32-
| className | Class name of the root DOM node | `string` | |
33-
| children | List of avatars that may also have extra wrappers | `Object[]` | |
34-
| renderMore | Custom render for the control displaying extra avatars | `function(options: {count: number}): ReactElement` | |
27+
| Name | Description | Type | Default |
28+
| :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------: | :-------: | --- |
29+
| max | Determines how many avatars are visible before the `More` button. If avatar count is only 1 short from `max`, the `More` button will be replaced with an avatar. | `number` | 3 |
30+
| overlapSize | Determines how much each item should overlap the next one. You may want to use `s` for `xs` to `m`-sized `Avatar`s , `m` for `l`-sized, and `l`, for `xl`-sized. | `s`, `m`, `l` | `s` |
31+
| size | Size for the control displaying extra avatars. Its value is the same as the `Avatar` size. | `AvatarSize` | |
32+
| className | Class name of the root DOM node | `string` | |
33+
| children | List of avatars that may also have extra wrappers | `Object[]` | |
34+
| renderMore | Custom render for the control displaying extra avatars | `function(options: {count: number}): ReactElement` | |
35+
| moreVariant | Variant of default control displaying extra 'counter' | `counter`,`dots` | `counter` | |
3536

3637
### AvatarStack.MoreButton
3738

‎src/components/AvatarStack/__snapshots__/AvatarStack.visual.test.tsx-snapshots/AvatarStack-smoke-1-chromium-linux.png‎

30.6 KB
Loading

‎src/components/AvatarStack/__stories__/AvatarStack.stories.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ const meta: Meta<ComponentType> = {
4949
overlapSize: 's',
5050
avatarSize: DEFAULT_AVATAR_SIZE,
5151
randomAvatar: true,
52+
moreVariant: 'counter',
5253
},
5354
argTypes: {
5455
avatarSize: {

‎src/components/AvatarStack/__tests__/AvatarStack.visual.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@ import {createSmokeScenarios} from '@gravity-ui/playwright-tools/component-tests
22

33
import {test} from '~playwright/core';
44

5-
import {sizeCases} from '../../Button/__tests__/cases';
65
import type {AvatarStackProps} from '../types';
76

8-
import {maxCases, overlapSizeCases} from './cases';
7+
import {maxCases, moreVariantCases, overlapSizeCases, sizeCases} from './cases';
98
import {TestAvatarStack, TestAvatarStackWithCustomMore} from './helpersPlaywright';
109
import {AvatarStackStories} from './stories';
1110

@@ -42,6 +41,7 @@ test.describe('AvatarStack', () => {
4241
overlapSize: overlapSizeCases,
4342
max: maxCases,
4443
avatarCount: [1],
44+
moreVariant: moreVariantCases,
4545
});
4646

4747
await mount(

‎src/components/AvatarStack/__tests__/cases.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type {Cases} from '@gravity-ui/playwright-tools/component-tests';
22

33
import type {AvatarStackProps} from '../types';
44

5-
export const sizeCases: Cases<AvatarStackProps['size']> = ['xs', 's', 'm', 'l', 'xl'];
5+
export const sizeCases: Cases<AvatarStackProps['size']> = ['3xs', '2xs', 'xs', 's', 'm', 'l', 'xl'];
6+
export const moreVariantCases: Cases<AvatarStackProps['moreVariant']> = ['counter', 'dots'];
67
export const overlapSizeCases: Cases<AvatarStackProps['overlapSize']> = ['s', 'm', 'l'];
78
export const maxCases: Cases<AvatarStackProps['max']> = [1];

0 commit comments

Comments
 (0)