Skip to content

fix(AvatarStack): change ordering algorithm for correct logical order li #2480

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix(AvatarStack): change ordering algorithm for correct logical order li #2480

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
aaeb674
fix(AvatarStack): change ordering algorithm for correct logical order li
Nov 1, 2025
c3613a8
fix(AvatarStack): simplify margin logic and improve style handling fo…
Nov 15, 2025
e8741b4
fix(AvatarStack): apply margin only to non-last avatars for better la…
Nov 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions src/components/AvatarStack/AvatarStack.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ $block: '.#{variables.$ns}avatar-stack';

display: inline-flex;
justify-content: flex-end;
flex-direction: row-reverse;
flex-direction: row;

margin: 0;
padding: 0;
Expand All @@ -31,8 +31,7 @@ $block: '.#{variables.$ns}avatar-stack';
display: flex;
z-index: 0;
border-radius: 100%;

&:not(:first-child) {
&:not(:last-child) {
Copy link
Contributor

@ogonkov ogonkov Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like some mistyping, can you return empty line here please?

Copy link
Contributor Author

@arteria32 arteria32 Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This selector is necessary for determining the correct size of the container.
With &:not..
image

Without &:not..
Screenshot 2025-11-15 at 09 11 18

margin-inline-end: calc(-1 * var(--_--overlap));
}
}
Expand Down
15 changes: 11 additions & 4 deletions src/components/AvatarStack/AvatarStack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,17 @@ const AvatarStackComponent = React.forwardRef<HTMLUListElement, AvatarStackProps
return;
}

const item = <AvatarStackItem key={visibleItems.length}>{child}</AvatarStackItem>;
const item = (
<AvatarStackItem
key={visibleItems.length}
style={{zIndex: normalizedMax - visibleItems.length}}
>
{child}
</AvatarStackItem>
);

if (visibleItems.length < normalizedMax) {
visibleItems.unshift(item);
visibleItems.push(item);
}
});

Expand All @@ -57,16 +64,16 @@ const AvatarStackComponent = React.forwardRef<HTMLUListElement, AvatarStackProps
// to restore role manually
// eslint-disable-next-line jsx-a11y/no-redundant-roles
<ul className={b({'overlap-size': overlapSize}, className)} role={'list'} ref={ref}>
{visibleItems}
{hasMoreButton ? (
<AvatarStackItem key="more-button">
<AvatarStackItem key="more-button" style={{zIndex: 0}}>
Copy link
Contributor

@ogonkov ogonkov Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move this object to some variable outside of component please, to avoid redundant props change

Copy link
Contributor Author

@arteria32 arteria32 Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

{renderMore ? (
renderMore({count: moreItems})
) : (
<AvatarStackMore count={moreItems} size={size} />
)}
</AvatarStackItem>
) : null}
{visibleItems}
</ul>
);
},
Expand Down
12 changes: 9 additions & 3 deletions src/components/AvatarStack/AvatarStackItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,16 @@ import {block} from '../utils/cn';

const b = block('avatar-stack');

type Props = React.PropsWithChildren<{}>;
type Props = React.PropsWithChildren<{
style?: React.CSSProperties;
}>;
Copy link
Contributor

@ogonkov ogonkov Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
type Props = React.PropsWithChildren<{
style?: React.CSSProperties;
}>;
type Props = React.PropsWithChildren<Pick<HTMLLIElement, 'style'>>;


export const AvatarStackItem = ({children}: Props) => {
return <li className={b('item')}>{children}</li>;
export const AvatarStackItem = ({children, style}: Props) => {
return (
<li className={b('item')} style={style}>
{children}
</li>
);
};

AvatarStackItem.displayName = 'AvatarStack.Item';
Loading