[Timeline] Migrate TimelineSeparator to emotion (#25666)

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

@@ -1,7 +1,8 @@
 {
   "props": {
     "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" } }
+    "classes": { "type": { "name": "object" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "TimelineSeparator",
   "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiTimelineSeparator" },
@@ -10,6 +11,6 @@
   "filename": "/packages/material-ui-lab/src/TimelineSeparator/TimelineSeparator.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-separator/timeline-separator.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." } }
 }

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

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { InternalStandardProps as StandardProps } from '@material-ui/core';
+import { Theme } from '@material-ui/styles';
+import { SxProps } from '@material-ui/system';
 
 export interface TimelineSeparatorProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
@@ -14,6 +16,10 @@ export interface TimelineSeparatorProps
     /** Styles applied to the root element. */
     root?: string;
   };
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
 }
 
 export type TimelineSeparatorClassKey = keyof NonNullable<TimelineSeparatorProps['classes']>;

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

@@ -1,22 +1,60 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { withStyles } from '@material-ui/core/styles';
-
-export const styles = () => ({
-  /* Styles applied to the root element. */
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    alignItems: 'center',
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import {
+  experimentalStyled,
+  unstable_useThemeProps as useThemeProps,
+} from '@material-ui/core/styles';
+import { getTimelineSeparatorUtilityClass } from './timelineSeparatorClasses';
+
+const overridesResolver = (props, styles) => styles.root || {};
+
+const useUtilityClasses = (styleProps) => {
+  const { classes } = styleProps;
+
+  const slots = {
+    root: ['root'],
+  };
+
+  return composeClasses(slots, getTimelineSeparatorUtilityClass, classes);
+};
+
+const TimelineSeparatorRoot = experimentalStyled(
+  'div',
+  {},
+  {
+    name: 'MuiTimelineSeparator',
+    slot: 'Root',
+    overridesResolver,
   },
+)({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 0,
+  alignItems: 'center',
 });
 
-const TimelineSeparator = React.forwardRef(function TimelineSeparator(props, ref) {
-  const { classes, className, ...other } = props;
+const TimelineSeparator = React.forwardRef(function TimelineSeparator(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiTimelineSeparator',
+  });
 
-  return <div className={clsx(classes.root, className)} ref={ref} {...other} />;
+  const { className, ...other } = props;
+
+  const styleProps = { ...props };
+
+  const classes = useUtilityClasses(styleProps);
+
+  return (
+    <TimelineSeparatorRoot
+      className={clsx(classes.root, className)}
+      styleProps={styleProps}
+      ref={ref}
+      {...other}
+    />
+  );
 });
 
 TimelineSeparator.propTypes /* remove-proptypes */ = {
@@ -36,6 +74,10 @@ TimelineSeparator.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: 'MuiTimelineSeparator' })(TimelineSeparator);
+export default TimelineSeparator;

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

@@ -1,20 +1,19 @@
 import * as React from 'react';
-import { getClasses, createMount, describeConformance } from 'test/utils';
+import { createClientRender, createMount, describeConformanceV5 } from 'test/utils';
 import TimelineSeparator from './TimelineSeparator';
+import classes from './timelineSeparatorClasses';
 
 describe('<TimelineSeparator />', () => {
+  const render = createClientRender();
   const mount = createMount();
-  let classes;
 
-  before(() => {
-    classes = getClasses(<TimelineSeparator />);
-  });
-
-  describeConformance(<TimelineSeparator />, () => ({
+  describeConformanceV5(<TimelineSeparator />, () => ({
     classes,
     inheritComponent: 'div',
+    render,
     mount,
+    muiName: 'MuiTimelineSeparator',
     refInstanceof: window.HTMLDivElement,
-    skip: ['componentProp'],
+    skip: ['componentProp', 'componentsProp', 'themeVariants'],
   }));
 });

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

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

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

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

packages/material-ui-lab/src/TimelineSeparator/timelineSeparatorClasses.d.ts

@@ -0,0 +1,9 @@
+import { TimelineSeparatorClassKey } from './TimelineSeparator';
+
+export type TimelineSeparatorClasses = Record<TimelineSeparatorClassKey, string>;
+
+declare const timelineSeparatorClasses: TimelineSeparatorClasses;
+
+export function getTimelineSeparatorUtilityClass(slot: string): string;
+
+export default timelineSeparatorClasses;

packages/material-ui-lab/src/TimelineSeparator/timelineSeparatorClasses.js

@@ -0,0 +1,9 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getTimelineSeparatorUtilityClass(slot) {
+  return generateUtilityClass('MuiTimelineSeparator', slot);
+}
+
+const timelineSeparatorClasses = generateUtilityClasses('MuiTimelineSeparator', ['root']);
+
+export default timelineSeparatorClasses;