Skip to content

Commit

Permalink
fix(AvatarGroup): wrong ring on big sizes
Browse files Browse the repository at this point in the history
  • Loading branch information
@benjamincanac
benjamincanac committed Oct 17, 2024
1 parent eb1b30d commit 61b2323
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 12 deletions.
12 changes: 6 additions & 6 deletions src/theme/avatar-group.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ export default {
variants: {
size: {
'3xs': {
base: 'ring-1 -me-0.5'
base: 'ring -me-0.5'
},
'2xs': {
base: 'ring-1 -me-0.5'
base: 'ring -me-0.5'
},
'xs': {
base: 'ring-1 -me-0.5'
base: 'ring -me-0.5'
},
'sm': {
base: 'ring-2 -me-1.5'
Expand All @@ -24,13 +24,13 @@ export default {
base: 'ring-2 -me-1.5'
},
'xl': {
base: 'ring-2.5 -me-2'
base: 'ring-3 -me-2'
},
'2xl': {
base: 'ring-2.5 -me-2'
base: 'ring-3 -me-2'
},
'3xl': {
base: 'ring-2.5 -me-2'
base: 'ring-3 -me-2'
}
}
},
Expand Down
12 changes: 6 additions & 6 deletions test/components/__snapshots__/AvatarGroup.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,25 +18,25 @@ exports[`AvatarGroup > renders with max correctly 1`] = `"<div class="inline-fle

exports[`AvatarGroup > renders with size 2xl correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end">
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2.5 -me-2"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2.5 -me-2"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2.5 -me-2"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
</div>"
`;

exports[`AvatarGroup > renders with size 2xs correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end">
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-1 -me-0.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-1 -me-0.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-1 -me-0.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring -me-0.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring -me-0.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-5 text-[10px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring -me-0.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
</div>"
`;

exports[`AvatarGroup > renders with size 3xl correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end">
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-12 text-2xl relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2.5 -me-2"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-12 text-2xl relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2.5 -me-2"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-12 text-2xl relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2.5 -me-2"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-12 text-2xl relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-12 text-2xl relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-12 text-2xl relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
</div>"
`;

exports[`AvatarGroup > renders with size 3xs correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end">
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-1 -me-0.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-1 -me-0.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-1 -me-0.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring -me-0.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring -me-0.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] relative rounded-full ring-[var(--ui-bg)] first:me-0 ring -me-0.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
</div>"
`;

Expand All @@ -60,13 +60,13 @@ exports[`AvatarGroup > renders with size sm correctly 1`] = `

exports[`AvatarGroup > renders with size xl correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end">
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-10 text-xl relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2.5 -me-2"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-10 text-xl relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2.5 -me-2"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-10 text-xl relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-2.5 -me-2"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-10 text-xl relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-10 text-xl relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-10 text-xl relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-3 -me-2"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
</div>"
`;

exports[`AvatarGroup > renders with size xs correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end">
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-6 text-xs relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-1 -me-0.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-6 text-xs relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-1 -me-0.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-6 text-xs relative rounded-full ring-[var(--ui-bg)] first:me-0 ring-1 -me-0.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
<!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-6 text-xs relative rounded-full ring-[var(--ui-bg)] first:me-0 ring -me-0.5"><img role="img" src="https://github.com/noook.png" alt="Neil Richter" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">NR</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-6 text-xs relative rounded-full ring-[var(--ui-bg)] first:me-0 ring -me-0.5"><img role="img" src="https://github.com/romhml.png" alt="Romain Hamel" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">RH</span></span><span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden align-middle bg-[var(--ui-bg-elevated)] size-6 text-xs relative rounded-full ring-[var(--ui-bg)] first:me-0 ring -me-0.5"><img role="img" src="https://github.com/benjamincanac.png" alt="Benjamin Canac" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate">BC</span></span>
</div>"
`;

Expand Down

0 comments on commit 61b2323

Please sign in to comment.