[Joy] Add template UIs & first look blog post

docs/data/joy/components/aspect-ratio/FlexRowRatio.js

@@ -8,7 +8,7 @@ import Sheet from '@mui/joy/Sheet';
 export default function FlexRowRatio() {
   const [flexBasis, setFlexBasis] = React.useState(200);
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
       <Sheet
         variant="outlined"
         sx={{
@@ -32,9 +32,7 @@ export default function FlexRowRatio() {
           />
         </AspectRatio>
         <Box>
-          <Typography mb={1} fontWeight="md">
-            Yosemite National Park
-          </Typography>
+          <Typography fontWeight="md">Yosemite National Park</Typography>
           <Typography level="body2">California, USA</Typography>
         </Box>
       </Sheet>
@@ -47,7 +45,7 @@ export default function FlexRowRatio() {
         type="number"
         value={flexBasis}
         onChange={(event) => setFlexBasis(event.target.value)}
-        sx={{ maxWidth: 120, mx: 'auto' }}
+        sx={{ mx: 'auto', width: '100%' }}
       />
     </Box>
   );

docs/data/joy/components/aspect-ratio/MediaRatio.js

@@ -5,14 +5,14 @@ import Typography from '@mui/joy/Typography';
 
 export default function MediaRatio() {
   return (
-    <Box sx={{ width: 300 }}>
+    <Box sx={{ width: 300, borderRadius: 'sm', p: 1 }}>
       <AspectRatio objectFit="contain">
         <img
           src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2369"
           alt=""
         />
       </AspectRatio>
-      <Typography level="body2" mt={1} textAlign="center">
+      <Typography level="body3" mt={2} textAlign="center">
         An example of using <code>contain</code> value
       </Typography>
     </Box>

docs/data/joy/components/aspect-ratio/aspect-ratio.md

@@ -7,10 +7,11 @@ title: React Aspect Ratio component
 
 <p class="description">The Aspect Ratio component shapes the content with the specified ratio.</p>
 
-The default implementation combines `height: 0px` with percentage padding-bottom to create the proper aspect ratio of the content. (It will be replaced by the [CSS aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) in the future once it has sufficient various browser support).
+The default aspect ratio implementation combines `height: 0px` with percentage padding-bottom to create the proper aspect ratio for the content.
+(It will be replaced by the [CSS aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) in the future once it has sufficient browser support).
 
 - The content to fit the area of the aspect ratio component must be its first direct child.
-- It is designed to be composed with other components, eg. [`Card`](/joy-ui/react-card/).
+- It's designed to be composed with other components, e.g. [`Card`](/joy-ui/react-card/).
 
 ## Basic usage
 
@@ -55,10 +56,10 @@ Make sure to keep your content concise given the limited width real estate avail
 Since the texts are short, we can set `white-space: nowrap` to make the title stay in one line.
 The `min-width` CSS property is necessary on the aspect ratio component to prevent it from shrinking to zero.
 
-{{"demo": "CarouselRatio.js", "bg": true}}
+{{"demo": "CarouselRatio.js"}}
 
 ### List stack
 
 This is a simple illustration of composing aspect ratio with list components.
 
-{{"demo": "ListStackRatio.js", "bg": true}}
+{{"demo": "ListStackRatio.js"}}

docs/data/joy/components/avatar/AvatarGroupVariables.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import Avatar from '@mui/joy/Avatar';
 import AvatarGroup from '@mui/joy/AvatarGroup';
 import Box from '@mui/joy/Box';
+import Sheet from '@mui/joy/Sheet';
 import TextField from '@mui/joy/TextField';
 import Typography from '@mui/joy/Typography';
 import BrandingProvider from 'docs/src/BrandingProvider';
@@ -45,7 +46,7 @@ export default function GroupedAvatars() {
     <Box
       sx={{
         width: '100%',
-        mt: 2,
+        mt: 1,
         display: 'grid',
         gridTemplateColumns: '1fr auto',
         gridTemplateRows: '1fr auto',
@@ -71,25 +72,25 @@ export default function GroupedAvatars() {
           <Avatar>+3</Avatar>
         </AvatarGroup>
       </Box>
-      <Box
+      <Sheet
+        variant="outlined"
         sx={{
           gridRow: 'span 2',
           display: 'flex',
           flexWrap: 'wrap',
           gap: 2,
           p: 2,
-          bgcolor: 'background.level1',
-          borderRadius: 'xs',
+          borderRadius: 'sm',
         }}
       >
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-          <Typography fontWeight="lg">CSS variables</Typography>
+          <Typography fontWeight="xl">CSS variables</Typography>
           {vars.map((data) => (
             <TextField
               key={data.var}
               label={data.var}
               size="sm"
-              variant="soft"
+              variant="outlined"
               defaultValue={Number(data.defaultValue.replace('px', '')) || undefined}
               endDecorator={<Typography level="body3">px</Typography>}
               type={data.type}
@@ -118,7 +119,7 @@ export default function GroupedAvatars() {
             />
           ))}
         </Box>
-      </Box>
+      </Sheet>
       <BrandingProvider mode="dark">
         <HighlighedCode
           code={`<AvatarGroup${formatSx(sx)}>

docs/data/joy/components/avatar/AvatarGroupVariables.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import Avatar from '@mui/joy/Avatar';
 import AvatarGroup from '@mui/joy/AvatarGroup';
 import Box from '@mui/joy/Box';
+import Sheet from '@mui/joy/Sheet';
 import TextField from '@mui/joy/TextField';
 import Typography from '@mui/joy/Typography';
 import BrandingProvider from 'docs/src/BrandingProvider';
@@ -45,7 +46,7 @@ export default function GroupedAvatars() {
     <Box
       sx={{
         width: '100%',
-        mt: 2,
+        mt: 1,
         display: 'grid',
         gridTemplateColumns: '1fr auto',
         gridTemplateRows: '1fr auto',
@@ -71,25 +72,25 @@ export default function GroupedAvatars() {
           <Avatar>+3</Avatar>
         </AvatarGroup>
       </Box>
-      <Box
+      <Sheet
+        variant="outlined"
         sx={{
           gridRow: 'span 2',
           display: 'flex',
           flexWrap: 'wrap',
           gap: 2,
           p: 2,
-          bgcolor: 'background.level1',
-          borderRadius: 'xs',
+          borderRadius: 'sm',
         }}
       >
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-          <Typography fontWeight="lg">CSS variables</Typography>
+          <Typography fontWeight="xl">CSS variables</Typography>
           {vars.map((data) => (
             <TextField
               key={data.var}
               label={data.var}
               size="sm"
-              variant="soft"
+              variant="outlined"
               defaultValue={Number(data.defaultValue.replace('px', '')) || undefined}
               endDecorator={<Typography level="body3">px</Typography>}
               type={data.type}
@@ -118,7 +119,7 @@ export default function GroupedAvatars() {
             />
           ))}
         </Box>
-      </Box>
+      </Sheet>
       <BrandingProvider mode="dark">
         <HighlighedCode
           code={`<AvatarGroup${formatSx(sx)}>

docs/data/joy/components/avatar/AvatarVariantsAndColors.js

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import Avatar from '@mui/joy/Avatar';
 import Box from '@mui/joy/Box';
-import Badge from '@mui/joy/Badge';
+import Sheet from '@mui/joy/Sheet';
 import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import Chip from '@mui/joy/Chip';
 import Typography from '@mui/joy/Typography';
-import Check from '@mui/icons-material/Check';
 
 export default function AvatarVariantsAndColors() {
   const [variant, setVariant] = React.useState('soft');
@@ -24,16 +23,22 @@ export default function AvatarVariantsAndColors() {
           IN
         </Avatar>
       </Box>
-      <Box
+      <Sheet
+        variant="outlined"
         sx={{
           maxWidth: 343,
           p: 2,
-          bgcolor: 'background.level1',
-          borderRadius: 'xs',
+          borderRadius: 'sm',
         }}
       >
-        <Typography id="avatar-variant-selector" fontWeight="lg" mb={1}>
-          Variant
+        <Typography
+          level="body2"
+          fontWeight="xl"
+          id="avatar-variant-selector"
+          textColor="text.primary"
+          mb={1}
+        >
+          Variants
         </Typography>
         <RadioGroup
           row
@@ -43,32 +48,36 @@ export default function AvatarVariantsAndColors() {
           onChange={(event) => setVariant(event.target.value)}
           sx={{ flexWrap: 'wrap', gap: 1 }}
         >
-          {['plain', 'outlined', 'soft', 'solid'].map((value) => {
+          {['solid', 'soft', 'outlined', 'plain'].map((value) => {
             const checked = variant === value;
             return (
-              <Badge
-                key={value}
+              <Chip
                 size="sm"
-                badgeContent={<Check fontSize="sm" />}
-                badgeInset="8%"
-                invisible={!checked}
-                sx={{ '--Badge-paddingX': '0px' }}
+                variant="plain"
+                color={checked ? 'primary' : 'neutral'}
               >
-                <Chip variant="plain">
-                  <Radio
-                    variant={checked ? 'outlined' : 'plain'}
-                    label={value}
-                    value={value}
-                    disableIcon
-                    overlay
-                  />
-                </Chip>
-              </Badge>
+                <Radio
+                  size="sm"
+                  variant={checked ? 'solid' : 'outlined'}
+                  color={checked ? 'primary' : 'neutral'}
+                  label={<Typography>{value}</Typography>}
+                  value={value}
+                  disableIcon
+                  overlay
+                />
+              </Chip>
             );
           })}
         </RadioGroup>
 
-        <Typography id="avatar-color-selector" fontWeight="lg" mb={1} mt={3}>
+        <Typography
+          id="avatar-color-selector"
+          level="body2"
+          fontWeight="xl"
+          textColor="text.primary"
+          mb={1}
+          mt={3}
+        >
           Color
         </Typography>
         <RadioGroup
@@ -79,33 +88,30 @@ export default function AvatarVariantsAndColors() {
           onChange={(event) => setColor(event.target.value)}
           sx={{ flexWrap: 'wrap', gap: 1 }}
         >
-          {['neutral', 'primary', 'danger', 'info', 'success', 'warning'].map(
+          {['primary', 'neutral', 'danger', 'info', 'success', 'warning'].map(
             (value) => {
               const checked = color === value;
               return (
-                <Badge
-                  key={value}
+                <Chip
                   size="sm"
-                  badgeContent={<Check fontSize="sm" />}
-                  badgeInset="8%"
-                  invisible={!checked}
-                  sx={{ '--Badge-paddingX': '0px' }}
+                  variant="plain"
+                  color={checked ? 'primary' : 'neutral'}
                 >
-                  <Chip variant="plain">
-                    <Radio
-                      variant={checked ? 'outlined' : 'plain'}
-                      label={value}
-                      value={value}
-                      disableIcon
-                      overlay
-                    />
-                  </Chip>
-                </Badge>
+                  <Radio
+                    size="sm"
+                    variant={checked ? 'solid' : 'outlined'}
+                    color={checked ? 'primary' : 'neutral'}
+                    label={<Typography>{value}</Typography>}
+                    value={value}
+                    disableIcon
+                    overlay
+                  />
+                </Chip>
               );
             },
           )}
         </RadioGroup>
-      </Box>
+      </Sheet>
     </Box>
   );
 }