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

EsoterikStare · Feb 13, 2020 · 3c9a03a · 3c9a03a
1 parent 956b8c8
commit 3c9a03a
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;