[Timeline] Add support for position override on items (#25974)

mui · Apr 29, 2021 · c7da2a5 · c7da2a5
1 parent 2c7d5fe
commit c7da2a5
Show file tree

Hide file tree

Showing 35 changed files with 280 additions and 136 deletions.
diff --git a/docs/pages/api-docs/timeline-content.json b/docs/pages/api-docs/timeline-content.json
@@ -6,7 +6,7 @@
   },
   "name": "TimelineContent",
   "styles": {
-    "classes": ["root", "alignRight", "alignLeft", "alignAlternate"],
+    "classes": ["root", "positionRight", "positionLeft", "positionAlternate"],
     "globalClasses": {},
     "name": "MuiTimelineContent"
   },

diff --git a/docs/pages/api-docs/timeline-item.json b/docs/pages/api-docs/timeline-item.json
@@ -2,11 +2,18 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
+    "position": { "type": { "name": "enum", "description": "'left'<br>&#124;&nbsp;'right'" } },
     "sx": { "type": { "name": "object" } }
   },
   "name": "TimelineItem",
   "styles": {
-    "classes": ["root", "alignLeft", "alignRight", "alignAlternate", "missingOppositeContent"],
+    "classes": [
+      "root",
+      "positionLeft",
+      "positionRight",
+      "positionAlternate",
+      "missingOppositeContent"
+    ],
     "globalClasses": {},
     "name": "MuiTimelineItem"
   },

diff --git a/docs/pages/api-docs/timeline-opposite-content.json b/docs/pages/api-docs/timeline-opposite-content.json
@@ -6,7 +6,7 @@
   },
   "name": "TimelineOppositeContent",
   "styles": {
-    "classes": ["root", "alignRight", "alignLeft", "alignAlternate"],
+    "classes": ["root", "positionRight", "positionLeft", "positionAlternate"],
     "globalClasses": {},
     "name": "MuiTimelineOppositeContent"
   },

diff --git a/docs/pages/api-docs/timeline.json b/docs/pages/api-docs/timeline.json
@@ -1,20 +1,20 @@
 {
   "props": {
-    "align": {
+    "children": { "type": { "name": "node" } },
+    "classes": { "type": { "name": "object" } },
+    "className": { "type": { "name": "string" } },
+    "position": {
       "type": {
         "name": "enum",
         "description": "'alternate'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right'"
       },
-      "default": "'left'"
+      "default": "'right'"
     },
-    "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" } },
-    "className": { "type": { "name": "string" } },
     "sx": { "type": { "name": "object" } }
   },
   "name": "Timeline",
   "styles": {
-    "classes": ["root", "alignLeft", "alignRight", "alignAlternate"],
+    "classes": ["root", "positionLeft", "positionRight", "positionAlternate"],
     "globalClasses": {},
     "name": "MuiTimeline"
   },

diff --git a/docs/src/pages/components/timeline/AlternateTimeline.js b/docs/src/pages/components/timeline/AlternateTimeline.js
@@ -8,7 +8,7 @@ import TimelineDot from '@material-ui/lab/TimelineDot';
 
 export default function AlternateTimeline() {
   return (
-    <Timeline align="alternate">
+    <Timeline position="alternate">
       <TimelineItem>
         <TimelineSeparator>
           <TimelineDot />

diff --git a/docs/src/pages/components/timeline/AlternateTimeline.tsx b/docs/src/pages/components/timeline/AlternateTimeline.tsx
@@ -8,7 +8,7 @@ import TimelineDot from '@material-ui/lab/TimelineDot';
 
 export default function AlternateTimeline() {
   return (
-    <Timeline align="alternate">
+    <Timeline position="alternate">
       <TimelineItem>
         <TimelineSeparator>
           <TimelineDot />

diff --git a/docs/src/pages/components/timeline/ColorsTimeline.js b/docs/src/pages/components/timeline/ColorsTimeline.js
@@ -8,7 +8,7 @@ import TimelineDot from '@material-ui/lab/TimelineDot';
 
 export default function ColorsTimeline() {
   return (
-    <Timeline align="alternate">
+    <Timeline position="alternate">
       <TimelineItem>
         <TimelineSeparator>
           <TimelineDot />

diff --git a/docs/src/pages/components/timeline/ColorsTimeline.tsx b/docs/src/pages/components/timeline/ColorsTimeline.tsx
@@ -8,7 +8,7 @@ import TimelineDot from '@material-ui/lab/TimelineDot';
 
 export default function ColorsTimeline() {
   return (
-    <Timeline align="alternate">
+    <Timeline position="alternate">
       <TimelineItem>
         <TimelineSeparator>
           <TimelineDot />

diff --git a/docs/src/pages/components/timeline/CustomizedTimeline.js b/docs/src/pages/components/timeline/CustomizedTimeline.js
@@ -29,7 +29,7 @@ export default function CustomizedTimeline() {
   const classes = useStyles();
 
   return (
-    <Timeline align="alternate">
+    <Timeline position="alternate">
       <TimelineItem>
         <TimelineOppositeContent
           className={classes.verticallyCenterContent}

diff --git a/docs/src/pages/components/timeline/CustomizedTimeline.tsx b/docs/src/pages/components/timeline/CustomizedTimeline.tsx
@@ -29,7 +29,7 @@ export default function CustomizedTimeline() {
   const classes = useStyles();
 
   return (
-    <Timeline align="alternate">
+    <Timeline position="alternate">
       <TimelineItem>
         <TimelineOppositeContent
           className={classes.verticallyCenterContent}

diff --git a/...mponents/timeline/RightAlignedTimeline.js → ...onents/timeline/LeftPositionedTimeline.js b/...mponents/timeline/RightAlignedTimeline.js → ...onents/timeline/LeftPositionedTimeline.js
@@ -6,9 +6,9 @@ import TimelineConnector from '@material-ui/lab/TimelineConnector';
 import TimelineContent from '@material-ui/lab/TimelineContent';
 import TimelineDot from '@material-ui/lab/TimelineDot';
 
-export default function RightAlignedTimeline() {
+export default function LeftPositionedTimeline() {
   return (
-    <Timeline align="right">
+    <Timeline position="left">
       <TimelineItem>
         <TimelineSeparator>
           <TimelineDot />

diff --git a/...ponents/timeline/RightAlignedTimeline.tsx → ...nents/timeline/LeftPositionedTimeline.tsx b/...ponents/timeline/RightAlignedTimeline.tsx → ...nents/timeline/LeftPositionedTimeline.tsx
@@ -6,9 +6,9 @@ import TimelineConnector from '@material-ui/lab/TimelineConnector';
 import TimelineContent from '@material-ui/lab/TimelineContent';
 import TimelineDot from '@material-ui/lab/TimelineDot';
 
-export default function RightAlignedTimeline() {
+export default function LeftPositionedTimeline() {
   return (
-    <Timeline align="right">
+    <Timeline position="left">
       <TimelineItem>
         <TimelineSeparator>
           <TimelineDot />

diff --git a/docs/src/pages/components/timeline/OppositeContentTimeline.js b/docs/src/pages/components/timeline/OppositeContentTimeline.js
@@ -10,7 +10,7 @@ import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
 export default function OppositeContentTimeline() {
   return (
     <React.Fragment>
-      <Timeline align="alternate">
+      <Timeline position="alternate">
         <TimelineItem>
           <TimelineOppositeContent color="text.secondary">
             09:30 am

diff --git a/docs/src/pages/components/timeline/OppositeContentTimeline.tsx b/docs/src/pages/components/timeline/OppositeContentTimeline.tsx
@@ -10,7 +10,7 @@ import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
 export default function OppositeContentTimeline() {
   return (
     <React.Fragment>
-      <Timeline align="alternate">
+      <Timeline position="alternate">
         <TimelineItem>
           <TimelineOppositeContent color="text.secondary">
             09:30 am

diff --git a/docs/src/pages/components/timeline/OutlinedTimeline.js b/docs/src/pages/components/timeline/OutlinedTimeline.js
@@ -8,7 +8,7 @@ import TimelineDot from '@material-ui/lab/TimelineDot';
 
 export default function OutlinedTimeline() {
   return (
-    <Timeline align="alternate">
+    <Timeline position="alternate">
       <TimelineItem>
         <TimelineSeparator>
           <TimelineDot variant="outlined" />

diff --git a/docs/src/pages/components/timeline/OutlinedTimeline.tsx b/docs/src/pages/components/timeline/OutlinedTimeline.tsx
@@ -8,7 +8,7 @@ import TimelineDot from '@material-ui/lab/TimelineDot';
 
 export default function OutlinedTimeline() {
   return (
-    <Timeline align="alternate">
+    <Timeline position="alternate">
       <TimelineItem>
         <TimelineSeparator>
           <TimelineDot variant="outlined" />

diff --git a/docs/src/pages/components/timeline/timeline.md b/docs/src/pages/components/timeline/timeline.md
@@ -19,11 +19,11 @@ 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"}}
+{{"demo": "pages/components/timeline/LeftPositionedTimeline.js"}}
 
 ## Alternating timeline
 

diff --git a/docs/translations/api-docs/timeline-content/timeline-content.json b/docs/translations/api-docs/timeline-content/timeline-content.json
@@ -7,20 +7,20 @@
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },
-    "alignRight": {
+    "positionRight": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>align=\"right\"</code>"
+      "conditions": "<code>position=\"right\"</code>"
     },
-    "alignLeft": {
+    "positionLeft": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>align=\"left\"</code>"
+      "conditions": "<code>position=\"left\"</code>"
     },
-    "alignAlternate": {
+    "positionAlternate": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>align=\"alternate\"</code>"
+      "conditions": "<code>position=\"alternate\"</code>"
     }
   }
 }
diff --git a/docs/translations/api-docs/timeline-item/timeline-item.json b/docs/translations/api-docs/timeline-item/timeline-item.json
@@ -3,24 +3,25 @@
   "propDescriptions": {
     "children": "The content of the component.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "position": "The position where the timeline&#39;s item should appear.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details."
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },
-    "alignLeft": {
+    "positionLeft": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>align=\"left\"</code>"
+      "conditions": "<code>position=\"left\"</code>"
     },
-    "alignRight": {
+    "positionRight": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>align=\"right\"</code>"
+      "conditions": "<code>position=\"right\"</code>"
     },
-    "alignAlternate": {
+    "positionAlternate": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>align=\"alternate\"</code>"
+      "conditions": "<code>position=\"alternate\"</code>"
     },
     "missingOppositeContent": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",

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
@@ -7,20 +7,20 @@
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },
-    "alignRight": {
+    "positionRight": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>align=\"right\"</code>"
+      "conditions": "<code>position=\"right\"</code>"
     },
-    "alignLeft": {
+    "positionLeft": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>align=\"left\"</code>"
+      "conditions": "<code>position=\"left\"</code>"
     },
-    "alignAlternate": {
+    "positionAlternate": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>align=\"alternate\"</code>"
+      "conditions": "<code>position=\"alternate\"</code>"
     }
   }
 }
diff --git a/docs/translations/api-docs/timeline/timeline.json b/docs/translations/api-docs/timeline/timeline.json
@@ -1,28 +1,28 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "align": "The position where the timeline&#39;s content should appear.",
     "children": "The content of the component.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "className": "className applied to the root element.",
+    "position": "The position where the TimelineContent should appear relative to the time axis.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details."
   },
   "classDescriptions": {
     "root": { "description": "Styles applied to the root element." },
-    "alignLeft": {
+    "positionLeft": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>align=\"left\"</code>"
+      "conditions": "<code>position=\"left\"</code>"
     },
-    "alignRight": {
+    "positionRight": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>align=\"right\"</code>"
+      "conditions": "<code>position=\"right\"</code>"
     },
-    "alignAlternate": {
+    "positionAlternate": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>align=\"alternate\"</code>"
+      "conditions": "<code>position=\"alternate\"</code>"
     }
   }
 }
diff --git a/packages/material-ui-lab/src/Timeline/Timeline.test.tsx b/packages/material-ui-lab/src/Timeline/Timeline.test.tsx
@@ -13,8 +13,8 @@ describe('<Timeline />', () => {
     render,
     muiName: 'MuiTimeline',
     refInstanceof: window.HTMLUListElement,
-    testVariantProps: { align: 'right' },
-    testStateOverrides: { prop: 'align', value: 'right', styleKey: 'alignRight' },
+    testVariantProps: { position: 'left' },
+    testStateOverrides: { prop: 'position', value: 'left', styleKey: 'positionLeft' },
     skip: ['componentProp', 'componentsProp'],
   }));
 });