polish

docs/pages/api-docs/grid.json

@@ -2,7 +2,13 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
-    "columns": { "type": { "name": "number" }, "default": "12" },
+    "columns": {
+      "type": {
+        "name": "union",
+        "description": "Array&lt;number&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object"
+      },
+      "default": "12"
+    },
     "component": { "type": { "name": "elementType" } },
     "container": { "type": { "name": "bool" } },
     "direction": {

docs/src/pages/components/grid/ResponsiveGrid.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
+
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  padding: theme.spacing(2),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+}));
+
+export default function ResponsiveGrid() {
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
+        {Array.from(Array(6)).map((_, index) => (
+          <Grid item xs={2} sm={4} md={4} key={index}>
+            <Item>xs=2</Item>
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+}

docs/src/pages/components/grid/ResponsiveGrid.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
+
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  padding: theme.spacing(2),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+}));
+
+export default function ResponsiveGrid() {
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
+        {Array.from(Array(6)).map((_, index) => (
+          <Grid item xs={2} sm={4} md={4} key={index}>
+            <Item>xs=2</Item>
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+}

docs/src/pages/components/grid/grid.md

@@ -57,6 +57,29 @@ The prop is converted into a CSS property using the [`theme.spacing()`](/customi
 
 {{"demo": "pages/components/grid/SpacingGrid.js", "bg": true}}
 
+## Responsive values
+
+You can switch the props' value based on the active breakpoint.
+For instance, we can implement the ["recommended"](https://material.io/design/layout/responsive-layout-grid.html) responsive layout grid of Material Design.
+
+{{"demo": "pages/components/grid/ResponsiveGrid.js", "bg": true}}
+
+Responsive values is supported by:
+
+- `spacing`
+- `direction`
+- `columns`
+- all the [other props](#system-props) of the system
+
+> ⚠️ When using a responsive `columns` prop, each grid item needs its corresponding breakpoint.
+> For instance, this is not working. The grid item misses the value for `md`:
+>
+> ```jsx
+> <Grid container columns={{ xs: 4, md: 12 }}>
+>   <Grid item xs={2} />
+> </Grid>
+> ```
+
 ## Interactive
 
 Below is an interactive demo that lets you explore the visual results of the different settings:

docs/src/pages/components/stack/stack.md

@@ -34,7 +34,7 @@ Use the `divider` prop to insert an element between each child. This works parti
 
 ## Responsive values
 
-Easily switch `direction` or `spacing` based on the active breakpoint.
+You can switch the `direction` or `spacing` values based on the active breakpoint.
 
 {{"demo": "pages/components/stack/ResponsiveStack.js", "bg": true}}
 

packages/material-ui-system/src/breakpoints.js

@@ -22,10 +22,6 @@ const defaultBreakpoints = {
 export function handleBreakpoints(props, propValue, styleFromPropValue) {
   const theme = props.theme || {};
 
-  if (propValue == null) {
-    return {};
-  }
-
   if (Array.isArray(propValue)) {
     const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
     return propValue.reduce((acc, item, index) => {

packages/material-ui/src/Grid/Grid.d.ts

@@ -27,7 +27,7 @@ export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
        * The number of columns.
        * @default 12
        */
-      columns?: number;
+      columns?: ResponsiveStyleValue<number>;
       /**
        * If `true`, the component will have the flex *container* behavior.
        * You should be wrapping *items* with a *container*.

packages/material-ui/src/Grid/Grid.js

@@ -25,6 +25,27 @@ function getOffset(val) {
   return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
 }
 
+// Duplicated with Stack.js
+function resolveBreakpointValues({ values, base }) {
+  const keys = Object.keys(base);
+
+  if (keys.length === 0) {
+    return values;
+  }
+
+  let previous;
+
+  return keys.reduce((acc, breakpoint) => {
+    if (typeof values === 'object') {
+      acc[breakpoint] = values[breakpoint] != null ? values[breakpoint] : values[previous];
+    } else {
+      acc[breakpoint] = values;
+    }
+    previous = breakpoint;
+    return acc;
+  }, {});
+}
+
 function generateGrid(globalStyles, theme, breakpoint, styleProps) {
   const size = styleProps[breakpoint];
 
@@ -46,8 +67,13 @@ function generateGrid(globalStyles, theme, breakpoint, styleProps) {
       maxWidth: 'none',
     };
   } else {
+    const columnsBreakpointValues = resolveBreakpointValues({
+      values: styleProps.columns,
+      base: theme.breakpoints.values,
+    });
+
     // Keep 7 significant numbers.
-    const width = `${Math.round((size / styleProps.columns) * 10e7) / 10e5}%`;
+    const width = `${Math.round((size / columnsBreakpointValues[breakpoint]) * 10e7) / 10e5}%`;
     let more = {};
 
     if (styleProps.container && styleProps.item && styleProps.spacing !== 0) {
@@ -79,6 +105,22 @@ function generateGrid(globalStyles, theme, breakpoint, styleProps) {
   }
 }
 
+function generateDirection({ theme, styleProps }) {
+  return handleBreakpoints({ theme }, styleProps.direction, (propValue) => {
+    const output = {
+      flexDirection: propValue,
+    };
+
+    if (propValue.indexOf('column') === 0) {
+      output[`&> .${gridClasses.item}`] = {
+        maxWidth: 'none',
+      };
+    }
+
+    return output;
+  });
+}
+
 function generateGap({ theme, styleProps }) {
   const { container, spacing } = styleProps;
   let styles = {};
@@ -155,20 +197,7 @@ const GridRoot = styled('div', {
       flexWrap: 'wrap-reverse',
     }),
   }),
-  ({ theme, styleProps }) =>
-    handleBreakpoints({ theme }, styleProps.direction, (propValue) => {
-      const output = {
-        flexDirection: propValue,
-      };
-
-      if (propValue.indexOf('column') === 0) {
-        output[`&> .${gridClasses.item}`] = {
-          maxWidth: 'none',
-        };
-      }
-
-      return output;
-    }),
+  generateDirection,
   generateGap,
   ({ theme, styleProps }) =>
     theme.breakpoints.keys.reduce((globalStyles, breakpoint) => {
@@ -282,7 +311,11 @@ Grid.propTypes /* remove-proptypes */ = {
    * The number of columns.
    * @default 12
    */
-  columns: PropTypes.number,
+  columns: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.number),
+    PropTypes.number,
+    PropTypes.object,
+  ]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

packages/material-ui/src/Stack/Stack.js

@@ -31,6 +31,7 @@ function joinChildren(children, separator) {
   }, []);
 }
 
+// Duplicated with Grid.js
 function resolveBreakpointValues({ values, base }) {
   const keys = Object.keys(base);