[lab][Timeline] Add directional `TimelineConnector`

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Ideally, the current TimeoutConnector could be made to be directional using props.

This could be via a direction prop, for example: "up" | "down".

It might also make sense to be able to set a direction on the Timeline parent; connectors could then default to whatever the Timeline prop specifies.

Examples 🌈

import * as React from 'react';
import Timeline from '@mui/lab/Timeline';
import TimelineItem from '@mui/lab/TimelineItem';
import TimelineSeparator from '@mui/lab/TimelineSeparator';
import TimelineConnector from '@mui/lab/TimelineConnector';
import TimelineContent from '@mui/lab/TimelineContent';
import TimelineDot from '@mui/lab/TimelineDot';

export default function BasicTimeline() {
  return (
    <Timeline direction="down">. {/**.set `direction` on the whole timeline */}
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Eat</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector direction="up" />  {/**.set `direction` on a specific connector */}
        </TimelineSeparator>
        <TimelineContent>Code</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
        </TimelineSeparator>
        <TimelineContent>Sleep</TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}

Motivation 🔦

The current connector does not indicate the direction. Perhaps it can be achieved with some CSS trickery on the Mui classes, but that is unergonomic at best.

I can think of lots of cases where I'd like to use the Timeline and TimelineConnector to illustrate the history of some resource/process/etc, and having directional connectors makes it much easier to see the direction at a glance.

Without directional connectors, we tend to have to use dates–which require much more effort to grok quickly.

Start by reading the existing Timeline and TimelineConnector components, including the current connector behavior described as TimeoutConnector. Determine how a connector-level direction and an optional Timeline-level default should interact. Done means directional connectors visibly communicate up or down, while individual connector settings can override the parent setting.