[core] Add grid support for Box (mui#17326)

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

@@ -0,0 +1,67 @@
+import style from './style';
+import compose from './compose';
+
+export const gridGap = style({
+  prop: 'gridGap',
+});
+
+export const gridColumnGap = style({
+  prop: 'gridColumnGap',
+});
+
+export const gridRowGap = style({
+  prop: 'gridRowGap',
+});
+
+export const gridColumn = style({
+  prop: 'gridColumn',
+});
+
+export const gridRow = style({
+  prop: 'gridRow',
+});
+
+export const gridAutoFlow = style({
+  prop: 'gridAutoFlow',
+});
+
+export const gridAutoColumns = style({
+  prop: 'gridAutoColumns',
+});
+
+export const gridAutoRows = style({
+  prop: 'gridAutoRows',
+});
+
+export const gridTemplateColumns = style({
+  prop: 'gridTemplateColumns',
+});
+
+export const gridTemplateRows = style({
+  prop: 'gridTemplateRows',
+});
+
+export const gridTemplateAreas = style({
+  prop: 'gridTemplateAreas',
+});
+
+export const gridArea = style({
+  prop: 'gridArea',
+});
+
+const grid = compose(
+  gridGap,
+  gridColumnGap,
+  gridRowGap,
+  gridColumn,
+  gridRow,
+  gridAutoFlow,
+  gridAutoColumns,
+  gridAutoRows,
+  gridTemplateColumns,
+  gridTemplateRows,
+  gridTemplateAreas,
+  gridArea,
+);
+
+export default grid;

packages/material-ui-system/src/index.d.ts

@@ -64,6 +64,7 @@ export const display: SimpleStyleFunction<
 
 export type DisplayProps = PropsFor<typeof display>;
 
+// flexbox.js
 export const flexbox: SimpleStyleFunction<
   | 'flexBasis'
   | 'flexDirection'
@@ -81,6 +82,23 @@ export const flexbox: SimpleStyleFunction<
 >;
 export type FlexboxProps = PropsFor<typeof flexbox>;
 
+// grid.js
+export const grid: SimpleStyleFunction<
+  | 'gridGap'
+  | 'gridColumnGap'
+  | 'gridRowGap'
+  | 'gridColumn'
+  | 'gridRow'
+  | 'gridAutoFlow'
+  | 'gridAutoColumns'
+  | 'gridAutoRows'
+  | 'gridTemplateColumns'
+  | 'gridTemplateRows'
+  | 'gridTemplateAreas'
+  | 'gridArea'
+>;
+export type GridProps = PropsFor<typeof grid>;
+
 // palette.js
 export const color: SimpleStyleFunction<'color'>;
 export const bgcolor: SimpleStyleFunction<'bgcolor'>;

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

@@ -6,6 +6,8 @@ export { default as css } from './css';
 export { default as display } from './display';
 export { default as flexbox } from './flexbox';
 export * from './flexbox';
+export { default as grid } from './grid';
+export * from './grid';
 export { default as palette } from './palette';
 export * from './palette';
 export { default as positions } from './positions';

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

@@ -4,6 +4,7 @@ import {
   ComposedStyleFunction,
   display,
   flexbox,
+  grid,
   palette,
   positions,
   shadows,
@@ -19,6 +20,7 @@ type BoxStyleFunction = ComposedStyleFunction<
     typeof borders,
     typeof display,
     typeof flexbox,
+    typeof grid,
     typeof palette,
     typeof positions,
     typeof shadows,

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

@@ -3,6 +3,7 @@ import {
   compose,
   display,
   flexbox,
+  grid,
   palette,
   positions,
   shadows,
@@ -18,6 +19,7 @@ export const styleFunction = css(
     borders,
     display,
     flexbox,
+    grid,
     positions,
     palette,
     shadows,