[docs] Don't suggest putting a Switch inside a ListItemSecondaryAction (

mui#23018)
andriy-shymkiv · Oct 13, 2020 · 6f59621 · 6f59621
1 parent f4a6c00
commit 6f59621
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 48 deletions.
diff --git a/docs/src/pages/components/lists/AlignItemsList.js b/docs/src/pages/components/lists/AlignItemsList.js
@@ -11,7 +11,7 @@ import Typography from '@material-ui/core/Typography';
 const useStyles = makeStyles((theme) => ({
   root: {
     width: '100%',
-    maxWidth: '36ch',
+    maxWidth: 360,
     backgroundColor: theme.palette.background.paper,
   },
   inline: {

diff --git a/docs/src/pages/components/lists/AlignItemsList.tsx b/docs/src/pages/components/lists/AlignItemsList.tsx
@@ -12,7 +12,7 @@ const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       width: '100%',
-      maxWidth: '36ch',
+      maxWidth: 360,
       backgroundColor: theme.palette.background.paper,
     },
     inline: {

diff --git a/docs/src/pages/components/lists/SwitchListSecondary.js b/docs/src/pages/components/lists/SwitchListSecondary.js
@@ -3,7 +3,6 @@ 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';
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import ListItemText from '@material-ui/core/ListItemText';
 import ListSubheader from '@material-ui/core/ListSubheader';
 import Switch from '@material-ui/core/Switch';
@@ -45,32 +44,28 @@ export default function SwitchListSecondary() {
           <WifiIcon />
         </ListItemIcon>
         <ListItemText id="switch-list-label-wifi" primary="Wi-Fi" />
-        <ListItemSecondaryAction>
-          <Switch
-            edge="end"
-            onChange={handleToggle('wifi')}
-            checked={checked.indexOf('wifi') !== -1}
-            inputProps={{
-              'aria-labelledby': 'switch-list-label-wifi',
-            }}
-          />
-        </ListItemSecondaryAction>
+        <Switch
+          edge="end"
+          onChange={handleToggle('wifi')}
+          checked={checked.indexOf('wifi') !== -1}
+          inputProps={{
+            'aria-labelledby': 'switch-list-label-wifi',
+          }}
+        />
       </ListItem>
       <ListItem>
         <ListItemIcon>
           <BluetoothIcon />
         </ListItemIcon>
         <ListItemText id="switch-list-label-bluetooth" primary="Bluetooth" />
-        <ListItemSecondaryAction>
-          <Switch
-            edge="end"
-            onChange={handleToggle('bluetooth')}
-            checked={checked.indexOf('bluetooth') !== -1}
-            inputProps={{
-              'aria-labelledby': 'switch-list-label-bluetooth',
-            }}
-          />
-        </ListItemSecondaryAction>
+        <Switch
+          edge="end"
+          onChange={handleToggle('bluetooth')}
+          checked={checked.indexOf('bluetooth') !== -1}
+          inputProps={{
+            'aria-labelledby': 'switch-list-label-bluetooth',
+          }}
+        />
       </ListItem>
     </List>
   );

diff --git a/docs/src/pages/components/lists/SwitchListSecondary.tsx b/docs/src/pages/components/lists/SwitchListSecondary.tsx
@@ -3,7 +3,6 @@ import { makeStyles, Theme, createStyles } 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';
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import ListItemText from '@material-ui/core/ListItemText';
 import ListSubheader from '@material-ui/core/ListSubheader';
 import Switch from '@material-ui/core/Switch';
@@ -47,32 +46,28 @@ export default function SwitchListSecondary() {
           <WifiIcon />
         </ListItemIcon>
         <ListItemText id="switch-list-label-wifi" primary="Wi-Fi" />
-        <ListItemSecondaryAction>
-          <Switch
-            edge="end"
-            onChange={handleToggle('wifi')}
-            checked={checked.indexOf('wifi') !== -1}
-            inputProps={{
-              'aria-labelledby': 'switch-list-label-wifi',
-            }}
-          />
-        </ListItemSecondaryAction>
+        <Switch
+          edge="end"
+          onChange={handleToggle('wifi')}
+          checked={checked.indexOf('wifi') !== -1}
+          inputProps={{
+            'aria-labelledby': 'switch-list-label-wifi',
+          }}
+        />
       </ListItem>
       <ListItem>
         <ListItemIcon>
           <BluetoothIcon />
         </ListItemIcon>
         <ListItemText id="switch-list-label-bluetooth" primary="Bluetooth" />
-        <ListItemSecondaryAction>
-          <Switch
-            edge="end"
-            onChange={handleToggle('bluetooth')}
-            checked={checked.indexOf('bluetooth') !== -1}
-            inputProps={{
-              'aria-labelledby': 'switch-list-label-bluetooth',
-            }}
-          />
-        </ListItemSecondaryAction>
+        <Switch
+          edge="end"
+          onChange={handleToggle('bluetooth')}
+          checked={checked.indexOf('bluetooth') !== -1}
+          inputProps={{
+            'aria-labelledby': 'switch-list-label-bluetooth',
+          }}
+        />
       </ListItem>
     </List>
   );

diff --git a/docs/src/pages/components/lists/VirtualizedList.js b/docs/src/pages/components/lists/VirtualizedList.js
@@ -8,7 +8,7 @@ const useStyles = makeStyles((theme) => ({
   root: {
     width: '100%',
     height: 400,
-    maxWidth: 300,
+    maxWidth: 360,
     backgroundColor: theme.palette.background.paper,
   },
 }));
@@ -28,7 +28,13 @@ export default function VirtualizedList() {
 
   return (
     <div className={classes.root}>
-      <FixedSizeList height={400} width={300} itemSize={46} itemCount={200}>
+      <FixedSizeList
+        height={400}
+        width={360}
+        itemSize={46}
+        itemCount={200}
+        overscanCount={5}
+      >
         {renderRow}
       </FixedSizeList>
     </div>

diff --git a/docs/src/pages/components/lists/VirtualizedList.tsx b/docs/src/pages/components/lists/VirtualizedList.tsx
@@ -9,7 +9,7 @@ const useStyles = makeStyles((theme: Theme) =>
     root: {
       width: '100%',
       height: 400,
-      maxWidth: 300,
+      maxWidth: 360,
       backgroundColor: theme.palette.background.paper,
     },
   }),
@@ -30,7 +30,13 @@ export default function VirtualizedList() {
 
   return (
     <div className={classes.root}>
-      <FixedSizeList height={400} width={300} itemSize={46} itemCount={200}>
+      <FixedSizeList
+        height={400}
+        width={360}
+        itemSize={46}
+        itemCount={200}
+        overscanCount={5}
+      >
         {renderRow}
       </FixedSizeList>
     </div>