canonical / canonical/vanilla-framework
[New component]: Timeline
- Dominant language
- HTML
- Stars
- 983
- Forks
- 216
- Avg merge
- 3d 13h
- Merged PRs (30d)
- 3
Description
## Visual

## 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
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