Skip to content

[feat]: Create <pf-v6-data-list> element #3005

@bennypowers

Description

@bennypowers

Summary

Create `` to implement the PatternFly v6 Data list component.

Flexible data rows for displaying structured content without strict column alignment. Supports selectable, expandable, and draggable items.

Prior Art

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

Sub-components

  • `` - Individual row
  • `` - Row content container
  • `` - Cell group within a row
  • `` - Individual cell
  • `` - Actions for a row
  • `` - Selection checkbox
  • `` - Row controls (expand, drag)
  • `` - Expandable row toggle
  • `` - Expanded row content

Requirements

  • MUST implement PFv6 visual designs
  • MUST provide end-user feature parity with `@patternfly/react-core` DataList
  • 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 `isCompact` - reduced row height; map to `compact` attribute
  • React `onSelectDataListItem` - fires when a row is clicked; emit `select` event
  • React `wrapModifier`: `breakWord`, `nowrap`, `truncate` - text overflow in cells
  • Selectable rows: `DataListCheck` renders a checkbox; manage selection in parent
  • Expandable rows: `DataListToggle` + `DataListExpandableContent`; `isExpanded` on row
  • Draggable: `DataListDragButton`; integrates with `@dnd-kit` or native drag-and-drop
  • `DataListAction` with `isPlainButtonAction` vs dropdown for row actions
  • ARIA: `role="list"` on container, `role="listitem"` on rows; checkbox pattern for selectable

Checklist

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`)

Metadata

Metadata

Assignees

No one assigned

    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