init project

test/regressions/fixtures/ListJoy/Flexibility.js

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import List from '@mui/joy/List';
+import ListItem from '@mui/joy/ListItem';
+import ListDivider from '@mui/joy/ListDivider';
+import ListItemButton from '@mui/joy/ListItemButton';
+
+export default function Flexibility() {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <List sx={{ maxWidth: 100, maxHeight: 100, overflow: 'scroll' }}>
+        <ListItem>This is a very long text that should scale by its content.</ListItem>
+        <ListItem>Item 2</ListItem>
+        <ListItem>Item 3</ListItem>
+        <ListItem>Item 4 </ListItem>
+      </List>
+      <List component="nav" sx={{ maxWidth: 100, maxHeight: 100, overflow: 'scroll' }}>
+        <ListItemButton>This is a very long text that should scale by its content.</ListItemButton>
+        <ListItemButton>Item 2</ListItemButton>
+        <ListItemButton>Item 3</ListItemButton>
+        <ListItemButton>Item 4 </ListItemButton>
+      </List>
+      <List sx={{ maxWidth: 100, maxHeight: 100, overflow: 'scroll' }}>
+        <ListItem>
+          <ListItemButton>
+            This is a very long text that should scale by its content.
+          </ListItemButton>
+        </ListItem>
+        <ListItem>
+          <ListItemButton>Item 2</ListItemButton>
+        </ListItem>
+        <ListItem>
+          <ListItemButton>Item 3</ListItemButton>
+        </ListItem>
+        <ListItem>
+          <ListItemButton>Item 4</ListItemButton>
+        </ListItem>
+      </List>
+      <List role="menubar" orientation="horizontal">
+        <ListItem role="none">
+          <ListItemButton
+            variant="solid"
+            color="primary"
+            role="menuitem"
+            component="a"
+            href="#horizontal-list"
+            aria-label="Home"
+          >
+            Home
+          </ListItemButton>
+        </ListItem>
+        <ListDivider />
+        <ListItem role="none">
+          <ListItemButton variant="soft" role="menuitem" component="a" href="#horizontal-list">
+            Products
+          </ListItemButton>
+        </ListItem>
+        <ListDivider />
+        <ListItem role="none">
+          <ListItemButton variant="soft" role="menuitem" component="a" href="#horizontal-list">
+            Blog
+          </ListItemButton>
+        </ListItem>
+        <ListItem role="none" sx={{ marginInlineStart: 'auto' }}>
+          <ListItemButton
+            variant="soft"
+            role="menuitem"
+            component="a"
+            href="#horizontal-list"
+            aria-label="Profile"
+          >
+            Account
+          </ListItemButton>
+        </ListItem>
+      </List>
+    </Box>
+  );
+}

test/regressions/fixtures/ListJoy/NestingVariables.js

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { CssVarsProvider } from '@mui/joy/styles';
+import List from '@mui/joy/List';
+import ListItem from '@mui/joy/ListItem';
+import ListItemButton from '@mui/joy/ListItemButton';
+
+export default function NestedVariables() {
+  return (
+    <CssVarsProvider>
+      <List
+        sx={(theme) => ({
+          ...theme.variants.outlined.neutral,
+          bgcolor: 'background.level3',
+          '--List-radius': '16px',
+          '--List-padding': '8px',
+          '--List-gap': '4px',
+          '& > li [role="button"]': {
+            bgcolor: 'background.surface',
+          },
+        })}
+      >
+        <ListItem>
+          <ListItemButton>Item 1</ListItemButton>
+        </ListItem>
+        <ListItem nested>
+          <ListItem>
+            <ListItemButton>Item 2</ListItemButton>
+          </ListItem>
+          <List
+            sx={{
+              '& > li [role="button"]': {
+                bgcolor: 'background.level2',
+              },
+            }}
+          >
+            <ListItem>
+              <ListItemButton>Item 2.1</ListItemButton>
+            </ListItem>
+            <ListItem>
+              <ListItemButton>Item 2.2</ListItemButton>
+            </ListItem>
+            <ListItem nested>
+              <ListItemButton>Item 2.3</ListItemButton>
+              <List
+                sx={{
+                  '& > li [role="button"]': {
+                    bgcolor: 'background.level1',
+                  },
+                }}
+              >
+                <ListItem>
+                  <ListItemButton>Item 2.3.1</ListItemButton>
+                </ListItem>
+                <ListItem>
+                  <ListItemButton>Item 2.3.2</ListItemButton>
+                </ListItem>
+                <ListItem>
+                  <ListItemButton>Item 2.3.3</ListItemButton>
+                </ListItem>
+              </List>
+            </ListItem>
+          </List>
+        </ListItem>
+        <ListItem>
+          <ListItemButton>Item 3</ListItemButton>
+        </ListItem>
+      </List>
+    </CssVarsProvider>
+  );
+}