-
Notifications
You must be signed in to change notification settings - Fork 75
[UXE-33] feat(Template) Creates DeleteWizard template package
#3291
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: main
Are you sure you want to change the base?
Conversation
🦋 Changeset detectedLatest commit: 7234f54 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 |
b4510e3 to
baf8aff
Compare
5cf8c9b to
514e64f
Compare
a036a5f to
e792cda
Compare
514e64f to
d8679f9
Compare
def45eb to
3ebf987
Compare
d8679f9 to
cb44c9e
Compare
75e9adb to
baf18eb
Compare
|
Size Change: +53 B (0%) Total Size: 1.82 MB
ℹ️ View Unchanged
|
1ddc91c to
1b9d0d3
Compare
2298793 to
cbb87fe
Compare
e58a3d7 to
31abcc2
Compare
DeletionWizard template package
DeletionWizard template packageDeleteWizard template package
89288ea to
518566d
Compare
940626d to
4e72a37
Compare
* update node * update node in actions yaml * Update release.yml * feat: Add initial publish instructions to package creation * printInitialPublishInstructions * changeset * changeset patch * Update initial publish instructions in README and DEVELOPER.md for clarity and consistency
189443f to
bc1d02b
Compare
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.
Pull request overview
This PR introduces the DeleteWizard template component, a specialized wizard implementation built on top of the existing Wizard component. It provides a structured, opinionated pattern for deletion confirmation flows with multiple steps.
Key Changes
- Creates a new
@leafygreen-ui/delete-wizardpackage with template-specific styling and behavior - Extends the
Wizardcomponent with context management, automatic button configuration, and specialized sub-components - Exports utility functions and test helpers from the
wizardpackage to support the new template
Reviewed changes
Copilot reviewed 24 out of 25 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/wizard/src/index.ts | Exports utility functions and constants needed by DeleteWizard |
| packages/wizard/src/WizardContext/WizardContext.tsx | Makes lgIds optional in WizardProvider props to support DeleteWizard's context extension |
| packages/delete-wizard/tsconfig.json | TypeScript configuration for the new package with workspace references |
| packages/delete-wizard/src/utils/getLgIds.ts | Utility to generate data-lgid attributes for DeleteWizard elements |
| packages/delete-wizard/src/testing/* | Test utilities for querying DeleteWizard elements in tests |
| packages/delete-wizard/src/testUtils/ExampleStepContent.tsx | Reusable example component for Storybook demonstrations |
| packages/delete-wizard/src/index.ts | Main package exports |
| packages/delete-wizard/src/DeleteWizard/* | Core DeleteWizard component implementation and sub-components |
| packages/delete-wizard/src/DeleteWizard.stories.tsx | Storybook stories demonstrating DeleteWizard usage |
| packages/delete-wizard/package.json | Package manifest with dependencies and build configuration |
| packages/delete-wizard/README.md | Package documentation |
| .changeset/delete-wizard.md | Changeset documenting the new feature |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
| import { DeleteWizard } from '.'; | ||
|
|
||
| describe('packages/delete-wizard/getTestUtils', () => { | ||
| test('condition', () => {}); | ||
| }); |
Copilot
AI
Dec 15, 2025
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.
The test file contains only a placeholder test with no assertions. The getTestUtils function should have tests verifying that all returned utility functions (getDeleteWizard, queryDeleteWizard, findDeleteWizard, getHeader, queryHeader, findHeader, getActiveStep, queryActiveStep, findActiveStep) work correctly.
| /> | ||
| <DeleteWizard.Step requiresAcknowledgement> | ||
| <DeleteWizard.StepContent> | ||
| <div>Step 1 contents<div> |
Copilot
AI
Dec 15, 2025
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.
Unclosed div tag. The closing tag should be </div> instead of <div>.
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.
Ditto on closing tags
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.
👍 (just a README, but someone could copy it so I'll fix)
| <div>Step 1 contents<div> | |
| <div>Step 1 contents</div> |
| */ | ||
| export const DeleteWizardHeader = CompoundSubComponent( | ||
| (props: CanvasHeaderProps & LgIdProps) => { | ||
| const { lgIds } = useDeleteWizardContext(); |
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.
In DeleteWizard the header is rendered outside of the DeleteWizardContextProvider. I don't believe the header actually has access to this context.
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.
It'll have access to useDeleteWizardContext, but not useDeleteWizard**Step**Context
| /> | ||
| <DeleteWizard.Step requiresAcknowledgement> | ||
| <DeleteWizard.StepContent> | ||
| <div>Step 1 contents<div> |
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.
Ditto on closing tags
packages/delete-wizard/README.md
Outdated
|
|
||
| ### DeleteWizard.StepContent | ||
|
|
||
| A styled `div` for use inside a `DeleteWizard.Step` to ensure proper page scrolling and footer positioning |
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.
I don't believe DeleteWizard.StepContent is actually an exported component
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.
👍 forgot to update the docs
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.
I forgot where we landed on changeset voice. Did we want this much information in the changeset?
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.
In an initial changeset, I think this is appropriate
|
Coverage after merging at/uxe-33-deletion-wizard into main will be
Coverage Report for Changed Files
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Part of a PR train:
WizardAPI #3336Wizard#3338Integration branch: #3152
'@lg-templates/delete-wizard': minor
Initial release of
DeleteWizard.DeleteWizard
Establishes a context, and only renders the
activeStep(managed internally, or provided with theactiveStepprop). Accepts aDeleteWizard.Headerand any number ofDeleteWizard.Steps as children.DeleteWizardand all sub-components include template styling.DeleteWizard.Header
A convenience wrapper around
CanvasHeaderDeleteWizard.Step
A convenience wrapper around
Wizard.Stepto ensure the correct context.Like the basic
Wizard.Step, ofrequiresAcknowledgementis true, the step must haveisAcknowledgedset in context, (or passed in as a controlled prop) for the Footer's primary button to be enabled. (see the Wizard and DeleteWizard demos in Storybook)DeleteWizard.StepContent
A styled
divfor use inside aDeleteWizard.Stepto ensure proper page scrolling and footer positioningDeleteWizard.Footer
A wrapper around Wizard.Footer with embedded styles for the DeleteWizard template