[Box] Deprecate css prop in favor of sx (#23480)

mui · Jan 24, 2021 · 69f667b · 69f667b
1 parent 9a70c7d
commit 69f667b
Show file tree

Hide file tree

Showing 22 changed files with 241 additions and 140 deletions.
diff --git a/docs/src/pages/system/basics/CssProp.tsx b/docs/src/pages/system/basics/CssProp.tsx
diff --git a/docs/src/pages/system/basics/CssProp.js → docs/src/pages/system/basics/SxProp.js b/docs/src/pages/system/basics/CssProp.js → docs/src/pages/system/basics/SxProp.js
@@ -2,19 +2,19 @@ import React from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import NoSsr from '@material-ui/core/NoSsr';
 import { createMuiTheme } from '@material-ui/core/styles';
-import { compose, spacing, palette, css } from '@material-ui/system';
+import { compose, spacing, palette, styleFunctionSx } from '@material-ui/system';
 
-const Box = styled.div`
-  ${css(compose(spacing, palette))}
-`;
+const styleFunction = styleFunctionSx(compose(spacing, palette));
+
+const Box = styled.div(styleFunction);
 
 const theme = createMuiTheme();
 
 export default function CssProp() {
   return (
     <NoSsr>
       <ThemeProvider theme={theme}>
-        <Box color="white" css={{ bgcolor: 'palevioletred', p: 1, textTransform: 'uppercase' }}>
+        <Box color="white" sx={{ bgcolor: 'palevioletred', p: 1, textTransform: 'uppercase' }}>
           CssProp
         </Box>
       </ThemeProvider>

diff --git a/docs/src/pages/system/basics/SxProp.tsx b/docs/src/pages/system/basics/SxProp.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+import NoSsr from '@material-ui/core/NoSsr';
+import { createMuiTheme } from '@material-ui/core/styles';
+import {
+  compose,
+  spacing,
+  palette,
+  styleFunctionSx,
+  SpacingProps,
+  PaletteProps,
+} from '@material-ui/system';
+import { CSSProperties } from '@material-ui/styles';
+
+const styleFunction = styleFunctionSx(compose(spacing, palette));
+
+type StyleFunctionProps = SpacingProps & PaletteProps & CSSProperties;
+
+type BoxProps = StyleFunctionProps & {
+  sx?: StyleFunctionProps;
+  // TODO: this should be removed once the css prop is dropped
+  css?: StyleFunctionProps;
+};
+
+const Box = styled.div<BoxProps>(styleFunction);
+
+const theme = createMuiTheme();
+
+export default function CssProp() {
+  return (
+    <NoSsr>
+      <ThemeProvider theme={theme}>
+        <Box color="white" sx={{ bgcolor: 'palevioletred', p: 1, textTransform: 'uppercase' }}>
+          CssProp
+        </Box>
+      </ThemeProvider>
+    </NoSsr>
+  );
+}
diff --git a/docs/src/pages/system/basics/basics.md b/docs/src/pages/system/basics/basics.md
@@ -319,12 +319,12 @@ In this example, the `variant` property supports all the keys present in `theme.
 
 {{"demo": "pages/system/basics/Variant.js", "defaultCodeOpen": true}}
 
-## CSS property
+## `sx` property	
 
-If you want to support custom CSS values, you can use the `css()` helper.
-It will process the `css` property.
+If you want to support custom CSS values, you can use the `styleFunctionSx()` helper.	
+It will process the `sx` property.	
 
-{{"demo": "pages/system/basics/CssProp.js", "defaultCodeOpen": true}}
+{{"demo": "pages/system/basics/SxProp.js", "bg": true}}
 
 ## How it works
 

diff --git a/docs/src/pages/system/flexbox/AlignContent.js b/docs/src/pages/system/flexbox/AlignContent.js
@@ -11,7 +11,7 @@ export default function AlignContent() {
         p={1}
         m={1}
         bgcolor="background.paper"
-        css={{ maxWidth: 300, height: 200 }}
+        sx={{ maxWidth: 300, height: 200 }}
       >
         <Box p={1} bgcolor="grey.300">
           Item 1
@@ -42,7 +42,7 @@ export default function AlignContent() {
         p={1}
         m={1}
         bgcolor="background.paper"
-        css={{ maxWidth: 300, height: 200 }}
+        sx={{ maxWidth: 300, height: 200 }}
       >
         <Box p={1} bgcolor="grey.300">
           Item 1

diff --git a/docs/src/pages/system/flexbox/AlignContent.tsx b/docs/src/pages/system/flexbox/AlignContent.tsx
@@ -11,7 +11,7 @@ export default function AlignContent() {
         p={1}
         m={1}
         bgcolor="background.paper"
-        css={{ maxWidth: 300, height: 200 }}
+        sx={{ maxWidth: 300, height: 200 }}
       >
         <Box p={1} bgcolor="grey.300">
           Item 1
@@ -42,7 +42,7 @@ export default function AlignContent() {
         p={1}
         m={1}
         bgcolor="background.paper"
-        css={{ maxWidth: 300, height: 200 }}
+        sx={{ maxWidth: 300, height: 200 }}
       >
         <Box p={1} bgcolor="grey.300">
           Item 1

diff --git a/docs/src/pages/system/flexbox/AlignItems.js b/docs/src/pages/system/flexbox/AlignItems.js
@@ -10,7 +10,7 @@ export default function AlignItems() {
         p={1}
         m={1}
         bgcolor="background.paper"
-        css={{ height: 100 }}
+        sx={{ height: 100 }}
       >
         <Box p={1} bgcolor="grey.300">
           Item 1
@@ -28,7 +28,7 @@ export default function AlignItems() {
         p={1}
         m={1}
         bgcolor="background.paper"
-        css={{ height: 100 }}
+        sx={{ height: 100 }}
       >
         <Box p={1} bgcolor="grey.300">
           Item 1
@@ -46,7 +46,7 @@ export default function AlignItems() {
         p={1}
         m={1}
         bgcolor="background.paper"
-        css={{ height: 100 }}
+        sx={{ height: 100 }}
       >
         <Box p={1} bgcolor="grey.300">
           Item 1

diff --git a/docs/src/pages/system/flexbox/AlignItems.tsx b/docs/src/pages/system/flexbox/AlignItems.tsx
@@ -10,7 +10,7 @@ export default function AlignItems() {
         p={1}
         m={1}
         bgcolor="background.paper"
-        css={{ height: 100 }}
+        sx={{ height: 100 }}
       >
         <Box p={1} bgcolor="grey.300">
           Item 1
@@ -28,7 +28,7 @@ export default function AlignItems() {
         p={1}
         m={1}
         bgcolor="background.paper"
-        css={{ height: 100 }}
+        sx={{ height: 100 }}
       >
         <Box p={1} bgcolor="grey.300">
           Item 1
@@ -46,7 +46,7 @@ export default function AlignItems() {
         p={1}
         m={1}
         bgcolor="background.paper"
-        css={{ height: 100 }}
+        sx={{ height: 100 }}
       >
         <Box p={1} bgcolor="grey.300">
           Item 1

diff --git a/docs/src/pages/system/flexbox/AlignSelf.js b/docs/src/pages/system/flexbox/AlignSelf.js
@@ -10,7 +10,7 @@ export default function AlignSelf() {
         p={1}
         m={1}
         bgcolor="background.paper"
-        css={{ height: 100 }}
+        sx={{ height: 100 }}
       >
         <Box p={1} bgcolor="grey.300">
           Item 1

diff --git a/docs/src/pages/system/flexbox/AlignSelf.tsx b/docs/src/pages/system/flexbox/AlignSelf.tsx
@@ -10,7 +10,7 @@ export default function AlignSelf() {
         p={1}
         m={1}
         bgcolor="background.paper"
-        css={{ height: 100 }}
+        sx={{ height: 100 }}
       >
         <Box p={1} bgcolor="grey.300">
           Item 1

diff --git a/docs/src/pages/system/flexbox/FlexWrap.js b/docs/src/pages/system/flexbox/FlexWrap.js
@@ -10,7 +10,7 @@ export default function FlexWrap() {
         p={1}
         m={1}
         bgcolor="background.paper"
-        css={{ maxWidth: 300 }}
+        sx={{ maxWidth: 300 }}
       >
         <Box p={1} bgcolor="grey.300">
           Item 1
@@ -37,7 +37,7 @@ export default function FlexWrap() {
         p={1}
         m={1}
         bgcolor="background.paper"
-        css={{ maxWidth: 300 }}
+        sx={{ maxWidth: 300 }}
       >
         <Box p={1} bgcolor="grey.300">
           Item 1

diff --git a/docs/src/pages/system/flexbox/FlexWrap.tsx b/docs/src/pages/system/flexbox/FlexWrap.tsx
@@ -10,7 +10,7 @@ export default function FlexWrap() {
         p={1}
         m={1}
         bgcolor="background.paper"
-        css={{ maxWidth: 300 }}
+        sx={{ maxWidth: 300 }}
       >
         <Box p={1} bgcolor="grey.300">
           Item 1
@@ -37,7 +37,7 @@ export default function FlexWrap() {
         p={1}
         m={1}
         bgcolor="background.paper"
-        css={{ maxWidth: 300 }}
+        sx={{ maxWidth: 300 }}
       >
         <Box p={1} bgcolor="grey.300">
           Item 1

diff --git a/packages/material-ui-system/src/css.js b/packages/material-ui-system/src/css.js
diff --git a/packages/material-ui-system/src/css.test.js b/packages/material-ui-system/src/css.test.js
diff --git a/packages/material-ui-system/src/index.d.ts b/packages/material-ui-system/src/index.d.ts
@@ -53,10 +53,19 @@ export type ComposedStyleFunction<T extends Array<StyleFunction<any>>> = StyleFu
 >;
 export function compose<T extends Array<StyleFunction<any>>>(...args: T): ComposedStyleFunction<T>;
 
-// css.js
+// styleFunctionSx.js
+
+/**
+ * @deprecated
+ * The css style function is deprecated. Use the styleFunctionSx instead.
+ */
 export function css<Props>(
   styleFunction: StyleFunction<Props>
-): StyleFunction<Props & { css: Omit<Props, 'theme'> }>;
+): StyleFunction<Props & { css?: Omit<Props, 'theme'>; sx?: Omit<Props, 'theme'> }>;
+
+export function styleFunctionSx<Props>(
+  styleFunction: StyleFunction<Props>
+): StyleFunction<Props & { sx?: Omit<Props, 'theme'>; css?: Omit<Props, 'theme'> }>;
 
 export const display: SimpleStyleFunction<
   'display' | 'displayPrint' | 'overflow' | 'textOverflow' | 'visibility' | 'whiteSpace'

diff --git a/packages/material-ui-system/src/index.js b/packages/material-ui-system/src/index.js
@@ -2,7 +2,8 @@ export { default as borders } from './borders';
 export * from './borders';
 export { default as breakpoints } from './breakpoints';
 export { default as compose } from './compose';
-export { default as css } from './css';
+export { default as styleFunctionSx } from './styleFunctionSx';
+export * from './styleFunctionSx';
 export { default as display } from './display';
 export { default as flexbox } from './flexbox';
 export * from './flexbox';