Featuring Design System
ChangelogComponents

0.1.36

Avatar.Indicator가 아바타 바깥의 sticky 헤더나 다른 요소 위로 올라오던 문제를 고쳤습니다.

Avatar.Indicator가 아바타 바깥 요소 위로 올라오던 문제

Avatar.Indicator는 이미지 위에 그려지도록 z-index: 1을 갖고 있습니다. 그런데 Avatar.Root가 stacking context를 만들지 않아서, 이 값이 아바타 안에서 끝나지 않고 페이지 쪽으로 새어 나갔습니다. 그 결과 스크롤 영역 안의 아바타를 스크롤하면 z-index: 1인 sticky 헤더 위로 SNS 배지가 겹쳐 보였습니다.

이제 Avatar.Root에 isolation: isolate가 적용되어 Indicator의 z-index는 아바타 안에서만 비교됩니다. 배지는 이전처럼 자기 이미지 위에 그려지고, 바깥 요소와의 순서는 아바타 전체를 기준으로 정해집니다.

sticky 헤더가 배지에 덮이지 않도록 헤더의 z-index를 2 이상으로 올려 두었다면, 이제 1로 낮춰도 됩니다. 스크롤 영역이 같은 화면의 다른 요소와 겹친다면 스크롤 컨테이너에 isolation: isolate를 두는 방식은 그대로 유지하세요.

시각 변경: Avatar.Group처럼 아바타가 겹쳐 놓이면, 앞 아바타의 Indicator가 뒤에 오는 아바타에 가려집니다. 이전에는 배지가 다음 아바타 위로 올라와 보였습니다.