[LG-5562] integ(wizard): Creates Wizard package #3152
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 3d50845 The changes in this PR will be included in the next version bump. This PR includes changesets to release 92 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
|
Size Change: +63 B (0%) Total Size: 1.6 MB
ℹ️ View Unchanged
|
TheSonOfThomp
changed the title
TheSonOfThomp
changed the title
* initial Wizard component
* Creates basic Wizard.tsx component
Prompt:
In the newly created package, create the Wizard component.
Note: these docs mention `Wizard.Step` and `Wizard.Footer`. DO NOT create these yet. They will be created later
The `@leafygreen-ui/wizard` is a general-purpose, multi-step page template, designed to create guided in-app flows and wizards:
Based on the MultiStepWizard component in MMS, and intended to be used in the Product Deletion template.
Feature Overview:
- Takes in all Steps in the flow as children.
- Renders the appropriate content for the current step
- Internally handles step changing (with optional external control)
Non-goals:
- We will not be implementing this across MMS (MultiStepWizard is currently used in 26 files)
- This will not support different url routes per step
Wizard component
The root flow component. Controls the rendering of the appropriate step based on a controlled prop, or uncontrolled internal state.
Example
```tsx
const [activeStep, setActiveStep] = useState(0)
<Wizard activeStep={activeStep}>
<Wizard.Step
title="Step 1"
description={<>Some description with a <Link>link</Link></>}
>
Some Content. Lorem ipsum dolor.
</Wizard.Step>
<Wizard.Step />
<Wizard.Step />
<Wizard.Footer
backButtonProps={{ onClick: setActiveStep(x--) }}
cancelButtonProps={{}}
primaryButtonProps={{ onClick: setActiveStep(x++), variant: 'danger', disabled }}
/>
</Wizard>
```
Props:
```ts
activeStep?: number;
onStepChange?: (step: number) => void
showStepper?: boolean; // omit for v1
```
State:
`[activeStep, setActiveStep] = useState<number> // if none provided as a prop`
Events:
- `onStepChange` : fired when the activeStep changes
- this should still fire when controlled?
Rendering:
- Renders the appropriate Step based on the activeStep prop/state
- Renders the Footer element, with enabled/hidden buttons based on the activeStep
- If activeStep === 0, hides back button
- Injects setActiveStep into Back and Primary buttons (if uncontrolled)
* Creates WizardStep and WizardFooter
Prompt:
The Footer and Step components have been scaffolded.
Create both components with the following spec:
Step:
A single Step in the multi-step flow. Must be rendered within a Wizard.
```ts
title: ReactNode;
description: ReactNode;
children: ReactNode;
```
Footer:
The footer element for the Wizard. A wrapper around LeafyGreen `FormFooter`, but allows us to optionally inject event handlers into the buttons.
```
backButtonProps: ButtonProps;
cancelButtonProps: ButtonProps;
primaryButtonProps: ButtonProps;
```
* footer& step stories
* temp useWizardControlledValue
* fix useWizardControlledValue
* update Footer
* Update package.json
* use typography in Step
* update descendants
* update packages
* the rest of the owl
* update width
* fix nits
* Squashed commit of the following:
commit c826033
Author: Adam Thompson <[email protected]>
Date: Tue Sep 30 15:54:03 2025 -0400
Update isChildWithProperty.spec.tsx
commit 01585d3
Merge: f3570c4 94745fb
Author: Adam Thompson <[email protected]>
Date: Tue Sep 30 13:28:59 2025 -0400
Merge branch 'main' into ac/cc-utils
commit f3570c4
Author: Adam Thompson <[email protected]>
Date: Tue Sep 30 13:28:37 2025 -0400
rm todo
commit becf667
Author: Adam Thompson <[email protected]>
Date: Fri Sep 26 16:50:05 2025 -0400
rm wizard
commit f8463ac
Author: Adam Thompson <[email protected]>
Date: Fri Sep 26 16:50:00 2025 -0400
update index files
commit 5e0d157
Author: Adam Thompson <[email protected]>
Date: Fri Sep 26 16:49:50 2025 -0400
adds 2 level fragment test
commit caf8a93
Author: Adam Thompson <[email protected]>
Date: Fri Sep 26 16:39:09 2025 -0400
Update packages/lib/src/childQueries/findChildren/findChildren.ts
Co-authored-by: Stephen Lee <[email protected]>
commit ee977a1
Author: Adam Thompson <[email protected]>
Date: Fri Sep 26 16:38:18 2025 -0400
Update packages/lib/src/childQueries/findChild/findChild.tsx
Co-authored-by: Stephen Lee <[email protected]>
commit ee32a26
Merge: ac2c485 366e851
Author: Adam Thompson <[email protected]>
Date: Thu Sep 25 15:20:23 2025 -0400
Merge branch 'main' into ac/cc-utils
commit ac2c485
Author: Adam Thompson <[email protected]>
Date: Thu Sep 25 14:03:09 2025 -0400
Create lib-find-children.md
commit 9cd7489
Author: Adam Thompson <[email protected]>
Date: Thu Sep 25 14:00:05 2025 -0400
Update findChildren.ts
commit 90e8208
Author: Adam Thompson <[email protected]>
Date: Thu Sep 25 13:59:35 2025 -0400
Update findChildren.ts
commit d7ae970
Author: Adam Thompson <[email protected]>
Date: Thu Sep 25 13:52:04 2025 -0400
update findChild/children with unwrapRootFragment
commit a64ff9e
Author: Adam Thompson <[email protected]>
Date: Thu Sep 25 13:49:27 2025 -0400
Creates unwrapRootFragment
commit 000f713
Author: Adam Thompson <[email protected]>
Date: Thu Sep 25 13:05:35 2025 -0400
Apply suggestions from code review
`allChildren.length === 1`
Co-authored-by: Copilot <[email protected]>
commit c6d9c9d
Author: Adam Thompson <[email protected]>
Date: Thu Sep 25 13:00:30 2025 -0400
Update index.ts
commit c369957
Author: Adam Thompson <[email protected]>
Date: Thu Sep 25 13:00:12 2025 -0400
mv child queries
commit 5fe4f9d
Author: Adam Thompson <[email protected]>
Date: Thu Sep 25 12:59:35 2025 -0400
update index files
commit c9261c8
Author: Adam Thompson <[email protected]>
Date: Thu Sep 25 12:58:48 2025 -0400
mv componentQueries
commit be05c4d
Author: Adam Thompson <[email protected]>
Date: Thu Sep 25 12:55:19 2025 -0400
Update findChildren.spec.tsx
commit f493f6d
Author: Adam Thompson <[email protected]>
Date: Thu Sep 25 12:46:47 2025 -0400
update findChild tests
commit 74f5f7e
Author: Adam Thompson <[email protected]>
Date: Thu Sep 25 12:46:28 2025 -0400
Fix isChildWithProperty tests
commit 5439034
Author: Adam Thompson <[email protected]>
Date: Wed Sep 24 19:05:18 2025 -0400
findChildren
commit aa89584
Author: Adam Thompson <[email protected]>
Date: Wed Sep 24 19:05:10 2025 -0400
Update findChild.tsx
commit dda7ad5
Author: Adam Thompson <[email protected]>
Date: Wed Sep 24 19:05:01 2025 -0400
isChildWithProperty
commit ae3a41b
Author: Adam Thompson <[email protected]>
Date: Wed Sep 24 17:02:37 2025 -0400
mv existing utils
* adds findChildren
* adds TextNode
* Update Wizard.spec.tsx
* minor fixes
* spread rest
* adds wizard context assertions
* fix exports
* fix exports
* Update TextNode.tsx
* creates compound component
* lint
* update CompoundSubComponent api
* update packages
* add WizardProvider
* update stories
* Wizard
* update findChild/ren
* spread className
* add "exceeded steps" warning
* adds warning tests
…omponents` (#3200) * install cc * use CC in wiz * useControlled * rm isControlled check * lint
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
LG-5562
Introduces a new wizard package to the LeafyGreen.