[Joy] Miscellaneous fixes

docs/pages/experiments/joy/button.tsx

@@ -11,6 +11,7 @@ import DeleteForever from '@mui/icons-material/DeleteForeverOutlined';
 import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
 import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
 import ThumbUp from '@mui/icons-material/ThumbUp';
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
 
 const ColorSchemePicker = () => {
   const { mode, setMode } = useColorScheme();
@@ -137,6 +138,15 @@ export default function JoyButton() {
             <Button variant="outlined" endIcon={<KeyboardArrowRight />} color="success">
               Checkout
             </Button>
+            <Button
+              size="sm"
+              variant="outlined"
+              color="neutral"
+              endIcon={<ArrowDropDown />}
+              sx={{ '--Icon-color': (theme) => theme.vars.palette.primary[500] }}
+            >
+              10
+            </Button>
           </Box>
         </Box>
         {/* Danilo's not smart iteration below 😅 - wanted to see each color with every variant. */}

docs/pages/experiments/joy/components.tsx

@@ -44,7 +44,7 @@ const ColorSchemePicker = () => {
   }
 
   return (
-    <Button
+    <IconButton
       variant="outlined"
       onClick={() => {
         if (mode === 'light') {
@@ -53,13 +53,9 @@ const ColorSchemePicker = () => {
           setMode('light');
         }
       }}
-      sx={{
-        p: '0.25rem',
-        width: 'var(--Button-minHeight)',
-      }}
     >
       {mode === 'light' ? <Moon /> : <Sun />}
-    </Button>
+    </IconButton>
   );
 };
 
@@ -124,7 +120,6 @@ const components: {
       </React.Fragment>
     ),
     cssVars: [
-      { id: '--Button-minHeight', type: 'number', unit: 'px', defaultValue: 40 },
       { id: '--Button-gutter', type: 'number', unit: 'px', defaultValue: 24 },
       { id: '--Button-iconOffsetStep', type: 'number', defaultValue: 2 },
       { id: '--Button-gap', type: 'number', unit: 'px' },
@@ -274,7 +269,7 @@ const components: {
       { id: '--List-item-fontSize', type: 'number', unit: 'px', defaultValue: 16 },
       { id: '--List-decorator-width', type: 'number', unit: 'px', defaultValue: 40 },
       { id: '--List-divider-gap', type: 'number', unit: 'px', defaultValue: 0 },
-      { id: '--List-nestedInsetStart', type: 'number', unit: 'px', defaultValue: 12 },
+      { id: '--List-nestedInsetStart', type: 'number', unit: 'px', defaultValue: 0 },
       { id: '--List-item-radius', type: 'number', unit: 'px' },
     ],
   },

docs/pages/experiments/joy/link.tsx

@@ -3,12 +3,16 @@ import * as React from 'react';
 import Moon from '@mui/icons-material/DarkMode';
 import Sun from '@mui/icons-material/LightMode';
 import Box from '@mui/joy/Box';
-import Button from '@mui/joy/Button';
+import IconButton from '@mui/joy/IconButton';
 import Link from '@mui/joy/Link';
 import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
 import Typography from '@mui/joy/Typography';
 import LocationOn from '@mui/icons-material/LocationOn';
 import Groups from '@mui/icons-material/Groups';
+import OpenInNew from '@mui/icons-material/OpenInNew';
+import Person from '@mui/icons-material/Person';
+import Settings from '@mui/icons-material/Settings';
+import Logout from '@mui/icons-material/Logout';
 
 const ColorSchemePicker = () => {
   const { mode, setMode } = useColorScheme();
@@ -21,7 +25,7 @@ const ColorSchemePicker = () => {
   }
 
   return (
-    <Button
+    <IconButton
       variant="outlined"
       onClick={() => {
         if (mode === 'light') {
@@ -30,10 +34,9 @@ const ColorSchemePicker = () => {
           setMode('light');
         }
       }}
-      sx={{ '--Button-gutter': '0.25rem', minWidth: 'var(--Button-minHeight)' }}
     >
       {mode === 'light' ? <Moon /> : <Sun />}
-    </Button>
+    </IconButton>
   );
 };
 
@@ -63,29 +66,64 @@ export default function JoyButton() {
           }}
         >
           <Box>
-            <Link component="button" level="body2">
-              <LocationOn sx={{ mr: '0.25em' }} /> Miami, Florida
+            <Link component="button" level="body2" startIcon={<LocationOn />}>
+              Miami, Florida
             </Link>
-            <Link component="button" level="body2">
-              <Groups fontSize="lg" sx={{ mr: '0.25em' }} /> 5 - 10 people
+            <Link component="button" level="body2" startIcon={<Groups fontSize="lg" />}>
+              5 - 10 people
             </Link>
           </Box>
           <Box>
-            <Link component="button">
-              <LocationOn sx={{ mr: '0.25em' }} /> Miami, Florida
+            <Link component="button" startIcon={<LocationOn />}>
+              Miami, Florida
             </Link>
-            <Link component="button">
-              <Groups fontSize="xl" sx={{ mr: '0.25em' }} /> 5 - 10 people
+            <Link component="button" startIcon={<Groups fontSize="xl" />}>
+              5 - 10 people
             </Link>
           </Box>
           <Box>
-            <Link component="button" level="h5">
-              <LocationOn sx={{ mr: '0.25em' }} /> Miami, Florida
+            <Link component="button" level="h5" startIcon={<LocationOn />}>
+              Miami, Florida
             </Link>
-            <Link component="button" level="h5">
-              <Groups fontSize="xl2" sx={{ mr: '0.25em' }} /> 5 - 10 people
+            <Link component="button" level="h5" startIcon={<Groups fontSize="xl2" />}>
+              5 - 10 people
             </Link>
           </Box>
+          <Box>
+            <Typography level="body2">
+              Keep me updated about the new features and upcoming improvements (by doing this you
+              accept the <Link endIcon={<OpenInNew />}>terms</Link> and the{' '}
+              <Link disabled startIcon={<OpenInNew />}>
+                privacy policy
+              </Link>
+              ).
+            </Typography>
+          </Box>
+          <Box>
+            <span>
+              Keep me updated about the new features and upcoming improvements (by doing this you
+              accept the{' '}
+              <Link level="inherit" endIcon={<OpenInNew />}>
+                terms
+              </Link>{' '}
+              and the{' '}
+              <Link level="inherit" startIcon={<OpenInNew />}>
+                privacy policy
+              </Link>
+              ).
+            </span>
+          </Box>
+          <ul>
+            <li>
+              <Link startIcon={<Person />}>Profile</Link>
+            </li>
+            <li>
+              <Link startIcon={<Settings />}>Settings</Link>
+            </li>
+            <li>
+              <Link startIcon={<Logout />}>Logout</Link>
+            </li>
+          </ul>
         </Box>
         <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
           {Object.entries(buttonProps).map(([propName, propValue]) => (

docs/pages/experiments/joy/list.tsx

@@ -18,6 +18,7 @@ import ListItemButton from '@mui/joy/ListItemButton';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
 import ListItemContent from '@mui/joy/ListItemContent';
 import ListDivider from '@mui/joy/ListDivider';
+import Sheet from '@mui/joy/Sheet';
 import Typography from '@mui/joy/Typography';
 import Moon from '@mui/icons-material/DarkMode';
 import Sun from '@mui/icons-material/LightMode';
@@ -141,6 +142,7 @@ function CheckboxList() {
             }
           >
             <ListItemButton
+              selected={selected}
               color={selected ? 'success' : undefined}
               role={undefined}
               onClick={handleToggle(value)}
@@ -300,6 +302,7 @@ function MuiNav() {
   }
   return (
     <List
+      size="sm"
       sx={(theme) => ({
         // Actually, this part should be inside the theme but put it here for specific instance.
         ...createCssVars(grey, 'palette-neutral'),
@@ -343,7 +346,6 @@ function MuiNav() {
         '--List-item-paddingLeft': '2px',
         '--List-item-paddingRight': '2px',
         '--List-item-paddingY': '0px',
-        '--List-item-fontSize': theme.vars.fontSize.sm,
         '--List-nestedInsetStart': '28px',
         '--List-decorator-color': theme.vars.palette.primary.textColor,
       })}
@@ -365,7 +367,7 @@ function MuiNav() {
                 })
               }
             >
-              <ListItemDecorator sx={{ color: 'primary.textColor' }}>
+              <ListItemDecorator>
                 <IconComponent fontSize="md" />
               </ListItemDecorator>
               <ListItemContent sx={{ color: 'text.primary' }}>
@@ -453,7 +455,6 @@ const Firebash = () => {
           '--List-item-paddingRight': '24px',
           '--List-item-radius': '0px',
           '--List-item-fontSize': '14px',
-          '--List-nestedInsetStart': '0px',
           '--List-divider-gap': '0px',
           '--List-background': 'rgb(5, 30, 52)',
           '--List-decorator-width': '36px',
@@ -598,7 +599,6 @@ const Gatsby = () => {
             '--joy-palette-primary-textColor': '#d48cff',
           },
 
-          '--List-nestedInsetStart': '0px',
           '--List-radius': '0px',
           '--List-padding': '0px',
           '--List-insetStart': '32px',
@@ -854,13 +854,9 @@ export default function JoyList() {
               </ListItemDecorator>
               <div>
                 <Typography>Brunch this weekend?</Typography>
-                <Typography level="body2" sx={{ color: 'var(--joy-palette-text-primary)' }}>
+                <Typography level="body2" color="text.primary">
                   Ali Connors{' '}
-                  <Typography
-                    component="span"
-                    level="inherit"
-                    sx={{ color: 'var(--joy-palette-text-secondary)' }}
-                  >
+                  <Typography color="text.secondary">
                     {' '}
                     — I&apos;ll be in your neighborhood doing errands this…
                   </Typography>
@@ -882,13 +878,9 @@ export default function JoyList() {
               </ListItemDecorator>
               <div>
                 <Typography>Summer BBQ</Typography>
-                <Typography level="body2" sx={{ color: 'var(--joy-palette-text-primary)' }}>
+                <Typography level="body2" color="text.primary">
                   to Scott, Alex, Jennifer{' '}
-                  <Typography
-                    component="span"
-                    level="inherit"
-                    sx={{ color: 'var(--joy-palette-text-secondary)' }}
-                  >
+                  <Typography color="text.secondary">
                     {' '}
                     — Wish I could come, but I&apos;m out of town this…
                   </Typography>
@@ -1048,29 +1040,31 @@ export default function JoyList() {
             </ListItem>
           </List>
 
-          <List
-            sx={{
-              maxWidth: 360,
-              maxHeight: 300,
-              overflow: 'auto',
-              '& ul': { p: 0 },
-              '--List-padding': 0,
-              '--List-item-paddingX': '1rem',
-            }}
-          >
-            {[0, 1, 2, 3, 4].map((sectionId) => (
-              <li key={`section-${sectionId}`}>
-                <ul>
-                  <ListItem sticky sx={{ pt: '1.5rem' }}>
-                    <Typography level="body2">{`I'm sticky ${sectionId}`}</Typography>
-                  </ListItem>
-                  {[0, 1, 2].map((item) => (
-                    <ListItem key={`item-${sectionId}-${item}`}>Item {item}</ListItem>
-                  ))}
-                </ul>
-              </li>
-            ))}
-          </List>
+          <Sheet>
+            <List
+              sx={{
+                maxWidth: 360,
+                maxHeight: 300,
+                overflow: 'auto',
+                '& ul': { p: 0 },
+                '--List-padding': 0,
+                '--List-item-paddingX': '1rem',
+              }}
+            >
+              {[0, 1, 2, 3, 4].map((sectionId) => (
+                <li key={`section-${sectionId}`}>
+                  <ul>
+                    <ListItem sticky sx={{ pt: '1.5rem' }}>
+                      <Typography level="body2">{`I'm sticky ${sectionId}`}</Typography>
+                    </ListItem>
+                    {[0, 1, 2].map((item) => (
+                      <ListItem key={`item-${sectionId}-${item}`}>Item {item}</ListItem>
+                    ))}
+                  </ul>
+                </li>
+              ))}
+            </List>
+          </Sheet>
 
           <Box>
             <List size="sm">