Summary
Create a <pf-v6-wizard> web component implementing the PatternFly v6 Wizard component.
Multi-step guided workflow with progress sidebar, navigation, and step validation.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
-- |
-- |
| cockpit |
-- |
-- |
| chickadee |
<chickadee-wizard> |
Exists |
Sub-components
<pf-v6-wizard-step> - Individual step with title and content
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with
@patternfly/react-core Wizard
- 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-components:
WizardHeader, WizardBody, WizardFooter, WizardNav, WizardNavItem, WizardStep, WizardToggle (mobile)
- Step props:
id, name, isDisabled, isVisited, sub-steps (nested WizardNavItem)
onNext, onBack, onClose, onNavItemClick events
isNavItemsExpanded for sub-step nav expand/collapse
- Current step tracked internally;
startIndex for initial step
- Footer: Back / Next / Cancel buttons with per-step override via
WizardFooterWrapper
- Mobile: collapsible nav via
WizardToggle
- Nav landmark:
<nav aria-label="Wizard steps">, current step aria-current="page"
- Consider wrapping in
<dialog> for modal wizard variant (use showModal())
- Step content area:
role="main" or aria-labelledby pointing to step title
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create a
<pf-v6-wizard>web component implementing the PatternFly v6 Wizard component.Multi-step guided workflow with progress sidebar, navigation, and step validation.
Prior Art
<chickadee-wizard>Sub-components
<pf-v6-wizard-step>- Individual step with title and contentRequirements
@patternfly/react-coreWizardElement-specific considerations
WizardHeader,WizardBody,WizardFooter,WizardNav,WizardNavItem,WizardStep,WizardToggle(mobile)id,name,isDisabled,isVisited, sub-steps (nestedWizardNavItem)onNext,onBack,onClose,onNavItemClickeventsisNavItemsExpandedfor sub-step nav expand/collapsestartIndexfor initial stepWizardFooterWrapperWizardToggle<nav aria-label="Wizard steps">, current steparia-current="page"<dialog>for modal wizard variant (useshowModal())role="main"oraria-labelledbypointing to step titleChecklist
Implementation
.claude/ADVICE.md@summaryand JSDoc on element classDemos
Tests
a11ySnapshotassertionsReviews
/review-apipasses/review-demospasses/review-a11ypasseseslintandstylelintpassShip
staging/pfv6(NOTmain)