[Joy] Miscellaneous fixes (#38462)

mui · Aug 17, 2023 · 2a5469d · 2a5469d
1 parent a2ef8a6
commit 2a5469d
Show file tree

Hide file tree

Showing 54 changed files with 368 additions and 181 deletions.
diff --git a/docs/data/joy/components/aspect-ratio/FlexAspectRatio.js b/docs/data/joy/components/aspect-ratio/FlexAspectRatio.js
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Button from '@mui/joy/Button';
+import Card from '@mui/joy/Card';
+import CardContent from '@mui/joy/CardContent';
+import CardActions from '@mui/joy/CardActions';
+import Typography from '@mui/joy/Typography';
+import Stack from '@mui/joy/Stack';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Switch from '@mui/joy/Switch';
+
+export default function FlexAspectRatio() {
+  const [flex, setFlex] = React.useState(false);
+  return (
+    <Stack spacing={2} alignItems="center">
+      <FormControl orientation="horizontal">
+        <FormLabel>Flex</FormLabel>
+        <Switch checked={flex} onChange={(event) => setFlex(event.target.checked)} />
+      </FormControl>
+      <Card
+        orientation="horizontal"
+        variant="outlined"
+        sx={{ boxShadow: 'none', resize: 'horizontal', overflow: 'auto' }}
+      >
+        <AspectRatio ratio="21/9" flex={flex} sx={{ flexBasis: 200 }}>
+          <Typography level="h1" component="div">
+            21 / 9
+          </Typography>
+        </AspectRatio>
+        <CardContent>
+          <Typography level="body-xs">20 APR 2023</Typography>
+          <Typography level="title-lg" component="div">
+            Widget Title
+          </Typography>
+          <Typography level="body-lg">
+            Lorem ipsum is placeholder text commonly used in the graphic.
+          </Typography>
+          <CardActions buttonFlex="none">
+            <Button variant="outlined" color="neutral" size="sm">
+              See details
+            </Button>
+            <Button variant="solid" color="neutral" size="sm">
+              Learn more
+            </Button>
+          </CardActions>
+        </CardContent>
+      </Card>
+    </Stack>
+  );
+}
diff --git a/docs/data/joy/components/aspect-ratio/FlexAspectRatio.tsx b/docs/data/joy/components/aspect-ratio/FlexAspectRatio.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Button from '@mui/joy/Button';
+import Card from '@mui/joy/Card';
+import CardContent from '@mui/joy/CardContent';
+import CardActions from '@mui/joy/CardActions';
+import Typography from '@mui/joy/Typography';
+import Stack from '@mui/joy/Stack';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Switch from '@mui/joy/Switch';
+
+export default function FlexAspectRatio() {
+  const [flex, setFlex] = React.useState(false);
+  return (
+    <Stack spacing={2} alignItems="center">
+      <FormControl orientation="horizontal">
+        <FormLabel>Flex</FormLabel>
+        <Switch checked={flex} onChange={(event) => setFlex(event.target.checked)} />
+      </FormControl>
+      <Card
+        orientation="horizontal"
+        variant="outlined"
+        sx={{ boxShadow: 'none', resize: 'horizontal', overflow: 'auto' }}
+      >
+        <AspectRatio ratio="21/9" flex={flex} sx={{ flexBasis: 200 }}>
+          <Typography level="h1" component="div">
+            21 / 9
+          </Typography>
+        </AspectRatio>
+        <CardContent>
+          <Typography level="body-xs">20 APR 2023</Typography>
+          <Typography level="title-lg" component="div">
+            Widget Title
+          </Typography>
+          <Typography level="body-lg">
+            Lorem ipsum is placeholder text commonly used in the graphic.
+          </Typography>
+          <CardActions buttonFlex="none">
+            <Button variant="outlined" color="neutral" size="sm">
+              See details
+            </Button>
+            <Button variant="solid" color="neutral" size="sm">
+              Learn more
+            </Button>
+          </CardActions>
+        </CardContent>
+      </Card>
+    </Stack>
+  );
+}
diff --git a/docs/data/joy/components/aspect-ratio/FlexRowRatio.js b/docs/data/joy/components/aspect-ratio/FlexRowRatio.js
@@ -11,7 +11,12 @@ export default function FlexRowRatio() {
   const [flexBasis, setFlexBasis] = React.useState(200);
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-      <Card variant="outlined" orientation="horizontal" sx={{ minWidth: 300 }}>
+      <Card
+        variant="outlined"
+        size="sm"
+        orientation="horizontal"
+        sx={{ gap: 2, minWidth: 300 }}
+      >
         <AspectRatio
           sx={{
             flexBasis: flexBasis ? `${flexBasis}px` : undefined,

diff --git a/docs/data/joy/components/aspect-ratio/FlexRowRatio.tsx b/docs/data/joy/components/aspect-ratio/FlexRowRatio.tsx
@@ -11,7 +11,12 @@ export default function FlexRowRatio() {
   const [flexBasis, setFlexBasis] = React.useState(200);
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-      <Card variant="outlined" orientation="horizontal" sx={{ minWidth: 300 }}>
+      <Card
+        variant="outlined"
+        size="sm"
+        orientation="horizontal"
+        sx={{ gap: 2, minWidth: 300 }}
+      >
         <AspectRatio
           sx={{
             flexBasis: flexBasis ? `${flexBasis}px` : undefined,

diff --git a/docs/data/joy/components/aspect-ratio/aspect-ratio.md b/docs/data/joy/components/aspect-ratio/aspect-ratio.md
@@ -82,6 +82,10 @@ When the Aspect Ratio component is a child of a flexbox `row` container, use `fl
 
 {{"demo": "FlexRowRatio.js"}}
 
+By default, the Aspect Ratio component will retain the provided aspect ratio. If you want the Aspect Ratio component to fill the vertical space, set the `flex` prop to `true`:
+
+{{"demo": "FlexAspectRatio.js"}}
+
 ## Using with Next.js Image
 
 The Aspect Ratio component can be used with a [Next.js Image](https://nextjs.org/docs/app/building-your-application/optimizing/images) component as a child.

diff --git a/docs/data/joy/components/button/ButtonDisabled.js b/docs/data/joy/components/button/ButtonDisabled.js
@@ -1,20 +1,21 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
+import Add from '@mui/icons-material/Add';
 
 export default function ButtonDisabled() {
   return (
     <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-      <Button disabled variant="solid">
+      <Button disabled variant="solid" startDecorator={<Add />}>
         Solid
       </Button>
-      <Button disabled variant="soft">
+      <Button disabled color="neutral" variant="soft" startDecorator={<Add />}>
         Soft
       </Button>
-      <Button disabled variant="outlined">
+      <Button disabled color="success" variant="outlined" startDecorator={<Add />}>
         Outlined
       </Button>
-      <Button disabled variant="plain">
+      <Button disabled color="danger" variant="plain" startDecorator={<Add />}>
         Plain
       </Button>
     </Box>

diff --git a/docs/data/joy/components/button/ButtonDisabled.tsx b/docs/data/joy/components/button/ButtonDisabled.tsx
@@ -1,20 +1,21 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
+import Add from '@mui/icons-material/Add';
 
 export default function ButtonDisabled() {
   return (
     <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-      <Button disabled variant="solid">
+      <Button disabled variant="solid" startDecorator={<Add />}>
         Solid
       </Button>
-      <Button disabled variant="soft">
+      <Button disabled color="neutral" variant="soft" startDecorator={<Add />}>
         Soft
       </Button>
-      <Button disabled variant="outlined">
+      <Button disabled color="success" variant="outlined" startDecorator={<Add />}>
         Outlined
       </Button>
-      <Button disabled variant="plain">
+      <Button disabled color="danger" variant="plain" startDecorator={<Add />}>
         Plain
       </Button>
     </Box>

diff --git a/docs/data/joy/components/button/ButtonDisabled.tsx.preview b/docs/data/joy/components/button/ButtonDisabled.tsx.preview
@@ -1,12 +1,12 @@
-<Button disabled variant="solid">
+<Button disabled variant="solid" startDecorator={<Add />}>
   Solid
 </Button>
-<Button disabled variant="soft">
+<Button disabled color="neutral" variant="soft" startDecorator={<Add />}>
   Soft
 </Button>
-<Button disabled variant="outlined">
+<Button disabled color="success" variant="outlined" startDecorator={<Add />}>
   Outlined
 </Button>
-<Button disabled variant="plain">
+<Button disabled color="danger" variant="plain" startDecorator={<Add />}>
   Plain
 </Button>
diff --git a/docs/data/joy/components/button/IconButtons.js b/docs/data/joy/components/button/IconButtons.js
@@ -1,23 +1,37 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
 import IconButton from '@mui/joy/IconButton';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Stack from '@mui/joy/Stack';
+import Switch from '@mui/joy/Switch';
 import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
 
 export default function IconButtons() {
+  const [disabled, setDisabled] = React.useState(false);
   return (
-    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }}>
-      <IconButton variant="solid">
-        <FavoriteBorder />
-      </IconButton>
-      <IconButton variant="soft">
-        <FavoriteBorder />
-      </IconButton>
-      <IconButton variant="outlined">
-        <FavoriteBorder />
-      </IconButton>
-      <IconButton variant="plain">
-        <FavoriteBorder />
-      </IconButton>
-    </Box>
+    <Stack spacing={3} alignItems="center">
+      <FormControl orientation="horizontal">
+        <FormLabel>Disabled</FormLabel>
+        <Switch
+          checked={disabled}
+          onChange={(event) => setDisabled(event.target.checked)}
+        />
+      </FormControl>
+      <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }}>
+        <IconButton disabled={disabled} variant="solid">
+          <FavoriteBorder />
+        </IconButton>
+        <IconButton disabled={disabled} variant="soft">
+          <FavoriteBorder />
+        </IconButton>
+        <IconButton disabled={disabled} variant="outlined">
+          <FavoriteBorder />
+        </IconButton>
+        <IconButton disabled={disabled} variant="plain">
+          <FavoriteBorder />
+        </IconButton>
+      </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/joy/components/button/IconButtons.tsx b/docs/data/joy/components/button/IconButtons.tsx
@@ -1,23 +1,37 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
 import IconButton from '@mui/joy/IconButton';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Stack from '@mui/joy/Stack';
+import Switch from '@mui/joy/Switch';
 import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
 
 export default function IconButtons() {
+  const [disabled, setDisabled] = React.useState(false);
   return (
-    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }}>
-      <IconButton variant="solid">
-        <FavoriteBorder />
-      </IconButton>
-      <IconButton variant="soft">
-        <FavoriteBorder />
-      </IconButton>
-      <IconButton variant="outlined">
-        <FavoriteBorder />
-      </IconButton>
-      <IconButton variant="plain">
-        <FavoriteBorder />
-      </IconButton>
-    </Box>
+    <Stack spacing={3} alignItems="center">
+      <FormControl orientation="horizontal">
+        <FormLabel>Disabled</FormLabel>
+        <Switch
+          checked={disabled}
+          onChange={(event) => setDisabled(event.target.checked)}
+        />
+      </FormControl>
+      <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }}>
+        <IconButton disabled={disabled} variant="solid">
+          <FavoriteBorder />
+        </IconButton>
+        <IconButton disabled={disabled} variant="soft">
+          <FavoriteBorder />
+        </IconButton>
+        <IconButton disabled={disabled} variant="outlined">
+          <FavoriteBorder />
+        </IconButton>
+        <IconButton disabled={disabled} variant="plain">
+          <FavoriteBorder />
+        </IconButton>
+      </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/joy/components/button/IconButtons.tsx.preview b/docs/data/joy/components/button/IconButtons.tsx.preview
diff --git a/docs/data/joy/components/card/CardUsage.js b/docs/data/joy/components/card/CardUsage.js
@@ -13,7 +13,7 @@ export default function CardUsage() {
       data={[
         {
           propName: 'variant',
-          knob: 'select',
+          knob: 'radio',
           defaultValue: 'plain',
           options: ['plain', 'outlined', 'soft', 'solid'],
         },
@@ -42,9 +42,10 @@ export default function CardUsage() {
           sx={{
             m: 1,
             mb: 4,
+            maxWidth: 350,
           }}
         >
-          <AspectRatio ratio="16/9" sx={{ width: 160 }}>
+          <AspectRatio ratio="16/9">
             <img
               src="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=286"
               srcSet="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=286&dpr=2 2x"
@@ -53,11 +54,21 @@ export default function CardUsage() {
             />
           </AspectRatio>
           <CardContent>
-            <Typography fontWeight="lg" textColor="inherit">
-              Yosemite
+            <Typography level="body-xs">NATIONAL PARK</Typography>
+            <Typography
+              level="title-lg"
+              component="div"
+              sx={{ textWrap: 'balance' }}
+            >
+              Yosemite - Your Next Adventure
+            </Typography>
+            <Typography>
+              Yosemite National Park is in California’s Sierra Nevada mountains.
             </Typography>
-            <Typography level="body-sm">April 24 to May 02, 2021</Typography>
             <CardActions>
+              <Button variant="outlined" size="sm">
+                Add to list
+              </Button>
               <Button size="sm">Explore</Button>
             </CardActions>
           </CardContent>

diff --git a/docs/data/joy/components/card/CardVariables.js b/docs/data/joy/components/card/CardVariables.js
@@ -143,7 +143,7 @@ export default function CardVariables() {
               backdropFilter: 'blur(4px)',
             }}
           />
-          <CardContent sx={{ textAlign: 'center' }}>
+          <CardContent>
             <CircularProgress
               determinate
               value={70}
@@ -156,6 +156,8 @@ export default function CardVariables() {
             >
               <Typography>70%</Typography>
             </CircularProgress>
+          </CardContent>
+          <CardContent sx={{ textAlign: 'center', justifyContent: 'center' }}>
             <Typography fontWeight="lg" textColor="#fff">
               Card title
             </Typography>