Summary
Create `` to implement the PatternFly v6 Toolbar component.
Horizontal bar for actions, filters, and pagination controls, typically placed above a data view.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
`` |
Exists |
| cockpit |
`` |
Exists |
| chickadee |
-- |
-- |
Sub-components
- `` - Individual toolbar item
- `` - Grouped toolbar items
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with `@patternfly/react-core` Toolbar
- 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 `id` - required for filter chip/label group wiring
- React `clearAllFilters` callback - emit `clear-all-filters` event
- React `collapseListedFiltersBreakpoint` - responsive breakpoint for collapsing filters
- React `inset`, `usePageInsets` - spacing tokens
- React `ToolbarContent` - wraps all items; handles filter chip row
- React `ToolbarGroup`: `variant` (`action-group`, `button-group`, `filter-group`, `icon-button-group`, `label-group`)
- React `ToolbarItem`: `variant`, `visibility`, `alignment`, `spacer`
- React `ToolbarFilter` - wraps a filter control; manages active filter chips/labels (v6: Labels, not Chips)
- React `ToolbarToggleGroup` - collapses filter controls behind a toggle at breakpoints
- v6 change: Filter indicators use `` not Chip - no more chip groups in toolbar
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create `` to implement the PatternFly v6 Toolbar component.
Horizontal bar for actions, filters, and pagination controls, typically placed above a data view.
Prior Art
Sub-components
Requirements
Element-specific considerations
Checklist
Implementation
Demos
Tests
Reviews
Ship