Clarity: Wizard step error state

[jeremydejiacomo]

Select one ... (check one with "x")

[ ] bug
[ ] feature request
[x] enhancement

Description

Enhancement to the wizard component to add an error state to the wizard step states.
Wizard step states:

• Inactive
• Active
• Complete
• Error (new state addition)

Documentation

Wizard step state that displays when an error has occurred once the wizard is saved/submitted/published. This addresses two primary scenarios:

1. Once wizard steps are complete, on save/submit/publish the information is sent to a server/service to be validated and incorrect input(s) need to be reported back to the corresponding step(s).
2. When selections in a later step in the wizard invalidate an entry in earlier steps.

The error state utilizes a color change in the progress indicator, an alert icon, and subtle border between other steps to draw attention to the error status. See below for specs:

Error reported:

Error state active:

[youdz]

I forgot we didn't have this yet. It was on our list of things to do, but never a priority. Thanks for opening the issue.

[ybian02]

Description

Enhancement to the wizard component to add an error state to the wizard step states.
Wizard step states:

• Inactive

• Active

• Complete

• Error(new state addition)

Error Reported

When an error occurs, replace the step number with the error icon to ensure consistency with the stepper design. Change the progress indicator to red and add a one-px gap above and below the red bar for accessibility.

Error State Active

Indicate clearly why the error occurs on the error step.

Error Resolved

The progress indicator changed back to green once all errors are resolved.

[Only1MrAnderson]

Hey,
Any insight into how we could accomplish this while it is still being developed? I see @coryrylan updated the docs but not sure how we can change the page number since it is not exposed in the template...

[mathisscott]

@Only1MrAnderson
The current page of the wizard can be set by using wizard.goTo() or by setting the currentPage property in the navService.

[Only1MrAnderson]

@mathisscott thanks for the reply. I understand that, but how does one modify the UI as it defaults to the number of the page? I am referring to this image here. There is nothing in the documentation about overriding that.

[hippee-lee]

The image with the red icon next to _Very beautiful images_ is the mockup / design that needs to be implemented. I know it looks like the real thing but I believe it is an image from Sketch.

Does using form validation help the wizard user address errors and issues before moving on to the next step? Even though this hasn't yet been implemented yet?
It does sound like this feature is important to the app. Would you be interested in contributing here?

[Only1MrAnderson]

@hippee-lee I agree it is very beautiful. I would be interested in contributing. Let me give contributing.md a quick read 👍

[antonevane]

Is there a timeline for implementation.

[hippee-lee]

This feature is still in the backlog queue.

[jeff-bacon]

Are there any plans to remove this from the official documentation since it's not implemented yet? A little text giving a warning to readers would even suffice. Unfortunately I spent time refactoring some of my code base to implement this feature but when the time came, found out that it was not even a feature in Clarity although it has a fairly large section under the wizard documentation.

[florin-borceanu]

I'm working on this issue, can you assign me please?

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.