canonical / canonical/vanilla-framework

[New component]: Timeline

Open
#5,485 3 comments 0 reactions 0 assignees View on GitHub
Priority: High Tier: Global WG: Validated
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

## Visual

![Image](https://github.com/user-attachments/assets/a2f413c6-7a3d-41a7-be20-b3810d39ab73)

## Context

The Timeline component visually represents events, milestones, or steps in a sequence, ordered chronologically. This component will present events vertically. The other type of Timeline that presents events horizontally is not considered here.

### Example use case
1. Launchpad uses it to show activities on a Merge Proposal page.
2. Workspace Engineering uses it to show the history of compensation changes of employees.

## UX specifications
Since it can be used to present all kinds of different information, the component needs to allow a certain level of customization.
1. Provide a flexible structure to accommodate basic info, and date time.
2. Provide a "container" to host custom content—as simple as a piece of text and as complex as a full comment thread.
3. Provide layout options where the date and time are placed in different positions.
4. Allow the consumer to choose the default event order when implementing.
5. Consider adding a control for changing the event order.
6. Provide a mechanism to hide/collapse events when the timeline is too long, and provide a control for the user to show/expand it.

## Progressive enhancement
1. Consider setting a max-width to limit character per line for better reading experience.
2. Make sure visual elements wrap properly on mobile devices.

Contributor guide

Open the contributing guide

Research direction

No implementation files, tests, or entry points are named. Start with the visual reference and UX specifications, then confirm how the vertical timeline should support dates, custom content, ordering, collapsing, readable line lengths, and mobile wrapping; it is done when those requirements are defined and implemented consistently.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, sass
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.