Skip to content

Commit

Permalink
[Grid] Apply theme.spacing.unit to grid spacing
Browse files Browse the repository at this point in the history
  • Loading branch information
@ifndefdeadmau5 @oliviertassinari
ifndefdeadmau5 authored and oliviertassinari committed Feb 7, 2019
1 parent c8a91de commit 306f203
Show file tree
Hide file tree
Showing 52 changed files with 100 additions and 92 deletions.
4 changes: 2 additions & 2 deletions docs/src/pages/demos/chips/ChipsPlayground.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ class ChipsPlayground extends React.Component {
return (
<Grid container className={classes.root}>
<Grid item xs={12}>
<Grid container justify="center" alignItems="center" spacing={40}>
<Grid container justify="center" alignItems="center" spacing={5}>
<Grid item className={classes.chipWrapper}>
<Chip
label="Awesome Chip Component"
Expand All @@ -131,7 +131,7 @@ class ChipsPlayground extends React.Component {
</Grid>
<Grid item xs={12}>
<Paper className={classes.control}>
<Grid container spacing={24}>
<Grid container spacing={3}>
<Grid item xs={12}>
<FormControl component="fieldset">
<FormLabel>color</FormLabel>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/demos/lists/InteractiveList.hooks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ function InteractiveList() {
label="Enable secondary text"
/>
</FormGroup>
<Grid container spacing={16}>
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Typography variant="h6" className={classes.title}>
Text only
Expand Down Expand Up @@ -105,7 +105,7 @@ function InteractiveList() {
</div>
</Grid>
</Grid>
<Grid container spacing={16}>
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Typography variant="h6" className={classes.title}>
Avatar with text
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/demos/lists/InteractiveList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ class InteractiveList extends React.Component {
label="Enable secondary text"
/>
</FormGroup>
<Grid container spacing={16}>
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Typography variant="h6" className={classes.title}>
Text only
Expand Down Expand Up @@ -111,7 +111,7 @@ class InteractiveList extends React.Component {
</div>
</Grid>
</Grid>
<Grid container spacing={16}>
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Typography variant="h6" className={classes.title}>
Avatar with text
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/demos/text-fields/InputWithIcon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function InputWithIcon(props) {
/>

<div className={classes.margin}>
<Grid container spacing={8} alignItems="flex-end">
<Grid container spacing={1} alignItems="flex-end">
<Grid item>
<AccountCircle />
</Grid>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/demos/tooltips/PositionedTooltips.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ function PositionedTooltips(props) {
<Button>left-end</Button>
</Tooltip>
</Grid>
<Grid item container xs={6} alignItems="flex-end" direction="column" spacing={0}>
<Grid item container xs={6} alignItems="flex-end" direction="column">
<Grid item>
<Tooltip title="Add" placement="right-start">
<Button>right-start</Button>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/discover-more/team/Team.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ const styles = theme => ({
function Team(props) {
const { classes } = props;
return (
<Grid container spacing={16}>
<Grid container spacing={2}>
{members.map(member => (
<Grid key={member.name} item xs={12} md={6}>
<Paper>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/getting-started/page-layout-examples/PageLayoutExamples.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ function PageLayoutExamples(props) {
const { classes, t } = props;

return (
<Grid container spacing={16}>
<Grid container spacing={2}>
{layouts(t).map(layout => (
<Grid item sm={6} md={4} className={classes.item} key={layout.title}>
<Card className={classes.card}>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/getting-started/page-layout-examples/album/Album.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ function Album(props) {
entirely.
</Typography>
<div className={classes.heroButtons}>
<Grid container spacing={16} justify="center">
<Grid container spacing={2} justify="center">
<Grid item>
<Button variant="contained" color="primary">
Main call to action
Expand All @@ -108,7 +108,7 @@ function Album(props) {
</div>
<div className={clsx(classes.layout, classes.cardGrid)}>
{/* End hero unit */}
<Grid container spacing={40}>
<Grid container spacing={5}>
{cards.map(card => (
<Grid item key={card} sm={6} md={4} lg={3}>
<Card className={classes.card}>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/getting-started/page-layout-examples/blog/Blog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ function Blog(props) {
</Paper>
{/* End main featured post */}
{/* Sub featured posts */}
<Grid container spacing={40} className={classes.cardGrid}>
<Grid container spacing={5} className={classes.cardGrid}>
{featuredPosts.map(post => (
<Grid item key={post.title} xs={12} md={6}>
<Card className={classes.card}>
Expand Down Expand Up @@ -210,7 +210,7 @@ function Blog(props) {
))}
</Grid>
{/* End sub featured posts */}
<Grid container spacing={40} className={classes.mainGrid}>
<Grid container spacing={5} className={classes.mainGrid}>
{/* Main content */}
<Grid item xs={12} md={8}>
<Typography variant="h6" gutterBottom>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/getting-started/page-layout-examples/checkout/AddressForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ function AddressForm() {
<Typography variant="h6" gutterBottom>
Shipping address
</Typography>
<Grid container spacing={24}>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<TextField
required
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/getting-started/page-layout-examples/checkout/PaymentForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ function PaymentForm() {
<Typography variant="h6" gutterBottom>
Payment method
</Typography>
<Grid container spacing={24}>
<Grid container spacing={3}>
<Grid item xs={12} md={6}>
<TextField required id="cardName" label="Name on card" fullWidth />
</Grid>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/getting-started/page-layout-examples/checkout/Review.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ function Review(props) {
</Typography>
</ListItem>
</List>
<Grid container spacing={16}>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<Typography variant="h6" gutterBottom className={classes.title}>
Shipping
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ function Pricing(props) {
</Typography>
</div>
{/* End hero unit */}
<Grid container spacing={40} alignItems="flex-end">
<Grid container spacing={5} alignItems="flex-end">
{tiers.map(tier => (
// Enterprise card is full width at sm breakpoint
<Grid item key={tier.title} xs={12} sm={tier.title === 'Enterprise' ? 12 : 6} md={4}>
Expand Down Expand Up @@ -186,7 +186,7 @@ function Pricing(props) {
</main>
{/* Footer */}
<footer className={clsx(classes.footer, classes.layout)}>
<Grid container spacing={32} justify="space-evenly">
<Grid container spacing={4} justify="space-evenly">
{footers.map(footer => (
<Grid item xs key={footer.title}>
<Typography variant="h6" color="textPrimary" gutterBottom>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/lab/toggle-button/ToggleButtons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ class ToggleButtons extends React.Component {
const { alignment, formats } = this.state;

return (
<Grid container spacing={16}>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<div className={classes.toggleContainer}>
<ToggleButtonGroup value={alignment} exclusive onChange={this.handleAlignment}>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/layout/grid/AutoGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function AutoGrid(props) {

return (
<div className={classes.root}>
<Grid container spacing={24}>
<Grid container spacing={3}>
<Grid item xs>
<Paper className={classes.paper}>xs</Paper>
</Grid>
Expand All @@ -31,7 +31,7 @@ function AutoGrid(props) {
<Paper className={classes.paper}>xs</Paper>
</Grid>
</Grid>
<Grid container spacing={24}>
<Grid container spacing={3}>
<Grid item xs>
<Paper className={classes.paper}>xs</Paper>
</Grid>
Expand Down
6 changes: 3 additions & 3 deletions docs/src/pages/layout/grid/AutoGridNoWrap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ function AutoGridNoWrap(props) {
return (
<div className={classes.root}>
<Paper className={classes.paper}>
<Grid container wrap="nowrap" spacing={16}>
<Grid container wrap="nowrap" spacing={2}>
<Grid item>
<Avatar>W</Avatar>
</Grid>
Expand All @@ -38,7 +38,7 @@ function AutoGridNoWrap(props) {
</Grid>
</Paper>
<Paper className={classes.paper}>
<Grid container wrap="nowrap" spacing={16}>
<Grid container wrap="nowrap" spacing={2}>
<Grid item>
<Avatar>W</Avatar>
</Grid>
Expand All @@ -48,7 +48,7 @@ function AutoGridNoWrap(props) {
</Grid>
</Paper>
<Paper className={classes.paper}>
<Grid container wrap="nowrap" spacing={16}>
<Grid container wrap="nowrap" spacing={2}>
<Grid item>
<Avatar>W</Avatar>
</Grid>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/layout/grid/CSSGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function CSSGrid(props) {
<Typography variant="subtitle1" gutterBottom>
Material-UI Grid:
</Typography>
<Grid container spacing={24}>
<Grid container spacing={3}>
<Grid item xs={3}>
<Paper className={classes.paper}>xs=3</Paper>
</Grid>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/layout/grid/CenteredGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function CenteredGrid(props) {

return (
<div className={classes.root}>
<Grid container spacing={24}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/layout/grid/ComplexGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,14 @@ function ComplexGrid(props) {
return (
<div className={classes.root}>
<Paper className={classes.paper}>
<Grid container spacing={16}>
<Grid container spacing={2}>
<Grid item>
<ButtonBase className={classes.image}>
<img className={classes.img} alt="complex" src="/static/images/grid/complex.jpg" />
</ButtonBase>
</Grid>
<Grid item xs={12} sm container>
<Grid item xs container direction="column" spacing={16}>
<Grid item xs container direction="column" spacing={2}>
<Grid item xs>
<Typography gutterBottom variant="subtitle1">
Standard license
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/layout/grid/FullWidthGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function FullWidthGrid(props) {

return (
<div className={classes.root}>
<Grid container spacing={24}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/layout/grid/InteractiveGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ class InteractiveGrid extends React.Component {
<Grid item xs={12}>
<Grid
container
spacing={16}
spacing={2}
className={classes.demo}
alignItems={alignItems}
direction={direction}
Expand All @@ -80,7 +80,7 @@ class InteractiveGrid extends React.Component {
</Grid>
<Grid item xs={12}>
<Paper className={classes.control}>
<Grid container spacing={24}>
<Grid container spacing={3}>
<Grid item xs={12}>
<FormControl component="fieldset">
<FormLabel>direction</FormLabel>
Expand Down
8 changes: 4 additions & 4 deletions docs/src/pages/layout/grid/NestedGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,14 +42,14 @@ function NestedGrid(props) {

return (
<div className={classes.root}>
<Grid container spacing={8}>
<Grid container item xs={12} spacing={24}>
<Grid container spacing={1}>
<Grid container item xs={12} spacing={3}>
<FormRow classes={classes} />
</Grid>
<Grid container item xs={12} spacing={24}>
<Grid container item xs={12} spacing={3}>
<FormRow classes={classes} />
</Grid>
<Grid container item xs={12} spacing={24}>
<Grid container item xs={12} spacing={3}>
<FormRow classes={classes} />
</Grid>
</Grid>
Expand Down
15 changes: 9 additions & 6 deletions docs/src/pages/layout/grid/SpacingGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const styles = theme => ({

class GuttersGrid extends React.Component {
state = {
spacing: '16',
spacing: '2',
};

handleChange = key => (event, value) => {
Expand All @@ -37,7 +37,7 @@ class GuttersGrid extends React.Component {
const { spacing } = this.state;

return (
<Grid container className={classes.root} spacing={16}>
<Grid container className={classes.root} spacing={2}>
<Grid item xs={12}>
<Grid container className={classes.demo} justify="center" spacing={Number(spacing)}>
{[0, 1, 2].map(value => (
Expand All @@ -60,11 +60,14 @@ class GuttersGrid extends React.Component {
row
>
<FormControlLabel value="0" control={<Radio />} label="0" />
<FormControlLabel value="1" control={<Radio />} label="1" />
<FormControlLabel value="2" control={<Radio />} label="2" />
<FormControlLabel value="3" control={<Radio />} label="3" />
<FormControlLabel value="4" control={<Radio />} label="4" />
<FormControlLabel value="5" control={<Radio />} label="5" />
<FormControlLabel value="6" control={<Radio />} label="6" />
<FormControlLabel value="7" control={<Radio />} label="7" />
<FormControlLabel value="8" control={<Radio />} label="8" />
<FormControlLabel value="16" control={<Radio />} label="16" />
<FormControlLabel value="24" control={<Radio />} label="24" />
<FormControlLabel value="32" control={<Radio />} label="32" />
<FormControlLabel value="40" control={<Radio />} label="40" />
</RadioGroup>
</Grid>
</Grid>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/layout/grid/grid-zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ https://www.w3.org/TR/css-flexbox-1/#box-model
```jsx
<body>
<div style={{ padding: 20 }}>
<Grid container spacing={40}>
<Grid container spacing={5}>
//...
</Grid>
</div>
Expand All @@ -110,4 +110,4 @@ Flex 项目的初始设置为 `min-width: auto`。当子级使用 `white-space:
<Typography noWrap>
```

{{"demo": "pages/layout/grid/AutoGridNoWrap.js"}}
{{"demo": "pages/layout/grid/AutoGridNoWrap.js"}}
2 changes: 1 addition & 1 deletion docs/src/pages/layout/grid/grid.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ There are 3 available workarounds:
```jsx
<body>
<div style={{ padding: 20 }}>
<Grid container spacing={40}>
<Grid container spacing={4}>
//...
</Grid>
</div>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/layout/hidden/GridIntegration.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ function GridIntegration(props) {
<Typography variant="subtitle1" gutterBottom>
Current width: {props.width}
</Typography>
<Grid container spacing={24}>
<Grid container spacing={3}>
<Hidden xsUp>
<Grid item xs>
<Paper className={classes.paper}>xsUp</Paper>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/premium-themes/PremiumThemes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ function themes(t) {
function PremiumThemes(props) {
const { classes, t } = props;
return (
<Grid container spacing={16}>
<Grid container spacing={2}>
{themes(t).map(theme => (
<Grid key={theme.name} item xs={12} md={6}>
<Card className={classes.card}>
Expand Down
Loading

0 comments on commit 306f203

Please sign in to comment.