[docs] Migrate List demos to emotion (#25266)

mui · Mar 9, 2021 · b96916d · b96916d
1 parent 1c07195
commit b96916d
Show file tree

Hide file tree

Showing 26 changed files with 128 additions and 414 deletions.
diff --git a/docs/src/pages/components/lists/AlignItemsList.js b/docs/src/pages/components/lists/AlignItemsList.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import Divider from '@material-ui/core/Divider';
@@ -8,22 +7,9 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import Avatar from '@material-ui/core/Avatar';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-  inline: {
-    display: 'inline',
-  },
-}));
-
 export default function AlignItemsList() {
-  const classes = useStyles();
-
   return (
-    <List className={classes.root}>
+    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       <ListItem alignItems="flex-start">
         <ListItemAvatar>
           <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
@@ -33,9 +19,9 @@ export default function AlignItemsList() {
           secondary={
             <React.Fragment>
               <Typography
+                sx={{ display: 'inline' }}
                 component="span"
                 variant="body2"
-                className={classes.inline}
                 color="textPrimary"
               >
                 Ali Connors
@@ -55,9 +41,9 @@ export default function AlignItemsList() {
           secondary={
             <React.Fragment>
               <Typography
+                sx={{ display: 'inline' }}
                 component="span"
                 variant="body2"
-                className={classes.inline}
                 color="textPrimary"
               >
                 to Scott, Alex, Jennifer
@@ -77,9 +63,9 @@ export default function AlignItemsList() {
           secondary={
             <React.Fragment>
               <Typography
+                sx={{ display: 'inline' }}
                 component="span"
                 variant="body2"
-                className={classes.inline}
                 color="textPrimary"
               >
                 Sandra Adams

diff --git a/docs/src/pages/components/lists/AlignItemsList.tsx b/docs/src/pages/components/lists/AlignItemsList.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import Divider from '@material-ui/core/Divider';
@@ -8,24 +7,9 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import Avatar from '@material-ui/core/Avatar';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-    inline: {
-      display: 'inline',
-    },
-  }),
-);
-
 export default function AlignItemsList() {
-  const classes = useStyles();
-
   return (
-    <List className={classes.root}>
+    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       <ListItem alignItems="flex-start">
         <ListItemAvatar>
           <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
@@ -35,9 +19,9 @@ export default function AlignItemsList() {
           secondary={
             <React.Fragment>
               <Typography
+                sx={{ display: 'inline' }}
                 component="span"
                 variant="body2"
-                className={classes.inline}
                 color="textPrimary"
               >
                 Ali Connors
@@ -57,9 +41,9 @@ export default function AlignItemsList() {
           secondary={
             <React.Fragment>
               <Typography
+                sx={{ display: 'inline' }}
                 component="span"
                 variant="body2"
-                className={classes.inline}
                 color="textPrimary"
               >
                 to Scott, Alex, Jennifer
@@ -79,9 +63,9 @@ export default function AlignItemsList() {
           secondary={
             <React.Fragment>
               <Typography
+                sx={{ display: 'inline' }}
                 component="span"
                 variant="body2"
-                className={classes.inline}
                 color="textPrimary"
               >
                 Sandra Adams

diff --git a/docs/src/pages/components/lists/CheckboxList.js b/docs/src/pages/components/lists/CheckboxList.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
@@ -9,16 +8,7 @@ import Checkbox from '@material-ui/core/Checkbox';
 import IconButton from '@material-ui/core/IconButton';
 import CommentIcon from '@material-ui/icons/Comment';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export default function CheckboxList() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState([0]);
 
   const handleToggle = (value) => () => {
@@ -35,7 +25,7 @@ export default function CheckboxList() {
   };
 
   return (
-    <List className={classes.root}>
+    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       {[0, 1, 2, 3].map((value) => {
         const labelId = `checkbox-list-label-${value}`;
 

diff --git a/docs/src/pages/components/lists/CheckboxList.tsx b/docs/src/pages/components/lists/CheckboxList.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
@@ -9,18 +8,7 @@ import Checkbox from '@material-ui/core/Checkbox';
 import IconButton from '@material-ui/core/IconButton';
 import CommentIcon from '@material-ui/icons/Comment';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
-
 export default function CheckboxList() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState([0]);
 
   const handleToggle = (value: number) => () => {
@@ -37,7 +25,7 @@ export default function CheckboxList() {
   };
 
   return (
-    <List className={classes.root}>
+    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       {[0, 1, 2, 3].map((value) => {
         const labelId = `checkbox-list-label-${value}`;
 

diff --git a/docs/src/pages/components/lists/CheckboxListSecondary.js b/docs/src/pages/components/lists/CheckboxListSecondary.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
@@ -8,16 +7,7 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import Checkbox from '@material-ui/core/Checkbox';
 import Avatar from '@material-ui/core/Avatar';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export default function CheckboxListSecondary() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState([1]);
 
   const handleToggle = (value) => () => {
@@ -34,7 +24,7 @@ export default function CheckboxListSecondary() {
   };
 
   return (
-    <List dense className={classes.root}>
+    <List dense sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       {[0, 1, 2, 3].map((value) => {
         const labelId = `checkbox-list-secondary-label-${value}`;
         return (

diff --git a/docs/src/pages/components/lists/CheckboxListSecondary.tsx b/docs/src/pages/components/lists/CheckboxListSecondary.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
@@ -8,18 +7,7 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import Checkbox from '@material-ui/core/Checkbox';
 import Avatar from '@material-ui/core/Avatar';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
-
 export default function CheckboxListSecondary() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState([1]);
 
   const handleToggle = (value: number) => () => {
@@ -36,7 +24,7 @@ export default function CheckboxListSecondary() {
   };
 
   return (
-    <List dense className={classes.root}>
+    <List dense sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       {[0, 1, 2, 3].map((value) => {
         const labelId = `checkbox-list-secondary-label-${value}`;
         return (

diff --git a/docs/src/pages/components/lists/FolderList.js b/docs/src/pages/components/lists/FolderList.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -9,19 +8,9 @@ import ImageIcon from '@material-ui/icons/Image';
 import WorkIcon from '@material-ui/icons/Work';
 import BeachAccessIcon from '@material-ui/icons/BeachAccess';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export default function FolderList() {
-  const classes = useStyles();
-
   return (
-    <List className={classes.root}>
+    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       <ListItem>
         <ListItemAvatar>
           <Avatar>

diff --git a/docs/src/pages/components/lists/FolderList.tsx b/docs/src/pages/components/lists/FolderList.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -9,21 +8,9 @@ import ImageIcon from '@material-ui/icons/Image';
 import WorkIcon from '@material-ui/icons/Work';
 import BeachAccessIcon from '@material-ui/icons/BeachAccess';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
-
 export default function FolderList() {
-  const classes = useStyles();
-
   return (
-    <List className={classes.root}>
+    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       <ListItem>
         <ListItemAvatar>
           <Avatar>

diff --git a/docs/src/pages/components/lists/GutterlessList.js b/docs/src/pages/components/lists/GutterlessList.js
@@ -1,25 +1,14 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import ListItemText from '@material-ui/core/ListItemText';
 import CommentIcon from '@material-ui/icons/Comment';
 import IconButton from '@material-ui/core/IconButton';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export default function GutterlessList() {
-  const classes = useStyles();
-
   return (
-    <List className={classes.root}>
+    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       {[1, 2, 3].map((value) => (
         <ListItem key={value} disableGutters>
           <ListItemText primary={`Line item ${value}`} />

diff --git a/docs/src/pages/components/lists/GutterlessList.tsx b/docs/src/pages/components/lists/GutterlessList.tsx
@@ -1,27 +1,14 @@
 import * as React from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import ListItemText from '@material-ui/core/ListItemText';
 import CommentIcon from '@material-ui/icons/Comment';
 import IconButton from '@material-ui/core/IconButton';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
-
 export default function GutterlessList() {
-  const classes = useStyles();
-
   return (
-    <List className={classes.root}>
+    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       {[1, 2, 3].map((value) => (
         <ListItem key={value} disableGutters>
           <ListItemText primary={`Line item ${value}`} />