mirror of
https://github.com/block/buzz.git
synced 2026-08-18 06:50:31 +02:00
Simplify team avatar stack styling
This commit is contained in:
@@ -147,7 +147,7 @@ function TeamAvatarRow({
|
||||
className={visiblePersonas.length > 0 ? "-ml-5" : ""}
|
||||
style={{ zIndex: stackItemCount }}
|
||||
>
|
||||
<span className="flex h-14 w-14 items-center justify-center rounded-full border-[3px] border-background bg-card text-sm font-semibold text-muted-foreground shadow-sm">
|
||||
<span className="flex h-14 w-14 items-center justify-center rounded-full bg-card text-sm font-semibold text-muted-foreground">
|
||||
+{overflowCount}
|
||||
</span>
|
||||
</div>
|
||||
@@ -184,13 +184,14 @@ function TeamAvatarItem({
|
||||
{avatarUrl ? (
|
||||
<ProfileAvatar
|
||||
avatarUrl={avatarUrl}
|
||||
className="h-full w-full border-[3px] border-background bg-muted shadow-sm"
|
||||
className="h-full w-full bg-muted shadow-none"
|
||||
iconClassName="h-6 w-6"
|
||||
label={persona.displayName}
|
||||
testId={`team-member-avatar-${persona.id}`}
|
||||
/>
|
||||
) : (
|
||||
<IdentityInitialsAvatar
|
||||
className="border-0 shadow-none"
|
||||
colorIndex={index}
|
||||
label={persona.displayName}
|
||||
size={56}
|
||||
|
||||
@@ -420,6 +420,7 @@ test("team cards use the thread-style overlapping avatar stack", async ({
|
||||
await installMockBridge(page, {
|
||||
personas: [
|
||||
{
|
||||
avatarUrl: "/onboarding/starter-team/fizz.png",
|
||||
id: personaIds[0],
|
||||
displayName: "Design",
|
||||
systemPrompt: "You design interfaces.",
|
||||
@@ -461,6 +462,29 @@ test("team cards use the thread-style overlapping avatar stack", async ({
|
||||
expect(boxes[2]?.left).toBeLessThan(boxes[1]?.right ?? 0);
|
||||
await expect(avatars.first()).not.toHaveCSS("mask-image", "none");
|
||||
await expect(avatars.last()).toHaveCSS("mask-image", "none");
|
||||
const avatarSurfaceStyles = await avatars
|
||||
.locator(":scope > *")
|
||||
.evaluateAll((elements) =>
|
||||
elements.map((element) => {
|
||||
const styles = getComputedStyle(element);
|
||||
const hasVisibleShadow = [
|
||||
...styles.boxShadow.matchAll(/rgba?\(([^)]+)\)/g),
|
||||
].some((match) => {
|
||||
if (match[0].startsWith("rgb(")) return true;
|
||||
const channels = match[1]?.split(/[\s,/]+/).filter(Boolean) ?? [];
|
||||
return Number(channels.at(-1)) > 0;
|
||||
});
|
||||
return {
|
||||
borderWidth: styles.borderTopWidth,
|
||||
hasVisibleShadow,
|
||||
};
|
||||
}),
|
||||
);
|
||||
expect(avatarSurfaceStyles).toEqual([
|
||||
{ borderWidth: "0px", hasVisibleShadow: false },
|
||||
{ borderWidth: "0px", hasVisibleShadow: false },
|
||||
{ borderWidth: "0px", hasVisibleShadow: false },
|
||||
]);
|
||||
});
|
||||
|
||||
test("agent defaults stays in the header without an actions menu", async ({
|
||||
|
||||
Reference in New Issue
Block a user