[LG-5566] tests(Wizard) Implement TestUtils & LGIDs for Wizard
#3338
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
private endpoints useFetchRequiredActionTableData renam ReqAct cards composable basic table stream processing card federated db card applications card clusters card wizard step context Delete requiredActionsConfig.tsx re-enable wizard add useRequiredActionAcknowledgements mv required action. add skeleton Update ModelApiKeysCard.tsx
Update package.json
TheSonOfThomp
requested review from
shaneeza and
stephl3
and removed request for
a team
🦋 Changeset detectedLatest commit: 1c32c53 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 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 |
TheSonOfThomp
force-pushed
the
LG-5566-wizard-test-utils-lgids
branch
from
65cafe9 to
806886c
Compare
TheSonOfThomp
force-pushed
the
LG-5566-wizard-test-utils-lgids
branch
from
806886c to
e0707ff
Compare
Contributor
|
Size Change: +985 B (+0.05%) Total Size: 1.8 MB
ℹ️ View Unchanged
|
commit 982ef72 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:52:15 2025 -0500 Update WizardStep.spec.tsx
commit 4b32ed6 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 17:49:16 2025 -0500 fixes stories commit 982ef72 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:52:15 2025 -0500 Update WizardStep.spec.tsx
adamrasheed
approved these changes
Nov 25, 2025
shaneeza
reviewed
Nov 26, 2025
shaneeza
reviewed
Nov 26, 2025
| const { findFooter } = getTestUtils(); | ||
| const footer = await findFooter(); | ||
| expect(footer).toBeInTheDocument(); | ||
| expect(footer).toHaveTextContent('Submit'); |
Collaborator
There was a problem hiding this comment.
nit: Just curious, but in the getFooter spec, you also check the tag name and data-testid, but you don't do the same here. Why is that?
Collaborator
Author
There was a problem hiding this comment.
I think I just forgot to copy that part over
Collaborator
Author
There was a problem hiding this comment.
Also looking at it again, it's not really necessary to assert again
shaneeza
reviewed
Nov 26, 2025
shaneeza
reviewed
Nov 26, 2025
shaneeza
reviewed
Nov 26, 2025
| * @returns the primary button element using the `data-testid` data attribute. | ||
| * Will throw if no elements match or if more than one match is found. | ||
| */ | ||
| const getPrimaryButton = () => |
Collaborator
There was a problem hiding this comment.
nit: I'm only realizing this now, but we could utilize the test utils from Button. The benefit of the button utils is that they include find, get, query, and isDisabled. We do this in a few components, like Code and ContentDrawer. I think ideally, we would export these utils from FormFooter but FormFooter doesn't have test utils at the moment.
Collaborator
There was a problem hiding this comment.
Considering this further, all of these test utils seem to belong in FormFooter, and then you would only need to re-export them into this file. This isn't blocking, but just a thought.
Collaborator
Author
There was a problem hiding this comment.
I agree that we should probably have FormFooter test utils, but that will be a bit more work than is necessary here (it gets complicated since we support both Button and SplitButton in the FF)
Co-authored-by: Shaneeza <[email protected]>
Base automatically changed from
LG-5562-wizard-updates
to
at/wizard-integration
November 26, 2025 18:49
Contributor
|
Coverage after merging LG-5566-wizard-test-utils-lgids into at/wizard-integration will be
Coverage Report
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TheSonOfThomp
added a commit
that referenced
this pull request
Nov 26, 2025
commit 8a1373e Author: Adam Thompson <[email protected]> Date: Wed Nov 26 15:59:13 2025 -0500 [LG-5566] tests(Wizard) Implement TestUtils & LGIDs for `Wizard` (#3338) * rm step wrapper * rm descendants dep * export WizardProvider * delete-wizard-demo private endpoints useFetchRequiredActionTableData renam ReqAct cards composable basic table stream processing card federated db card applications card clusters card wizard step context Delete requiredActionsConfig.tsx re-enable wizard add useRequiredActionAcknowledgements mv required action. add skeleton Update ModelApiKeysCard.tsx * Update pnpm Update package.json * fix wizard changes * Adds `requiresAcknowledgement` prop to Wizard.Step * Implements `isAcknowledged` state inside provider * Update Wizard.stories.tsx * rm delete demo * Update wizard.md * rm temp changesets * Update README.md * Update WizardStep.spec.tsx * footer tests * Update Wizard.spec.tsx * update package json * update provider props * revert toast changes? * Update .npmrc * Update pnpm-lock.yaml * Update WizardStep.spec.tsx * exports form footer types * Update WizardFooter.types.ts * adds `totalSteps` to wizard context * fix bad merge * adds LGIDs * adds test utils * lint * fix bad merge * removes Step test utils * add layout comments * form-footer lgids * updates wizard testids * updates readme * updates tsdoc * fixes tests * fixes ack reset test * Squashed commit of the following: commit 4fd3668 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:18:59 2025 -0500 fixes ack reset test commit 4f024b1 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:11:35 2025 -0500 fixes tests commit f919ecc Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:11:29 2025 -0500 updates tsdoc commit 6842bbb Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:02:43 2025 -0500 updates readme * Update WizardStep.spec.tsx * Update WizardContext.tsx * Update WizardStep.spec.tsx * Squashed commit of the following: commit 982ef72 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:52:15 2025 -0500 Update WizardStep.spec.tsx * fixes stories * Squashed commit of the following: commit 4b32ed6 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 17:49:16 2025 -0500 fixes stories commit 982ef72 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:52:15 2025 -0500 Update WizardStep.spec.tsx * Update WizardStep.stories.tsx * Update packages/wizard/src/testing/getTestUtils.tsx Co-authored-by: Shaneeza <[email protected]> * Update README.md * use Button test utils * use test utils * Update pnpm-lock.yaml --------- Co-authored-by: Shaneeza <[email protected]>
TheSonOfThomp
added a commit
that referenced
this pull request
Nov 26, 2025
* rm step wrapper * rm descendants dep * export WizardProvider * delete-wizard-demo private endpoints useFetchRequiredActionTableData renam ReqAct cards composable basic table stream processing card federated db card applications card clusters card wizard step context Delete requiredActionsConfig.tsx re-enable wizard add useRequiredActionAcknowledgements mv required action. add skeleton Update ModelApiKeysCard.tsx * Update pnpm Update package.json * fix wizard changes * Adds `requiresAcknowledgement` prop to Wizard.Step * Implements `isAcknowledged` state inside provider * Update Wizard.stories.tsx * rm delete demo * Update wizard.md * rm temp changesets * Update README.md * Update WizardStep.spec.tsx * footer tests * Update Wizard.spec.tsx * update package json * update provider props * revert toast changes? * Update .npmrc * Update pnpm-lock.yaml * Update WizardStep.spec.tsx * exports form footer types * Update WizardFooter.types.ts * adds `totalSteps` to wizard context * fix bad merge * adds LGIDs * adds test utils * lint * fix bad merge * removes Step test utils * add layout comments * form-footer lgids * updates wizard testids * updates readme * updates tsdoc * fixes tests * fixes ack reset test * Squashed commit of the following: commit 4fd3668 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:18:59 2025 -0500 fixes ack reset test commit 4f024b1 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:11:35 2025 -0500 fixes tests commit f919ecc Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:11:29 2025 -0500 updates tsdoc commit 6842bbb Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:02:43 2025 -0500 updates readme * Update WizardStep.spec.tsx * Update WizardContext.tsx * Update WizardStep.spec.tsx * Squashed commit of the following: commit 982ef72 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:52:15 2025 -0500 Update WizardStep.spec.tsx * fixes stories * Squashed commit of the following: commit 4b32ed6 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 17:49:16 2025 -0500 fixes stories commit 982ef72 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:52:15 2025 -0500 Update WizardStep.spec.tsx * Update WizardStep.stories.tsx * Update packages/wizard/src/testing/getTestUtils.tsx Co-authored-by: Shaneeza <[email protected]> * Update README.md * use Button test utils * use test utils * Update pnpm-lock.yaml --------- Co-authored-by: Shaneeza <[email protected]>
TheSonOfThomp
added a commit
that referenced
this pull request
Nov 26, 2025
commit 8a1373e Author: Adam Thompson <[email protected]> Date: Wed Nov 26 15:59:13 2025 -0500 [LG-5566] tests(Wizard) Implement TestUtils & LGIDs for `Wizard` (#3338) * rm step wrapper * rm descendants dep * export WizardProvider * delete-wizard-demo private endpoints useFetchRequiredActionTableData renam ReqAct cards composable basic table stream processing card federated db card applications card clusters card wizard step context Delete requiredActionsConfig.tsx re-enable wizard add useRequiredActionAcknowledgements mv required action. add skeleton Update ModelApiKeysCard.tsx * Update pnpm Update package.json * fix wizard changes * Adds `requiresAcknowledgement` prop to Wizard.Step * Implements `isAcknowledged` state inside provider * Update Wizard.stories.tsx * rm delete demo * Update wizard.md * rm temp changesets * Update README.md * Update WizardStep.spec.tsx * footer tests * Update Wizard.spec.tsx * update package json * update provider props * revert toast changes? * Update .npmrc * Update pnpm-lock.yaml * Update WizardStep.spec.tsx * exports form footer types * Update WizardFooter.types.ts * adds `totalSteps` to wizard context * fix bad merge * adds LGIDs * adds test utils * lint * fix bad merge * removes Step test utils * add layout comments * form-footer lgids * updates wizard testids * updates readme * updates tsdoc * fixes tests * fixes ack reset test * Squashed commit of the following: commit 4fd3668 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:18:59 2025 -0500 fixes ack reset test commit 4f024b1 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:11:35 2025 -0500 fixes tests commit f919ecc Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:11:29 2025 -0500 updates tsdoc commit 6842bbb Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:02:43 2025 -0500 updates readme * Update WizardStep.spec.tsx * Update WizardContext.tsx * Update WizardStep.spec.tsx * Squashed commit of the following: commit 982ef72 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:52:15 2025 -0500 Update WizardStep.spec.tsx * fixes stories * Squashed commit of the following: commit 4b32ed6 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 17:49:16 2025 -0500 fixes stories commit 982ef72 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:52:15 2025 -0500 Update WizardStep.spec.tsx * Update WizardStep.stories.tsx * Update packages/wizard/src/testing/getTestUtils.tsx Co-authored-by: Shaneeza <[email protected]> * Update README.md * use Button test utils * use test utils * Update pnpm-lock.yaml --------- Co-authored-by: Shaneeza <[email protected]>
github-merge-queue bot
pushed a commit
that referenced
this pull request
Dec 3, 2025
* scaffolds wizard package * Update pnpm-lock.yaml * scaffold WizardFooter * scaffold wizard step * [LG-5563] feat(Wizard) Adds Wizard (#3161) * 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 * chore(Wizard) Updates wizard utilities to use `hooks` and `compound-components` (#3200) * install cc * use CC in wiz * useControlled * rm isControlled check * lint * init wizard changeset * refactor(WizardFooter): simplify props by extending FormFooterProps * [LG-5562] feat(Wizard) Updates `Wizard` API (#3336) * rm step wrapper * rm descendants dep * export WizardProvider * delete-wizard-demo private endpoints useFetchRequiredActionTableData renam ReqAct cards composable basic table stream processing card federated db card applications card clusters card wizard step context Delete requiredActionsConfig.tsx re-enable wizard add useRequiredActionAcknowledgements mv required action. add skeleton Update ModelApiKeysCard.tsx * Update pnpm Update package.json * fix wizard changes * Adds `requiresAcknowledgement` prop to Wizard.Step * Implements `isAcknowledged` state inside provider * Update Wizard.stories.tsx * rm delete demo * Update wizard.md * rm temp changesets * Update README.md * Update WizardStep.spec.tsx * footer tests * Update Wizard.spec.tsx * update package json * update provider props * revert toast changes? * Update .npmrc * Update pnpm-lock.yaml * Update WizardStep.spec.tsx * exports form footer types * Update WizardFooter.types.ts * adds `totalSteps` to wizard context * fix bad merge * updates readme * updates tsdoc * fixes tests * fixes ack reset test * Update WizardStep.spec.tsx * fixes stories * [LG-5566] tests(Wizard) Implement TestUtils & LGIDs for `Wizard` (#3338) * rm step wrapper * rm descendants dep * export WizardProvider * delete-wizard-demo private endpoints useFetchRequiredActionTableData renam ReqAct cards composable basic table stream processing card federated db card applications card clusters card wizard step context Delete requiredActionsConfig.tsx re-enable wizard add useRequiredActionAcknowledgements mv required action. add skeleton Update ModelApiKeysCard.tsx * Update pnpm Update package.json * fix wizard changes * Adds `requiresAcknowledgement` prop to Wizard.Step * Implements `isAcknowledged` state inside provider * Update Wizard.stories.tsx * rm delete demo * Update wizard.md * rm temp changesets * Update README.md * Update WizardStep.spec.tsx * footer tests * Update Wizard.spec.tsx * update package json * update provider props * revert toast changes? * Update .npmrc * Update pnpm-lock.yaml * Update WizardStep.spec.tsx * exports form footer types * Update WizardFooter.types.ts * adds `totalSteps` to wizard context * fix bad merge * adds LGIDs * adds test utils * lint * fix bad merge * removes Step test utils * add layout comments * form-footer lgids * updates wizard testids * updates readme * updates tsdoc * fixes tests * fixes ack reset test * Squashed commit of the following: commit 4fd3668 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:18:59 2025 -0500 fixes ack reset test commit 4f024b1 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:11:35 2025 -0500 fixes tests commit f919ecc Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:11:29 2025 -0500 updates tsdoc commit 6842bbb Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:02:43 2025 -0500 updates readme * Update WizardStep.spec.tsx * Update WizardContext.tsx * Update WizardStep.spec.tsx * Squashed commit of the following: commit 982ef72 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:52:15 2025 -0500 Update WizardStep.spec.tsx * fixes stories * Squashed commit of the following: commit 4b32ed6 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 17:49:16 2025 -0500 fixes stories commit 982ef72 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:52:15 2025 -0500 Update WizardStep.spec.tsx * Update WizardStep.stories.tsx * Update packages/wizard/src/testing/getTestUtils.tsx Co-authored-by: Shaneeza <[email protected]> * Update README.md * use Button test utils * use test utils * Update pnpm-lock.yaml --------- Co-authored-by: Shaneeza <[email protected]> * Update packages/wizard/src/Wizard/Wizard.tsx Co-authored-by: Copilot <[email protected]> * Update packages/lib/src/childQueries/findChild/findChild.spec.tsx Co-authored-by: Copilot <[email protected]> * Update packages/lib/src/childQueries/findChildren/findChildren.spec.tsx Co-authored-by: Copilot <[email protected]> * Update packages/wizard/src/WizardStep/WizardStep.tsx Co-authored-by: Copilot <[email protected]> * Update getTestUtils.tsx --------- Co-authored-by: Shaneeza <[email protected]> Co-authored-by: Copilot <[email protected]>
adamrasheed
pushed a commit
that referenced
this pull request
Dec 4, 2025
* scaffolds wizard package * Update pnpm-lock.yaml * scaffold WizardFooter * scaffold wizard step * [LG-5563] feat(Wizard) Adds Wizard (#3161) * 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 * chore(Wizard) Updates wizard utilities to use `hooks` and `compound-components` (#3200) * install cc * use CC in wiz * useControlled * rm isControlled check * lint * init wizard changeset * refactor(WizardFooter): simplify props by extending FormFooterProps * [LG-5562] feat(Wizard) Updates `Wizard` API (#3336) * rm step wrapper * rm descendants dep * export WizardProvider * delete-wizard-demo private endpoints useFetchRequiredActionTableData renam ReqAct cards composable basic table stream processing card federated db card applications card clusters card wizard step context Delete requiredActionsConfig.tsx re-enable wizard add useRequiredActionAcknowledgements mv required action. add skeleton Update ModelApiKeysCard.tsx * Update pnpm Update package.json * fix wizard changes * Adds `requiresAcknowledgement` prop to Wizard.Step * Implements `isAcknowledged` state inside provider * Update Wizard.stories.tsx * rm delete demo * Update wizard.md * rm temp changesets * Update README.md * Update WizardStep.spec.tsx * footer tests * Update Wizard.spec.tsx * update package json * update provider props * revert toast changes? * Update .npmrc * Update pnpm-lock.yaml * Update WizardStep.spec.tsx * exports form footer types * Update WizardFooter.types.ts * adds `totalSteps` to wizard context * fix bad merge * updates readme * updates tsdoc * fixes tests * fixes ack reset test * Update WizardStep.spec.tsx * fixes stories * [LG-5566] tests(Wizard) Implement TestUtils & LGIDs for `Wizard` (#3338) * rm step wrapper * rm descendants dep * export WizardProvider * delete-wizard-demo private endpoints useFetchRequiredActionTableData renam ReqAct cards composable basic table stream processing card federated db card applications card clusters card wizard step context Delete requiredActionsConfig.tsx re-enable wizard add useRequiredActionAcknowledgements mv required action. add skeleton Update ModelApiKeysCard.tsx * Update pnpm Update package.json * fix wizard changes * Adds `requiresAcknowledgement` prop to Wizard.Step * Implements `isAcknowledged` state inside provider * Update Wizard.stories.tsx * rm delete demo * Update wizard.md * rm temp changesets * Update README.md * Update WizardStep.spec.tsx * footer tests * Update Wizard.spec.tsx * update package json * update provider props * revert toast changes? * Update .npmrc * Update pnpm-lock.yaml * Update WizardStep.spec.tsx * exports form footer types * Update WizardFooter.types.ts * adds `totalSteps` to wizard context * fix bad merge * adds LGIDs * adds test utils * lint * fix bad merge * removes Step test utils * add layout comments * form-footer lgids * updates wizard testids * updates readme * updates tsdoc * fixes tests * fixes ack reset test * Squashed commit of the following: commit 4fd3668 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:18:59 2025 -0500 fixes ack reset test commit 4f024b1 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:11:35 2025 -0500 fixes tests commit f919ecc Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:11:29 2025 -0500 updates tsdoc commit 6842bbb Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:02:43 2025 -0500 updates readme * Update WizardStep.spec.tsx * Update WizardContext.tsx * Update WizardStep.spec.tsx * Squashed commit of the following: commit 982ef72 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:52:15 2025 -0500 Update WizardStep.spec.tsx * fixes stories * Squashed commit of the following: commit 4b32ed6 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 17:49:16 2025 -0500 fixes stories commit 982ef72 Author: Adam Michael Thompson <[email protected]> Date: Tue Nov 25 13:52:15 2025 -0500 Update WizardStep.spec.tsx * Update WizardStep.stories.tsx * Update packages/wizard/src/testing/getTestUtils.tsx Co-authored-by: Shaneeza <[email protected]> * Update README.md * use Button test utils * use test utils * Update pnpm-lock.yaml --------- Co-authored-by: Shaneeza <[email protected]> * Update packages/wizard/src/Wizard/Wizard.tsx Co-authored-by: Copilot <[email protected]> * Update packages/lib/src/childQueries/findChild/findChild.spec.tsx Co-authored-by: Copilot <[email protected]> * Update packages/lib/src/childQueries/findChildren/findChildren.spec.tsx Co-authored-by: Copilot <[email protected]> * Update packages/wizard/src/WizardStep/WizardStep.tsx Co-authored-by: Copilot <[email protected]> * Update getTestUtils.tsx --------- Co-authored-by: Shaneeza <[email protected]> Co-authored-by: Copilot <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
✍️ Proposed changes
Adds LGIDs and TestUtils for
WizardPart of a PR train:
WizardAPI #3336DeleteWizardtemplate package #3291Integration branch: #3152