Timeline RFC

[PixeledCode]

Hello,

Paste is adding a Timeline component and we would like to have your opinion.

A Timeline component is used to visual represent events in a chronological order. Designs are not finalised but it will look something like this:

Spec

Please give the Timeline spec a read and leave any questions or feedback as comments

Design

Take a look at the Timeline design explorations Figma and leave any design-related questions or feedback as comments

CodeSandbox

Take a look at the Timeline API explorations CodeSandbox and leave any feedback as comments here in the discussion.

Open questions

1. Do you have any opinion on the naming of the components that you see in the CodeSandbox?
2. Is there anything that we have completely missed based on your product usage?

Currently we are experimenting with 2 variants of API, one uses separator prop to add a line between the icons of each item. Other version handles it on it's own. With the prop method, a consumer of the component has more flexibility but also a responsibility to add the prop to make sure the it looks like a Timeline component.
In option 2, timeline component will handle the addition of the separator by itself, this is a more restrictive approach but also means that consumer do not have to worry about missing out on adding the prop. Which approach looks better to you?

[krisantrobus]

First off, wow this is really great. I very much admire how organized this sandbox is and how clean your components are!

My preference is to go with the CSS option and introduce the new attribute tagging in CSS. The only other option would be to target via the data-paste-element name but with customization that would completely break. Although maybe customization wouldn't override, we'd have to test.

I would keep the same naming as you have and only expose the Timeline, TimelineItem, TimelineCollapsibleItem. Biggest improvement I can see would be to add a variant onto the TimelineItem which would be 'default'|'grouped' to handle the grouped items. The only change I really see there is adding a margin so could be done via style variants

I like how you are handling the variant styles for horizontal and vertical in the Timeline component. Can we do it as a record though so we can have it similar to our existing ones here

For load more I remember we discussed the option to open a side modal to have infinite scrolling. I know we have that functionality here but it would be good to get clarification when building the stage 1 storybooks.

One question mainly for design is, do we want to make the date heading composable? This way they can update the text styling, bold, light color etc.

For accessibility do we want to tab into the component and then be able to use a keyboard to navigate items? I feel like with this being potentially very long it might be good to focus on individual items.

A few praises just form engineering side:

• Love the use of contexts, fits with our way of working
• I like the use of ul/li for the element types.

Here are a few nits which I know this is just an exploration but things to resolve during stage 1:

• I see a gap in the separators
• alignment of icons not centered between separators
• I would also try and check the orientation inside the collapsable item to make sure it isn't used in horizontal and throw an error like you are doing in TimelineCSS
• I don't think we will need to do the 'as' check for the as for focus and hover stylings

[PixeledCode]

Thanks a lot @krisantrobus for the detailed review. Those are good questions that will need further discussions. Also thanks for pointing out the nits, I will work on them

[roxanagomez]

Hii @krisantrobus thank you for your review and questions.

For accessibility do we want to tab into the component and then be able to use a keyboard to navigate items? I feel like with this being potentially very long it might be good to focus on individual items.

Do you mean tab and selects the timeline dot or the titles? I was thinking for the content to be navigational but not the timeline dot, since is not an interactive element.

One question mainly for design is, do we want to make the date heading composable? This way they can update the text styling, bold, light color etc.

I'm considering not having it composable, since thetimeline dotneeds to be clearly aligned to the header, if we have that flexibility we risk the relationship between dot <> header not being so clear and also the visual design of it, since in order to make it work we might need to have multiple timeline dot sizes to fit different sizes styles.

Let me know your thoughts about this

[krisantrobus]

I'm happy to move forward with date and dot not being composable. It will make for a better API too.

Do you mean tab and selects the timeline dot or the titles? I was thinking for the content to be navigational but not the timeline dot, since is not an interactive element.

I was thinking of accessible users to tab to select the whole timeline component as one element and use they arrow keys to navigate sections. Probably the items should be to navigate the to the headings? Then for collapsed it could focus on the interactive element to open/close.

Or is that just overkill and we should only allow users to focus when there is a collapsible timeline item? Just trying to think of the best way for screen reader users to consume potentially large text contents.

[roxanagomez]

I was thinking of accessible users to tab to select the whole timeline component as one element and use they arrow keys to navigate sections.

Yess! this makes sense to me. I'm not sure if each element should be focusable but definitely something that allows the user navigate from event to event using the arrows and tabs as well as opening closing the collapsible content.

[nkrantz]

Really liking where the API is headed, nice thorough exploration in the CodeSandbox. Most of the work for the entire component is done!

+1 to @krisantrobus's comment about using list elements under the hood, but we might want to consider using <ol> instead of <ul> for the Timeline, since the order of items in a Timeline component does tend to be pretty relevant and, well, ordered.

Another +1 to the question of whether the date (or TimelineItem title) should be composable. I'm actually leaning towards yes here, for a few reasons. I think styling could be a need down the line, like Kris mentioned, and I also could see consumers needing to add an icon to the date title. Additionally I could see a future where we want to expose as on the date/title, say to make them headings for example, and we'd be limited by this existing as a prop on TimelineItem. This would make the new API:

<Timeline>
  <TimelineItem>
    <TimelineItemTitle>August 21</TimelineItemTitle>
    <TimelineItemText>In progress</TimelineItemText>
  </TimelineItem>
</Timeline>

Really like Kris's <TimelineItem grouped> suggestion. Let's go all the way with a <TimelineItem collapsible> prop too.

Between the two options you've laid out, I also prefer the css option which uses the data attribute over using a selector prop, but I also thought of another potential option using the :after pseudo element which is a little more common among our existing components. On the styled Timeline container, you can add the following css (or something like it):

// select the dot, or the first div child of each li

"li>div:first-child:after": {
        content: "''",
        backgroundColor: "gray",
        width: "2px",
        height: "30px",
},


// select the last dot, or the first div child of the last child of the ul

"&>:last-child>div:first-child:after": {
        content: "none",
},

[roxanagomez]

Another +1 to the question of whether the date (or TimelineItem title) should be composable. I'm actually leaning towards yes here, for a few reasons. I think styling could be a need down the line, like Kris mentioned, and I also could see consumers needing to add an icon to the date title.

In terms of styling, I recommend keeping the date non-composable to preserve the visual hierarchy and ensure scan-ability, so users can quickly identify the dates (since they'll have the same style in all timeline entrances)

Regarding the addition of icons, were you thinking of a decorative icon like a calendar or a more functional one like a Status indicator or even a Badge?

[nkrantz]

That makes sense, I can see the argument to make it non-composable. I was thinking any of the above but if the subheading is composable, they could always put the Badge there