diff --git a/docs/pages/api-docs/timeline-content.json b/docs/pages/api-docs/timeline-content.json index bc131b155e4fda..e0615fc03ac9f3 100644 --- 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 index 85241fbbfdc5c7..796262439f3c39 100644 --- 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'
| '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 index 4df0da6a2b85a7..13b2f8dfffeb57 100644 --- 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 index dc10741c52a05b..c1e33db2f7c93b 100644 --- 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'
| 'left'
| '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 index 974dc01ffb5076..725931f355e1e0 100644 --- 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 ( - + diff --git a/docs/src/pages/components/timeline/AlternateTimeline.tsx b/docs/src/pages/components/timeline/AlternateTimeline.tsx index 974dc01ffb5076..725931f355e1e0 100644 --- 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 ( - + diff --git a/docs/src/pages/components/timeline/ColorsTimeline.js b/docs/src/pages/components/timeline/ColorsTimeline.js index ab35d13589f02a..d0a3df04426834 100644 --- 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 ( - + diff --git a/docs/src/pages/components/timeline/ColorsTimeline.tsx b/docs/src/pages/components/timeline/ColorsTimeline.tsx index ab35d13589f02a..d0a3df04426834 100644 --- 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 ( - + diff --git a/docs/src/pages/components/timeline/CustomizedTimeline.js b/docs/src/pages/components/timeline/CustomizedTimeline.js index 34bd5f8c5cad19..bca3f6734448a4 100644 --- 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 ( - + + + diff --git a/docs/src/pages/components/timeline/RightAlignedTimeline.tsx b/docs/src/pages/components/timeline/LeftPositionedTimeline.tsx similarity index 93% rename from docs/src/pages/components/timeline/RightAlignedTimeline.tsx rename to docs/src/pages/components/timeline/LeftPositionedTimeline.tsx index 29892f5630e440..e3abf047d13db3 100644 --- a/docs/src/pages/components/timeline/RightAlignedTimeline.tsx +++ b/docs/src/pages/components/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 ( - + diff --git a/docs/src/pages/components/timeline/OppositeContentTimeline.js b/docs/src/pages/components/timeline/OppositeContentTimeline.js index 5fea07a0a7b7d5..db92b0c2cdf2ae 100644 --- 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 ( - + 09:30 am diff --git a/docs/src/pages/components/timeline/OppositeContentTimeline.tsx b/docs/src/pages/components/timeline/OppositeContentTimeline.tsx index 5fea07a0a7b7d5..db92b0c2cdf2ae 100644 --- 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 ( - + 09:30 am diff --git a/docs/src/pages/components/timeline/OutlinedTimeline.js b/docs/src/pages/components/timeline/OutlinedTimeline.js index 011ba44884bf92..f6f4d717a09d2b 100644 --- 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 ( - + diff --git a/docs/src/pages/components/timeline/OutlinedTimeline.tsx b/docs/src/pages/components/timeline/OutlinedTimeline.tsx index 011ba44884bf92..f6f4d717a09d2b 100644 --- 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 ( - + diff --git a/docs/src/pages/components/timeline/timeline.md b/docs/src/pages/components/timeline/timeline.md index 2a2a6c25d49b6c..8d04110834b2f7 100644 --- 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 index d325a5d57ac9cb..12fbf07d0edce7 100644 --- 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": "align=\"right\"" + "conditions": "position=\"right\"" }, - "alignLeft": { + "positionLeft": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "align=\"left\"" + "conditions": "position=\"left\"" }, - "alignAlternate": { + "positionAlternate": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "align=\"alternate\"" + "conditions": "position=\"alternate\"" } } } diff --git a/docs/translations/api-docs/timeline-item/timeline-item.json b/docs/translations/api-docs/timeline-item/timeline-item.json index 076faa3e4d9931..8e19e6346ec4a6 100644 --- 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 CSS API below for more details.", + "position": "The position where the timeline's item should appear.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page 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": "align=\"left\"" + "conditions": "position=\"left\"" }, - "alignRight": { + "positionRight": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "align=\"right\"" + "conditions": "position=\"right\"" }, - "alignAlternate": { + "positionAlternate": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "align=\"alternate\"" + "conditions": "position=\"alternate\"" }, "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 index d325a5d57ac9cb..12fbf07d0edce7 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 @@ -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": "align=\"right\"" + "conditions": "position=\"right\"" }, - "alignLeft": { + "positionLeft": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "align=\"left\"" + "conditions": "position=\"left\"" }, - "alignAlternate": { + "positionAlternate": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "align=\"alternate\"" + "conditions": "position=\"alternate\"" } } } diff --git a/docs/translations/api-docs/timeline/timeline.json b/docs/translations/api-docs/timeline/timeline.json index 4fcc146321e6ed..0d321471fbc10e 100644 --- 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's content should appear.", "children": "The content of the component.", "classes": "Override or extend the styles applied to the component. See CSS API 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 `sx` page 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": "align=\"left\"" + "conditions": "position=\"left\"" }, - "alignRight": { + "positionRight": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "align=\"right\"" + "conditions": "position=\"right\"" }, - "alignAlternate": { + "positionAlternate": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "align=\"alternate\"" + "conditions": "position=\"alternate\"" } } } diff --git a/packages/material-ui-lab/src/Timeline/Timeline.test.tsx b/packages/material-ui-lab/src/Timeline/Timeline.test.tsx index b6144abed6e2a1..bf7135d7b006be 100644 --- 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('', () => { 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'], })); }); diff --git a/packages/material-ui-lab/src/Timeline/Timeline.tsx b/packages/material-ui-lab/src/Timeline/Timeline.tsx index 07287909bef941..4534c3583b623d 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 = keyof NonNullable; export interface TimelineProps extends StandardProps> { /** - * 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. */ @@ -32,12 +32,12 @@ export interface TimelineProps extends StandardProps { - const { align, classes } = styleProps; + const { position, classes } = styleProps; const slots = { - root: ['root', align && `align${capitalize(align)}`], + root: ['root', position && `position${capitalize(position)}`], }; return composeClasses(slots, getTimelineUtilityClass, classes); @@ -72,7 +72,8 @@ const TimelineRoot = experimentalStyled( const { styleProps } = props; return { ...styles.root, - ...(styleProps.align && styles[`align${capitalize(styleProps.align)}` as TimelineClassKey]), + ...(styleProps.position && + styles[`position${capitalize(styleProps.position)}` as TimelineClassKey]), }; }, }, @@ -95,11 +96,11 @@ const TimelineRoot = experimentalStyled( */ const Timeline = React.forwardRef(function Timeline(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiTimeline' }); - const { align = 'left', className, ...other } = props; - const styleProps = { ...props, align }; + const { position = 'right', className, ...other } = props; + const styleProps = { ...props, position }; const classes = useUtilityClasses(styleProps); return ( - + { classes?: { /** Styles applied to the root element. */ root?: string; - /** Styles applied to the root element if `align="right"`. */ - alignRight?: string; - /** Styles applied to the root element if `align="left"`. */ - alignLeft?: string; - /** Styles applied to the root element if `align="alternate"`. */ - alignAlternate?: string; + /** Styles applied to the root element if `position="right"`. */ + positionRight?: string; + /** Styles applied to the root element if `position="left"`. */ + positionLeft?: string; + /** Styles applied to the root element if `position="alternate"`. */ + positionAlternate?: string; }; /** * The system prop that allows defining system overrides as well as additional CSS styles. diff --git a/packages/material-ui-lab/src/TimelineContent/TimelineContent.js b/packages/material-ui-lab/src/TimelineContent/TimelineContent.js index 14b7f13062730c..dd0491a828178a 100644 --- a/packages/material-ui-lab/src/TimelineContent/TimelineContent.js +++ b/packages/material-ui-lab/src/TimelineContent/TimelineContent.js @@ -12,10 +12,10 @@ import TimelineContext from '../Timeline/TimelineContext'; import { getTimelineContentUtilityClass } from './timelineContentClasses'; const useUtilityClasses = (styleProps) => { - const { align, classes } = styleProps; + const { position, classes } = styleProps; const slots = { - root: ['root', `align${capitalize(align)}`], + root: ['root', `position${capitalize(position)}`], }; return composeClasses(slots, getTimelineContentUtilityClass, classes); @@ -31,14 +31,17 @@ const TimelineContentRoot = experimentalStyled( const { styleProps } = props; return { ...styles.root, - ...styles[`align${capitalize(styleProps.align)}`], + ...styles[`position${capitalize(styleProps.position)}`], }; }, }, )(({ styleProps }) => ({ + /* Styles applied to the root element. */ flex: 1, padding: '6px 16px', - ...(styleProps.align === 'right' && { + textAlign: 'left', + /* Styles applied to the root element if `position="left"`. */ + ...(styleProps.position === 'left' && { textAlign: 'right', }), })); @@ -47,11 +50,11 @@ const TimelineContent = React.forwardRef(function TimelineContent(inProps, ref) const props = useThemeProps({ props: inProps, name: 'MuiTimelineContent' }); const { className, ...other } = props; - const { align = 'left' } = React.useContext(TimelineContext); + const { position: positionContext } = React.useContext(TimelineContext); const styleProps = { ...props, - align, + position: positionContext || 'right', }; const classes = useUtilityClasses(styleProps); diff --git a/packages/material-ui-lab/src/TimelineContent/TimelineContent.test.js b/packages/material-ui-lab/src/TimelineContent/TimelineContent.test.js index b4adbcea3e352a..241f1559d17550 100644 --- a/packages/material-ui-lab/src/TimelineContent/TimelineContent.test.js +++ b/packages/material-ui-lab/src/TimelineContent/TimelineContent.test.js @@ -3,6 +3,7 @@ import { expect } from 'chai'; import { createClientRender, createMount, describeConformanceV5 } from 'test/utils'; import Typography from '@material-ui/core/Typography'; import Timeline from '@material-ui/lab/Timeline'; +import TimelineItem from '@material-ui/lab/TimelineItem'; import TimelineContent, { timelineContentClasses as classes, } from '@material-ui/lab/TimelineContent'; @@ -21,13 +22,71 @@ describe('', () => { skip: ['componentProp', 'componentsProp', 'themeVariants'], })); - it('when align right should have alignRight class', () => { + it('should have positionLeft class when inside of a left-positioned timeline', () => { const { getByText } = render( - + content , ); - expect(getByText('content')).to.have.class(classes.alignRight); + expect(getByText('content')).to.have.class(classes.positionLeft); + }); + + it('should have positionRight class when inside of a right-positioned timeline', () => { + const { getByText } = render( + + content + , + ); + + expect(getByText('content')).to.have.class(classes.positionRight); + }); + + it('should have positionLeft class when inside of a left-positioned timeline and a left-positioned item', () => { + const { getByText } = render( + + + content + + , + ); + + expect(getByText('content')).to.have.class(classes.positionLeft); + }); + + it('should have positionLeft class when inside of a right-positioned timeline and a left-positioned item', () => { + const { getByText } = render( + + + content + + , + ); + + expect(getByText('content')).to.have.class(classes.positionLeft); + }); + + it('should have positionRight class when inside of a left-positioned timeline and a right-positioned item', () => { + const { getByText } = render( + + + content + + , + ); + + expect(getByText('content')).to.have.class(classes.positionRight); + }); + + it('should have positionRight class when inside of a right-positioned timeline and a right-positioned item', () => { + const { getByText } = render( + + + content + + , + ); + + expect(getByText('content')).to.have.class(classes.positionRight); }); }); diff --git a/packages/material-ui-lab/src/TimelineContent/timelineContentClasses.js b/packages/material-ui-lab/src/TimelineContent/timelineContentClasses.js index 989cd445a39565..9a967d84bd2a34 100644 --- a/packages/material-ui-lab/src/TimelineContent/timelineContentClasses.js +++ b/packages/material-ui-lab/src/TimelineContent/timelineContentClasses.js @@ -6,9 +6,9 @@ export function getTimelineContentUtilityClass(slot) { const timelineContentClasses = generateUtilityClasses('MuiTimelineContent', [ 'root', - 'alignLeft', - 'alignRight', - 'alignAlternate', + 'positionLeft', + 'positionRight', + 'positionAlternate', ]); export default timelineContentClasses; diff --git a/packages/material-ui-lab/src/TimelineItem/TimelineItem.d.ts b/packages/material-ui-lab/src/TimelineItem/TimelineItem.d.ts index 17647152afa566..0da99e373c67cd 100644 --- a/packages/material-ui-lab/src/TimelineItem/TimelineItem.d.ts +++ b/packages/material-ui-lab/src/TimelineItem/TimelineItem.d.ts @@ -4,6 +4,10 @@ import { Theme } from '@material-ui/core/styles'; import { InternalStandardProps as StandardProps } from '@material-ui/core'; export interface TimelineItemProps extends StandardProps> { + /** + * The position where the timeline's item should appear. + */ + position?: 'left' | 'right'; /** * The content of the component. */ @@ -14,12 +18,12 @@ export interface TimelineItemProps extends StandardProps { - const { align, classes, hasOppositeContent } = styleProps; + const { position, classes, hasOppositeContent } = styleProps; const slots = { - root: ['root', `align${capitalize(align)}`, !hasOppositeContent && 'missingOppositeContent'], + root: [ + 'root', + `position${capitalize(position)}`, + !hasOppositeContent && 'missingOppositeContent', + ], }; return composeClasses(slots, getTimelineItemUtilityClass, classes); @@ -33,7 +37,7 @@ const TimelineItemRoot = experimentalStyled( return { ...styles.root, - ...styles[`align${capitalize(styleProps.align)}`], + ...styles[`position${capitalize(styleProps.position)}`], }; }, }, @@ -42,10 +46,10 @@ const TimelineItemRoot = experimentalStyled( display: 'flex', position: 'relative', minHeight: 70, - ...(styleProps.align === 'right' && { + ...(styleProps.position === 'left' && { flexDirection: 'row-reverse', }), - ...(styleProps.align === 'alternate' && { + ...(styleProps.position === 'alternate' && { '&:nth-of-type(even)': { flexDirection: 'row-reverse', [`& .${timelineContentClasses.root}`]: { @@ -67,8 +71,8 @@ const TimelineItemRoot = experimentalStyled( const TimelineItem = React.forwardRef(function TimelineItem(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiTimelineItem' }); - const { className, ...other } = props; - const { align = 'left' } = React.useContext(TimelineContext); + const { position: positionProp, className, ...other } = props; + const { position: positionContext } = React.useContext(TimelineContext); let hasOppositeContent = false; @@ -80,19 +84,21 @@ const TimelineItem = React.forwardRef(function TimelineItem(inProps, ref) { const styleProps = { ...props, - align, + position: positionProp || positionContext || 'right', hasOppositeContent, }; const classes = useUtilityClasses(styleProps); return ( - + + + ); }); @@ -113,6 +119,10 @@ TimelineItem.propTypes /* remove-proptypes */ = { * @ignore */ className: PropTypes.string, + /** + * The position where the timeline's item should appear. + */ + position: PropTypes.oneOf(['left', 'right']), /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/material-ui-lab/src/TimelineItem/timelineItemClasses.js b/packages/material-ui-lab/src/TimelineItem/timelineItemClasses.js index 5ba76472c85ac5..bd7238cd8a1cf6 100644 --- a/packages/material-ui-lab/src/TimelineItem/timelineItemClasses.js +++ b/packages/material-ui-lab/src/TimelineItem/timelineItemClasses.js @@ -6,9 +6,9 @@ export function getTimelineItemUtilityClass(slot) { const timelineItemClasses = generateUtilityClasses('MuiTimelineItem', [ 'root', - 'alignLeft', - 'alignRight', - 'alignAlternate', + 'positionLeft', + 'positionRight', + 'positionAlternate', 'missingOppositeContent', ]); diff --git a/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.d.ts b/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.d.ts index 77cdd532d4a875..1093b8d905c664 100644 --- a/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.d.ts +++ b/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.d.ts @@ -14,12 +14,12 @@ export interface TimelineOppositeContentProps extends StandardProps { - const { align, classes } = styleProps; + const { position, classes } = styleProps; const slots = { - root: ['root', `align${capitalize(align)}`], + root: ['root', `position${capitalize(position)}`], }; return composeClasses(slots, getTimelineOppositeContentUtilityClass, classes); @@ -31,7 +31,7 @@ const TimelineOppositeContentRoot = experimentalStyled( const { styleProps } = props; return { ...styles.root, - ...styles[`align${capitalize(styleProps.align)}`], + ...styles[`position${capitalize(styleProps.position)}`], }; }, }, @@ -41,8 +41,8 @@ const TimelineOppositeContentRoot = experimentalStyled( marginRight: 'auto', textAlign: 'right', flex: 1, - /* Styles applied to the root element if `align="right"`. */ - ...(styleProps.align === 'right' && { + /* Styles applied to the root element if `position="left"`. */ + ...(styleProps.position === 'left' && { textAlign: 'left', }), })); @@ -51,11 +51,11 @@ const TimelineOppositeContent = React.forwardRef(function TimelineOppositeConten const props = useThemeProps({ props: inProps, name: 'MuiTimelineOppositeContent' }); const { className, ...other } = props; - const { align = 'left' } = React.useContext(TimelineContext); + const { position: positionContext } = React.useContext(TimelineContext); const styleProps = { ...props, - align, + position: positionContext || 'left', }; const classes = useUtilityClasses(styleProps); diff --git a/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.test.js b/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.test.js index 63b63c5a134f0d..3e749ce46ac5e7 100644 --- a/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.test.js +++ b/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.test.js @@ -3,6 +3,7 @@ import { expect } from 'chai'; import { createClientRender, createMount, describeConformanceV5 } from 'test/utils'; import Typography from '@material-ui/core/Typography'; import Timeline from '@material-ui/lab/Timeline'; +import TimelineItem from '@material-ui/lab/TimelineItem'; import TimelineOppositeContent, { timelineOppositeContentClasses as classes, } from '@material-ui/lab/TimelineOppositeContent'; @@ -21,13 +22,71 @@ describe('', () => { skip: ['componentProp', 'componentsProp', 'themeVariants'], })); - it('when align right should have alignRight class', () => { + it('should have positionLeft class when inside of a left-positioned timeline', () => { const { getByText } = render( - + content , ); - expect(getByText('content')).to.have.class(classes.alignRight); + expect(getByText('content')).to.have.class(classes.positionLeft); + }); + + it('should have positionRight class when inside of a right-positioned timeline', () => { + const { getByText } = render( + + content + , + ); + + expect(getByText('content')).to.have.class(classes.positionRight); + }); + + it('should have positionLeft class when inside of a left-positioned timeline and a left-positioned item', () => { + const { getByText } = render( + + + content + + , + ); + + expect(getByText('content')).to.have.class(classes.positionLeft); + }); + + it('should have positionLeft class when inside of a right-positioned timeline and a left-positioned item', () => { + const { getByText } = render( + + + content + + , + ); + + expect(getByText('content')).to.have.class(classes.positionLeft); + }); + + it('should have positionRight class when inside of a left-positioned timeline and a right-positioned item', () => { + const { getByText } = render( + + + content + + , + ); + + expect(getByText('content')).to.have.class(classes.positionRight); + }); + + it('should have positionRight class when inside of a right-positioned timeline and a right-positioned item', () => { + const { getByText } = render( + + + content + + , + ); + + expect(getByText('content')).to.have.class(classes.positionRight); }); }); diff --git a/packages/material-ui-lab/src/TimelineOppositeContent/timelineOppositeContentClasses.js b/packages/material-ui-lab/src/TimelineOppositeContent/timelineOppositeContentClasses.js index a2a96a4a44604c..abcb487a96c342 100644 --- a/packages/material-ui-lab/src/TimelineOppositeContent/timelineOppositeContentClasses.js +++ b/packages/material-ui-lab/src/TimelineOppositeContent/timelineOppositeContentClasses.js @@ -6,9 +6,9 @@ export function getTimelineOppositeContentUtilityClass(slot) { const timelineOppositeContentClasses = generateUtilityClasses('MuiTimelineOppositeContent', [ 'root', - 'alignLeft', - 'alignRight', - 'alignAlternate', + 'positionLeft', + 'positionRight', + 'positionAlternate', ]); export default timelineOppositeContentClasses;