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 all commits
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) {
margin-inline-end: calc(-1 * var(--_--overlap));
}
}
Expand Down
18 changes: 14 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 @@ -12,6 +12,9 @@ import './AvatarStack.scss';

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

// Default style for more button item
const DEFAULT_MORE_BUTTON_STYLE = {zIndex: 0};

const AvatarStackComponent = React.forwardRef<HTMLUListElement, AvatarStackProps>(
(
{
Expand Down Expand Up @@ -43,10 +46,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 +67,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={DEFAULT_MORE_BUTTON_STYLE}>
{renderMore ? (
renderMore({count: moreItems})
) : (
<AvatarStackMore count={moreItems} size={size} />
)}
</AvatarStackItem>
) : null}
{visibleItems}
</ul>
);
},
Expand Down
10 changes: 7 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,14 @@ import {block} from '../utils/cn';

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

type Props = React.PropsWithChildren<{}>;
type Props = React.PropsWithChildren<Pick<React.HTMLAttributes<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