support custom transformations

Author: oliviertassinari

.size-limit.js

@@ -22,7 +22,7 @@ module.exports = [
     name: 'The size of the @material-ui/core modules',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '95.6 KB',
+    limit: '95.7 KB',
   },
   {
     name: 'The size of the @material-ui/styles modules',

docs/src/pages/layout/grid/grid.md

@@ -23,8 +23,11 @@ The grid system is implemented with the `Grid` component:
 ## Spacing
 
 The responsive grid focuses on consistent spacing widths, rather than column width.
-Material design margins and columns follow an **8dp** square baseline grid.
-Spacing can be 8, 16, 24, 32 or 40dp wide.
+Material design margins and columns follow an **8px** square baseline grid.
+The spacing property is an integer in the [0, 8] interval.
+By default, the spacing between two grid items follows a linear function: `output(spacing) = spacing * 8px`, e.g. `spacing={2}` creates a 16px wide gap.
+
+This output transformation function can be customized using the theme, exactly like [the system spacing](/system/spacing/#transformation).
 
 {{"demo": "pages/layout/grid/SpacingGrid.js"}}
 

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

@@ -11,13 +11,14 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import warning from 'warning';
 import classNames from 'classnames';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { keys as breakpointKeys } from '../styles/createBreakpoints';
 import requirePropFactory from '../utils/requirePropFactory';
 
-const GUTTERS = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 
 function generateGrid(globalStyles, theme, breakpoint) {
@@ -65,16 +66,57 @@ function generateGrid(globalStyles, theme, breakpoint) {
   }
 }
 
+// Same logic as /packages/material-ui-system/src/spacing.js
+function getTransformer(theme) {
+  const themeTransformer =
+    theme.spacing && theme.spacing.unit != null ? theme.spacing.unit : theme.spacing || 8;
+
+  if (typeof themeTransformer === 'number') {
+    return abs => themeTransformer * abs;
+  }
+
+  if (Array.isArray(themeTransformer)) {
+    return abs => {
+      warning(
+        abs <= themeTransformer.length - 1,
+        [
+          `@material-ui/core: the value provided (${abs}) overflows.`,
+          `The supported values are: ${JSON.stringify(themeTransformer)}.`,
+          `${abs} > ${themeTransformer.length - 1}, you need to add the missing values.`,
+        ].join('\n'),
+      );
+
+      return themeTransformer[abs];
+    };
+  }
+
+  if (typeof themeTransformer === 'function') {
+    return themeTransformer;
+  }
+
+  warning(
+    false,
+    [
+      `@material-ui/core: the \`theme.spacing\` value (${themeTransformer}) is invalid.`,
+      'It should be a number, an array or a function.',
+    ].join('\n'),
+  );
+
+  return () => undefined;
+}
+
 function generateGutter(theme, breakpoint) {
   const styles = {};
 
-  GUTTERS.forEach((spacing, index) => {
+  const transformer = getTransformer(theme);
+
+  SPACINGS.forEach((spacing, index) => {
     if (index === 0) {
       // Skip the default style.
       return;
     }
 
-    const themeSpacing = spacing * theme.spacing.unit;
+    const themeSpacing = transformer(spacing);
 
     styles[`spacing-${breakpoint}-${spacing}`] = {
       margin: -themeSpacing / 2,
@@ -324,7 +366,7 @@ Grid.propTypes = {
    * Defines the space between the type `item` component.
    * It can only be used on a type `container` component.
    */
-  spacing: PropTypes.oneOf(GUTTERS),
+  spacing: PropTypes.oneOf(SPACINGS),
   /**
    * Defines the `flex-wrap` style property.
    * It's applied for all screen sizes.