patternfly / patternfly/patternfly-react
Wizard - Support for Custom Component Integration
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 862
- Forks
- 392
- Avg merge
- 4d 8h
- Merged PRs (30d)
- 9
Description
Is this a new component or an extension of an existing one?
Existing; Wizard.
Describe the feature
The Wizard component currently offers limited customization for its step navigation as Wizard only accepts children of type WizardStep.
This prevents adoption of the Drawer component when teams require common alternative navigation patterns or need to integrate other components within the layout.
Developers must create custom component implementations with manual CSS height adjustments when they need variations like horizontal progress steppers or other components the navigation area (like the FilterSidePanel from react-catalog-view).
This is an RFE to enhance the Wizard component to support custom components in the left nav and header - for example, a progress stepper layout (both vertical and horizontal variants) in place of the step navigation, while maintaining the same wizard layout and functionality.
Are there visuals for this feature? If applicable, please include examples for each state and for varying widths
Note that, since Kubeflow Notebooks 2.0 does not use the PF Wizard here due to their custom use case, the drawer panel does not take the full height of the page container and requires a CSS override to resolve.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the existing Wizard API and the linked Progress Stepper examples, focusing on the current WizardStep-only navigation model. Define how custom content in the left navigation and header should preserve Wizard layout and functionality, then verify vertical and horizontal navigation and the full-height behavior shown in the supplied visuals.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100