[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' },
     ],
   },
@@ -332,7 +327,7 @@ const components: {
         },
       },
       { id: '--Input-focusedThickness', type: 'number', unit: 'px' },
-      { id: '--Input-adornment-offset', type: 'number', unit: 'px' },
+      { id: '--Input-decorator-offset', type: 'number', unit: 'px' },
     ],
   },
   {

docs/pages/experiments/joy/input.tsx

@@ -59,15 +59,15 @@ export default function JoyTypography() {
           }}
         >
           <Input placeholder="Placeholder" />
-          <Input placeholder="Placeholder" startAdornment={<Mail />} size="sm" />
-          <Input placeholder="Placeholder" startAdornment={<Mail />} />
-          <Input placeholder="Placeholder" startAdornment={<Mail />} size="lg" />
+          <Input placeholder="Placeholder" startDecorator={<Mail />} size="sm" />
+          <Input placeholder="Placeholder" startDecorator={<Mail />} />
+          <Input placeholder="Placeholder" startDecorator={<Mail />} size="lg" />
           <Input
             placeholder="Placeholder"
             color="primary"
             type="password"
-            startAdornment={<Key />}
-            endAdornment={
+            startDecorator={<Key />}
+            endDecorator={
               <IconButton size="sm" sx={{ mr: '-6px' }}>
                 <Visibility />
               </IconButton>
@@ -76,17 +76,17 @@ export default function JoyTypography() {
           <Input
             placeholder="Placeholder"
             color="danger"
-            endAdornment={
+            endDecorator={
               <Button color="danger" size="sm" sx={{ mr: '-6px' }}>
                 Delete
               </Button>
             }
           />
-          <Input placeholder="Placeholder" color="danger" endAdornment={<Info />} />
+          <Input placeholder="Placeholder" color="danger" endDecorator={<Info />} />
           <Input
             placeholder="Placeholder"
             color="info"
-            endAdornment={
+            endDecorator={
               <Button variant="light" size="sm" sx={{ mr: '-6px' }}>
                 Search
               </Button>
@@ -96,7 +96,7 @@ export default function JoyTypography() {
             <Input
               placeholder="Placeholder"
               color="success"
-              endAdornment={<Check />}
+              endDecorator={<Check />}
               sx={{
                 minWidth: 0,
                 flex: 1,
@@ -114,7 +114,7 @@ export default function JoyTypography() {
           <Input
             placeholder="Placeholder"
             color="warning"
-            startAdornment={<Typography sx={{ color: 'inherit' }}>$</Typography>}
+            startDecorator={<Typography sx={{ color: 'inherit' }}>$</Typography>}
           />
           <Input placeholder="Placeholder" disabled />
           <Input placeholder="Placeholder" disabled defaultValue="I am in disabled state" />

docs/pages/experiments/joy/link.tsx

@@ -1,14 +1,57 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import * as React from 'react';
+import { keyframes } from '@mui/system';
 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 circulate = keyframes({
+  '0%': {
+    transform: 'rotate(0deg)',
+  },
+  '100%': {
+    transform: 'rotate(360deg)',
+  },
+});
+
+const Loader = () => (
+  <Box
+    sx={{
+      borderRadius: '50%',
+      border: 4,
+      borderColor: 'primary.lightBg',
+      width: '1.25em',
+      height: '1.25em',
+      boxSizing: 'border-box',
+      position: 'relative',
+    }}
+  >
+    <Box
+      sx={{
+        position: 'absolute',
+        top: -4,
+        left: -4,
+        width: '1.25em',
+        height: '1.25em',
+        borderRadius: '50%',
+        border: '4px solid',
+        borderColor: (theme) => `${theme.vars.palette.primary.lightColor} transparent transparent`,
+        animation: `${circulate} 1s ease infinite`,
+        boxSizing: 'inherit',
+      }}
+    />
+  </Box>
+);
 
 const ColorSchemePicker = () => {
   const { mode, setMode } = useColorScheme();
@@ -21,7 +64,7 @@ const ColorSchemePicker = () => {
   }
 
   return (
-    <Button
+    <IconButton
       variant="outlined"
       onClick={() => {
         if (mode === 'light') {
@@ -30,10 +73,9 @@ const ColorSchemePicker = () => {
           setMode('light');
         }
       }}
-      sx={{ '--Button-gutter': '0.25rem', minWidth: 'var(--Button-minHeight)' }}
     >
       {mode === 'light' ? <Moon /> : <Sun />}
-    </Button>
+    </IconButton>
   );
 };
 
@@ -63,27 +105,87 @@ export default function JoyButton() {
           }}
         >
           <Box>
-            <Link component="button" level="body2">
-              <LocationOn sx={{ mr: '0.25em' }} /> Miami, Florida
+            <Link component="button" level="body2" startDecorator={<LocationOn />}>
+              Miami, Florida
+            </Link>
+            <Link component="button" level="body2" startDecorator={<Groups fontSize="lg" />}>
+              5 - 10 people
+            </Link>
+          </Box>
+          <Box>
+            <Link component="button" startDecorator={<LocationOn />}>
+              Miami, Florida
             </Link>
-            <Link component="button" level="body2">
-              <Groups fontSize="lg" sx={{ mr: '0.25em' }} /> 5 - 10 people
+            <Link component="button" startDecorator={<Groups fontSize="xl" />}>
+              5 - 10 people
             </Link>
           </Box>
           <Box>
-            <Link component="button">
-              <LocationOn sx={{ mr: '0.25em' }} /> Miami, Florida
+            <Link component="button" level="h5" startDecorator={<LocationOn />}>
+              Miami, Florida
             </Link>
-            <Link component="button">
-              <Groups fontSize="xl" sx={{ mr: '0.25em' }} /> 5 - 10 people
+            <Link component="button" level="h5" startDecorator={<Groups fontSize="xl2" />}>
+              5 - 10 people
             </Link>
           </Box>
           <Box>
-            <Link component="button" level="h5">
-              <LocationOn sx={{ mr: '0.25em' }} /> Miami, Florida
+            <Typography level="body2">
+              Keep me updated about the new features and upcoming improvements (by doing this you
+              accept the <Link endDecorator={<OpenInNew />}>terms</Link> and the{' '}
+              <Link disabled startDecorator={<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" endDecorator={<OpenInNew />}>
+                terms
+              </Link>{' '}
+              and the{' '}
+              <Link level="inherit" startDecorator={<OpenInNew />}>
+                privacy policy
+              </Link>
+              ).
+            </span>
+          </Box>
+          <ul>
+            <li>
+              <Link startDecorator={<Person />}>Profile</Link>
+            </li>
+            <li>
+              <Link startDecorator={<Settings />}>Settings</Link>
+            </li>
+            <li>
+              <Link startDecorator={<Logout />}>Logout</Link>
+            </li>
+          </ul>
+          <Box sx={{ my: 2 }}>
+            <Link startDecorator={<Loader />} disabled sx={{ my: 2 }}>
+              Processing...
             </Link>
-            <Link component="button" level="h5">
-              <Groups fontSize="xl2" sx={{ mr: '0.25em' }} /> 5 - 10 people
+            <Link
+              color="neutral"
+              endDecorator={
+                <Box
+                  sx={{
+                    px: 0.5,
+                    py: 0.25,
+                    fontSize: 'xs',
+                    fontWeight: 'md',
+                    bgcolor: 'danger.500',
+                    color: '#fff',
+                    borderRadius: 'xs',
+                  }}
+                >
+                  HIRING!
+                </Box>
+              }
+            >
+              Careers
             </Link>
           </Box>
         </Box>