[system] Add boxSizing to sizing styled system (#19684)

mui · Feb 13, 2020 · 5faba4b · 5faba4b
1 parent e41ecf0
commit 5faba4b
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 0 deletions.
diff --git a/docs/src/pages/system/api/api.md b/docs/src/pages/system/api/api.md
@@ -38,6 +38,7 @@
 | [sizing](/system/sizing/) | `minHeight` | `minHeight`| `min-height` | none |
 | [sizing](/system/sizing/) | `minWidth` | `minWidth` | `min-width` | none |
 | [sizing](/system/sizing/) | `width` | `width` | `width` | none |
+| [sizing](/system/sizing/) | `boxSizing` | `boxSizing` | `box-sizing` | none |
 | [spacing](/system/spacing/) | `spacing` | `m` | `margin` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) |
 | [spacing](/system/spacing/) | `spacing` | `mb` | `margin-bottom` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) |
 | [spacing](/system/spacing/) | `spacing` | `ml` | `margin-left` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) |

diff --git a/docs/src/pages/system/sizing/sizing.md b/docs/src/pages/system/sizing/sizing.md
@@ -52,3 +52,4 @@ import { sizing } from '@material-ui/system';
 | `height` | `height` | `height` | none |
 | `maxHeight` | `maxHeight`| `max-height` | none |
 | `minHeight` | `minHeight`| `min-height` | none |
+| `boxSizing` | `boxSizing`| `box-sizing` | none |
diff --git a/packages/material-ui-system/src/index.d.ts b/packages/material-ui-system/src/index.d.ts
@@ -122,6 +122,7 @@ export const maxHeight: SimpleStyleFunction<'maxHeight'>;
 export const minHeight: SimpleStyleFunction<'minHeight'>;
 export const sizeWidth: SimpleStyleFunction<'sizeWidth'>;
 export const sizeHeight: SimpleStyleFunction<'sizeHeight'>;
+export const boxSizing: SimpleStyleFunction<'boxSizing'>;
 export const sizing: SimpleStyleFunction<
   | 'width'
   | 'maxWidth'
@@ -131,6 +132,7 @@ export const sizing: SimpleStyleFunction<
   | 'minHeight'
   | 'sizeWidth'
   | 'sizeHeight'
+  | 'boxSizing'
 >;
 export type SizingProps = PropsFor<typeof sizing>;
 

diff --git a/packages/material-ui-system/src/sizing.js b/packages/material-ui-system/src/sizing.js
@@ -47,13 +47,18 @@ export const sizeHeight = style({
   transform,
 });
 
+export const boxSizing = style({
+  prop: 'boxSizing',
+});
+
 const sizing = compose(
   width,
   maxWidth,
   minWidth,
   height,
   maxHeight,
   minHeight,
+  boxSizing,
 );
 
 export default sizing;