Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

[Timeline] Get information of "already completed" steps in the future #3001

Open
klediouron opened this issue Aug 5, 2024 · 1 comment · May be fixed by #3014
Open

[Timeline] Get information of "already completed" steps in the future #3001

klediouron opened this issue Aug 5, 2024 · 1 comment · May be fixed by #3014
Labels
🔖✨ Feature New feature (even a very small one) 🟢 P3 Low priority

Comments

@klediouron
Copy link
Contributor

On the timeline component, it's possible to go back (and forward) to already completed steps.

However, there is no visual indication of which future steps are already completed and successful (they are greyed-out).

We need a 'checked' or 'step-completed' state for future steps to avoid mistakenly thinking that the step is not yet completed (greyed out).

Past steps are correctly indicated as checked.

Current:
image
(Steps 3 & 4 are actually completed thus clickable)

Expected:
image (14)
@klediouron klediouron added the 🔖✨ Feature New feature (even a very small one) label Aug 5, 2024
@klediouron klediouron changed the title [Timeline] Get information of "already completed" steps [Timeline] Get information of "already completed" steps in the future Aug 5, 2024
lmullot added a commit that referenced this issue Aug 7, 2024
@lmullot
feat: add missing checked futur step mod #3001
7f3f684
@lmullot lmullot linked a pull request Aug 7, 2024 that will close this issue
Open
@jeremie-lucca jeremie-lucca added this to the 18.3 milestone Aug 23, 2024
@jeremie-lucca jeremie-lucca modified the milestones: 18.3, 18.4 Oct 24, 2024
@jeremie-lucca jeremie-lucca added the 🟢 P3 Low priority label Oct 30, 2024
@lmullot
Copy link
Contributor

lmullot commented Nov 19, 2024

I have a similar needs that doesn't include that the step is past or futur, I juste want that all "valid" step are checked and others stay as default.

<ol class="timeline mod-number mod-L mod-checkedValidStep">
  @for (step of steps; track step) {
    @let isActiveStep = store.activeStep() === step;
    <li class="timeline-step" [attr.aria-current]="isActiveStep ? 'step' : undefined" [class.is-valid]="step | ptIsValidStep">
        ....
    </li>
  }
</ol>
.timeline {
  &.mod-checkedValidStep {
    // Default state, not selected, not valid
    .timeline-step {
      .timeline-step-title {
        color: var(--palettes-neutral-600);

        &::before {
          background-color: var(--palettes-neutral-200);
          color: var(--palettes-neutral-600);
        }

        .timeline-step-title-icon {
          &::before {
            background-color: transparent;
          }
        }
      }
    }

    // Selected state
    .timeline-step:is([aria-current='step']) {
      .timeline-step-title {
        color: var(--palettes-product-800);

        &::before {
          background-color: var(--palettes-product-800);
          color: var(--colors-white-color);
        }
      }
    }

    // Timeline step separator
    .timeline-step:not([aria-current='step']):not(
        [aria-current='step'] ~ .timeline-step
      ):not(.timeline-stepAddBetweenStep)::after {
      border-color: var(--palettes-200, var(--palettes-product-200));
      border-bottom-style: solid;
    }

    // Valid state
    .timeline-step:not([aria-current='step']) {
      &.is-valid {
        .timeline-step-title {
          color: var(--palettes-product-800);

          &::before {
            background-color: var(--palettes-product-300) !important;
            color: var(--palettes-700, var(--palettes-product-700));
          }

          .timeline-step-title-icon {
            &::before {
              left: 7px !important;
              color: var(--palettes-neutral-700) !important;
              font-weight: bold !important;
            }
          }
        }
      }
    }
  }
}

@jeremie-lucca jeremie-lucca removed this from the 19.1 milestone Dec 19, 2024
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
🔖✨ Feature New feature (even a very small one) 🟢 P3 Low priority
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: add missing checked futur step mod #3001 LuccaSA/lucca-front
3 participants
@klediouron @jeremie-lucca @lmullot