cameleer/design-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ProgressBar indeterminate animation and AvatarGroup key collision

Browse Source 
- Use translateX instead of left for indeterminate shimmer (left doesn't
  work on non-absolutely-positioned elements)
- Use index-based key in AvatarGroup to prevent duplicate name collisions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-03-18 15:33:40 +01:00
parent c05681176b
commit b30bb4dcdd
2 changed files with 4 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/design-system/composites/AvatarGroup/AvatarGroup.tsx
View File

@@ -16,7 +16,7 @@ export function AvatarGroup({ names, max = 3, size = 'md', className }: AvatarGr
<span className={`${styles.group} ${styles[size]} ${className ?? ''}`}> <span className={`${styles.group} ${styles[size]} ${className ?? ''}`}>
{visible.map((name, index) => ( {visible.map((name, index) => (
<Avatar <Avatar
key={name} key={`${name}-${index}`}
name={name} name={name}
size={size} size={size}
className={`${styles.avatar} ${index === 0 ? styles.first : ''}`} className={`${styles.avatar} ${index === 0 ? styles.first : ''}`}

7
src/design-system/primitives/ProgressBar/ProgressBar.module.css
View File

@@ -36,13 +36,12 @@
/* Indeterminate shimmer */ /* Indeterminate shimmer */
@keyframes shimmer { @keyframes shimmer {
0% { left: -40%; width: 40%; } 0% { transform: translateX(-100%); width: 40%; }
50% { left: 30%; width: 60%; } 50% { transform: translateX(75%); width: 60%; }
100% { left: 100%; width: 40%; } 100% { transform: translateX(250%); width: 40%; }
} }
.indeterminate { .indeterminate {
position: relative;
width: 40% !important; width: 40% !important;
animation: shimmer 1.4s ease-in-out infinite; animation: shimmer 1.4s ease-in-out infinite;
} }