[Timeline] Migrate TimelineOppositeContent to emotion

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

@@ -1,11 +1,12 @@
 {
   "props": {
     "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" } }
+    "classes": { "type": { "name": "object" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "TimelineOppositeContent",
   "styles": {
-    "classes": ["root", "alignRight"],
+    "classes": ["root", "alignRight", "alignLeft", "alignAlternate"],
     "globalClasses": {},
     "name": "MuiTimelineOppositeContent"
   },
@@ -14,6 +15,6 @@
   "filename": "/packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.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-opposite-content/timeline-opposite-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/TimelineOppositeContent/TimelineOppositeContent.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 TimelineOppositeContentProps extends StandardProps<TypographyProps> {
@@ -14,7 +16,15 @@ export interface TimelineOppositeContentProps extends StandardProps<TypographyPr
     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 TimelineOppositeContentClassKey = keyof NonNullable<

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

@@ -1,41 +1,77 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import {
+  experimentalStyled,
+  unstable_useThemeProps as useThemeProps,
+} from '@material-ui/core/styles';
+import { deepmerge } from '@material-ui/utils';
 import { capitalize } from '@material-ui/core/utils';
-import { withStyles } 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 { getTimelineOppositeContentUtilityClass } from './timelineOppositeContentClasses';
 
-export const styles = () => ({
-  /* Styles applied to the root element. */
-  root: {
-    padding: '6px 16px',
-    marginRight: 'auto',
-    textAlign: 'right',
-    flex: 1,
+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, getTimelineOppositeContentUtilityClass, classes);
+};
+
+const TimelineOppositeContentRoot = experimentalStyled(
+  Typography,
+  {},
+  {
+    name: 'MuiTimelineOppositeContent',
+    slot: 'Root',
+    overridesResolver,
   },
+)(({ styleProps }) => ({
+  /* Styles applied to the root element. */
+  padding: '6px 16px',
+  marginRight: 'auto',
+  textAlign: 'right',
+  flex: 1,
   /* Styles applied to the root element if `align="right"`. */
-  alignRight: {
+  ...(styleProps.align === 'right' && {
     textAlign: 'left',
-  },
-});
+  }),
+}));
 
-const TimelineOppositeContent = React.forwardRef(function TimelineOppositeContent(props, ref) {
-  const { classes, className, ...other } = props;
+const TimelineOppositeContent = React.forwardRef(function TimelineOppositeContent(inProps, ref) {
+  const props = useThemeProps({ props: inProps, name: 'MuiTimelineOppositeContent' });
+  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
+    <TimelineOppositeContentRoot
       component="div"
-      className={clsx(
-        classes.root,
-        contextClasses.oppositeContent,
-        classes[`align${capitalize(align)}`],
-        className,
-      )}
+      className={clsx(classes.root, contextClasses.oppositeContent, className)}
+      styleProps={styleProps}
       ref={ref}
       {...other}
     />
@@ -59,8 +95,12 @@ TimelineOppositeContent.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.object,
 };
 
 TimelineOppositeContent.muiName = 'TimelineOppositeContent';
 
-export default withStyles(styles, { name: 'MuiTimelineOppositeContent' })(TimelineOppositeContent);
+export default TimelineOppositeContent;

packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContent.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 TimelineOppositeContent from './TimelineOppositeContent';
+import Timeline from '@material-ui/lab/Timeline';
+import TimelineOppositeContent, {
+  timelineOppositeContentClasses as classes,
+} from '@material-ui/lab/TimelineOppositeContent';
 
 describe('<TimelineOppositeContent />', () => {
+  const render = createClientRender();
   const mount = createMount();
-  let classes;
 
-  before(() => {
-    classes = getClasses(<TimelineOppositeContent />);
-  });
-
-  describeConformance(<TimelineOppositeContent />, () => ({
+  describeConformanceV5(<TimelineOppositeContent />, () => ({
     classes,
     inheritComponent: Typography,
+    render,
     mount,
+    muiName: 'MuiTimelineOppositeContent',
     refInstanceof: window.HTMLDivElement,
-    skip: ['componentProp'],
+    skip: ['componentProp', 'componentsProp', 'themeVariants'],
   }));
+
+  it('when align right should have alignRight class', () => {
+    const { getByText } = render(
+      <Timeline align="right">
+        <TimelineOppositeContent>content</TimelineOppositeContent>
+      </Timeline>,
+    );
+
+    expect(getByText('content')).to.have.class(classes.alignRight);
+  });
 });

packages/material-ui-lab/src/TimelineOppositeContent/TimelineOppositeContentClasses.d.ts

@@ -0,0 +1,9 @@
+import { TimelineOppositeContentClassKey } from './TimelineOppositeContent';
+
+export type TimelineOppositeContentClasses = Record<TimelineOppositeContentClassKey, string>;
+
+declare const timelineOppositeContentClasses: TimelineOppositeContentClasses;
+
+export function getTimelineOppositeContentUtilityClass(slot: string): string;
+
+export default timelineOppositeContentClasses;

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

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

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

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

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

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