Skip to content

[feat]: Update <pf-v6-avatar> for PatternFly v6 #2979

Open

Description

@bennypowers

Summary

Update `` to implement the PatternFly v6 Avatar component.

User profile image with size variants, border options, and fallback display.

Prior Art

Source Element Status
PFE v4 `` Exists
cem -- --
cockpit -- --
chickadee `` Exists

Requirements

  • MUST implement PFv6 visual designs
  • MUST provide end-user feature parity with `@patternfly/react-core` Avatar
  • MAY adjust element API to leverage web platform strengths
  • SHOULD maintain CSS custom property theming compatibility
  • SHOULD expose useful CSS shadow parts

Element-specific considerations

  • React `size`: `sm`, `md`, `lg`, `xl`, `2xl` - v6 adds 2xl, verify all sizes
  • React `isBordered` boolean - map to `bordered` attribute
  • `alt` attribute required on internal ``; surface as reflected attribute
  • `src` attribute for image URL
  • Consider fallback (e.g. initials or default SVG) when `src` missing or broken

Checklist

Rename

  • Delete `elements/pf-v5-avatar/`
  • Update `elements/package.json` exports
  • Update `eslint.config.js` ignore globs if applicable
  • Update docs `_snippets/` and `framework-integration/` references

Implementation

  • API per `.claude/ADVICE.md`
  • CSS uses v6 tokens, logical properties, nesting
  • `@summary` and JSDoc on element class

Demos

  • Demos match patternfly.org naming/structure
  • CSS custom properties match computed styles from patternfly.org (Chrome MCP)
  • Visual parity verified via Chrome MCP

Tests

  • Public API covered (attributes, properties, events, slots)
  • `a11ySnapshot` assertions

Reviews

  • `/review-api` passes
  • `/review-demos` passes
  • `/review-a11y` passes
  • `eslint` and `stylelint` pass

Ship

  • Add changeset
  • PR targets `staging/pfv6` (NOT `main`)

Activity

  1. self-assigned this
    on May 8, 2026
  2. added a commit that references this issue on Jun 15, 2026
    859da14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

1:1Aligning components with PatternFly v4for devpriority: mediumSeverity level: 2

Type

No type

Projects

No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions