Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 14 commits into from
Nov 13, 2020
Merged

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

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
71ce295
wip
mnajdova Nov 11, 2020
39763ca
prettier & ts
mnajdova Nov 11, 2020
b35a5a1
renamed css.js to styleFunctionSx.js & fixed lint issues
mnajdova Nov 11, 2020
02970a7
warn only once
mnajdova Nov 11, 2020
6f8b026
fixed length of warnings
mnajdova Nov 11, 2020
bd11c0a
Moved warnings to proptypes
mnajdova Nov 12, 2020
6e838cc
Update packages/material-ui/src/Box/Box.test.js
mnajdova Nov 12, 2020
11dde6d
Update packages/material-ui-system/src/styleFunctionSx.js
mnajdova Nov 12, 2020
ab992fb
Update packages/material-ui-system/src/styleFunctionSx.js
mnajdova Nov 12, 2020
e055ff8
replaced css-prop with sx-prop
mnajdova Nov 13, 2020
1c0c63b
Merge branch 'feat/deprecate-css-in-favor-of-sx' of https://github.co…
mnajdova Nov 13, 2020
f12cd6a
prettier & docs:typescript:formatted
mnajdova Nov 13, 2020
e310289
typings fixed
mnajdova Nov 13, 2020
9bfca24
types tests improvements
mnajdova Nov 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 0 additions & 23 deletions docs/src/pages/system/basics/CssProp.js
View file
Open in desktop

This file was deleted.

23 changes: 0 additions & 23 deletions docs/src/pages/system/basics/CssProp.tsx
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions docs/src/pages/system/basics/basics.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,13 +319,6 @@ In this example, the `variant` property supports all the keys present in `theme.

{{"demo": "pages/system/basics/Variant.js", "defaultCodeOpen": true}}

## CSS property

If you want to support custom CSS values, you can use the `css()` helper.
It will process the `css` property.

{{"demo": "pages/system/basics/CssProp.js", "defaultCodeOpen": true}}

## How it works

styled-system has done a great job at [explaining how it works](https://github.com/jxnblk/styled-system/blob/master/docs/how-it-works.md#how-it-works).
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/system/flexbox/AlignContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/system/flexbox/AlignContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions docs/src/pages/system/flexbox/AlignItems.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
6 changes: 3 additions & 3 deletions docs/src/pages/system/flexbox/AlignItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/system/flexbox/AlignSelf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/system/flexbox/AlignSelf.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/system/flexbox/FlexWrap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/system/flexbox/FlexWrap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
43 changes: 0 additions & 43 deletions packages/material-ui-system/src/css.js
View file
Open in desktop

This file was deleted.

28 changes: 0 additions & 28 deletions packages/material-ui-system/src/css.test.js
View file
Open in desktop

This file was deleted.

13 changes: 11 additions & 2 deletions packages/material-ui-system/src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
3 changes: 2 additions & 1 deletion packages/material-ui-system/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
22 changes: 11 additions & 11 deletions packages/material-ui-system/src/index.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {
compose,
css,
styleFunctionSx,
palette,
StyleFunction,
spacing,
Expand All @@ -27,19 +27,19 @@ function composeTest() {
styler({ color: 'test', spacing: 1 });
}

function cssTest() {
function sxTest() {
function styleFunction(props: { color?: string; spacing?: number; theme?: object }) {
return {};
}

const wideOrNarrowStyleFunction = css(styleFunction);
const wideOrNarrowStyleFunction = styleFunctionSx(styleFunction);

// narrow
wideOrNarrowStyleFunction({ theme: {}, css: { color: 'blue', spacing: 2 } });
// wide, undesire: `css` is required, marking it as optional breaks system/basics/#css-property
wideOrNarrowStyleFunction({ theme: {}, color: 'blue', spacing: 2, css: {} });
wideOrNarrowStyleFunction({ theme: {}, sx: { color: 'blue', spacing: 2 } });
// wide, undesire: `sx` is required, marking it as optional breaks system/basics/#css-property
mbrookes marked this conversation as resolved.
Show resolved Hide resolved
wideOrNarrowStyleFunction({ theme: {}, color: 'blue', spacing: 2, sx: {} });
// wide and narrow
wideOrNarrowStyleFunction({ theme: {}, css: { color: 'blue', spacing: 2 }, color: 'red' });
wideOrNarrowStyleFunction({ theme: {}, sx: { color: 'blue', spacing: 2 }, color: 'red' });
}

/**
Expand All @@ -48,20 +48,20 @@ function cssTest() {
* This is not equivalent to the implementation. Ideally `css` would be optional
* but that breaks system/basics/#css-property
*/
mbrookes marked this conversation as resolved.
Show resolved Hide resolved
function cssRequiredTest() {
function sxRequiredTest() {
function styleRequiredFunction(props: { color: string }) {
return {};
}

const style = css(styleRequiredFunction);
const style = styleFunctionSx(styleRequiredFunction);
style({
color: 'red',
// @ts-expect-error
css: {},
});
// @ts-expect-error
style({ css: { color: 'red' } });
style({ color: 'blue', css: { color: 'red' } });
style({ sx: { color: 'red' } });
style({ color: 'blue', sx: { color: 'red' } });
}

/**
Expand Down
Loading