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

[system] Add Stack component #33760

Merged
merged 5 commits into from Aug 4, 2022
Merged

[system] Add Stack component #33760

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4760020
[system] Add Stack component & createStack factory
mnajdova Aug 2, 2022
c5f61cb
Resolve some type issues
mnajdova Aug 2, 2022
3368b3a
Fix ref & color type issue
mnajdova Aug 2, 2022
0df93a9
Fix CI issues
mnajdova Aug 3, 2022
4771060
Export all types
mnajdova Aug 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 21 additions & 0 deletions docs/data/system/components/stack/BasicStack.js
View file
Open in desktop
@@ -0,0 +1,21 @@
import * as React from 'react';
import Paper from '@mui/material/Paper';
import { styled, Box, Stack } from '@mui/system';

const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
padding: theme.spacing(1),
textAlign: 'center',
}));

export default function BasicStack() {
return (
<Box sx={{ width: '100%' }}>
<Stack spacing={2}>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
</Box>
);
}
21 changes: 21 additions & 0 deletions docs/data/system/components/stack/BasicStack.tsx
View file
Open in desktop
@@ -0,0 +1,21 @@
import * as React from 'react';
import Paper from '@mui/material/Paper';
import { styled, Box, Stack } from '@mui/system';

const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
padding: theme.spacing(1),
textAlign: 'center',
}));

export default function BasicStack() {
return (
<Box sx={{ width: '100%' }}>
<Stack spacing={2}>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
</Box>
);
}
5 changes: 5 additions & 0 deletions docs/data/system/components/stack/BasicStack.tsx.preview
View file
Open in desktop
@@ -0,0 +1,5 @@
<Stack spacing={2}>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
21 changes: 21 additions & 0 deletions docs/data/system/components/stack/DirectionStack.js
View file
Open in desktop
@@ -0,0 +1,21 @@
import * as React from 'react';
import Paper from '@mui/material/Paper';
import { styled, Stack } from '@mui/system';

const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
padding: theme.spacing(1),
textAlign: 'center',
}));

export default function DirectionStack() {
return (
<div>
<Stack direction="row" spacing={2}>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
</div>
);
}
21 changes: 21 additions & 0 deletions docs/data/system/components/stack/DirectionStack.tsx
View file
Open in desktop
@@ -0,0 +1,21 @@
import * as React from 'react';
import Paper from '@mui/material/Paper';
import { styled, Stack } from '@mui/system';

const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
padding: theme.spacing(1),
textAlign: 'center',
}));

export default function DirectionStack() {
return (
<div>
<Stack direction="row" spacing={2}>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
</div>
);
}
5 changes: 5 additions & 0 deletions docs/data/system/components/stack/DirectionStack.tsx.preview
View file
Open in desktop
@@ -0,0 +1,5 @@
<Stack direction="row" spacing={2}>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
26 changes: 26 additions & 0 deletions docs/data/system/components/stack/DividerStack.js
View file
Open in desktop
@@ -0,0 +1,26 @@
import * as React from 'react';
import Paper from '@mui/material/Paper';
import Divider from '@mui/material/Divider';
import { styled, Stack } from '@mui/system';

const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
padding: theme.spacing(1),
textAlign: 'center',
}));

export default function DividerStack() {
return (
<div>
<Stack
direction="row"
divider={<Divider orientation="vertical" flexItem />}
spacing={2}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
</div>
);
}
26 changes: 26 additions & 0 deletions docs/data/system/components/stack/DividerStack.tsx
View file
Open in desktop
@@ -0,0 +1,26 @@
import * as React from 'react';
import Paper from '@mui/material/Paper';
import Divider from '@mui/material/Divider';
import { styled, Stack } from '@mui/system';

const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
padding: theme.spacing(1),
textAlign: 'center',
}));

export default function DividerStack() {
return (
<div>
<Stack
direction="row"
divider={<Divider orientation="vertical" flexItem />}
spacing={2}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
</div>
);
}
9 changes: 9 additions & 0 deletions docs/data/system/components/stack/DividerStack.tsx.preview
View file
Open in desktop
@@ -0,0 +1,9 @@
<Stack
direction="row"
divider={<Divider orientation="vertical" flexItem />}
spacing={2}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
198 changes: 198 additions & 0 deletions docs/data/system/components/stack/InteractiveStack.js
View file
Open in desktop
@@ -0,0 +1,198 @@
import * as React from 'react';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import FormControlLabel from '@mui/material/FormControlLabel';
import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
import Paper from '@mui/material/Paper';
import RadioGroup from '@mui/material/RadioGroup';
import Radio from '@mui/material/Radio';
import { Stack, Unstable_Grid as Grid } from '@mui/system';

export default function InteractiveStack() {
const [direction, setDirection] = React.useState('row');
const [justifyContent, setJustifyContent] = React.useState('center');
const [alignItems, setAlignItems] = React.useState('center');
const [spacing, setSpacing] = React.useState(2);

const jsx = `
<Stack
direction="${direction}"
justifyContent="${justifyContent}"
alignItems="${alignItems}"
spacing={${spacing}}
>
`;

return (
<Stack sx={{ flexGrow: 1 }}>
<Stack
direction={direction}
justifyContent={justifyContent}
alignItems={alignItems}
spacing={spacing}
sx={{ height: 240 }}
>
{[0, 1, 2].map((value) => (
<Paper
key={value}
sx={{
p: 2,
pt: value + 1,
pb: value + 1,
color: 'text.secondary',
typography: 'body2',
backgroundColor: (theme) =>
theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
}}
>
{`Item ${value + 1}`}
</Paper>
))}
</Stack>
<Paper sx={{ p: 2 }}>
<Grid container spacing={3}>
<Grid xs={12}>
<FormControl component="fieldset">
<FormLabel component="legend">direction</FormLabel>
<RadioGroup
row
name="direction"
aria-label="direction"
value={direction}
onChange={(event) => {
setDirection(event.target.value);
}}
>
<FormControlLabel value="row" control={<Radio />} label="row" />
<FormControlLabel
value="row-reverse"
control={<Radio />}
label="row-reverse"
/>
<FormControlLabel
value="column"
control={<Radio />}
label="column"
/>
<FormControlLabel
value="column-reverse"
control={<Radio />}
label="column-reverse"
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid xs={12}>
<FormControl component="fieldset">
<FormLabel component="legend">alignItems</FormLabel>
<RadioGroup
row
name="alignItems"
aria-label="align items"
value={alignItems}
onChange={(event) => {
setAlignItems(event.target.value);
}}
>
<FormControlLabel
value="flex-start"
control={<Radio />}
label="flex-start"
/>
<FormControlLabel
value="center"
control={<Radio />}
label="center"
/>
<FormControlLabel
value="flex-end"
control={<Radio />}
label="flex-end"
/>
<FormControlLabel
value="stretch"
control={<Radio />}
label="stretch"
/>
<FormControlLabel
value="baseline"
control={<Radio />}
label="baseline"
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid xs={12}>
<FormControl component="fieldset">
<FormLabel component="legend">justifyContent</FormLabel>
<RadioGroup
row
name="justifyContent"
aria-label="justifyContent"
value={justifyContent}
onChange={(event) => {
setJustifyContent(event.target.value);
}}
>
<FormControlLabel
value="flex-start"
control={<Radio />}
label="flex-start"
/>
<FormControlLabel
value="center"
control={<Radio />}
label="center"
/>
<FormControlLabel
value="flex-end"
control={<Radio />}
label="flex-end"
/>
<FormControlLabel
value="space-between"
control={<Radio />}
label="space-between"
/>
<FormControlLabel
value="space-around"
control={<Radio />}
label="space-around"
/>
<FormControlLabel
value="space-evenly"
control={<Radio />}
label="space-evenly"
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid xs={12}>
<FormControl component="fieldset">
<FormLabel component="legend">spacing</FormLabel>
<RadioGroup
row
name="spacing"
aria-label="spacing"
value={spacing.toString()}
onChange={(event) => {
setSpacing(Number(event.target.value));
}}
>
{[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => (
<FormControlLabel
key={value}
value={value.toString()}
control={<Radio />}
label={value}
/>
))}
</RadioGroup>
</FormControl>
</Grid>
</Grid>
</Paper>
<HighlightedCode code={jsx} language="jsx" />
</Stack>
);
}