[Timeline] Add support for `align` override on items

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

<Timeline /> component supports 3 different alignments: align: 'alternate' | 'left' | 'right'. While this is enough for most cases, I believe it could be useful to add support for override in each <TimelineItem /> with a align: 'left' | 'right' property or something similar.

Examples 🌈

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

export default function AlternateTimeline() {
  return (
    <Timeline align='alternate'>
      <TimelineItem align="right">
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Eat</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Code</TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>Sleep</TimelineContent>
      </TimelineItem>
      <TimelineItem align='right'>
        <TimelineSeparator>
          <TimelineDot />
        </TimelineSeparator>
        <TimelineContent>Repeat</TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}

Motivation 🔦

It will allow to build an alternating timeline with grouped TimelineItem(s):

I believe that the keyword is “groups”. When you build a long <Timeline /> with multiple <TimelineItem />(s) rich of contents, align='alternate' helps to reduce void space in the page, but could also lead to a disorienting UI because similar components are placed in opposite positions. The best way to solve this problem is to group similar items.

[oliviertassinari]

@simonecervini Oh yeah, I got trapped by this as well working on the previous POC! How about?

diff --git a/docs/src/pages/components/timeline/timeline.md b/docs/src/pages/components/timeline/timeline.md
index 2a2a6c25d4..d76cc91cab 100644
--- a/docs/src/pages/components/timeline/timeline.md
+++ b/docs/src/pages/components/timeline/timeline.md
@@ -19,9 +19,9 @@ A basic timeline showing list of events.

 {{"demo": "pages/components/timeline/BasicTimeline.js"}}

-## Right-aligned timeline
+## Left-positioned timeline

-The timeline can be positioned on the right side of the events.
+The main content of the timeline can be positioned on the left side; relative to the time axis.

 {{"demo": "pages/components/timeline/RightAlignedTimeline.js"}}

diff --git a/packages/material-ui-lab/src/Timeline/Timeline.tsx b/packages/material-ui-lab/src/Timeline/Timeline.tsx
index f64427aa74..f1c599929b 100644
--- a/packages/material-ui-lab/src/Timeline/Timeline.tsx
+++ b/packages/material-ui-lab/src/Timeline/Timeline.tsx
@@ -18,10 +18,10 @@ export type TimelineClassKey = 'root' | 'alignLeft' | 'alignRight' | 'alignAlter

 export interface TimelineProps extends StandardProps<React.HTMLAttributes<HTMLUListElement>> {
   /**
-   * The position where the timeline's content should appear.
-   * @default 'left'
+   * The position where the TimelineContent should appear relative to the time axis.
+   * @default 'right'
    */
-  align?: 'left' | 'right' | 'alternate';
+  position?: 'left' | 'right' | 'alternate';
   /**
    * The content of the component.
    */

cc @mnajdova

[simonecervini]

I think it’s a lot more clear. I’ve created a pull request as a proof of concept with all these changes