diff --git a/docs/data/material/components/timeline/AlternateReverseTimeline.js b/docs/data/material/components/timeline/AlternateReverseTimeline.js new file mode 100644 index 00000000000000..365ae472f990df --- /dev/null +++ b/docs/data/material/components/timeline/AlternateReverseTimeline.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 AlternateReverseTimeline() { + return ( + + + + + + + Eat + + + + + + + Code + + + + + + + Sleep + + + + + + Repeat + + + ); +} diff --git a/docs/data/material/components/timeline/AlternateReverseTimeline.tsx b/docs/data/material/components/timeline/AlternateReverseTimeline.tsx new file mode 100644 index 00000000000000..365ae472f990df --- /dev/null +++ b/docs/data/material/components/timeline/AlternateReverseTimeline.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 AlternateReverseTimeline() { + return ( + + + + + + + Eat + + + + + + + Code + + + + + + + Sleep + + + + + + Repeat + + + ); +} diff --git a/docs/data/material/components/timeline/timeline.md b/docs/data/material/components/timeline/timeline.md index d4c45eef716c6e..4f5dc67b8d0be5 100644 --- a/docs/data/material/components/timeline/timeline.md +++ b/docs/data/material/components/timeline/timeline.md @@ -34,6 +34,12 @@ The timeline can display the events on alternating sides. {{"demo": "AlternateTimeline.js"}} +## Reverse Alternating timeline + +The timeline can display the events on alternating sides in reverse order. + +{{"demo": "AlternateReverseTimeline.js"}} + ## Color The `TimelineDot` can appear in different colors from theme palette. diff --git a/docs/pages/material-ui/api/timeline-content.json b/docs/pages/material-ui/api/timeline-content.json index b7a913412b8b9d..4f01714a919ead 100644 --- a/docs/pages/material-ui/api/timeline-content.json +++ b/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", + "positionAlternateReverse" + ], "globalClasses": {}, "name": "MuiTimelineContent" }, diff --git a/docs/pages/material-ui/api/timeline-item.json b/docs/pages/material-ui/api/timeline-item.json index ced818dac2016d..a335f7950848e8 100644 --- a/docs/pages/material-ui/api/timeline-item.json +++ b/docs/pages/material-ui/api/timeline-item.json @@ -2,7 +2,12 @@ "props": { "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, - "position": { "type": { "name": "enum", "description": "'left'
| 'right'" } }, + "position": { + "type": { + "name": "enum", + "description": "'alternate-reverse'
| 'alternate'
| 'left'
| 'right'" + } + }, "sx": { "type": { "name": "union", @@ -17,6 +22,7 @@ "positionLeft", "positionRight", "positionAlternate", + "positionAlternateReverse", "missingOppositeContent" ], "globalClasses": {}, diff --git a/docs/pages/material-ui/api/timeline-opposite-content.json b/docs/pages/material-ui/api/timeline-opposite-content.json index eae159e827f2f7..235a89d8e619a5 100644 --- a/docs/pages/material-ui/api/timeline-opposite-content.json +++ b/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", + "positionAlternateReverse" + ], "globalClasses": {}, "name": "MuiTimelineOppositeContent" }, diff --git a/docs/pages/material-ui/api/timeline.json b/docs/pages/material-ui/api/timeline.json index 866c82757dbf0e..fed6226ddafe3e 100644 --- a/docs/pages/material-ui/api/timeline.json +++ b/docs/pages/material-ui/api/timeline.json @@ -6,7 +6,7 @@ "position": { "type": { "name": "enum", - "description": "'alternate'
| 'left'
| 'right'" + "description": "'alternate-reverse'
| 'alternate'
| 'left'
| 'right'" }, "default": "'right'" }, @@ -19,7 +19,13 @@ }, "name": "Timeline", "styles": { - "classes": ["root", "positionLeft", "positionRight", "positionAlternate"], + "classes": [ + "root", + "positionLeft", + "positionRight", + "positionAlternate", + "positionAlternateReverse" + ], "globalClasses": {}, "name": "MuiTimeline" }, diff --git a/docs/translations/api-docs/timeline-content/timeline-content-pt.json b/docs/translations/api-docs/timeline-content/timeline-content-pt.json index 858df7ec284e21..f08c3b56a9c975 100644 --- a/docs/translations/api-docs/timeline-content/timeline-content-pt.json +++ b/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": "position=\"alternate\"" + }, + "positionAlternateReverse": { + "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.", + "nodeName": "o elemento raiz", + "conditions": "position=\"alternate-reverse\"" } } } diff --git a/docs/translations/api-docs/timeline-content/timeline-content-zh.json b/docs/translations/api-docs/timeline-content/timeline-content-zh.json index 4310b7651c8561..2bfd73a7adb6fc 100644 --- a/docs/translations/api-docs/timeline-content/timeline-content-zh.json +++ b/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": "position=\"alternate\"" + }, + "positionAlternateReverse": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "position=\"alternate-reverse\"" } } } diff --git a/docs/translations/api-docs/timeline-content/timeline-content.json b/docs/translations/api-docs/timeline-content/timeline-content.json index fe7780d3b79d08..17631e1745563a 100644 --- a/docs/translations/api-docs/timeline-content/timeline-content.json +++ b/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": "position=\"alternate\"" + }, + "positionAlternateReverse": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "position=\"alternate-reverse\"" } } } diff --git a/docs/translations/api-docs/timeline-item/timeline-item-pt.json b/docs/translations/api-docs/timeline-item/timeline-item-pt.json index f17c73d40f7933..0ef0fd946b6478 100644 --- a/docs/translations/api-docs/timeline-item/timeline-item-pt.json +++ b/docs/translations/api-docs/timeline-item/timeline-item-pt.json @@ -25,6 +25,11 @@ "nodeName": "o elemento raiz", "conditions": "position=\"alternate\"" }, + "positionAlternateReverse": { + "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.", + "nodeName": "o elemento raiz", + "conditions": "position=\"alternate-reverse\"" + }, "missingOppositeContent": { "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.", "nodeName": "o elemento raiz", diff --git a/docs/translations/api-docs/timeline-item/timeline-item-zh.json b/docs/translations/api-docs/timeline-item/timeline-item-zh.json index efbf8398ed4167..e37bfb0784c6b5 100644 --- a/docs/translations/api-docs/timeline-item/timeline-item-zh.json +++ b/docs/translations/api-docs/timeline-item/timeline-item-zh.json @@ -25,6 +25,11 @@ "nodeName": "the root element", "conditions": "position=\"alternate\"" }, + "positionAlternateReverse": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "position=\"alternate-reverse\"" + }, "missingOppositeContent": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", diff --git a/docs/translations/api-docs/timeline-item/timeline-item.json b/docs/translations/api-docs/timeline-item/timeline-item.json index f843be34566b50..886d84221d1491 100644 --- a/docs/translations/api-docs/timeline-item/timeline-item.json +++ b/docs/translations/api-docs/timeline-item/timeline-item.json @@ -23,6 +23,11 @@ "nodeName": "the root element", "conditions": "position=\"alternate\"" }, + "positionAlternateReverse": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "position=\"alternate-reverse\"" + }, "missingOppositeContent": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", diff --git a/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content-pt.json b/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content-pt.json index 858df7ec284e21..f08c3b56a9c975 100644 --- a/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content-pt.json +++ b/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": "position=\"alternate\"" + }, + "positionAlternateReverse": { + "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.", + "nodeName": "o elemento raiz", + "conditions": "position=\"alternate-reverse\"" } } } diff --git a/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content-zh.json b/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content-zh.json index 4310b7651c8561..2bfd73a7adb6fc 100644 --- a/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content-zh.json +++ b/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": "position=\"alternate\"" + }, + "positionAlternateReverse": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "position=\"alternate-reverse\"" } } } diff --git a/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content.json b/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content.json index fe7780d3b79d08..17631e1745563a 100644 --- a/docs/translations/api-docs/timeline-opposite-content/timeline-opposite-content.json +++ b/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": "position=\"alternate\"" + }, + "positionAlternateReverse": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "position=\"alternate-reverse\"" } } } diff --git a/docs/translations/api-docs/timeline/timeline-pt.json b/docs/translations/api-docs/timeline/timeline-pt.json index 7711b0c9f2a23a..d61fcb68d74929 100644 --- a/docs/translations/api-docs/timeline/timeline-pt.json +++ b/docs/translations/api-docs/timeline/timeline-pt.json @@ -25,6 +25,11 @@ "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.", "nodeName": "o elemento raiz", "conditions": "position=\"alternate\"" + }, + "positionAlternateReverse": { + "description": "Estilos aplicados para {{nodeName}} se {{conditions}}.", + "nodeName": "o elemento raiz", + "conditions": "position=\"alternate-reverse\"" } } } diff --git a/docs/translations/api-docs/timeline/timeline-zh.json b/docs/translations/api-docs/timeline/timeline-zh.json index a1793d8cd67352..100336ad6f7429 100644 --- a/docs/translations/api-docs/timeline/timeline-zh.json +++ b/docs/translations/api-docs/timeline/timeline-zh.json @@ -25,6 +25,11 @@ "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "position=\"alternate\"" + }, + "positionAlternateReverse": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "position=\"alternate-reverse\"" } } } diff --git a/docs/translations/api-docs/timeline/timeline.json b/docs/translations/api-docs/timeline/timeline.json index d803e513778edd..d6a1aee5a2429c 100644 --- a/docs/translations/api-docs/timeline/timeline.json +++ b/docs/translations/api-docs/timeline/timeline.json @@ -23,6 +23,11 @@ "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "position=\"alternate\"" + }, + "positionAlternateReverse": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "position=\"alternate-reverse\"" } } } diff --git a/packages/mui-lab/src/Timeline/Timeline.tsx b/packages/mui-lab/src/Timeline/Timeline.tsx index fcc942d5fe3306..e4da2a1cf72d34 100644 --- a/packages/mui-lab/src/Timeline/Timeline.tsx +++ b/packages/mui-lab/src/Timeline/Timeline.tsx @@ -17,7 +17,7 @@ export interface TimelineProps extends StandardProps