[docs] Migrate Tooltip, Steppers demos to emotion (#26165)

mui · May 7, 2021 · 7524ba5 · 7524ba5
1 parent 1656b89
commit 7524ba5
Show file tree

Hide file tree

Showing 26 changed files with 384 additions and 666 deletions.
diff --git a/docs/src/pages/components/steppers/CustomizedSteppers.js b/docs/src/pages/components/steppers/CustomizedSteppers.js
@@ -1,87 +1,73 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles, withStyles } from '@material-ui/core/styles';
-import clsx from 'clsx';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
 import Check from '@material-ui/icons/Check';
 import SettingsIcon from '@material-ui/icons/Settings';
 import GroupAddIcon from '@material-ui/icons/GroupAdd';
 import VideoLabelIcon from '@material-ui/icons/VideoLabel';
-import StepConnector from '@material-ui/core/StepConnector';
+import StepConnector, {
+  stepConnectorClasses,
+} from '@material-ui/core/StepConnector';
 
-const useStyles = makeStyles({
-  root: {
-    width: '100%',
-  },
-  quontoStepper: {
-    marginBottom: 32,
-  },
-});
-
-const QontoConnector = withStyles({
-  alternativeLabel: {
+const QontoConnector = styled(StepConnector)({
+  [`&.${stepConnectorClasses.alternativeLabel}`]: {
     top: 10,
     left: 'calc(-50% + 16px)',
     right: 'calc(50% + 16px)',
   },
-  active: {
-    '& $line': {
+  [`&.${stepConnectorClasses.active}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
       borderColor: '#784af4',
     },
   },
-  completed: {
-    '& $line': {
+  [`&.${stepConnectorClasses.completed}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
       borderColor: '#784af4',
     },
   },
-  line: {
+  [`& .${stepConnectorClasses.line}`]: {
     borderColor: '#eaeaf0',
     borderTopWidth: 3,
     borderRadius: 1,
   },
-})(StepConnector);
+});
 
-const useQontoStepIconStyles = makeStyles({
-  root: {
-    color: '#eaeaf0',
-    display: 'flex',
-    height: 22,
-    alignItems: 'center',
-  },
-  active: {
+const QontoStepIconRoot = styled('div')(({ styleProps = {} }) => ({
+  color: '#eaeaf0',
+  display: 'flex',
+  height: 22,
+  alignItems: 'center',
+  ...(!!styleProps.active && {
     color: '#784af4',
+  }),
+  '& .QontoStepIcon-completedIcon': {
+    color: '#784af4',
+    zIndex: 1,
+    fontSize: 18,
   },
-  circle: {
+  '& .QontoStepIcon-circle': {
     width: 8,
     height: 8,
     borderRadius: '50%',
     backgroundColor: 'currentColor',
   },
-  completed: {
-    color: '#784af4',
-    zIndex: 1,
-    fontSize: 18,
-  },
-});
+}));
 
 function QontoStepIcon(props) {
-  const classes = useQontoStepIconStyles();
-  const { active, completed } = props;
+  const { active, completed, className } = props;
 
   return (
-    <div
-      className={clsx(classes.root, {
-        [classes.active]: active,
-      })}
-    >
+    <QontoStepIconRoot styleProps={{ active }} className={className}>
       {completed ? (
-        <Check className={classes.completed} />
+        <Check className="QontoStepIcon-completedIcon" />
       ) : (
-        <div className={classes.circle} />
+        <div className="QontoStepIcon-circle" />
       )}
-    </div>
+    </QontoStepIconRoot>
   );
 }
 
@@ -91,63 +77,61 @@ QontoStepIcon.propTypes = {
    * @default false
    */
   active: PropTypes.bool,
+  className: PropTypes.string,
   /**
    * Mark the step as completed. Is passed to child components.
    * @default false
    */
   completed: PropTypes.bool,
 };
 
-const ColorlibConnector = withStyles({
-  alternativeLabel: {
+const ColorlibConnector = styled(StepConnector)({
+  [`&.${stepConnectorClasses.alternativeLabel}`]: {
     top: 22,
   },
-  active: {
-    '& $line': {
+  [`&.${stepConnectorClasses.active}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
       backgroundImage:
         'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
     },
   },
-  completed: {
-    '& $line': {
+  [`&.${stepConnectorClasses.completed}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
       backgroundImage:
         'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
     },
   },
-  line: {
+  [`& .${stepConnectorClasses.line}`]: {
     height: 3,
     border: 0,
     backgroundColor: '#eaeaf0',
     borderRadius: 1,
   },
-})(StepConnector);
+});
 
-const useColorlibStepIconStyles = makeStyles({
-  root: {
-    backgroundColor: '#ccc',
-    zIndex: 1,
-    color: '#fff',
-    width: 50,
-    height: 50,
-    display: 'flex',
-    borderRadius: '50%',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  active: {
+const ColorlibStepIconRoot = styled('div')(({ styleProps = {} }) => ({
+  backgroundColor: '#ccc',
+  zIndex: 1,
+  color: '#fff',
+  width: 50,
+  height: 50,
+  display: 'flex',
+  borderRadius: '50%',
+  justifyContent: 'center',
+  alignItems: 'center',
+  ...(!!styleProps.active && {
     backgroundImage:
       'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
     boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',
-  },
-  completed: {
+  }),
+  ...(!!styleProps.completed && {
     backgroundImage:
       'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
-  },
-});
+  }),
+}));
 
 function ColorlibStepIcon(props) {
-  const classes = useColorlibStepIconStyles();
-  const { active, completed } = props;
+  const { active, completed, className } = props;
 
   const icons = {
     1: <SettingsIcon />,
@@ -156,14 +140,9 @@ function ColorlibStepIcon(props) {
   };
 
   return (
-    <div
-      className={clsx(classes.root, {
-        [classes.active]: active,
-        [classes.completed]: completed,
-      })}
-    >
+    <ColorlibStepIconRoot styleProps={{ completed, active }} className={className}>
       {icons[String(props.icon)]}
-    </div>
+    </ColorlibStepIconRoot>
   );
 }
 
@@ -173,6 +152,7 @@ ColorlibStepIcon.propTypes = {
    * @default false
    */
   active: PropTypes.bool,
+  className: PropTypes.string,
   /**
    * Mark the step as completed. Is passed to child components.
    * @default false
@@ -187,15 +167,13 @@ ColorlibStepIcon.propTypes = {
 const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
 
 export default function CustomizedSteppers() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box sx={{ width: '100%' }}>
       <Stepper
         alternativeLabel
         activeStep={1}
         connector={<QontoConnector />}
-        className={classes.quontoStepper}
+        sx={{ mb: 4 }}
       >
         {steps.map((label) => (
           <Step key={label}>
@@ -210,6 +188,6 @@ export default function CustomizedSteppers() {
           </Step>
         ))}
       </Stepper>
-    </div>
+    </Box>
   );
 }