adjust demos

mui · Jun 16, 2022 · 70cbddf · 70cbddf
1 parent a4aa000
commit 70cbddf
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 81 deletions.
diff --git a/docs/data/joy/components/list/DividedList.js b/docs/data/joy/components/list/DividedList.js
@@ -6,6 +6,7 @@ import ListDivider from '@mui/joy/ListDivider';
 import ListItem from '@mui/joy/ListItem';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
 import Typography from '@mui/joy/Typography';
+import Sheet from '@mui/joy/Sheet';
 
 export default function DividedList() {
   return (
@@ -22,34 +23,31 @@ export default function DividedList() {
           <Typography level="body3" mb={2}>
             <code>{inset ? `inset="${inset}"` : '(default)'}</code>
           </Typography>
-          <List
-            key={inset || 'none'}
-            sx={{
-              paddingBlock: 1,
-              bgcolor: 'background.body',
-              borderRadius: 'sm',
-              border: '1px solid',
-              borderColor: 'neutral.outlinedBorder',
-              minWidth: 240,
-              '--List-decorator-width': '48px',
-              '--List-item-paddingLeft': '1.5rem',
-              '--List-item-paddingRight': '1rem',
-            }}
-          >
-            <ListItem>
-              <ListItemDecorator sx={{ alignSelf: 'flex-start' }}>
-                <Avatar size="sm" src="/static/images/avatar/1.jpg" />
-              </ListItemDecorator>
-              Mabel Boyle
-            </ListItem>
-            <ListDivider inset={inset} />
-            <ListItem>
-              <ListItemDecorator sx={{ alignSelf: 'flex-start' }}>
-                <Avatar size="sm" src="/static/images/avatar/2.jpg" />
-              </ListItemDecorator>
-              Boyd Burt
-            </ListItem>
-          </List>
+          <Sheet variant="outlined" sx={{ borderRadius: 'sm' }}>
+            <List
+              sx={{
+                paddingBlock: 1,
+                minWidth: 240,
+                '--List-decorator-width': '48px',
+                '--List-item-paddingLeft': '1.5rem',
+                '--List-item-paddingRight': '1rem',
+              }}
+            >
+              <ListItem>
+                <ListItemDecorator sx={{ alignSelf: 'flex-start' }}>
+                  <Avatar size="sm" src="/static/images/avatar/1.jpg" />
+                </ListItemDecorator>
+                Mabel Boyle
+              </ListItem>
+              <ListDivider inset={inset} />
+              <ListItem>
+                <ListItemDecorator sx={{ alignSelf: 'flex-start' }}>
+                  <Avatar size="sm" src="/static/images/avatar/2.jpg" />
+                </ListItemDecorator>
+                Boyd Burt
+              </ListItem>
+            </List>
+          </Sheet>
         </Box>
       ))}
     </Box>

diff --git a/docs/data/joy/components/list/EllipsisList.js b/docs/data/joy/components/list/EllipsisList.js
@@ -1,20 +1,15 @@
 import * as React from 'react';
 import Avatar from '@mui/joy/Avatar';
+import Box from '@mui/joy/Box';
 import List from '@mui/joy/List';
 import ListItem from '@mui/joy/ListItem';
 import ListItemContent from '@mui/joy/ListItemContent';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
 import Typography from '@mui/joy/Typography';
-import Sheet from '@mui/joy/Sheet';
 
 export default function EllipsisList() {
   return (
-    <Sheet
-      variant="outlined"
-      sx={{
-        width: 320,
-      }}
-    >
+    <Box sx={{ width: 320 }}>
       <Typography
         id="ellipsis-list-demo"
         level="body4"
@@ -52,6 +47,6 @@ export default function EllipsisList() {
           </ListItemContent>
         </ListItem>
       </List>
-    </Sheet>
+    </Box>
   );
 }
diff --git a/docs/data/joy/components/list/ExampleIOSList.js b/docs/data/joy/components/list/ExampleIOSList.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Avatar from '@mui/joy/Avatar';
-import Box from '@mui/joy/Box';
 import List from '@mui/joy/List';
 import ListDivider from '@mui/joy/ListDivider';
 import ListItem from '@mui/joy/ListItem';
@@ -18,12 +17,7 @@ import Podcasts from '@mui/icons-material/Podcasts';
 
 export default function ExampleIOSList() {
   return (
-    <Box
-      sx={{
-        width: 320,
-        p: 1,
-      }}
-    >
+    <Sheet variant="soft" sx={{ width: 343, p: 2, borderRadius: 'sm' }}>
       <Typography level="h3" fontSize="xl2" fontWeight="xl" id="ios-example-demo">
         Settings
       </Typography>
@@ -45,10 +39,13 @@ export default function ExampleIOSList() {
           '--List-radius': '8px',
           '--List-gap': '1rem',
           '--List-divider-gap': '0px',
-          '--List-item-paddingY': '0.75rem',
+          '--List-item-paddingY': '0.5rem',
           // override global variant tokens
           '--joy-palette-neutral-plainHoverBg': 'rgba(0 0 0 / 0.08)',
           '--joy-palette-neutral-plainActiveBg': 'rgba(0 0 0 / 0.12)',
+          [theme.getColorSchemeSelector('light')]: {
+            '--joy-palette-divider': 'rgba(0 0 0 / 0.08)',
+          },
           [theme.getColorSchemeSelector('dark')]: {
             '--joy-palette-neutral-plainHoverBg': 'rgba(255 255 255 / 0.1)',
             '--joy-palette-neutral-plainActiveBg': 'rgba(255 255 255 / 0.16)',
@@ -147,6 +144,7 @@ export default function ExampleIOSList() {
                 })}
               />
             </ListItem>
+            <ListDivider inset="startContent" />
             <ListItem>
               <ListItemButton>
                 <ListItemDecorator>
@@ -159,6 +157,7 @@ export default function ExampleIOSList() {
                 <KeyboardArrowRight fontSize="xl3" sx={{ color: 'text.tertiary' }} />
               </ListItemButton>
             </ListItem>
+            <ListDivider inset="startContent" />
             <ListItem>
               <ListItemButton>
                 <ListItemDecorator>
@@ -171,6 +170,7 @@ export default function ExampleIOSList() {
                 <KeyboardArrowRight fontSize="xl3" sx={{ color: 'text.tertiary' }} />
               </ListItemButton>
             </ListItem>
+            <ListDivider inset="startContent" />
             <ListItem>
               <ListItemButton>
                 <ListItemDecorator>
@@ -189,6 +189,6 @@ export default function ExampleIOSList() {
           </List>
         </ListItem>
       </List>
-    </Box>
+    </Sheet>
   );
 }
diff --git a/docs/data/joy/components/list/ListVariables.js b/docs/data/joy/components/list/ListVariables.js
@@ -30,10 +30,7 @@ export default function ListVariables() {
       ]}
       renderDemo={(sx) => (
         <List
-          sx={{
-            ...sx,
-            width: 320,
-          }}
+          sx={(theme) => ({ ...sx, width: 300, ...theme.variants.outlined.neutral })}
         >
           <ListItem>
             <ListItemButton>
@@ -52,25 +49,6 @@ export default function ListVariables() {
             </ListItemButton>
           </ListItem>
           <ListDivider />
-          <ListItem nested>
-            <ListItem>
-              <ListItemButton>
-                <ListItemDecorator>
-                  <Home />
-                </ListItemDecorator>
-                Home
-              </ListItemButton>
-            </ListItem>
-            <ListItem>
-              <ListItemButton>
-                <ListItemDecorator>
-                  <Apps />
-                </ListItemDecorator>
-                Products
-              </ListItemButton>
-            </ListItem>
-          </ListItem>
-          <ListDivider />
           <ListItem nested>
             <ListItem>
               <Typography

diff --git a/docs/data/joy/components/list/SecondaryList.js b/docs/data/joy/components/list/SecondaryList.js
@@ -8,11 +8,7 @@ import Delete from '@mui/icons-material/Delete';
 
 export default function SecondaryList() {
   return (
-    <List
-      sx={{
-        maxWidth: 320,
-      }}
-    >
+    <List sx={{ maxWidth: 300 }}>
       <ListItem
         startAction={
           <IconButton aria-label="Add" size="sm" variant="plain" color="neutral">

diff --git a/docs/data/joy/components/list/VariantsColorsList.js b/docs/data/joy/components/list/VariantsColorsList.js
@@ -4,7 +4,6 @@ import ListItem from '@mui/joy/ListItem';
 import ListItemContent from '@mui/joy/ListItemContent';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
 import ListItemButton from '@mui/joy/ListItemButton';
-import Sheet from '@mui/joy/Sheet';
 import Home from '@mui/icons-material/Home';
 import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
 import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
@@ -33,19 +32,14 @@ export default function VariantsColorsList() {
         },
       ]}
       renderDemo={(props) => (
-        <List
-          sx={{
-            width: 320,
-            my: 5,
-          }}
-        >
+        <List sx={{ width: 240, my: 5 }}>
           <ListItem>
             <ListItemButton {...props}>
               <ListItemDecorator>
                 <Home />
               </ListItemDecorator>
               <ListItemContent>Home</ListItemContent>
-              <KeyboardArrowRight fontSize="md" />
+              <KeyboardArrowRight />
             </ListItemButton>
           </ListItem>
         </List>