PDS proposals
← All proposals

Identity Block

Start from the PDS v2 Identity Block and use the Agent Avatar in place of the human Avatar, as Avatar Label does.

Extends a PDS componentOpen in Storybook

proposals/IdentityBlock/HANDOFF.md72 lines · View on GitHub

Handoff: IdentityBlock (agent)

What and why

The PDS v2 IdentityBlock with the Agent Avatar in place of the human Avatar, so the identity components (Agent Avatar, Avatar Label, Identity Block) can change together. Everything else is unchanged, so the port is a diff against src/components/identity/IdentityBlock on v2.x.

  • Figma / Jira: none.
  • Context: context.md

Exploration and decisions

  • avatarProps is Omit<AgentAvatarProps, 'ariaLabel' | 'linkContent' | 'size'>, so label is required. Size is m, or s when isSingleLine.
  • The human avatar is gone, with its image, per-user color and user fallback. For people, use the PDS Identity Block.
  • Class names are unchanged (pds-identity-block), so the package CSS also loads and the local file overrides by class name.
  • Added a Collapsed story, which v2 does not have. Sample content is Zappy with "Pantheon AI" as the secondary line.
  • Story-only controls (avatarIconName, avatarHasHalo, avatarShape, avatarLabel) let a designer switch agents in the controls. They are not component props.

API

Prop Type Default Purpose
avatarProps Omit<AgentAvatarProps, 'ariaLabel' | 'linkContent' | 'size'> none Agent Avatar props. label is required.
className string none Additional class names.
isSidebarCollapsed boolean false Show only the avatar.
isSingleLine boolean false Smaller avatar with only the primary text.
primaryText string none First line (for example the agent's name).
secondaryText string none Second line.

Variants and states: two lines, single line, collapsed.

Tokens used

  • --pds-color-foreground-default
  • --pds-color-foreground-default-secondary
  • --pds-spacing-5xs
  • --pds-spacing-s
  • --pds-typography-ff-default
  • --pds-typography-fw-semibold
  • --pds-typography-lh-xs
  • --pds-typography-size-s
  • --pds-typography-size-xs

Impact

impact.md finds nothing: this proposal adds no classes and changes no existing component. It depends on AgentAvatar.

Reused vs net-new

  • Reused: the v2 IdentityBlock and the package Tooltip; the Agent Avatar proposal.
  • Net-new: nothing of its own. See custom.md.

Accessibility

  • The avatar's label is read by screen readers and says it is an agent.
  • Collapsed shows only the avatar, so the name stays reachable through the tooltip, as in v2.
  • The a11y panel has not been run on these stories. Run it in light and dark before the port.

Decisions and open questions

  • Should the secondary line be an attribution-style prop, as in Avatar Label, or stay free text?

Port notes

  • Edit src/components/identity/IdentityBlock in place: swap Avatar for AgentAvatar. Port AgentAvatar first.
  • Swap the local mergeClasses (from ../_base/Button/utils) for the real one.

Preview

npm run storybook, then Component Proposals/Identity/Identity Block.

Figma: https://www.figma.com/design/AMGWJbraJoi2PKWnxo29Ah/PDS-Proposals?node-id=374-49, page Identity Block (3 stories, light only; captures of Storybook with library icons swapped in, sent 2026-10-20).