Timeline

[robertjmccarthy]

The timeline component is live in the MoJ Design System.

Use this discussion to suggest changes and improvements to this component.

[Whersi]

Ticket number

#288

The details below is pulled from the ticket.

as seen in the screenshot, is it possible to close/end the timeline for the last item? If you add to the timeline in reverse order, it does look weird with the oldest item having no end on the timeline. Or for the option to switch the end of the timeline (hanging line) to the beginning

[Whersi]

Ticket number

#44

The timeline component accepts a datetime object. For example:

datetime: {
  timestamp: "2019-06-14T14:01:00.000Z",
  type: "datetime"
}

Users have to include a type or format for the timestamp. Consider defaulting the type to datetime to that the user doesn't need to specify for each instance of an item.

[ClaireWaterworth]

I work on a caseworking service where there are known needs to include multiple nested events in timeline items (so the user doesn't have to scroll through many items to understand what has been updated on the service, and so that each update a user makes in one session is bundled into one event). I've done some Figma variations of this, which has tested well in our initial testing. We're soon going to explore this in more detail but I wondered if there are plans to explore the pattern with some more variations for each content block/timeline item.

[Whersi]

@ClaireWaterworth The Timeline component is one of the next five components we plan to improve in the design system. As part of our process for improving or building a new component, we conduct a discovery phase. This involves gathering insights through surveys, 1:1 sessions, and information shared on platforms like Slack and GitHub discussions, such as this one. These efforts help us understand how the component is being used across MoJ, enabling us to define the scope of the design more effectively.

For the Timeline component, we will explore variations for each block or timeline item. If you could share any additional variations you’ve designed and keep us updated on your progress, it would be greatly appreciated.