[test] Migrate regressions to emotion

test/regressions/TestViewer.js

@@ -1,37 +1,12 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useFakeTimers } from 'sinon';
-import { withStyles } from '@material-ui/styles';
-import { createTheme, StyledEngineProvider } from '@material-ui/core/styles';
-
-const styles = (theme) => ({
-  '@global': {
-    html: {
-      WebkitFontSmoothing: 'antialiased', // Antialiasing.
-      MozOsxFontSmoothing: 'grayscale', // Antialiasing.
-      // Do the opposite of the docs in order to help catching issues.
-      boxSizing: 'content-box',
-    },
-    '*, *::before, *::after': {
-      boxSizing: 'inherit',
-      // Disable transitions to avoid flaky screenshots
-      transition: 'none !important',
-      animation: 'none !important',
-    },
-    body: {
-      margin: 0,
-      overflowX: 'hidden',
-    },
-  },
-  root: {
-    backgroundColor: theme.palette.background.default,
-    display: 'inline-block',
-    padding: theme.spacing(1),
-  },
-});
+import Box from '@material-ui/core/Box';
+import GlobalStyles from '@material-ui/core/GlobalStyles';
+import { StyledEngineProvider } from '@material-ui/core/styles';
 
 function TestViewer(props) {
-  const { children, classes } = props;
+  const { children } = props;
 
   // We're simulating `act(() => ReactDOM.render(children))`
   // In the end children passive effects should've been flushed.
@@ -74,17 +49,39 @@ function TestViewer(props) {
   return (
     // TODO v5: remove once migration to emotion is completed
     <StyledEngineProvider injectFirst>
-      <div aria-busy={!ready} data-testid="testcase" className={classes.root}>
+      <GlobalStyles
+        styles={{
+          html: {
+            WebkitFontSmoothing: 'antialiased', // Antialiasing.
+            MozOsxFontSmoothing: 'grayscale', // Antialiasing.
+            // Do the opposite of the docs in order to help catching issues.
+            boxSizing: 'content-box',
+          },
+          '*, *::before, *::after': {
+            boxSizing: 'inherit',
+            // Disable transitions to avoid flaky screenshots
+            transition: 'none !important',
+            animation: 'none !important',
+          },
+          body: {
+            margin: 0,
+            overflowX: 'hidden',
+          },
+        }}
+      />
+      <Box
+        aria-busy={!ready}
+        data-testid="testcase"
+        sx={{ bgcolor: 'background.default', display: 'inline-block', p: 1 }}
+      >
         {children}
-      </div>
+      </Box>
     </StyledEngineProvider>
   );
 }
 
 TestViewer.propTypes = {
   children: PropTypes.node.isRequired,
-  classes: PropTypes.object.isRequired,
 };
 
-const defaultTheme = createTheme();
-export default withStyles(styles, { defaultTheme })(TestViewer);
+export default TestViewer;

test/regressions/fixtures/Menu/MenuContentAnchors.js

@@ -4,55 +4,36 @@ import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
-import { makeStyles } from '@material-ui/styles';
+import { styled } from '@material-ui/core/styles';
 
-const useMenuStyles = makeStyles({
-  anchorEl: {
-    // give the anchor enough space so that the menu can align the selected item
-    margin: '80px 0',
-  },
-  listItem: {
-    '&$listItemFocusVisible': {
-      border: '3px dashed black',
-    },
-    '&$listItemSelected': {
-      border: '3px dotted black',
-    },
-    '&$listItemFocusVisible$listItemSelected': {
-      border: '3px solid black',
-    },
-  },
-  listItemFocusVisible: {},
-  listItemSelected: {},
-});
+const MenuItemStyled = styled(MenuItem)(() => ({
+  '&.Mui-focusVisible': { border: '3px dashed black' },
+  '&.Mui-selected': { border: '3px dotted black' },
+  '&.Mui-focusVisible.Mui-selected': { border: '3px solid black' },
+}));
 
 /**
  * Item 1 or 2 can be pre-selected to check alignment between anchorEl and menuitem
  */
 function SimpleMenu({ selectedItem, ...props }) {
   const [anchorEl, setAnchorEl] = React.useState(null);
-  const classes = useMenuStyles();
-
-  const listItemClasses = {
-    root: classes.listItem,
-    focusVisible: classes.listItemFocusVisible,
-    selected: classes.listItemSelected,
-  };
 
   return (
     <Grid item>
-      <Button className={classes.anchorEl} ref={setAnchorEl}>
+      <Button
+        style={{
+          // give the anchor enough space so that the menu can align the selected item
+          margin: '80px 0',
+        }}
+        ref={setAnchorEl}
+      >
         open button
       </Button>
       <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} transitionDuration={0} {...props}>
         {null}
-        <MenuItem classes={listItemClasses} selected={selectedItem === 1}>
-          Item 1
-        </MenuItem>
-        <MenuItem classes={listItemClasses} selected={selectedItem === 2}>
-          Item 2
-        </MenuItem>
-        <MenuItem classes={listItemClasses}>Item 3</MenuItem>
+        <MenuItemStyled selected={selectedItem === 1}>Item 1</MenuItemStyled>
+        <MenuItemStyled selected={selectedItem === 2}>Item 2</MenuItemStyled>
+        <MenuItemStyled>Item 3</MenuItemStyled>
       </Menu>
     </Grid>
   );

test/regressions/fixtures/Select/SelectChips.js

@@ -12,12 +12,7 @@ export default function SelectChips() {
       value={values}
       style={{ maxWidth: 100 }}
       renderValue={(selected) => (
-        <div
-          style={{
-            display: 'flex',
-            flexWrap: 'wrap',
-          }}
-        >
+        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
           {selected.map((value) => (
             <Chip key={value} label={value} style={{ margin: 2 }} />
           ))}

test/regressions/fixtures/Textarea/Textarea.js

@@ -1,28 +1,10 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/styles';
 import Input from '@material-ui/core/Input';
 
-const useStyles = makeStyles({
-  input: {
-    width: 200,
-  },
-  input1: {
-    fontSize: 13,
-    boxSizing: 'border-box',
-    border: '10px solid black',
-  },
-  input2: {
-    fontSize: 13,
-    boxSizing: 'content-box',
-    padding: 10,
-  },
-});
-
 function Textarea() {
   const [value, setValue] = React.useState(
     `Hey, sorry for being late to respond. Here is a codesandbox. It actually happens when I reduce the font-size of the input. Try adding some text or paste a long paragraph and you will the bottom margin being increased. It works fine with the default font-size.`,
   );
-  const classes = useStyles();
 
   const handleChange = (event) => {
     setValue(event.target.value);
@@ -31,34 +13,32 @@ function Textarea() {
   return (
     <div>
       <Input
-        className={classes.input}
-        multiline
-        value={value}
-        onChange={handleChange}
-        classes={{
-          input: classes.input1,
+        sx={{
+          width: 200,
+          '& .MuiInput-input': {
+            fontSize: 13,
+            boxSizing: 'border-box',
+            border: '10px solid black',
+          },
         }}
-      />
-      <Input
-        className={classes.input}
         multiline
         value={value}
         onChange={handleChange}
-        classes={{
-          input: classes.input2,
-        }}
       />
-      <Input className={classes.input} multiline placeholder="rows" rows={3} />
       <Input
-        className={classes.input}
+        sx={{
+          width: 200,
+          '& .MuiInput-input': { fontSize: 13, boxSizing: 'content-box', padding: '10px' },
+        }}
         multiline
         value={value}
         onChange={handleChange}
-        maxRows={4}
       />
-      <Input className={classes.input} multiline placeholder="long placeholder long placeholder" />
+      <Input style={{ width: 200 }} multiline placeholder="rows" rows={3} />
+      <Input style={{ width: 200 }} multiline value={value} onChange={handleChange} maxRows={4} />
+      <Input style={{ width: 200 }} multiline placeholder="long placeholder long placeholder" />
       <Input
-        className={classes.input}
+        style={{ width: 200 }}
         multiline
         defaultValue="long default value long default value"
       />