Add docs for Timeline

[AnnMarieW]

Added the docs for the Timeline Component

[AnnMarieW]

@snehilvj I was puzzled about why the interactive demo wasn't working. It appears that the Timeline component is missing the id prop :upside_down_face:

[snehilvj]

🤦‍♂️🤦‍♂️ I need to be better at reviewing PRs. I'll do a release soon.

[snehilvj]

Done

[AnnMarieW]

It would also be nice to update the Timeline PropTypes so it refers to TimelineItem rather than <Timeline.Item />

[AnnMarieW]

When I run this locally I see one error in the console:

Warning: React does not recognize the reverseAction prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase reverseaction instead. If you accidentally passed it from a parent component, remove it from the DOM element.

It's generated from the interactive demo. The gallery example does not create this warning, even if reverseAction is set for the component.

Also, I was trying to recreate the example from the mantine docs but wasn't able to get the link to display in-line without using css or html.Span. Could you provide an example? (Assuming you would like it to look the same)

<Timeline active={1} bulletSize={24} lineWidth={2}>
      <Timeline.Item bullet={<GitBranch size={12} />} title="New branch">
        <Text color="dimmed" size="sm">You&apos;ve created new branch <Text variant="link" component="span" inherit>fix-notifications</Text> from master</Text>
        <Text size="xs" mt={4}>2 hours ago</Text>
      </Timeline.Item>

[snehilvj]

The gallery example does not create this warning, even if reverseAction is set for the component.

It's because the correct name for this prop is reverseActive.

I was trying to recreate the example from the mantine docs but wasn't able to get the link to display in-line without using css or html.Span.

You can just pass everything in the dmc.Text component like this:

dmc.Text(
  [
      "You've created new branch ",
      dmc.Anchor("fix-notification", href="#", size="sm"),
      " from master",
  ],
  color="dimmed",
  size="sm",
)

I have taken care of this now, so you don't have to make any changes for now.