bullitt/trackbox

Fork 0

Detail: Make progress stepper timeline semantic, not numbered #34

New issue

Closed

opened 2026-06-27 15:41:15 +02:00 by bullitt · 1 comment

bullitt commented

2026-06-27 15:41:15 +02:00

Owner

Problem

In the ProgressStepper component, incomplete steps (not yet reached) show their index number (1, 2, 3, 4, 5) inside the circle. For shipment #4 (In Transit), steps 4 "Out for Delivery" and 5 "Delivered" show "4" and "5" as the circle content. The step labels are hidden on mobile (hidden sm:block). On mobile, steps that haven't been reached show meaningless numbers.

Completed steps correctly show "✓". The current step is highlighted. But future steps showing their ordinal index adds no value and is confusing.

Implementation

File: frontend/src/pages/ShipmentDetail.tsx — ProgressStepper component, around line 40.

Change the circle content from:

{done ? "✓" : i + 1}

To show nothing (just the circle outline) for future steps:

{done ? "✓" : ""}

Or alternatively show a dot for the current/incomplete steps:

{done ? (
  <Check className="h-3 w-3" />
) : current ? (
  <div className="w-2 h-2 rounded-full bg-primary" />
) : null}

The done variable is currentIdx >= i, so the current step also shows "✓". Consider whether the active step should show a dot instead to distinguish "done" vs "in progress".

Acceptance criteria

Future (not-yet-reached) steps show an empty circle, not their index number
Completed steps still show "✓"
Mobile: all steps are identifiable without labels
The current step (currentIdx === i) is visually distinct from both done and future

Brand identity alignment

The shipment timeline is a core Trackbox identity element. It should express normalized lifecycle state with thin lines, small nodes, subdued completed/future states, and a clear active node. Raw ordinal numbers do not convey logistics meaning.

Brand-compliant implementation notes

Use the lifecycle direction: Announced, Accepted, Processing, In transit, Out for delivery, Delivered.
Completed nodes should be subdued but visible; active node uses the semantic status color and label.
Future nodes should be neutral empty circles, not numbers.
On mobile, use tooltips/aria labels or compact labels so the timeline remains understandable without visible text for every step.

Additional acceptance criteria

The current step is visually distinct from completed and future steps.
The timeline does not imply fake certainty for unknown or ambiguous carrier states.
Status meaning is available through text or aria labels, not color alone.

Migrated from GitHub issue #13: https://github.com/bullitt186/trackbox/issues/13
Original author: @bullitt186
Original created: 2026-06-27T13:24:09Z
Original labels: ux

## Problem In the `ProgressStepper` component, incomplete steps (not yet reached) show their index number (1, 2, 3, 4, 5) inside the circle. For shipment #4 (In Transit), steps 4 "Out for Delivery" and 5 "Delivered" show "4" and "5" as the circle content. The step labels are hidden on mobile (`hidden sm:block`). On mobile, steps that haven't been reached show meaningless numbers. Completed steps correctly show "✓". The current step is highlighted. But future steps showing their ordinal index adds no value and is confusing. ## Implementation File: `frontend/src/pages/ShipmentDetail.tsx` — `ProgressStepper` component, around line 40. Change the circle content from: ```tsx {done ? "✓" : i + 1} ``` To show nothing (just the circle outline) for future steps: ```tsx {done ? "✓" : ""} ``` Or alternatively show a dot for the current/incomplete steps: ```tsx {done ? ( <Check className="h-3 w-3" /> ) : current ? ( <div className="w-2 h-2 rounded-full bg-primary" /> ) : null} ``` The `done` variable is `currentIdx >= i`, so the current step also shows "✓". Consider whether the active step should show a dot instead to distinguish "done" vs "in progress". ## Acceptance criteria - Future (not-yet-reached) steps show an empty circle, not their index number - Completed steps still show "✓" - Mobile: all steps are identifiable without labels - The current step (currentIdx === i) is visually distinct from both done and future ## Brand identity alignment The shipment timeline is a core Trackbox identity element. It should express normalized lifecycle state with thin lines, small nodes, subdued completed/future states, and a clear active node. Raw ordinal numbers do not convey logistics meaning. ## Brand-compliant implementation notes - Use the lifecycle direction: Announced, Accepted, Processing, In transit, Out for delivery, Delivered. - Completed nodes should be subdued but visible; active node uses the semantic status color and label. - Future nodes should be neutral empty circles, not numbers. - On mobile, use tooltips/aria labels or compact labels so the timeline remains understandable without visible text for every step. ## Additional acceptance criteria - The current step is visually distinct from completed and future steps. - The timeline does not imply fake certainty for unknown or ambiguous carrier states. - Status meaning is available through text or aria labels, not color alone. --- Migrated from GitHub issue #13: https://github.com/bullitt186/trackbox/issues/13 Original author: @bullitt186 Original created: 2026-06-27T13:24:09Z Original labels: ux

bullitt added the

label

2026-06-27 15:41:15 +02:00

bullitt changed title from ~~Detail: Progress stepper shows raw step index numbers on incomplete steps (mobile regression)~~ to Detail: Make progress stepper timeline semantic, not numbered

2026-06-27 15:46:21 +02:00

bullitt commented

2026-06-27 16:02:47 +02:00

Author

Owner

The ProgressStepper was already correct in the current codebase (commit bd6b0e7 verified): line 41 shows {done ? "✓" : ""} — no ordinal numbers for future steps. The circle renders as an empty outlined node for pending states and a filled checkmark for completed ones. The current active step has a ring highlight for clear distinction. Closing as already resolved.

The ProgressStepper was already correct in the current codebase (commit bd6b0e7 verified): line 41 shows `{done ? "✓" : ""}` — no ordinal numbers for future steps. The circle renders as an empty outlined node for pending states and a filled checkmark for completed ones. The current active step has a ring highlight for clear distinction. Closing as already resolved.

bullitt closed this issue

2026-06-27 16:02:47 +02:00

No labels

arch

harness

security

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

bullitt/trackbox#34

No description provided.

Rows
Columns