Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] Improve aspect ratio docs and integration #33065

Merged
merged 8 commits into from
Jun 8, 2022
Merged

[docs] Improve aspect ratio docs and integration #33065

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
cbc5cdb
Add placeholder demo
siriwatknp Jun 8, 2022
66bb5a1
remove unnecessary styles
siriwatknp Jun 8, 2022
c796a0d
add typescript demos
siriwatknp Jun 8, 2022
ff092ae
fix list stack demo
siriwatknp Jun 8, 2022
0a4aa25
use Card
siriwatknp Jun 8, 2022
19791ff
use nested selector
siriwatknp Jun 8, 2022
dbf998b
add next.js image integration
siriwatknp Jun 8, 2022
13915fe
run typescript format
siriwatknp Jun 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions docs/data/joy/components/aspect-ratio/BasicRatio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
17 changes: 17 additions & 0 deletions docs/data/joy/components/aspect-ratio/BasicRatio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
8 changes: 8 additions & 0 deletions docs/data/joy/components/aspect-ratio/BasicRatio.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<Sheet
variant="outlined"
sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }}
>
<AspectRatio>
<Typography level="h2">16 : 9</Typography>
</AspectRatio>
</Sheet>
13 changes: 6 additions & 7 deletions docs/data/joy/components/aspect-ratio/CarouselRatio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
{
Expand All @@ -28,6 +28,7 @@ export default function FlexRowRatio() {
sx={{
display: 'flex',
gap: 1,
py: 1,
overflow: 'auto',
width: 343,
scrollSnapType: 'x mandatory',
Expand All @@ -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
Expand All @@ -59,7 +58,7 @@ export default function FlexRowRatio() {
<Typography fontWeight="md">{item.title}</Typography>
<Typography level="body2">{item.description}</Typography>
</Box>
</Sheet>
</Card>
))}
</Box>
);
Expand Down
65 changes: 65 additions & 0 deletions docs/data/joy/components/aspect-ratio/CarouselRatio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
7 changes: 1 addition & 6 deletions docs/data/joy/components/aspect-ratio/CustomRatio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
17 changes: 17 additions & 0 deletions docs/data/joy/components/aspect-ratio/CustomRatio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
8 changes: 8 additions & 0 deletions docs/data/joy/components/aspect-ratio/CustomRatio.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion docs/data/joy/components/aspect-ratio/FlexRowRatio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
52 changes: 52 additions & 0 deletions docs/data/joy/components/aspect-ratio/FlexRowRatio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
20 changes: 6 additions & 14 deletions docs/data/joy/components/aspect-ratio/ListStackRatio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
{
Expand Down Expand Up @@ -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>
Expand Down
63 changes: 63 additions & 0 deletions docs/data/joy/components/aspect-ratio/ListStackRatio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
20 changes: 20 additions & 0 deletions docs/data/joy/components/aspect-ratio/MediaRatio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
9 changes: 9 additions & 0 deletions docs/data/joy/components/aspect-ratio/MediaRatio.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Loading