[Timeline] Add alternate reverse position

docs/data/material/components/timeline/AlternateRevertTimeline.js

@@ -0,0 +1,41 @@
+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 AlternateRevertTimeline() {
+  return (
+    <Timeline position="alternate-revert">
+      <TimelineItem>
+        <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>
+        <TimelineSeparator>
+          <TimelineDot />
+        </TimelineSeparator>
+        <TimelineContent>Repeat</TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  );
+}

docs/data/material/components/timeline/AlternateRevertTimeline.tsx

@@ -0,0 +1,41 @@
+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 AlternateRevertTimeline() {
+  return (
+    <Timeline position="alternate-revert">
+      <TimelineItem>
+        <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>
+        <TimelineSeparator>
+          <TimelineDot />
+        </TimelineSeparator>
+        <TimelineContent>Repeat</TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  );
+}

docs/data/material/components/timeline/timeline.md

@@ -34,6 +34,12 @@ The timeline can display the events on alternating sides.
 
 {{"demo": "AlternateTimeline.js"}}
 
+## Reverted Alternating timeline
+
+The timeline can display the events on alternating sides.
+
+{{"demo": "AlternateRevertTimeline.js"}}
+
 ## Color
 
 The `TimelineDot` can appear in different colors from theme palette.

docs/pages/material-ui/api/timeline-content.json

@@ -11,7 +11,13 @@
   },
   "name": "TimelineContent",
   "styles": {
-    "classes": ["root", "positionRight", "positionLeft", "positionAlternate"],
+    "classes": [
+      "root",
+      "positionRight",
+      "positionLeft",
+      "positionAlternate",
+      "positionAlternateRevert"
+    ],
     "globalClasses": {},
     "name": "MuiTimelineContent"
   },

docs/pages/material-ui/api/timeline-item.json

@@ -17,6 +17,7 @@
       "positionLeft",
       "positionRight",
       "positionAlternate",
+      "positionAlternateRevert",
       "missingOppositeContent"
     ],
     "globalClasses": {},

docs/pages/material-ui/api/timeline-opposite-content.json

@@ -11,7 +11,13 @@
   },
   "name": "TimelineOppositeContent",
   "styles": {
-    "classes": ["root", "positionRight", "positionLeft", "positionAlternate"],
+    "classes": [
+      "root",
+      "positionRight",
+      "positionLeft",
+      "positionAlternate",
+      "positionAlternateRevert"
+    ],
     "globalClasses": {},
     "name": "MuiTimelineOppositeContent"
   },

docs/pages/material-ui/api/timeline.json

@@ -6,7 +6,7 @@
     "position": {
       "type": {
         "name": "enum",
-        "description": "'alternate'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right'"
+        "description": "'alternate-revert'<br>&#124;&nbsp;'alternate'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right'"
       },
       "default": "'right'"
     },
@@ -19,7 +19,13 @@
   },
   "name": "Timeline",
   "styles": {
-    "classes": ["root", "positionLeft", "positionRight", "positionAlternate"],
+    "classes": [
+      "root",
+      "positionLeft",
+      "positionRight",
+      "positionAlternate",
+      "positionAlternateRevert"
+    ],
     "globalClasses": {},
     "name": "MuiTimeline"
   },

docs/translations/api-docs/timeline-content/timeline-content-pt.json

@@ -23,6 +23,11 @@
       "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
       "nodeName": "o elemento raiz",
       "conditions": "<code>position=\"alternate\"</code>"
+    },
+    "positionAlternateRevert": {
+      "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
+      "nodeName": "o elemento raiz",
+      "conditions": "<code>position=\"alternate-revert\"</code>"
     }
   }
 }

docs/translations/api-docs/timeline-content/timeline-content-zh.json

@@ -23,6 +23,11 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>position=\"alternate\"</code>"
+    },
+    "positionAlternateRevert": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>position=\"alternate-revert\"</code>"
     }
   }
 }

docs/translations/api-docs/timeline-content/timeline-content.json

@@ -21,6 +21,11 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>position=\"alternate\"</code>"
+    },
+    "positionAlternateRevert": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>position=\"alternate-revert\"</code>"
     }
   }
 }

docs/translations/api-docs/timeline-item/timeline-item-pt.json

@@ -25,6 +25,11 @@
       "nodeName": "o elemento raiz",
       "conditions": "<code>position=\"alternate\"</code>"
     },
+    "positionAlternateRevert": {
+      "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
+      "nodeName": "o elemento raiz",
+      "conditions": "<code>position=\"alternate-revert\"</code>"
+    },
     "missingOppositeContent": {
       "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
       "nodeName": "o elemento raiz",

docs/translations/api-docs/timeline-item/timeline-item-zh.json

@@ -25,6 +25,11 @@
       "nodeName": "the root element",
       "conditions": "<code>position=\"alternate\"</code>"
     },
+    "positionAlternateRevert": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>position=\"alternate-revert\"</code>"
+    },
     "missingOppositeContent": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",

docs/translations/api-docs/timeline-item/timeline-item.json

@@ -23,6 +23,11 @@
       "nodeName": "the root element",
       "conditions": "<code>position=\"alternate\"</code>"
     },
+    "positionAlternateRevert": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>position=\"alternate-revert\"</code>"
+    },
     "missingOppositeContent": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",

docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content-pt.json

@@ -23,6 +23,11 @@
       "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
       "nodeName": "o elemento raiz",
       "conditions": "<code>position=\"alternate\"</code>"
+    },
+    "positionAlternateRevert": {
+      "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
+      "nodeName": "o elemento raiz",
+      "conditions": "<code>position=\"alternate-revert\"</code>"
     }
   }
 }

docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content-zh.json

@@ -23,6 +23,11 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>position=\"alternate\"</code>"
+    },
+    "positionAlternateRevert": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>position=\"alternate-revert\"</code>"
     }
   }
 }

docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content.json

@@ -21,6 +21,11 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>position=\"alternate\"</code>"
+    },
+    "positionAlternateRevert": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>position=\"alternate-revert\"</code>"
     }
   }
 }

docs/translations/api-docs/timeline/timeline-pt.json

@@ -25,6 +25,11 @@
       "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
       "nodeName": "o elemento raiz",
       "conditions": "<code>position=\"alternate\"</code>"
+    },
+    "positionAlternateRevert": {
+      "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.",
+      "nodeName": "o elemento raiz",
+      "conditions": "<code>position=\"alternate-revert\"</code>"
     }
   }
 }

docs/translations/api-docs/timeline/timeline-zh.json

@@ -25,6 +25,11 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>position=\"alternate\"</code>"
+    },
+    "positionAlternateRevert": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>position=\"alternate-revert\"</code>"
     }
   }
 }

docs/translations/api-docs/timeline/timeline.json

@@ -23,6 +23,11 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>position=\"alternate\"</code>"
+    },
+    "positionAlternateRevert": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>position=\"alternate-revert\"</code>"
     }
   }
 }

packages/mui-lab/src/Timeline/Timeline.tsx

@@ -17,7 +17,7 @@ export interface TimelineProps extends StandardProps<React.HTMLAttributes<HTMLUL
    * The position where the TimelineContent should appear relative to the time axis.
    * @default 'right'
    */
-  position?: 'left' | 'right' | 'alternate';
+  position?: 'left' | 'right' | 'alternate' | 'alternate-revert';
   /**
    * The content of the component.
    */
@@ -34,6 +34,8 @@ export interface TimelineProps extends StandardProps<React.HTMLAttributes<HTMLUL
     positionRight?: string;
     /** Styles applied to the root element if `position="alternate"`. */
     positionAlternate?: string;
+    /** Styles applied to the root element if `position="alternate-revert"`. */
+    positionAlternateRevert?: string;
   };
 
   /**
@@ -128,7 +130,7 @@ Timeline.propTypes /* remove-proptypes */ = {
    * The position where the TimelineContent should appear relative to the time axis.
    * @default 'right'
    */
-  position: PropTypes.oneOf(['alternate', 'left', 'right']),
+  position: PropTypes.oneOf(['alternate-revert', 'alternate', 'left', 'right']),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

packages/mui-lab/src/Timeline/timelineClasses.ts

@@ -10,6 +10,7 @@ const timelineClasses = generateUtilityClasses('MuiTimeline', [
   'positionLeft',
   'positionRight',
   'positionAlternate',
+  'positionAlternateRevert',
 ]);
 
 export default timelineClasses;

packages/mui-lab/src/TimelineContent/timelineContentClasses.ts

@@ -10,6 +10,8 @@ export interface TimelineContentClasses {
   positionLeft: string;
   /** Styles applied to the root element if `position="alternate"`. */
   positionAlternate: string;
+  /** Styles applied to the root element if `position="alternate-revert"`. */
+  positionAlternateRevert: string;
 }
 
 export type TimelineContentClassKey = keyof TimelineContentClasses;
@@ -20,7 +22,7 @@ export function getTimelineContentUtilityClass(slot: string): string {
 
 const timelineContentClasses: TimelineContentClasses = generateUtilityClasses(
   'MuiTimelineContent',
-  ['root', 'positionLeft', 'positionRight', 'positionAlternate'],
+  ['root', 'positionLeft', 'positionRight', 'positionAlternate', 'positionAlternateRevert'],
 );
 
 export default timelineContentClasses;

packages/mui-lab/src/TimelineItem/TimelineItem.js

@@ -50,6 +50,17 @@ const TimelineItemRoot = styled('li', {
       },
     },
   }),
+  ...(ownerState.position === 'alternate-revert' && {
+    '&:nth-of-type(odd)': {
+      flexDirection: 'row-reverse',
+      [`& .${timelineContentClasses.root}`]: {
+        textAlign: 'right',
+      },
+      [`& .${timelineOppositeContentClasses.root}`]: {
+        textAlign: 'left',
+      },
+    },
+  }),
   ...(!ownerState.hasOppositeContent && {
     '&:before': {
       content: '""',

packages/mui-lab/src/TimelineItem/timelineItemClasses.ts

@@ -10,6 +10,8 @@ export interface TimelineItemClasses {
   positionRight: string;
   /** Styles applied to the root element if `position="alternate"`. */
   positionAlternate: string;
+  /** Styles applied to the root element if `position="alternate-revert"`. */
+  positionAlternateRevert: string;
   /** Styles applied to the root element if TimelineOppositeContent isn't provided. */
   missingOppositeContent: string;
 }
@@ -25,6 +27,7 @@ const timelineItemClasses: TimelineItemClasses = generateUtilityClasses('MuiTime
   'positionLeft',
   'positionRight',
   'positionAlternate',
+  'positionAlternateRevert',
   'missingOppositeContent',
 ]);