mirror of
https://github.com/coder/coder.git
synced 2026-11-02 05:23:10 +08:00
TJandJake Howell
75400428ad
Built-in emoji avatars (`/emojis/*.png`) rendered inconsistently: edge to edge on user avatars (users table, organization members, group member lists, exposed by the avatar `IconField` from #26652), and with the tighter icon padding on pages that pass `variant="icon"` such as workspace proxies. `Avatar` gains an `emoji` variant with a proportional inset of 20% per side, expressed as `calc(var(--avatar-*) * 0.2)` so it tracks the avatar size tokens. Built-in emoji sources, detected by the shared `isBuiltInEmojiUrl` helper (`site/src/utils/emojis.ts`, which also generates the URLs for `IconField`), always resolve to it, including at call sites that pass `variant="icon"` for data-dependent sources; the override is documented on `AvatarProps`. Non-emoji icon avatars are unchanged. Added `BuiltInEmoji{Lg,Md,Sm}Size` stories. <details> <summary>Investigation notes</summary> - Suspected MUI-removal regression, but the demui Avatar change (#24527) was style-mechanics only (`css` prop to `style`, `CSSObject` to `CSSProperties`). - Insets have always been opt-in via `variant="icon"` (compound variants in `avatarVariants`). Group rows/headers and workspace proxies pass it; user avatar call sites (`UsersTable`, `OrganizationMembersTable`, `GroupMembersPage`, `GroupsPageView` member column) do not. - Emoji user avatars only became reachable with #26652, which reuses the group/template emoji picker that produces `/emojis/<unified>.png` URLs, exposing the missing inset. - The icon variant's padding is proportionally tighter at `md`/`sm` (12.5%) than `lg` (20%), which made default-size emojis look oversized, so emojis get their own size-keyed inset instead of reusing the icon variant. - Fixed in the shared component rather than at each call site so all current and future emoji avatars are consistent. </details> --- 🤖 Generated by Coder Agents on behalf of @tracyjohnsonux --------- Co-authored-by: Jake Howell <jake@hwll.me>