search

adeo / mozaic-design-system

Mozaic Design System
https://mozaic.adeo.cloud
Apache License 2.0
68 stars 17 forks source link

bug(stepper): With compact stepper the progress bar does not always reflect current step status #1516

Closed Julien-Hery closed 3 weeks ago

Julien-Hery commented 7 months ago

I am opening an issue for

Component

Package version

@mozaic-ds/styles@1.67.0

Description

The Stepper component has a "compact" mode. The compact mode displays a text with the step number and the step name, along with a progress bar that should reflect the current step.

Right now, if we have 4 steps everything works correctly for step 2 and 3. For step 1 the progress bar is empty. For step 4 the progress bar is working but the is no grey background (not really important as the progress bar should be completely filled). See screenshots below :

Progress bar is empty at step 1 : Capture d’écran 2023-11-30 à 16 03 46

GitHub repository

No response

Mock-up(s)

No response

What happened?

No response

What is expected?

With 4 steps I expect the progress bar to be 1/4 filled at step 1, 2/4 filled at step 2, 3/4 filled at step 4 and 4/4 filled at step 4. See expected results in the screenshot Capture d’écran 2023-11-30 à 16 09 32

To Reproduce

  1. Use the component with provided code example
  2. See the empty progress bar no matter the --steps and --curent value on the first element

Code example

<div class="example">
    <nav class="mc-stepper mc-stepper--compact" aria-label="Stepper description">
      <ol class="mc-stepper__list">
        <li class="mc-stepper__item mc-stepper__item--current" style="--steps: 4; --current: 1;"
            aria-current="step">
          <div class="mc-stepper__detail">
            <span class="mc-stepper__title">Step 1 / 4</span>
            <span class="mc-stepper__label">Shopping cart</span>
          </div>
        </li>
        <li class="mc-stepper__item">
          <div class="mc-stepper__detail">
            <span class="mc-stepper__title">Step 2 / 4</span>
            <span class="mc-stepper__label">Login</span>
          </div>
        </li>
        <li class="mc-stepper__item">
          <div class="mc-stepper__detail">
            <span class="mc-stepper__title">Step 3 / 4</span>
            <span class="mc-stepper__label">Shipping</span>
          </div>
        </li>
        <li class="mc-stepper__item">
          <div class="mc-stepper__detail">
            <span class="mc-stepper__title">Step 4 / 4</span>
            <span class="mc-stepper__label">Payment</span>
          </div>
        </li>
      </ol>
    </nav>
  </div>

Is this a regression?

Additional comments

No response

tiloyi commented 3 weeks ago

Fixed by https://github.com/adeo/mozaic-design-system/pull/1582 & https://github.com/adeo/mozaic-design-system/pull/1583