[Joy] Add Divider component

docs/data/joy/components/card/MultipleInteractionCard.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import AspectRatio from '@mui/joy/AspectRatio';
-import Box from '@mui/joy/Box';
 import Card from '@mui/joy/Card';
 import CardOverflow from '@mui/joy/CardOverflow';
+import Divider from '@mui/joy/Divider';
 import Typography from '@mui/joy/Typography';
 import IconButton from '@mui/joy/IconButton';
 import Link from '@mui/joy/Link';
@@ -43,22 +43,21 @@ export default function MultipleInteractionCard() {
       <Typography level="body2" sx={{ mt: 0.5, mb: 2 }}>
         <Link href="#multiple-actions">California</Link>
       </Typography>
+      <Divider inset="context" />
       <CardOverflow
         variant="soft"
         sx={{
           display: 'flex',
           gap: 1.5,
           py: 1.5,
           px: 'var(--Card-padding)',
-          borderTop: '1px solid',
-          borderColor: 'neutral.outlinedBorder',
           bgcolor: 'background.level1',
         }}
       >
         <Typography level="body3" sx={{ fontWeight: 'md', color: 'text.secondary' }}>
           6.3k views
         </Typography>
-        <Box sx={{ width: 2, bgcolor: 'divider' }} />
+        <Divider orientation="vertical" />
         <Typography level="body3" sx={{ fontWeight: 'md', color: 'text.secondary' }}>
           1 hour ago
         </Typography>

docs/data/joy/components/card/MultipleInteractionCard.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import AspectRatio from '@mui/joy/AspectRatio';
-import Box from '@mui/joy/Box';
 import Card from '@mui/joy/Card';
 import CardOverflow from '@mui/joy/CardOverflow';
+import Divider from '@mui/joy/Divider';
 import Typography from '@mui/joy/Typography';
 import IconButton from '@mui/joy/IconButton';
 import Link from '@mui/joy/Link';
@@ -43,22 +43,21 @@ export default function MultipleInteractionCard() {
       <Typography level="body2" sx={{ mt: 0.5, mb: 2 }}>
         <Link href="#multiple-actions">California</Link>
       </Typography>
+      <Divider inset="context" />
       <CardOverflow
         variant="soft"
         sx={{
           display: 'flex',
           gap: 1.5,
           py: 1.5,
           px: 'var(--Card-padding)',
-          borderTop: '1px solid',
-          borderColor: 'neutral.outlinedBorder',
           bgcolor: 'background.level1',
         }}
       >
         <Typography level="body3" sx={{ fontWeight: 'md', color: 'text.secondary' }}>
           6.3k views
         </Typography>
-        <Box sx={{ width: 2, bgcolor: 'divider' }} />
+        <Divider orientation="vertical" />
         <Typography level="body3" sx={{ fontWeight: 'md', color: 'text.secondary' }}>
           1 hour ago
         </Typography>

docs/data/joy/components/card/OverflowCard.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import AspectRatio from '@mui/joy/AspectRatio';
-import Box from '@mui/joy/Box';
 import Card from '@mui/joy/Card';
 import CardOverflow from '@mui/joy/CardOverflow';
+import Divider from '@mui/joy/Divider';
 import Typography from '@mui/joy/Typography';
 
 export default function OverflowCard() {
@@ -22,22 +22,21 @@ export default function OverflowCard() {
       <Typography level="body2" sx={{ mt: 0.5, mb: 2 }}>
         California
       </Typography>
+      <Divider />
       <CardOverflow
         variant="soft"
         sx={{
           display: 'flex',
           gap: 1.5,
           py: 1.5,
           px: 'var(--Card-padding)',
-          borderTop: '1px solid',
-          borderColor: 'neutral.outlinedBorder',
           bgcolor: 'background.level1',
         }}
       >
         <Typography level="body3" sx={{ fontWeight: 'md', color: 'text.secondary' }}>
           6.3k views
         </Typography>
-        <Box sx={{ width: 2, bgcolor: 'divider' }} />
+        <Divider orientation="vertical" />
         <Typography level="body3" sx={{ fontWeight: 'md', color: 'text.secondary' }}>
           1 hour ago
         </Typography>

docs/data/joy/components/card/OverflowCard.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import AspectRatio from '@mui/joy/AspectRatio';
-import Box from '@mui/joy/Box';
 import Card from '@mui/joy/Card';
 import CardOverflow from '@mui/joy/CardOverflow';
+import Divider from '@mui/joy/Divider';
 import Typography from '@mui/joy/Typography';
 
 export default function OverflowCard() {
@@ -22,22 +22,21 @@ export default function OverflowCard() {
       <Typography level="body2" sx={{ mt: 0.5, mb: 2 }}>
         California
       </Typography>
+      <Divider />
       <CardOverflow
         variant="soft"
         sx={{
           display: 'flex',
           gap: 1.5,
           py: 1.5,
           px: 'var(--Card-padding)',
-          borderTop: '1px solid',
-          borderColor: 'neutral.outlinedBorder',
           bgcolor: 'background.level1',
         }}
       >
         <Typography level="body3" sx={{ fontWeight: 'md', color: 'text.secondary' }}>
           6.3k views
         </Typography>
-        <Box sx={{ width: 2, bgcolor: 'divider' }} />
+        <Divider orientation="vertical" />
         <Typography level="body3" sx={{ fontWeight: 'md', color: 'text.secondary' }}>
           1 hour ago
         </Typography>

docs/data/joy/components/card/RowCard.js

@@ -3,6 +3,7 @@ import AspectRatio from '@mui/joy/AspectRatio';
 import Card from '@mui/joy/Card';
 import CardContent from '@mui/joy/CardContent';
 import CardOverflow from '@mui/joy/CardOverflow';
+import Divider from '@mui/joy/Divider';
 import Typography from '@mui/joy/Typography';
 
 export default function InteractiveCard() {
@@ -12,7 +13,6 @@ export default function InteractiveCard() {
       variant="outlined"
       sx={{
         minWidth: '260px',
-        gap: 2,
         bgcolor: 'background.body',
       }}
     >
@@ -24,12 +24,13 @@ export default function InteractiveCard() {
           />
         </AspectRatio>
       </CardOverflow>
-      <CardContent>
+      <CardContent sx={{ px: 2 }}>
         <Typography fontWeight="md" textColor="success.plainColor" mb={0.5}>
           Yosemite Park
         </Typography>
         <Typography level="body2">California, USA</Typography>
       </CardContent>
+      <Divider />
       <CardOverflow
         variant="soft"
         color="primary"

docs/data/joy/components/card/RowCard.tsx

@@ -3,6 +3,7 @@ import AspectRatio from '@mui/joy/AspectRatio';
 import Card from '@mui/joy/Card';
 import CardContent from '@mui/joy/CardContent';
 import CardOverflow from '@mui/joy/CardOverflow';
+import Divider from '@mui/joy/Divider';
 import Typography from '@mui/joy/Typography';
 
 export default function InteractiveCard() {
@@ -12,7 +13,6 @@ export default function InteractiveCard() {
       variant="outlined"
       sx={{
         minWidth: '260px',
-        gap: 2,
         bgcolor: 'background.body',
       }}
     >
@@ -24,12 +24,13 @@ export default function InteractiveCard() {
           />
         </AspectRatio>
       </CardOverflow>
-      <CardContent>
+      <CardContent sx={{ px: 2 }}>
         <Typography fontWeight="md" textColor="success.plainColor" mb={0.5}>
           Yosemite Park
         </Typography>
         <Typography level="body2">California, USA</Typography>
       </CardContent>
+      <Divider />
       <CardOverflow
         variant="soft"
         color="primary"

docs/data/joy/components/divider/DividerChildPosition.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Divider from '@mui/joy/Divider';
+import Stack from '@mui/joy/Stack';
+import Slider from '@mui/joy/Slider';
+import Sheet from '@mui/joy/Sheet';
+
+export default function DividerChildPosition() {
+  const [position, setPosition] = React.useState(50);
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Stack spacing={1} sx={{ fontSize: 'sm' }}>
+        <Sheet variant="soft" sx={{ height: 40, borderRadius: 'xs' }} />
+        <Divider sx={{ '--Divider-childPosition': `${position}%` }}>
+          Visual indicator
+        </Divider>
+        <Sheet variant="soft" sx={{ height: 40, borderRadius: 'xs' }} />
+      </Stack>
+      <Slider
+        value={position}
+        min={0}
+        max={100}
+        step={1}
+        valueLabelDisplay="on"
+        onChange={(event, value) => setPosition(value)}
+      />
+    </Box>
+  );
+}

docs/data/joy/components/divider/DividerInCard.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Card from '@mui/joy/Card';
+import Checkbox from '@mui/joy/Checkbox';
+import Divider from '@mui/joy/Divider';
+import Typography from '@mui/joy/Typography';
+import ArrowForward from '@mui/icons-material/ArrowForward';
+
+export default function DividerInCard() {
+  const [row, setRow] = React.useState(false);
+  return (
+    <Box>
+      <Checkbox
+        label="horizontal"
+        checked={row}
+        onChange={(event) => setRow(event.target.checked)}
+        sx={{ mb: 2 }}
+      />
+      <Card
+        row={row}
+        variant="outlined"
+        sx={{ width: 400, maxWidth: '100%', gap: 1.5 }}
+      >
+        <Typography fontSize="lg" fontWeight="md">
+          Headline
+        </Typography>
+        <Divider />
+        <Box sx={{ display: row ? 'block' : 'contents' }}>
+          <Typography level="body2">
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. Lorem Ipsum has been the industry standard dummy text ever
+            since the 1500s
+          </Typography>
+          <Button
+            size="sm"
+            variant="soft"
+            color="neutral"
+            endDecorator={<ArrowForward />}
+            sx={{ width: '100%', mt: row ? 2 : 0 }}
+          >
+            See more
+          </Button>
+        </Box>
+      </Card>
+    </Box>
+  );
+}

docs/data/joy/components/divider/DividerInModalDialog.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import ModalDialog from '@mui/joy/ModalDialog';
+import Divider from '@mui/joy/Divider';
+import Typography from '@mui/joy/Typography';
+
+export default function DividerInModalDialog() {
+  return (
+    <ModalDialog
+      sx={{
+        // this custom styles is for demonstration purpose, you might not need them in your app
+        position: 'static',
+        transform: 'none',
+        maxWidth: 300,
+      }}
+    >
+      <Typography fontSize="lg" fontWeight="lg">
+        Modal Title
+      </Typography>
+      <Divider inset="none" sx={{ my: 1.5 }} />
+      <Typography level="body2">
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+        Lorem Ipsum has been the industry standard dummy text ever since the 1500s
+      </Typography>
+      <Divider sx={{ mt: 2 }} />
+      <Box
+        sx={{
+          bgcolor: 'background.level1',
+          px: 2,
+          py: 1.5,
+          m: 'calc(-1 * var(--ModalDialog-padding))',
+          mt: 0,
+          borderBottomLeftRadius: 'var(--ModalDialog-radius)',
+          borderBottomRightRadius: 'var(--ModalDialog-radius)',
+          textAlign: 'right',
+        }}
+      >
+        <Button size="sm">Got it!</Button>
+      </Box>
+    </ModalDialog>
+  );
+}

docs/data/joy/components/divider/DividerText.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Stack from '@mui/joy/Stack';
+import Divider from '@mui/joy/Divider';
+import Chip from '@mui/joy/Chip';
+
+export default function DividerText() {
+  const content = (
+    <Box sx={{ fontSize: 'sm', color: 'text.tertiary' }}>
+      {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo.
+   Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+   Sed malesuada lobortis pretium.`}
+    </Box>
+  );
+
+  return (
+    <Stack spacing={1}>
+      {content}
+      <Divider>Visual indicator</Divider>
+      {content}
+      <Divider>
+        <Chip variant="soft" color="neutral" size="sm">
+          Visual indicator
+        </Chip>
+      </Divider>
+      {content}
+    </Stack>
+  );
+}