[Timeline] Migrate TimelineContent to emotion (#25781)

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

@@ -1,11 +1,12 @@
 {
   "props": {
     "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" } }
+    "classes": { "type": { "name": "object" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "TimelineContent",
   "styles": {
-    "classes": ["root", "alignRight"],
+    "classes": ["root", "alignRight", "alignLeft", "alignAlternate"],
     "globalClasses": {},
     "name": "MuiTimelineContent"
   },
@@ -14,6 +15,6 @@
   "filename": "/packages/material-ui-lab/src/TimelineContent/TimelineContent.js",
   "inheritance": { "component": "Typography", "pathname": "/api/typography/" },
   "demos": "<ul><li><a href=\"/components/timeline/\">Timeline</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

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

@@ -2,14 +2,25 @@
   "componentDescription": "",
   "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."
+    "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "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." },
     "alignRight": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>align=\"right\"</code>"
+    },
+    "alignLeft": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>align=\"left\"</code>"
+    },
+    "alignAlternate": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>align=\"alternate\"</code>"
     }
   }
 }

packages/material-ui-lab/src/TimelineContent/TimelineContent.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
+import { Theme } from '@material-ui/core/styles';
 import { InternalStandardProps as StandardProps, TypographyProps } from '@material-ui/core';
 
 export interface TimelineContentProps extends StandardProps<TypographyProps> {
@@ -14,7 +16,15 @@ export interface TimelineContentProps extends StandardProps<TypographyProps> {
     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;
   };
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
 }
 
 export type TimelineContentClassKey = keyof NonNullable<TimelineContentProps['classes']>;

packages/material-ui-lab/src/TimelineContent/TimelineContent.js

@@ -1,39 +1,69 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { deepmerge } from '@material-ui/utils';
 import { capitalize } from '@material-ui/core/utils';
-import { withStyles } from '@material-ui/core/styles';
+import {
+  experimentalStyled,
+  unstable_useThemeProps as useThemeProps,
+} from '@material-ui/core/styles';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
 import Typography from '@material-ui/core/Typography';
 import TimelineContext from '../Timeline/TimelineContext';
 import TimelineItemContext from '../TimelineItem/TimelineItemContext';
+import { getTimelineContentUtilityClass } from './timelineContentClasses';
 
-export const styles = () => ({
-  /* Styles applied to the root element. */
-  root: {
-    flex: 1,
-    padding: '6px 16px',
-  },
-  /* Styles applied to the root element if `align="right"`. */
-  alignRight: {
+const overridesResolver = (props, styles) => {
+  const { styleProps } = props;
+  return deepmerge(
+    {
+      ...styles[`align${capitalize(styleProps.align)}`],
+    },
+    styles.root || {},
+  );
+};
+
+const useUtilityClasses = (styleProps) => {
+  const { align, classes } = styleProps;
+
+  const slots = {
+    root: ['root', `align${capitalize(align)}`],
+  };
+
+  return composeClasses(slots, getTimelineContentUtilityClass, classes);
+};
+
+const TimelineContentRoot = experimentalStyled(
+  Typography,
+  {},
+  { name: 'MuiTimelineContent', slot: 'Root', overridesResolver },
+)(({ styleProps }) => ({
+  flex: 1,
+  padding: '6px 16px',
+  ...(styleProps.align === 'right' && {
     textAlign: 'right',
-  },
-});
+  }),
+}));
 
-const TimelineContent = React.forwardRef(function TimelineContent(props, ref) {
-  const { classes, className, ...other } = props;
+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 { classes: contextClasses = {} } = React.useContext(TimelineItemContext);
 
+  const styleProps = {
+    ...props,
+    align,
+  };
+
+  const classes = useUtilityClasses(styleProps);
+
   return (
-    <Typography
+    <TimelineContentRoot
       component="div"
-      className={clsx(
-        classes.root,
-        contextClasses.content,
-        classes[`align${capitalize(align)}`],
-        className,
-      )}
+      className={clsx(classes.root, contextClasses.content, className)}
+      styleProps={styleProps}
       ref={ref}
       {...other}
     />
@@ -57,6 +87,10 @@ TimelineContent.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
 };
 
-export default withStyles(styles, { name: 'MuiTimelineContent' })(TimelineContent);
+export default TimelineContent;

packages/material-ui-lab/src/TimelineContent/TimelineContent.test.js

@@ -1,21 +1,33 @@
 import * as React from 'react';
-import { getClasses, createMount, describeConformance } from 'test/utils';
+import { expect } from 'chai';
+import { createClientRender, createMount, describeConformanceV5 } from 'test/utils';
 import Typography from '@material-ui/core/Typography';
-import TimelineContent from './TimelineContent';
+import Timeline from '@material-ui/lab/Timeline';
+import TimelineContent, {
+  timelineContentClasses as classes,
+} from '@material-ui/lab/TimelineContent';
 
 describe('<TimelineContent />', () => {
+  const render = createClientRender();
   const mount = createMount();
-  let classes;
 
-  before(() => {
-    classes = getClasses(<TimelineContent />);
-  });
-
-  describeConformance(<TimelineContent />, () => ({
+  describeConformanceV5(<TimelineContent />, () => ({
     classes,
     inheritComponent: Typography,
+    render,
     mount,
+    muiName: 'MuiTimelineContent',
     refInstanceof: window.HTMLDivElement,
-    skip: ['componentProp'],
+    skip: ['componentProp', 'componentsProp', 'themeVariants'],
   }));
+
+  it('when align right should have alignRight class', () => {
+    const { getByText } = render(
+      <Timeline align="right">
+        <TimelineContent>content</TimelineContent>
+      </Timeline>,
+    );
+
+    expect(getByText('content')).to.have.class(classes.alignRight);
+  });
 });

packages/material-ui-lab/src/TimelineContent/index.d.ts

@@ -1,2 +1,5 @@
 export { default } from './TimelineContent';
 export * from './TimelineContent';
+
+export { default as timelineContentClasses } from './timelineContentClasses';
+export * from './timelineContentClasses';

packages/material-ui-lab/src/TimelineContent/index.js

@@ -1 +1,4 @@
 export { default } from './TimelineContent';
+
+export { default as timelineContentClasses } from './timelineContentClasses';
+export * from './timelineContentClasses';

packages/material-ui-lab/src/TimelineContent/timelineContentClasses.d.ts

@@ -0,0 +1,9 @@
+import { TimelineContentClassKey } from './TimelineContent';
+
+export type TimelineContentClasses = Record<TimelineContentClassKey, string>;
+
+declare const timelineContentClasses: TimelineContentClasses;
+
+export function getTimelineContentUtilityClass(slot: string): string;
+
+export default timelineContentClasses;

packages/material-ui-lab/src/TimelineContent/timelineContentClasses.js

@@ -0,0 +1,14 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getTimelineContentUtilityClass(slot) {
+  return generateUtilityClass('MuiTimelineContent', slot);
+}
+
+const timelineContentClasses = generateUtilityClasses('MuiTimelineContent', [
+  'root',
+  'alignLeft',
+  'alignRight',
+  'alignAlternate',
+]);
+
+export default timelineContentClasses;