-
Notifications
You must be signed in to change notification settings - Fork 71
[LG-5563] feat(Wizard) Adds Wizard #3161
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: at/wizard-integration
Are you sure you want to change the base?
Conversation
🦋 Changeset detectedLatest commit: e1077db The changes in this PR will be included in the next version bump. This PR includes changesets to release 94 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 |
760df87
to
3fedd90
Compare
Size Change: +4.73 kB (+0.3%) Total Size: 1.61 MB
ℹ️ View Unchanged
|
|
||
export const baseStyles = css``; | ||
export const stepStyles = css` | ||
padding: 0 ${spacing[1800]}px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
whoa my first time seeing a spacing[1800]
! 😮
const stepChildren = Children.toArray(children).filter(child => { | ||
if (isValidElement(child)) { | ||
const displayName = (child.type as any)?.displayName; | ||
return displayName && displayName.includes('Step'); | ||
} | ||
|
||
return false; | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- this variable name is kinda funny 😂
- is this goign to get refactored to use
findChildren
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Better than
evilStepMother
😂 - Yeah, once that's in I'll use findChildren
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)
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; ```
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
ccb6f6a
to
f9b446b
Compare
No description provided.