proposals/AvatarLabel/decisions.md13 lines · View on GitHub
Decisions
Agent Avatar replaces Avatar everywhere. Imported from ../AgentAvatar/AgentAvatar. The human Avatar (and its image, per-user color and user-fallback options) is no longer reachable from this component; for people, use the PDS Avatar Label.
avatarProps requires label (Agent Avatar's screen-reader text that says it is an agent), because the visible label is the agent's name and does not say it is an agent.
Hover outline in the link state now targets .pds-agent-avatar__content.
Class stays pds-avatar-label (open: rename, e.g. pds-agent-avatar-label, since the published package already ships CSS for pds-avatar-label).
Local mergeClasses stands in for v2's (not exported by the published package).
avatarProps is required (not optional as in PDS) so label is always present.
attribution: who the agent is acting for ("Zappy on behalf of alex@example.com"). One optional ReactNode holding the whole phrase, not separate "on behalf of" and email props, because the connecting words are translatable and word order differs by language; no text is hardcoded in the component. It renders after the label as its own element (avatar, name and attribution are three flex items spaced by the component's gap), regular weight in --pds-color-foreground-default-secondary, same size and baseline as the name. The name never shrinks when there is an attribution; the attribution truncates with an ellipsis first. It sits inside the link when linkContent is used. A plain space is rendered between the name and attribution so screen readers don't read them as one word. Name is a working one; alternatives were onBehalfOf and actingFor. Open: should the email be a separate element so it can be copied or linked?
hasAvatar (default true): false shows only the name and attribution, for the case where the avatar is already shown nearby (for example a chat header over several messages). Positive boolean name, as PDS uses (hasTooltip, hasBorder). The avatar's required label is still rendered as visually-hidden text so screen-reader users still hear that it is an agent, and avatarProps stays required. The visually hidden text is out of flow, so there is no leftover gap before the name.
Attribution is filled in by the screen, from whoever triggered the run. The component knows nothing about users. The engineer builds the whole phrase from a translation string with a placeholder (for example "on behalf of {email}"), binds it to the triggering user (a name if the product has one, otherwise the email), and passes nothing when no one triggered the run (scheduled or autonomous), so only the agent shows. Prefer a plain string over nodes: markup inside a translated phrase needs a translation helper that supports embedded elements.
Truncated attribution keeps its full text in a title when it is a string, so a long email can still be read on hover. Screen readers read the full text regardless. Not added for node attributions.