Summary
Create a <pf-v6-tree-view> web component implementing the PatternFly v6 Tree view component.
Hierarchical tree display for nested data, with expandable nodes, checkboxes, and action menus.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
<pf-v6-tree-view> |
Exists |
| cockpit |
<pf-v6-tree-view> |
Exists |
| chickadee |
-- |
-- |
Sub-components
<pf-v6-tree-item> - Individual tree node
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with
@patternfly/react-core TreeView
- 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
- Tree ARIA pattern:
role="tree" on root, role="treeitem" per node, role="group" on child lists
aria-expanded on expandable nodes, aria-selected for selection
- Keyboard: Arrow Up/Down navigate siblings, Arrow Right expands/enters children, Arrow Left collapses/exits, Home/End jump to first/last, Enter/Space select
hasCheckboxes variant: each node has checkbox; aria-checked for tri-state (indeterminate when partial children selected)
hasActions variant: action button per node (e.g., edit, delete)
hasBadges variant: badge on each node showing child count
hasGuides variant: vertical guide lines
isNested for compact nested style
onSelect event with node data; onExpand / onCollapse
activeItems prop for controlled selection
- Search/filter:
onSearch callback or toolbar integration
- Data-driven API:
data prop array vs slotted <pf-v6-tree-item> children - evaluate both approaches
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create a
<pf-v6-tree-view>web component implementing the PatternFly v6 Tree view component.Hierarchical tree display for nested data, with expandable nodes, checkboxes, and action menus.
Prior Art
<pf-v6-tree-view><pf-v6-tree-view>Sub-components
<pf-v6-tree-item>- Individual tree nodeRequirements
@patternfly/react-coreTreeViewElement-specific considerations
role="tree"on root,role="treeitem"per node,role="group"on child listsaria-expandedon expandable nodes,aria-selectedfor selectionhasCheckboxesvariant: each node has checkbox;aria-checkedfor tri-state (indeterminate when partial children selected)hasActionsvariant: action button per node (e.g., edit, delete)hasBadgesvariant: badge on each node showing child counthasGuidesvariant: vertical guide linesisNestedfor compact nested styleonSelectevent with node data;onExpand/onCollapseactiveItemsprop for controlled selectiononSearchcallback or toolbar integrationdataprop array vs slotted<pf-v6-tree-item>children - evaluate both approachesChecklist
Implementation
.claude/ADVICE.md@summaryand JSDoc on element classDemos
Tests
a11ySnapshotassertionsReviews
/review-apipasses/review-demospasses/review-a11ypasseseslintandstylelintpassShip
staging/pfv6(NOTmain)