Stepper Styling (material) differs from Angular Stepper (and Figma) - Potential issue

[andiesm813]

Description

If you see the current Stepper Sample in Storybook, when you advance on the steps, the previous ones don't get the "completed" style, like the Angular sample has (and also the Figma UI kit version too).

I'm saying this is a potential issue because maybe the "completed" style is already implemented, but the sample is not 100% functional and the steps never change their look to the completed style.

Expected Result

1. Steps 1 and 2, who are supposed to be completed (if step 3 is the active one) should change their color to that dark gray and white foreground.
2. The progress line also turns darker.
3. The steps ahead (not completed) also have like a "disabled" style.

[ddaribo]

Hi @andiesm813,

The completed property of the IgxStepComponent and the corresponding complete of the IgcStepComponent are intended to be controlled by the developer.

The Angular demo from the screenshot has its steps’ completed property bound to custom conditions in the template, for instance: <igx-step #step2 [isValid]="businessInformationForm.form.valid" [completed]="businessInformationForm.form.valid">

The IgcStepper storybook does not contain such logic. It can be added, for example setting the complete property of the previously active step to true on user interaction when the igcActiveStepChanging event is emitted: <igc-stepper .. @igcActiveStepChanging=${handleActiveStepChanging} >

  const handleActiveStepChanging = (ev: CustomEvent<any>) => {
    const oldActiveStepIndex = ev.detail.oldIndex;
    const stepper = document.getElementById('stepper') as IgcStepperComponent;
    stepper.steps[oldActiveStepIndex].complete = true;
  }

In this line of thought, it appears the Web Components Stepper Example does not mark the steps as completed and in that sense differs from the Angular demo. Maybe that should be addressed for the sample, @teodosiah?

[teodosiah]

Sure, @ddaribo, can you please log it into the Web Components samples repo?

[ddaribo]

Logged.