[Timeline] Fix position alternate-reverse generated classname (#37678)

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { createRenderer, describeConformance } from 'test/utils';
+import { expect } from 'chai';
+import { createRenderer, describeConformance, screen } from 'test/utils';
 import Timeline, { timelineClasses as classes } from '@mui/lab/Timeline';
 
 describe('<Timeline />', () => {
@@ -15,4 +16,12 @@ describe('<Timeline />', () => {
     testStateOverrides: { prop: 'position', value: 'left', styleKey: 'positionLeft' },
     skip: ['componentProp', 'componentsProp'],
   }));
+
+  it('should have correct classname', () => {
+    render(<Timeline data-testid="timeline-root" position="alternate-reverse" />);
+
+    expect(screen.getByTestId('timeline-root')).to.have.class(
+      'MuiTimeline-positionAlternateReverse',
+    );
+  });
 });

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

@@ -4,11 +4,11 @@ import clsx from 'clsx';
 import { SxProps } from '@mui/system';
 // eslint-disable-next-line no-restricted-imports -- importing types
 import { InternalStandardProps as StandardProps } from '@mui/material';
-import { capitalize } from '@mui/material/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { styled, useThemeProps, Theme } from '@mui/material/styles';
 import TimelineContext from './TimelineContext';
 import { getTimelineUtilityClass } from './timelineClasses';
+import convertTimelinePositionToClass from '../internal/convertTimelinePositionToClass';
 
 export type TimelineClassKey = keyof NonNullable<TimelineProps['classes']>;
 
@@ -54,7 +54,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   const { position, classes } = ownerState;
 
   const slots = {
-    root: ['root', position && `position${capitalize(position)}`],
+    root: ['root', position && convertTimelinePositionToClass(position)],
   };
 
   return composeClasses(slots, getTimelineUtilityClass, classes);
@@ -68,7 +68,7 @@ const TimelineRoot = styled('ul' as const, {
     return [
       styles.root,
       ownerState.position &&
-        styles[`position${capitalize(ownerState.position)}` as TimelineClassKey],
+        styles[convertTimelinePositionToClass(ownerState.position) as TimelineClassKey],
     ];
   },
 })<{ ownerState: OwnerState }>({

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

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { capitalize } from '@mui/material/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import Typography from '@mui/material/Typography';
 import TimelineContext from '../Timeline/TimelineContext';
 import { getTimelineContentUtilityClass } from './timelineContentClasses';
+import convertTimelinePositionToClass from '../internal/convertTimelinePositionToClass';
 
 const useUtilityClasses = (ownerState) => {
   const { position, classes } = ownerState;
 
   const slots = {
-    root: ['root', `position${capitalize(position)}`],
+    root: ['root', convertTimelinePositionToClass(position)],
   };
 
   return composeClasses(slots, getTimelineContentUtilityClass, classes);
@@ -23,7 +23,7 @@ const TimelineContentRoot = styled(Typography, {
   slot: 'Root',
   overridesResolver: (props, styles) => {
     const { ownerState } = props;
-    return [styles.root, styles[`position${capitalize(ownerState.position)}`]];
+    return [styles.root, styles[convertTimelinePositionToClass(ownerState.position)]];
   },
 })(({ ownerState }) => ({
   flex: 1,

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

@@ -1,21 +1,22 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { capitalize, isMuiElement } from '@mui/material/utils';
+import { isMuiElement } from '@mui/material/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { timelineContentClasses } from '../TimelineContent';
 import { timelineOppositeContentClasses } from '../TimelineOppositeContent';
 import TimelineContext from '../Timeline/TimelineContext';
 import { getTimelineItemUtilityClass } from './timelineItemClasses';
+import convertTimelinePositionToClass from '../internal/convertTimelinePositionToClass';
 
 const useUtilityClasses = (ownerState) => {
   const { position, classes, hasOppositeContent } = ownerState;
 
   const slots = {
     root: [
       'root',
-      `position${capitalize(position)}`,
+      convertTimelinePositionToClass(position),
       !hasOppositeContent && 'missingOppositeContent',
     ],
   };
@@ -29,7 +30,7 @@ const TimelineItemRoot = styled('li', {
   overridesResolver: (props, styles) => {
     const { ownerState } = props;
 
-    return [styles.root, styles[`position${capitalize(ownerState.position)}`]];
+    return [styles.root, styles[convertTimelinePositionToClass(ownerState.position)]];
   },
 })(({ ownerState }) => ({
   listStyle: 'none',

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

@@ -2,17 +2,17 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { capitalize } from '@mui/material/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import Typography from '@mui/material/Typography';
 import TimelineContext from '../Timeline/TimelineContext';
 import { getTimelineOppositeContentUtilityClass } from './timelineOppositeContentClasses';
+import convertTimelinePositionToClass from '../internal/convertTimelinePositionToClass';
 
 const useUtilityClasses = (ownerState) => {
   const { position, classes } = ownerState;
 
   const slots = {
-    root: ['root', `position${capitalize(position)}`],
+    root: ['root', convertTimelinePositionToClass(position)],
   };
 
   return composeClasses(slots, getTimelineOppositeContentUtilityClass, classes);
@@ -23,7 +23,7 @@ const TimelineOppositeContentRoot = styled(Typography, {
   slot: 'Root',
   overridesResolver: (props, styles) => {
     const { ownerState } = props;
-    return [styles.root, styles[`position${capitalize(ownerState.position)}`]];
+    return [styles.root, styles[convertTimelinePositionToClass(ownerState.position)]];
   },
 })(({ ownerState }) => ({
   padding: '6px 16px',

packages/mui-lab/src/internal/convertTimelinePositionToClass.ts

@@ -0,0 +1,7 @@
+import { capitalize } from '@mui/material/utils';
+
+export default function convertTimelinePositionToClass(position: string): string {
+  return position === 'alternate-reverse'
+    ? 'positionAlternateReverse'
+    : `position${capitalize(position)}`;
+}