[docs] Improve aspect ratio docs and integration (#33065)

mui · Jun 8, 2022 · b121bd7 · b121bd7
1 parent c1a671b
commit b121bd7
Show file tree

Hide file tree

Showing 21 changed files with 379 additions and 35 deletions.
diff --git a/docs/data/joy/components/aspect-ratio/BasicRatio.js b/docs/data/joy/components/aspect-ratio/BasicRatio.js
@@ -10,12 +10,7 @@ export default function BasicRatio() {
       sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }}
     >
       <AspectRatio>
-        <Typography
-          level="h2"
-          sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-        >
-          16 : 9
-        </Typography>
+        <Typography level="h2">16 : 9</Typography>
       </AspectRatio>
     </Sheet>
   );

diff --git a/docs/data/joy/components/aspect-ratio/BasicRatio.tsx b/docs/data/joy/components/aspect-ratio/BasicRatio.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Sheet from '@mui/joy/Sheet';
+import Typography from '@mui/joy/Typography';
+
+export default function BasicRatio() {
+  return (
+    <Sheet
+      variant="outlined"
+      sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }}
+    >
+      <AspectRatio>
+        <Typography level="h2">16 : 9</Typography>
+      </AspectRatio>
+    </Sheet>
+  );
+}
diff --git a/docs/data/joy/components/aspect-ratio/BasicRatio.tsx.preview b/docs/data/joy/components/aspect-ratio/BasicRatio.tsx.preview
@@ -0,0 +1,8 @@
+<Sheet
+  variant="outlined"
+  sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }}
+>
+  <AspectRatio>
+    <Typography level="h2">16 : 9</Typography>
+  </AspectRatio>
+</Sheet>
diff --git a/docs/data/joy/components/aspect-ratio/CarouselRatio.js b/docs/data/joy/components/aspect-ratio/CarouselRatio.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import AspectRatio from '@mui/joy/AspectRatio';
 import Box from '@mui/joy/Box';
 import Typography from '@mui/joy/Typography';
-import Sheet from '@mui/joy/Sheet';
+import Card from '@mui/joy/Card';
 
 const data = [
   {
@@ -28,6 +28,7 @@ export default function FlexRowRatio() {
       sx={{
         display: 'flex',
         gap: 1,
+        py: 1,
         overflow: 'auto',
         width: 343,
         scrollSnapType: 'x mandatory',
@@ -38,15 +39,13 @@ export default function FlexRowRatio() {
       }}
     >
       {data.map((item) => (
-        <Sheet
+        <Card
+          row
           key={item.title}
           variant="outlined"
           sx={{
             gap: 2,
-            p: 2,
-            display: 'flex',
-            alignItems: 'center',
-            borderRadius: 'sm',
+            '--Card-padding': (theme) => theme.spacing(2),
           }}
         >
           <AspectRatio
@@ -59,7 +58,7 @@ export default function FlexRowRatio() {
             <Typography fontWeight="md">{item.title}</Typography>
             <Typography level="body2">{item.description}</Typography>
           </Box>
-        </Sheet>
+        </Card>
       ))}
     </Box>
   );

diff --git a/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx b/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Box from '@mui/joy/Box';
+import Typography from '@mui/joy/Typography';
+import Card from '@mui/joy/Card';
+
+const data = [
+  {
+    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',
+    title: 'Night view',
+    description: '4.21M views',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1527549993586-dff825b37782?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270',
+    title: 'Lake view',
+    description: '4.74M views',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270',
+    title: 'Mountain view',
+    description: '3.98M views',
+  },
+];
+
+export default function FlexRowRatio() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        gap: 1,
+        py: 1,
+        overflow: 'auto',
+        width: 343,
+        scrollSnapType: 'x mandatory',
+        '& > *': {
+          scrollSnapAlign: 'center',
+        },
+        '::-webkit-scrollbar': { display: 'none' },
+      }}
+    >
+      {data.map((item) => (
+        <Card
+          row
+          key={item.title}
+          variant="outlined"
+          sx={{
+            gap: 2,
+            '--Card-padding': (theme) => theme.spacing(2),
+          }}
+        >
+          <AspectRatio
+            ratio="1"
+            sx={{ minWidth: 60, borderRadius: 'sm', overflow: 'auto' }}
+          >
+            <img src={item.src} alt={item.title} />
+          </AspectRatio>
+          <Box sx={{ whiteSpace: 'nowrap' }}>
+            <Typography fontWeight="md">{item.title}</Typography>
+            <Typography level="body2">{item.description}</Typography>
+          </Box>
+        </Card>
+      ))}
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/aspect-ratio/CustomRatio.js b/docs/data/joy/components/aspect-ratio/CustomRatio.js
@@ -10,12 +10,7 @@ export default function CustomRatio() {
       sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }}
     >
       <AspectRatio ratio="4/3">
-        <Typography
-          level="h2"
-          sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-        >
-          4 : 3
-        </Typography>
+        <Typography level="h2">4 : 3</Typography>
       </AspectRatio>
     </Sheet>
   );

diff --git a/docs/data/joy/components/aspect-ratio/CustomRatio.tsx b/docs/data/joy/components/aspect-ratio/CustomRatio.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Sheet from '@mui/joy/Sheet';
+import Typography from '@mui/joy/Typography';
+
+export default function CustomRatio() {
+  return (
+    <Sheet
+      variant="outlined"
+      sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }}
+    >
+      <AspectRatio ratio="4/3">
+        <Typography level="h2">4 : 3</Typography>
+      </AspectRatio>
+    </Sheet>
+  );
+}
diff --git a/docs/data/joy/components/aspect-ratio/CustomRatio.tsx.preview b/docs/data/joy/components/aspect-ratio/CustomRatio.tsx.preview
@@ -0,0 +1,8 @@
+<Sheet
+  variant="outlined"
+  sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }}
+>
+  <AspectRatio ratio="4/3">
+    <Typography level="h2">4 : 3</Typography>
+  </AspectRatio>
+</Sheet>
diff --git a/docs/data/joy/components/aspect-ratio/FlexRowRatio.js b/docs/data/joy/components/aspect-ratio/FlexRowRatio.js
@@ -44,7 +44,7 @@ export default function FlexRowRatio() {
         endDecorator="px"
         type="number"
         value={flexBasis}
-        onChange={(event) => setFlexBasis(event.target.value)}
+        onChange={(event) => setFlexBasis(event.target.valueAsNumber)}
         sx={{ mx: 'auto', width: '100%' }}
       />
     </Box>

diff --git a/docs/data/joy/components/aspect-ratio/FlexRowRatio.tsx b/docs/data/joy/components/aspect-ratio/FlexRowRatio.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Box from '@mui/joy/Box';
+import TextField from '@mui/joy/TextField';
+import Typography from '@mui/joy/Typography';
+import Sheet from '@mui/joy/Sheet';
+
+export default function FlexRowRatio() {
+  const [flexBasis, setFlexBasis] = React.useState(200);
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+      <Sheet
+        variant="outlined"
+        sx={{
+          display: 'flex',
+          gap: 2,
+          p: 2,
+          minWidth: 300,
+          borderRadius: 'sm',
+        }}
+      >
+        <AspectRatio
+          sx={{
+            flexBasis: flexBasis ? `${flexBasis}px` : undefined,
+            borderRadius: 'sm',
+            overflow: 'auto',
+          }}
+        >
+          <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>
+        <Box>
+          <Typography fontWeight="md">Yosemite National Park</Typography>
+          <Typography level="body2">California, USA</Typography>
+        </Box>
+      </Sheet>
+      <br />
+      <TextField
+        variant="outlined"
+        label="flexBasis"
+        placeholder="number"
+        endDecorator="px"
+        type="number"
+        value={flexBasis}
+        onChange={(event) => setFlexBasis(event.target.valueAsNumber)}
+        sx={{ mx: 'auto', width: '100%' }}
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/aspect-ratio/ListStackRatio.js b/docs/data/joy/components/aspect-ratio/ListStackRatio.js
@@ -7,7 +7,6 @@ import ListDivider from '@mui/joy/ListDivider';
 import ListItem from '@mui/joy/ListItem';
 import ListItemContent from '@mui/joy/ListItemContent';
 import ListItemButton from '@mui/joy/ListItemButton';
-import ListItemDecorator from '@mui/joy/ListItemDecorator';
 
 const data = [
   {
@@ -39,23 +38,16 @@ export default function FlexRowRatio() {
         borderRadius: 'sm',
       }}
     >
-      <List
-        sx={{
-          py: 'var(--List-gap)',
-          '--List-decorator-width': '120px',
-        }}
-      >
+      <List sx={{ py: 'var(--List-gap)' }}>
         {data.map((item, index) => (
           <React.Fragment key={item.title}>
             <ListItem>
               <ListItemButton sx={{ gap: 2 }}>
-                <ListItemDecorator>
-                  <AspectRatio
-                    sx={{ flexBasis: 200, borderRadius: 'sm', overflow: 'auto' }}
-                  >
-                    <img src={item.src} alt={item.title} />
-                  </AspectRatio>
-                </ListItemDecorator>
+                <AspectRatio
+                  sx={{ flexBasis: 120, borderRadius: 'sm', overflow: 'auto' }}
+                >
+                  <img src={item.src} alt={item.title} />
+                </AspectRatio>
                 <ListItemContent>
                   <Typography fontWeight="md">{item.title}</Typography>
                   <Typography level="body2">{item.description}</Typography>

diff --git a/docs/data/joy/components/aspect-ratio/ListStackRatio.tsx b/docs/data/joy/components/aspect-ratio/ListStackRatio.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Typography from '@mui/joy/Typography';
+import Sheet from '@mui/joy/Sheet';
+import List from '@mui/joy/List';
+import ListDivider from '@mui/joy/ListDivider';
+import ListItem from '@mui/joy/ListItem';
+import ListItemContent from '@mui/joy/ListItemContent';
+import ListItemButton from '@mui/joy/ListItemButton';
+
+const data = [
+  {
+    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',
+    title: 'Night view',
+    description: '4.21M views',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1527549993586-dff825b37782?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270',
+    title: 'Lake view',
+    description: '4.74M views',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270',
+    title: 'Mountain view',
+    description: '3.98M views',
+  },
+];
+
+export default function FlexRowRatio() {
+  return (
+    <Sheet
+      variant="outlined"
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1,
+        width: 300,
+        borderRadius: 'sm',
+      }}
+    >
+      <List sx={{ py: 'var(--List-gap)' }}>
+        {data.map((item, index) => (
+          <React.Fragment key={item.title}>
+            <ListItem>
+              <ListItemButton sx={{ gap: 2 }}>
+                <AspectRatio
+                  sx={{ flexBasis: 120, borderRadius: 'sm', overflow: 'auto' }}
+                >
+                  <img src={item.src} alt={item.title} />
+                </AspectRatio>
+                <ListItemContent>
+                  <Typography fontWeight="md">{item.title}</Typography>
+                  <Typography level="body2">{item.description}</Typography>
+                </ListItemContent>
+              </ListItemButton>
+            </ListItem>
+            {index !== data.length - 1 && <ListDivider />}
+          </React.Fragment>
+        ))}
+      </List>
+    </Sheet>
+  );
+}
diff --git a/docs/data/joy/components/aspect-ratio/MediaRatio.tsx b/docs/data/joy/components/aspect-ratio/MediaRatio.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Box from '@mui/joy/Box';
+import Typography from '@mui/joy/Typography';
+
+export default function MediaRatio() {
+  return (
+    <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="body3" mt={2} textAlign="center">
+        An example of using <code>contain</code> value
+      </Typography>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/aspect-ratio/MediaRatio.tsx.preview b/docs/data/joy/components/aspect-ratio/MediaRatio.tsx.preview
@@ -0,0 +1,9 @@
+<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="body3" mt={2} textAlign="center">
+  An example of using <code>contain</code> value
+</Typography>