Step indicator of completion steps has wrong color after entering

[madoar]

After entering a completion step the corresponding step-indicator in the navigation bar is red instead of dark green:

Correct would be if the step indicator is dark green like for the other steps.

[madoar]

The reason for the issue is that the completion step is assigned the css classes current done completed after entering.

This combination is then displayed with:

angular-archwizard/src/css/wizard-navigation-bar.scss

Lines 163 to 168 in 57900c5

	&.current.done .step-indicator,
	&.current.completed .step-indicator {
	$wz-param-indicator-state: 'default' !global;
	$wz-param-indicator-color: $wz-color-editing !global;
	@content;
	}

[madoar]

A possible quick fix for the issue may be to add an additional constraint to the current css class check. This would change:

angular-archwizard/src/lib/components/wizard-navigation-bar.component.ts

Lines 69 to 71 in 57900c5

	public isCurrent(wizardStep: WizardStep): boolean {
	return wizardStep.selected;
	}

to:

public isCurrent(wizardStep: WizardStep): boolean {
    return wizardStep.selected && !this.wizard.completed;
}

[madoar]

At the moment I do not think that the suggested quick-fix is a good solution, because it reduces the possible expressiveness of the CSS by allowing the removal of the selected css class from the navigation bar, while a wizard step is in fact selected.

Another more sophisticated solution may be to use :not(.completed) to specify the condition when to apply certain css in a more detailed way.

[earshinov]

As far as I understand, the problems stems from the fact that completion steps are marked as completed right after they are navigated to by the user. I think the best course of action would be to adjust the condition when the red $wz-color-editing color is applied. Right now it is applied to any steps which happen to be selected and completed at the same time (which is, of course, true for the completion step in the described scenario). Instead, this red color should be applied to the selected step if it was already completed before the user navigated to it. We are going to need an additional .editing CSS class, and perhaps an additional field in the WizardStep class as well. In the result, we will have the following CSS classes for steps:

.optional - for any optional steps

.navigable - for any steps which user could go to using the navigation bar

.done - for any completed steps

.current - for the selected step

.editing - for the selected step, if the user has already completed it before

.completed - added to all steps when the whole wizard is completed

The .current and .editing classes are not mutually exclusive (namely, .editing can only appear on a .selected step), but it seems fine to me. @madoar , what do you think?

[madoar]

I'm fine with that solution! This will also be more in line with the previous versions of angular-archwizard which also contained an .editing css-class with the same meaning.