[Timeline] Migrate Timeline to emotion

docs/pages/api-docs/timeline.json

@@ -8,7 +8,9 @@
       "default": "'left'"
     },
     "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" } }
+    "classes": { "type": { "name": "object" } },
+    "className": { "type": { "name": "string" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "Timeline",
   "styles": {
@@ -21,6 +23,6 @@
   "filename": "/packages/material-ui-lab/src/Timeline/Timeline.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/timeline/\">Timeline</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

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

@@ -3,7 +3,9 @@
   "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 <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.",
+    "className": "className applied to the root element.",
+    "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." },

packages/material-ui-lab/src/Timeline/Timeline.test.tsx

@@ -1,20 +1,18 @@
 import * as React from 'react';
-import { getClasses, createMount, describeConformance } from 'test/utils';
-import Timeline from './Timeline';
+import { createClientRender, createMount, describeConformanceV5 } from 'test/utils';
+import Timeline, { timelineClasses as classes } from './index';
 
 describe('<Timeline />', () => {
   const mount = createMount();
-  let classes: Record<string, string>;
+  const render = createClientRender();
 
-  before(() => {
-    classes = getClasses(<Timeline />);
-  });
-
-  describeConformance(<Timeline />, () => ({
+  describeConformanceV5(<Timeline />, () => ({
     classes,
     inheritComponent: 'ul',
     mount,
+    render,
+    muiName: 'MuiTimeline',
     refInstanceof: window.HTMLUListElement,
-    skip: ['componentProp'],
+    skip: ['componentProp', 'componentsProp', 'themeVariants'],
   }));
 });

packages/material-ui-lab/src/Timeline/Timeline.tsx

@@ -1,30 +1,22 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { SxProps } from '@material-ui/system';
 // eslint-disable-next-line no-restricted-imports -- importing types
 import { InternalStandardProps as StandardProps } from '@material-ui/core';
 import { capitalize } from '@material-ui/core/utils';
-import { MuiStyles, withStyles } from '@material-ui/core/styles';
+import { deepmerge } from '@material-ui/utils';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import {
+  experimentalStyled,
+  unstable_useThemeProps as useThemeProps,
+  Theme,
+} from '@material-ui/core/styles';
 import TimelineContext from './TimelineContext';
+import { getTimelineUtilityClass } from './timelineClasses';
 
 export type TimelineClassKey = 'root' | 'alignLeft' | 'alignRight' | 'alignAlternate';
 
-export const styles: MuiStyles<TimelineClassKey> = {
-  /* Styles applied to the root element. */
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    padding: '6px 16px',
-    flexGrow: 1,
-  },
-  /* Styles applied to the root element if `align="left"`. */
-  alignLeft: {},
-  /* Styles applied to the root element if `align="right"`. */
-  alignRight: {},
-  /* Styles applied to the root element if `align="alternate"`. */
-  alignAlternate: {},
-};
-
 export interface TimelineProps extends StandardProps<React.HTMLAttributes<HTMLUListElement>> {
   /**
    * The position where the timeline's content should appear.
@@ -48,20 +40,75 @@ export interface TimelineProps extends StandardProps<React.HTMLAttributes<HTMLUL
     /** Styles applied to the root element if `align="alternate"`. */
     alignAlternate?: string;
   };
+
+  /**
+   * className applied to the root element.
+   */
+  className?: string;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
 }
 
-const Timeline = React.forwardRef<HTMLUListElement, TimelineProps>(function Timeline(props, ref) {
-  const { align = 'left', classes, className, ...other } = props;
+type Styles = Record<TimelineClassKey, any>;
+type StyleProps = TimelineProps;
+
+const useUtilityClasses = (styleProps: StyleProps) => {
+  const { align, classes } = styleProps;
+
+  const slots = {
+    root: ['root', align && `align${capitalize(align)}`],
+  };
+
+  return composeClasses(slots, getTimelineUtilityClass, classes);
+};
+
+const TimelineRoot = experimentalStyled(
+  'ul' as const,
+  {},
+  {
+    name: 'MuiTimeline',
+    slot: 'Root',
+    // @ts-ignore TODO should fix the type in experimentalStyled
+    overridesResolver: (props: { styleProps: StyleProps }, styles: Styles) => {
+      const { styleProps } = props;
+      return deepmerge(
+        {
+          ...(styleProps.align &&
+            styles[`align${capitalize(styleProps.align)}` as TimelineClassKey]),
+        },
+        styles.root || {},
+      );
+    },
+  },
+)({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '6px 16px',
+  flexGrow: 1,
+});
 
+/**
+ *
+ * Demos:
+ *
+ * - [Timeline](https://material-ui.com/components/timeline/)
+ *
+ * API:
+ *
+ * - [Timeline API](https://material-ui.com/api/timeline/)
+ */
+const Timeline = React.forwardRef<HTMLUListElement, TimelineProps>(function Timeline(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiTimeline' });
+  const { align = 'left', className, ...other } = props;
+  const styleProps = { ...props, align };
+  const classes = useUtilityClasses(styleProps);
   return (
     <TimelineContext.Provider value={{ align }}>
-      <ul
-        className={clsx(
-          classes!.root,
-          // @ts-expect-error unsafe string concat
-          classes[`align${capitalize(align)}`],
-          className,
-        )}
+      <TimelineRoot
+        className={clsx(classes.root, className)}
+        styleProps={styleProps}
         // @ts-expect-error TypeScript bug, need to keep unknown for DX
         ref={ref}
         {...other}
@@ -89,9 +136,13 @@ Timeline.propTypes /* remove-proptypes */ = {
    */
   classes: PropTypes.object,
   /**
-   * @ignore
+   * className applied to the root element.
    */
   className: PropTypes.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
 } as any;
 
 /**
@@ -104,4 +155,4 @@ Timeline.propTypes /* remove-proptypes */ = {
  *
  * - [Timeline API](https://material-ui.com/api/timeline/)
  */
-export default withStyles(styles, { name: 'MuiTimeline' })(Timeline);
+export default Timeline;

packages/material-ui-lab/src/Timeline/index.tsx

@@ -2,3 +2,6 @@ export { default } from './Timeline';
 
 export type TimelineClassKey = import('./Timeline').TimelineClassKey;
 export type TimelineProps = import('./Timeline').TimelineProps;
+
+export { default as timelineClasses } from './timelineClasses';
+export * from './timelineClasses';

packages/material-ui-lab/src/Timeline/timelineClasses.ts

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

packages/material-ui-unstyled/src/composeClasses/composeClasses.ts

@@ -1,5 +1,5 @@
 export default function composeClasses<ClassKey extends string>(
-  slots: Record<ClassKey, ReadonlyArray<string | false>>,
+  slots: Record<ClassKey, ReadonlyArray<string | false | undefined>>,
   getUtilityClass: (slot: string) => string,
   classes: Record<string, string> | undefined,
 ): Record<ClassKey, string> {