[Timeline] Migrate TimelineItem to emotion

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

@@ -1,19 +1,12 @@
 {
   "props": {
     "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" } }
+    "classes": { "type": { "name": "object" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "TimelineItem",
   "styles": {
-    "classes": [
-      "root",
-      "alignLeft",
-      "alignRight",
-      "alignAlternate",
-      "missingOppositeContent",
-      "content",
-      "oppositeContent"
-    ],
+    "classes": ["root", "alignLeft", "alignRight", "alignAlternate", "missingOppositeContent"],
     "globalClasses": {},
     "name": "MuiTimelineItem"
   },
@@ -22,6 +15,6 @@
   "filename": "/packages/material-ui-lab/src/TimelineItem/TimelineItem.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/timeline/\">Timeline</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

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

@@ -2,7 +2,8 @@
   "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." },
@@ -25,14 +26,6 @@
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "TimelineOppositeContent isn't provided"
-    },
-    "content": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the timeline content node"
-    },
-    "oppositeContent": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the timeline opposite content node"
     }
   }
 }

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

@@ -10,7 +10,6 @@ import {
 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';
 
 const overridesResolver = (props, styles) => {
@@ -50,7 +49,6 @@ const TimelineContent = React.forwardRef(function TimelineContent(inProps, ref)
   const { className, ...other } = props;
 
   const { align = 'left' } = React.useContext(TimelineContext);
-  const { classes: contextClasses = {} } = React.useContext(TimelineItemContext);
 
   const styleProps = {
     ...props,
@@ -62,7 +60,7 @@ const TimelineContent = React.forwardRef(function TimelineContent(inProps, ref)
   return (
     <TimelineContentRoot
       component="div"
-      className={clsx(classes.root, contextClasses.content, className)}
+      className={clsx(classes.root, className)}
       styleProps={styleProps}
       ref={ref}
       {...other}

packages/material-ui-lab/src/TimelineItem/TimelineItem.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 } from '@material-ui/core';
 
 export interface TimelineItemProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
@@ -20,11 +22,11 @@ export interface TimelineItemProps extends StandardProps<React.HTMLAttributes<HT
     alignAlternate?: string;
     /** Styles applied to the root element if TimelineOppositeContent isn't provided. */
     missingOppositeContent?: string;
-    /** Styles applied to the timeline content node. */
-    content?: string;
-    /** Styles applied to the timeline opposite content node. */
-    oppositeContent?: string;
   };
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
 }
 
 export type TimelineItemClassKey = keyof NonNullable<TimelineItemProps['classes']>;

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

@@ -2,52 +2,74 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { capitalize, isMuiElement } 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 { timelineContentClasses } from '../TimelineContent';
+import { timelineOppositeContentClasses } from '../TimelineOppositeContent';
 import TimelineContext from '../Timeline/TimelineContext';
-import TimelineItemContext from './TimelineItemContext';
+import { getTimelineItemUtilityClass } from './timelineItemClasses';
 
-export const styles = () => ({
-  /* Styles applied to the root element. */
-  root: {
-    listStyle: 'none',
-    display: 'flex',
-    position: 'relative',
-    minHeight: 70,
+const overridesResolver = (props, styles) => {
+  const { styleProps } = props;
+
+  return {
+    ...styles.root,
+    ...styles[`align${capitalize(styleProps.align)}`],
+  };
+};
+
+const useUtilityClasses = (styleProps) => {
+  const { align, classes, hasOppositeContent } = styleProps;
+
+  const slots = {
+    root: ['root', `align${capitalize(align)}`, !hasOppositeContent && 'missingOppositeContent'],
+  };
+
+  return composeClasses(slots, getTimelineItemUtilityClass, classes);
+};
+
+const TimelineItemRoot = experimentalStyled(
+  'li',
+  {},
+  {
+    name: 'MuiTimelineItem',
+    slot: 'Root',
+    overridesResolver,
   },
-  /* Styles applied to the root element if `align="left"`. */
-  alignLeft: {},
-  /* Styles applied to the root element if `align="right"`. */
-  alignRight: {
+)(({ styleProps }) => ({
+  listStyle: 'none',
+  display: 'flex',
+  position: 'relative',
+  minHeight: 70,
+  ...(styleProps.align === 'right' && {
     flexDirection: 'row-reverse',
-  },
-  /* Styles applied to the root element if `align="alternate"`. */
-  alignAlternate: {
+  }),
+  ...(styleProps.align === 'alternate' && {
     '&:nth-child(even)': {
       flexDirection: 'row-reverse',
-      '& $content': {
+      [`& .${timelineContentClasses.root}`]: {
         textAlign: 'right',
       },
-      '& $oppositeContent': {
+      [`& .${timelineOppositeContentClasses.root}`]: {
         textAlign: 'left',
       },
     },
-  },
-  /* Styles applied to the root element if TimelineOppositeContent isn't provided. */
-  missingOppositeContent: {
+  }),
+  ...(!styleProps.hasOppositeContent && {
     '&:before': {
       content: '""',
       flex: 1,
       padding: '6px 16px',
     },
-  },
-  /* Styles applied to the timeline content node. */
-  content: {},
-  /* Styles applied to the timeline opposite content node. */
-  oppositeContent: {},
-});
+  }),
+}));
 
-const TimelineItem = React.forwardRef(function TimelineItem(props, ref) {
-  const { classes, className, ...other } = props;
+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);
 
   let hasOppositeContent = false;
@@ -58,23 +80,21 @@ const TimelineItem = React.forwardRef(function TimelineItem(props, ref) {
     }
   });
 
+  const styleProps = {
+    ...props,
+    align,
+    hasOppositeContent,
+  };
+
+  const classes = useUtilityClasses(styleProps);
+
   return (
-    <TimelineItemContext.Provider
-      value={{ classes: { content: classes.content, oppositeContent: classes.oppositeContent } }}
-    >
-      <li
-        className={clsx(
-          classes.root,
-          classes[`align${capitalize(align)}`],
-          {
-            [classes.missingOppositeContent]: !hasOppositeContent,
-          },
-          className,
-        )}
-        ref={ref}
-        {...other}
-      />
-    </TimelineItemContext.Provider>
+    <TimelineItemRoot
+      className={clsx(classes.root, className)}
+      styleProps={styleProps}
+      ref={ref}
+      {...other}
+    />
   );
 });
 
@@ -95,6 +115,10 @@ TimelineItem.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: 'MuiTimelineItem' })(TimelineItem);
+export default TimelineItem;

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

@@ -1,20 +1,18 @@
 import * as React from 'react';
-import { getClasses, createMount, describeConformance } from 'test/utils';
-import TimelineItem from './TimelineItem';
+import { createClientRender, createMount, describeConformanceV5 } from 'test/utils';
+import TimelineItem, { timelineItemClasses as classes } from '@material-ui/lab/TimelineItem';
 
 describe('<TimelineItem />', () => {
+  const render = createClientRender();
   const mount = createMount();
-  let classes;
 
-  before(() => {
-    classes = getClasses(<TimelineItem />);
-  });
-
-  describeConformance(<TimelineItem />, () => ({
+  describeConformanceV5(<TimelineItem />, () => ({
     classes,
     inheritComponent: 'li',
+    render,
     mount,
+    muiName: 'MuiTimelineItem',
     refInstanceof: window.HTMLLIElement,
-    skip: ['componentProp'],
+    skip: ['componentProp', 'componentsProp', 'themeVariants'],
   }));
 });

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

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

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

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

packages/material-ui-lab/src/TimelineItem/timelineItemClasses.d.ts

@@ -0,0 +1,9 @@
+import { TimelineItemClassKey } from './TimelineItem';
+
+export type TimelineItemClasses = Record<TimelineItemClassKey, string>;
+
+declare const timelineItemClasses: TimelineItemClasses;
+
+export function getTimelineItemUtilityClass(slot: string): string;
+
+export default timelineItemClasses;

packages/material-ui-lab/src/TimelineItem/timelineItemClasses.js

@@ -0,0 +1,15 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getTimelineItemUtilityClass(slot) {
+  return generateUtilityClass('MuiTimelineItem', slot);
+}
+
+const timelineItemClasses = generateUtilityClasses('MuiTimelineItem', [
+  'root',
+  'alignLeft',
+  'alignRight',
+  'alignAlternate',
+  'missingOppositeContent',
+]);
+
+export default timelineItemClasses;

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

@@ -10,7 +10,6 @@ import { capitalize } from '@material-ui/core/utils';
 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 { getTimelineOppositeContentUtilityClass } from './timelineOppositeContentClasses';
 
 const overridesResolver = (props, styles) => {
@@ -58,7 +57,6 @@ const TimelineOppositeContent = React.forwardRef(function TimelineOppositeConten
   const { className, ...other } = props;
 
   const { align = 'left' } = React.useContext(TimelineContext);
-  const { classes: contextClasses = {} } = React.useContext(TimelineItemContext);
 
   const styleProps = {
     ...props,
@@ -70,7 +68,7 @@ const TimelineOppositeContent = React.forwardRef(function TimelineOppositeConten
   return (
     <TimelineOppositeContentRoot
       component="div"
-      className={clsx(classes.root, contextClasses.oppositeContent, className)}
+      className={clsx(classes.root, className)}
       styleProps={styleProps}
       ref={ref}
       {...other}