Skip to content

[feat]: Create <pf-v6-dual-list-selector> element #3009

@bennypowers

Description

@bennypowers

Summary

Create a <pf-v6-dual-list-selector> web component implementing the PatternFly v6 Dual list selector component.

Side-by-side lists allowing users to move items between available and chosen sets.

Prior Art

Source Element Status
PFE v4 -- --
cem -- --
cockpit -- --
chickadee <chickadee-dual-list-selector> Exists

Requirements

  • MUST implement PFv6 visual designs
  • MUST provide end-user feature parity with @patternfly/react-core DualListSelector
  • 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

  • Sub-elements: DualListSelectorPane, DualListSelectorList, DualListSelectorListItem, DualListSelectorControlsWrapper, DualListSelectorControl
  • Left pane: available options; right pane: chosen options
  • Filter/search input per pane (searchInputPlaceholder, onFilterUpdate)
  • Move controls: add selected, add all, remove selected, remove all (four buttons)
  • Reorder controls: move up, move down (for chosen pane)
  • Sort option per pane
  • isSearchable prop for filter inputs
  • FACE not needed (no native form value), but value property for current chosen set
  • DualListSelectorListItem: isSelected, onOptionSelect
  • Keyboard: Space to select/deselect items, Enter/click buttons to move; standard list navigation
  • role="listbox" with aria-multiselectable="true" per pane, items role="option" with aria-selected

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