[Joy] Add List documentation (#33120)

mui · Jun 17, 2022 · 43f9518 · 43f9518
1 parent c48d245
commit 43f9518
Show file tree

Hide file tree

Showing 38 changed files with 2,047 additions and 146 deletions.
diff --git a/docs/data/joy/components/aspect-ratio/ListStackRatio.js b/docs/data/joy/components/aspect-ratio/ListStackRatio.js
@@ -38,7 +38,7 @@ export default function FlexRowRatio() {
         borderRadius: 'sm',
       }}
     >
-      <List sx={{ py: 'var(--List-gap)' }}>
+      <List sx={{ py: 'var(--List-divider-gap)' }}>
         {data.map((item, index) => (
           <React.Fragment key={item.title}>
             <ListItem>

diff --git a/docs/data/joy/components/aspect-ratio/ListStackRatio.tsx b/docs/data/joy/components/aspect-ratio/ListStackRatio.tsx
@@ -38,7 +38,7 @@ export default function FlexRowRatio() {
         borderRadius: 'sm',
       }}
     >
-      <List sx={{ py: 'var(--List-gap)' }}>
+      <List sx={{ py: 'var(--List-divider-gap)' }}>
         {data.map((item, index) => (
           <React.Fragment key={item.title}>
             <ListItem>

diff --git a/docs/data/joy/components/list/ActionableList.js b/docs/data/joy/components/list/ActionableList.js
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import List from '@mui/joy/List';
+import ListItem from '@mui/joy/ListItem';
+import ListItemDecorator from '@mui/joy/ListItemDecorator';
+import ListItemButton from '@mui/joy/ListItemButton';
+import OpenInNew from '@mui/icons-material/OpenInNew';
+import Info from '@mui/icons-material/Info';
+
+export default function ActionableList() {
+  return (
+    <List
+      sx={{
+        maxWidth: 320,
+      }}
+    >
+      <ListItem>
+        <ListItemButton onClick={() => alert('You clicked')}>
+          <ListItemDecorator>
+            <Info />
+          </ListItemDecorator>
+          Clickable item
+        </ListItemButton>
+      </ListItem>
+      <ListItem>
+        <ListItemButton component="a" href="#actionable">
+          <ListItemDecorator>
+            <OpenInNew />
+          </ListItemDecorator>
+          Open a new tab
+        </ListItemButton>
+      </ListItem>
+    </List>
+  );
+}
diff --git a/docs/data/joy/components/list/BasicList.js b/docs/data/joy/components/list/BasicList.js
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import List from '@mui/joy/List';
+import ListItem from '@mui/joy/ListItem';
+import Typography from '@mui/joy/Typography';
+
+export default function BasicList() {
+  return (
+    <div>
+      <Typography
+        id="basic-list-demo"
+        level="body3"
+        textTransform="uppercase"
+        fontWeight="lg"
+        mb={1}
+      >
+        Ingredients
+      </Typography>
+      <List aria-labelledby="basic-list-demo">
+        <ListItem>1 red onion</ListItem>
+        <ListItem>2 red peppers</ListItem>
+        <ListItem>120g bacon</ListItem>
+      </List>
+    </div>
+  );
+}
diff --git a/docs/data/joy/components/list/DecoratedList.js b/docs/data/joy/components/list/DecoratedList.js
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import List from '@mui/joy/List';
+import ListItem from '@mui/joy/ListItem';
+import ListItemDecorator from '@mui/joy/ListItemDecorator';
+import Typography from '@mui/joy/Typography';
+
+export default function DecoratedList() {
+  return (
+    <div>
+      <Typography
+        id="decorated-list-demo"
+        level="body3"
+        textTransform="uppercase"
+        fontWeight="lg"
+        mb={1}
+      >
+        Ingredients
+      </Typography>
+      <List
+        aria-labelledby="decorated-list-demo"
+        sx={{ '--List-decorator-width': '32px' }}
+      >
+        <ListItem>
+          <ListItemDecorator>🧅</ListItemDecorator> 1 red onion
+        </ListItem>
+        <ListItem>
+          <ListItemDecorator>🍤</ListItemDecorator> 2 Shrimps
+        </ListItem>
+        <ListItem>
+          <ListItemDecorator>🥓</ListItemDecorator> 120g bacon
+        </ListItem>
+      </List>
+    </div>
+  );
+}
diff --git a/docs/data/joy/components/list/DividedList.js b/docs/data/joy/components/list/DividedList.js
@@ -0,0 +1,55 @@
+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';
+import ListItemDecorator from '@mui/joy/ListItemDecorator';
+import Typography from '@mui/joy/Typography';
+import Sheet from '@mui/joy/Sheet';
+
+export default function DividedList() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        gap: 4,
+      }}
+    >
+      {[undefined, 'gutter', 'startDecorator', 'startContent'].map((inset) => (
+        <Box key={inset || 'default'}>
+          <Typography level="body3" mb={2}>
+            <code>{inset ? `inset="${inset}"` : '(default)'}</code>
+          </Typography>
+          <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
@@ -0,0 +1,52 @@
+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';
+
+export default function EllipsisList() {
+  return (
+    <Box sx={{ width: 320 }}>
+      <Typography
+        id="ellipsis-list-demo"
+        level="body4"
+        textTransform="uppercase"
+        fontWeight="xl"
+        mb={2}
+        sx={{ letterSpacing: '0.15rem' }}
+      >
+        Inbox
+      </Typography>
+      <List
+        aria-labelledby="ellipsis-list-demo"
+        sx={{ '--List-decorator-width': '56px' }}
+      >
+        <ListItem>
+          <ListItemDecorator sx={{ alignSelf: 'flex-start' }}>
+            <Avatar src="/static/images/avatar/1.jpg" />
+          </ListItemDecorator>
+          <ListItemContent>
+            <Typography>Brunch this weekend?</Typography>
+            <Typography level="body2" noWrap>
+              I&apos;ll be in your neighborhood doing errands this Tuesday.
+            </Typography>
+          </ListItemContent>
+        </ListItem>
+        <ListItem>
+          <ListItemDecorator sx={{ alignSelf: 'flex-start' }}>
+            <Avatar src="/static/images/avatar/2.jpg" />
+          </ListItemDecorator>
+          <ListItemContent>
+            <Typography>Summer BBQ</Typography>
+            <Typography level="body2" noWrap>
+              Wish I could come, but I&apos;m out of town this Friday.
+            </Typography>
+          </ListItemContent>
+        </ListItem>
+      </List>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/list/ExampleCollapsibleList.js b/docs/data/joy/components/list/ExampleCollapsibleList.js
@@ -0,0 +1,173 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import List from '@mui/joy/List';
+import ListItem, { listItemClasses } from '@mui/joy/ListItem';
+import ListItemButton, { listItemButtonClasses } from '@mui/joy/ListItemButton';
+import IconButton from '@mui/joy/IconButton';
+import Typography from '@mui/joy/Typography';
+import ReceiptLong from '@mui/icons-material/ReceiptLong';
+import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
+
+export default function ExampleCollapsibleList() {
+  const [open, setOpen] = React.useState(false);
+  const [open2, setOpen2] = React.useState(false);
+  return (
+    <Box
+      sx={{
+        width: 320,
+        pl: '24px',
+      }}
+    >
+      <List
+        size="sm"
+        sx={(theme) => ({
+          // Gatsby colors
+          '--joy-palette-primary-plainColor': '#8a4baf',
+          '--joy-palette-neutral-plainHoverBg': 'transparent',
+          '--joy-palette-neutral-plainActiveBg': 'transparent',
+          '--joy-palette-primary-plainHoverBg': 'transparent',
+          '--joy-palette-primary-plainActiveBg': 'transparent',
+          [theme.getColorSchemeSelector('dark')]: {
+            '--joy-palette-text-secondary': '#635e69',
+            '--joy-palette-primary-plainColor': '#d48cff',
+          },
+
+          '--List-insetStart': '32px',
+          '--List-item-paddingY': '0px',
+          '--List-item-paddingRight': '16px',
+          '--List-item-paddingLeft': '21px',
+          '--List-item-startActionWidth': '0px',
+          '--List-item-startActionTranslateX': '-50%',
+
+          [`& .${listItemButtonClasses.root}`]: {
+            borderLeft: '1px solid',
+            borderColor: 'divider',
+          },
+          [`& .${listItemButtonClasses.root}.${listItemButtonClasses.selected}`]: {
+            borderColor: 'currentColor',
+          },
+          [`& .${listItemClasses.nested} > .${listItemButtonClasses.root}`]: {
+            border: 'none',
+          },
+          '& [class*="startAction"]': {
+            color: 'var(--joy-palette-text-tertiary)',
+          },
+        })}
+      >
+        <ListItem nested>
+          <ListItem component="div" startAction={<ReceiptLong />}>
+            <Typography level="body3" sx={{ textTransform: 'uppercase' }}>
+              Documentation
+            </Typography>
+          </ListItem>
+          <List sx={{ '--List-gap': '0px' }}>
+            <ListItem>
+              <ListItemButton selected>Overview</ListItemButton>
+            </ListItem>
+          </List>
+        </ListItem>
+        <ListItem sx={{ '--List-gap': '0px' }}>
+          <ListItemButton>Quick Start</ListItemButton>
+        </ListItem>
+        <ListItem
+          nested
+          sx={{ my: 1 }}
+          startAction={
+            <IconButton
+              variant="plain"
+              size="sm"
+              color="neutral"
+              onClick={() => setOpen(!open)}
+            >
+              <KeyboardArrowDown
+                sx={{ transform: open ? 'initial' : 'rotate(-90deg)' }}
+              />
+            </IconButton>
+          }
+        >
+          <ListItemButton>
+            <Typography
+              level="inherit"
+              sx={{
+                fontWeight: open ? 'bold' : undefined,
+                color: open ? 'text.primary' : 'inherit',
+              }}
+            >
+              Tutorial
+            </Typography>
+            <Typography component="span" level="body3" sx={{ ml: 1 }}>
+              9
+            </Typography>
+          </ListItemButton>
+          {open && (
+            <List sx={{ '--List-item-paddingY': '8px' }}>
+              <ListItem>
+                <ListItemButton>Overview</ListItemButton>
+              </ListItem>
+              <ListItem>
+                <ListItemButton>
+                  0. Set Up Your Development Environment
+                </ListItemButton>
+              </ListItem>
+              <ListItem>
+                <ListItemButton>
+                  1. Create and Deploy Your First Gatsby Site
+                </ListItemButton>
+              </ListItem>
+              <ListItem>
+                <ListItemButton>2. Use and Style React components</ListItemButton>
+              </ListItem>
+            </List>
+          )}
+        </ListItem>
+        <ListItem
+          nested
+          sx={{ my: 1 }}
+          startAction={
+            <IconButton
+              variant="plain"
+              size="sm"
+              color="neutral"
+              onClick={() => setOpen2((bool) => !bool)}
+            >
+              <KeyboardArrowDown
+                sx={{ transform: open2 ? 'initial' : 'rotate(-90deg)' }}
+              />
+            </IconButton>
+          }
+        >
+          <ListItemButton>
+            <Typography
+              level="inherit"
+              sx={{
+                fontWeight: open2 ? 'bold' : undefined,
+                color: open2 ? 'text.primary' : 'inherit',
+              }}
+            >
+              How-to Guides
+            </Typography>
+            <Typography component="span" level="body3" sx={{ ml: 1 }}>
+              39
+            </Typography>
+          </ListItemButton>
+          {open2 && (
+            <List sx={{ '--List-item-paddingY': '8px' }}>
+              <ListItem>
+                <ListItemButton>Overview</ListItemButton>
+              </ListItem>
+              <ListItem>
+                <ListItemButton>Local Development</ListItemButton>
+              </ListItem>
+              <ListItem>
+                <ListItemButton>Routing</ListItemButton>
+              </ListItem>
+              <ListItem>
+                <ListItemButton>Styling</ListItemButton>
+              </ListItem>
+            </List>
+          )}
+        </ListItem>
+      </List>
+    </Box>
+  );
+}