Fix StepperCommandDialog blank rendering and add per-step validation indicators#45
Conversation
|
@copilot When on the last page and everything becomes valid, the Ok button should appear. We don't need a cancel button. But an X in the upper right corner for cancelling. So reuse from CommandDialog might not be possible. See what makes sense. |
|
@copilot The props from the PrimeReact Stepper should be available directly on our new component - making it possible to customize it in the same way as the original stepper. |
…tion Co-authored-by: einari <134365+einari@users.noreply.github.com>
|
@copilot Almost there. We do not want the Cancel button and just have X button in the top right corner as Cancel. Then, the next and the ok buttons should always be to the right. Btw: Give me screenshots in this PR when you're done. |
…e Stepper props Co-authored-by: einari <134365+einari@users.noreply.github.com>
Done in b90a10c. The Cancel button has been removed from the footer entirely — cancellation is handled by the X button in the dialog header (
Done in b90a10c. |
|
@copilot Great. It would also be great if we could indicate steps that are invalid automatically - in the step header, either with color or a small exclamation icon (warning / error sign) hanging off the number - to the left bottom or something. This would require to understand what properties are invalid and link them to a step. Again; Storybook stories and snapshot, or it didn't happen |
Co-authored-by: einari <134365+einari@users.noreply.github.com>
Done in 371b56d. Next and Ok are now right-aligned (Previous stays left with a flex spacer between). No Cancel button anywhere in the footer — only the X in the header.
Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
|
@copilot lets make the next button be disabled when a step is invalid. |
|
@copilot Btw: The dialog is absolutely broken now, does not render the stepper or any of the pages |
Co-authored-by: einari <134365+einari@users.noreply.github.com>
…on indicators Co-authored-by: einari <134365+einari@users.noreply.github.com>
- Track visited steps with visitedSteps state (Set<number>) - Inject inline style on PrimeReact number span via passthrough: red for error steps, green for visited+valid steps - Dim inactive steps to 0.5 opacity via [data-p-active='false'] CSS selector - Use passthrough on number span rather than header li to preserve PrimeReact layout, separator lines, and circle shape entirely
Documents the full workflow for building multi-step wizard dialogs using StepperCommandDialog: step definition, validation binding, navigation behavior, label customization, and passthrough API usage.
Add Validation Indicators section describing how step number circles change color (red for errors, green for visited+valid) and how inactive steps are dimmed. Update Key Features list accordingly.
Add explicit pre-save self-check to skill-creator listing common UK->US spelling variants to scan for before finalizing any SKILL.md. Add matching American English bullet to write-documentation writing style rules. Prevents UK English from slipping into skills and documentation.
Added
StepperCommandDialogthat works in a similar way to theCommandDialogbut leverages the PrimeReact Stepper component.