Summary
Create a <pf-v6-alert-group> web component implementing the PatternFly v6 Alert group functionality.
Container for stacking and positioning multiple alerts, with toast and inline variants.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
-- |
-- |
| cockpit |
-- |
-- |
| chickadee |
-- |
-- |
Notes
- Blocked on
pf-v6-alert - port that first
- In PFv6, alert group functionality is closely integrated with alert; review React source to determine if a separate element is still warranted
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with
@patternfly/react-core AlertGroup
- 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
isToast: positions group as fixed overlay (top-right by default)
isLiveRegion / hasAnimations: ARIA live region for dynamically added alerts
- When
isLiveRegion: render <div role="list" aria-live="polite" aria-atomic="false">; alerts within are role="listitem"
- Toast group:
position: fixed, z-index above page content, respects prefers-reduced-motion for enter/exit animations
overflowMessage prop: collapses excess alerts into a "Show more" button
- Slotted
<pf-v6-alert> children
- No keyboard trap needed (alerts are non-modal)
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create a
<pf-v6-alert-group>web component implementing the PatternFly v6 Alert group functionality.Container for stacking and positioning multiple alerts, with toast and inline variants.
Prior Art
Notes
pf-v6-alert- port that firstRequirements
@patternfly/react-coreAlertGroupElement-specific considerations
isToast: positions group as fixed overlay (top-right by default)isLiveRegion/hasAnimations: ARIA live region for dynamically added alertsisLiveRegion: render<div role="list" aria-live="polite" aria-atomic="false">; alerts within arerole="listitem"position: fixed,z-indexabove page content, respectsprefers-reduced-motionfor enter/exit animationsoverflowMessageprop: collapses excess alerts into a "Show more" button<pf-v6-alert>childrenChecklist
Implementation
.claude/ADVICE.md@summaryand JSDoc on element classDemos
Tests
a11ySnapshotassertionsReviews
/review-apipasses/review-demospasses/review-a11ypasseseslintandstylelintpassShip
staging/pfv6(NOTmain)