arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-31 20:28:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(AvatarGroup): wrong ring on big sizes

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-17 22:14:29 +02:00
parent eb1b30db40
commit 61b232377b
2 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/theme/avatar-group.ts
View File

@@ -6,13 +6,13 @@ export default {
variants: { variants: {
size: { size: {
'3xs': { '3xs': {
base: 'ring-1 -me-0.5' base: 'ring -me-0.5'
}, },
'2xs': { '2xs': {
base: 'ring-1 -me-0.5' base: 'ring -me-0.5'
}, },
'xs': { 'xs': {
base: 'ring-1 -me-0.5' base: 'ring -me-0.5'
}, },
'sm': { 'sm': {
base: 'ring-2 -me-1.5' base: 'ring-2 -me-1.5'
@@ -24,13 +24,13 @@ export default {
base: 'ring-2 -me-1.5' base: 'ring-2 -me-1.5'
}, },
'xl': { 'xl': {
base: 'ring-2.5 -me-2' base: 'ring-3 -me-2'
}, },
'2xl': { '2xl': {
base: 'ring-2.5 -me-2' base: 'ring-3 -me-2'
}, },
'3xl': { '3xl': {
base: 'ring-2.5 -me-2' base: 'ring-3 -me-2'
} }
} }
}, },

12
test/components/__snapshots__/AvatarGroup.spec.ts.snap
View File

@@ -18,25 +18,25 @@ exports[`AvatarGroup > renders with max correctly 1`] = `"<div class="inline-fle
exports[`AvatarGroup > renders with size 2xl correctly 1`] = ` exports[`AvatarGroup > renders with size 2xl correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end"> "<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>" </div>"
`; `;
exports[`AvatarGroup > renders with size 2xs correctly 1`] = ` exports[`AvatarGroup > renders with size 2xs correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end"> "<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>" </div>"
`; `;
exports[`AvatarGroup > renders with size 3xl correctly 1`] = ` exports[`AvatarGroup > renders with size 3xl correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end"> "<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>" </div>"
`; `;
exports[`AvatarGroup > renders with size 3xs correctly 1`] = ` exports[`AvatarGroup > renders with size 3xs correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end"> "<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>" </div>"
`; `;
@@ -60,13 +60,13 @@ exports[`AvatarGroup > renders with size sm correctly 1`] = `
exports[`AvatarGroup > renders with size xl correctly 1`] = ` exports[`AvatarGroup > renders with size xl correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end"> "<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>" </div>"
`; `;
exports[`AvatarGroup > renders with size xs correctly 1`] = ` exports[`AvatarGroup > renders with size xs correctly 1`] = `
"<div class="inline-flex flex-row-reverse justify-end"> "<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>" </div>"
`; `;