[Grid] Change default spacing value: 0

ROADMAP.md

@@ -120,16 +120,6 @@ that **are needed for the stable version**:
     }} />
   ```
 
-- [ ] Grid with no spacing by default [#10223](https://github.com/mui-org/material-ui/issues/10223).
-  The negative margin implementation solution currently used comes with [serious limitations](https://material-ui-next.com/layout/grid/#negative-margin).
-  Material-UI is the only library with a non-zero default spacing between the items.
-  Having zero spacing by default will ease the usage of the component.
-
-  ```diff
-  -<Grid />
-  +<Grid spacing={8} />
-  ```
-
 - [ ] Flatten the import path [#9532](https://github.com/mui-org/material-ui/issues/9532).
   Knowing the component name should be enough for being able to import it.
 

docs/src/modules/components/HomeFooter.js

@@ -37,7 +37,7 @@ function HomeFooter(props) {
         Quick Links
       </Typography>
       <Typography variant="subheading" component="div">
-        <Grid container spacing={0}>
+        <Grid container>
           <Grid item xs={12} sm={6}>
             <ul className={classes.list}>
               <li className={classes.listItem}>

docs/src/modules/components/HomeSteps.js

@@ -60,7 +60,7 @@ function HomeSteps(props) {
   const classes = props.classes;
 
   return (
-    <Grid container spacing={0}>
+    <Grid container>
       <Grid item xs={12} md={4} className={classes.step}>
         <div className={classes.stepTitle}>
           <FileDownloadIcon className={classes.stepIcon} />

docs/src/pages/discover-more/team/Team.js

@@ -109,11 +109,11 @@ const styles = theme => ({
 function Team(props) {
   const { classes } = props;
   return (
-    <Grid container>
+    <Grid container spacing={16}>
       {members.map(member => (
         <Grid key={member.name} item xs={12} md={6}>
           <Paper>
-            <Grid container spacing={0}>
+            <Grid container>
               <Grid item>
                 <CardMedia
                   className={classes.cover}

docs/src/pages/layout/grid/AutoGridNoWrap.js

@@ -29,7 +29,7 @@ function AutoGridNoWrap(props) {
     <div className={classes.root}>
       <div className={classes.wrapper}>
         <Paper className={classes.paper}>
-          <Grid container wrap="nowrap">
+          <Grid container wrap="nowrap" spacing={16}>
             <Grid item>
               <Avatar>W</Avatar>
             </Grid>
@@ -39,7 +39,7 @@ function AutoGridNoWrap(props) {
           </Grid>
         </Paper>
         <Paper className={classes.paper}>
-          <Grid container wrap="nowrap">
+          <Grid container wrap="nowrap" spacing={16}>
             <Grid item>
               <Avatar>W</Avatar>
             </Grid>
@@ -49,7 +49,7 @@ function AutoGridNoWrap(props) {
           </Grid>
         </Paper>
         <Paper className={classes.paper}>
-          <Grid container wrap="nowrap">
+          <Grid container wrap="nowrap" spacing={16}>
             <Grid item>
               <Avatar>W</Avatar>
             </Grid>

docs/src/pages/layout/grid/SpacingGrid.js

@@ -35,7 +35,7 @@ class GuttersGrid extends React.Component {
     const { spacing } = this.state;
 
     return (
-      <Grid container className={classes.root}>
+      <Grid container className={classes.root} spacing={16}>
         <Grid item xs={12}>
           <Grid container className={classes.demo} justify="center" spacing={Number(spacing)}>
             {[0, 1, 2].map(value => (

docs/src/pages/premium-themes/PremiumThemes.js

@@ -40,7 +40,7 @@ function PremiumThemes(props) {
             title={theme.name}
           />
           <CardContent>
-            <Grid container spacing={0} alignItems="center">
+            <Grid container alignItems="center">
               <Grid item xs>
                 <Typography gutterBottom variant="headline" align="left" component="h2">
                   {theme.name}

pages/api/grid.md

@@ -25,7 +25,7 @@ filename: /src/Grid/Grid.js
 | <span class="prop-name">lg</span> | <span class="prop-type">enum:&nbsp;true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for the `lg` breakpoint and wider screens if not overridden. |
 | <span class="prop-name">md</span> | <span class="prop-type">enum:&nbsp;true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for the `md` breakpoint and wider screens if not overridden. |
 | <span class="prop-name">sm</span> | <span class="prop-type">enum:&nbsp;true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for the `sm` breakpoint and wider screens if not overridden. |
-| <span class="prop-name">spacing</span> | <span class="prop-type">enum:&nbsp;0, 8, 16, 24, 40<br> | <span class="prop-default">16</span> | Defines the space between the type `item` component. It can only be used on a type `container` component. |
+| <span class="prop-name">spacing</span> | <span class="prop-type">enum:&nbsp;0, 8, 16, 24, 40<br> | <span class="prop-default">0</span> | Defines the space between the type `item` component. It can only be used on a type `container` component. |
 | <span class="prop-name">wrap</span> | <span class="prop-type">enum:&nbsp;'nowrap'&nbsp;&#124;<br>&nbsp;'wrap'&nbsp;&#124;<br>&nbsp;'wrap-reverse'<br> | <span class="prop-default">'wrap'</span> | Defines the `flex-wrap` style property. It's applied for all screen sizes. |
 | <span class="prop-name">xl</span> | <span class="prop-type">enum:&nbsp;true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for the `xl` breakpoint and wider screens. |
 | <span class="prop-name">xs</span> | <span class="prop-type">enum:&nbsp;true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority. |

src/Grid/Grid.js

@@ -332,7 +332,7 @@ Grid.defaultProps = {
   direction: 'row',
   item: false,
   justify: 'flex-start',
-  spacing: 16,
+  spacing: 0,
   wrap: 'wrap',
   zeroMinWidth: false,
 };

src/Grid/Grid.spec.js

@@ -59,9 +59,9 @@ describe('<Grid />', () => {
   });
 
   describe('prop: spacing', () => {
-    it('should have a default spacing', () => {
-      const wrapper = shallow(<Grid container />);
-      assert.strictEqual(wrapper.hasClass(classes['spacing-xs-16']), true);
+    it('should have a spacing', () => {
+      const wrapper = shallow(<Grid container spacing={8} />);
+      assert.strictEqual(wrapper.hasClass(classes['spacing-xs-8']), true);
     });
   });
 

test/regressions/tests/Table/PaddingTable.js

@@ -39,7 +39,7 @@ function MyTable(props: Props) {
 function PaddingTable() {
   return (
     <div>
-      <Grid container>
+      <Grid container spacing={16}>
         <Grid item xs={6}>
           <MyTable padding="default" />
         </Grid>