From d41626259af98a2e6fa29535644ccb7379c437b7 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 31 Oct 2022 10:29:44 +0100 Subject: [PATCH 01/46] [release] v5.10.12 --- CHANGELOG.md | 67 +++++++++++++++++++ benchmark/package.json | 4 +- docs/package.json | 12 ++-- package.json | 2 +- packages/mui-base/package.json | 2 +- packages/mui-codemod/package.json | 2 +- .../mui-core-downloads-tracker/package.json | 2 +- packages/mui-envinfo/package.json | 2 +- packages/mui-joy/package.json | 8 +-- packages/mui-lab/package.json | 6 +- packages/mui-material-next/package.json | 8 +-- packages/mui-material/package.json | 8 +-- packages/mui-system/package.json | 2 +- 13 files changed, 96 insertions(+), 29 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c2605377ae28c3..f1501ae63c55da 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,72 @@ # [Versions](https://mui.com/versions/) +## v5.10.12 + + + +_Oct 31, 2022_ + +A big thanks to the 16 contributors who made this release possible. This release is mostly about 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements. + +TODO INSERT HIGHLIGHTS + +### `@mui/material@5.10.12` + +- ​[Chip] Don't override icon color (#34247) @emlai +- ​[Radio] Skip default hover style when disableRipple is set (#34902) @VinceCYLiao +- ​[SwipeableDrawer] Fix React 18 issues (#34505) @mnajdova +- ​[Tooltip] Save a few bytes (#34853) @oliviertassinari + +### `@mui/base@5.0.0-alpha.104` + +- ​[ButtonUnstyled] Update to render as link when href or to is provided (#34337) @EduardoSCosta + +### `@mui/joy@5.0.0-alpha.52` + +- ​[Joy][circularprogress] Prevent new styles from being generated when `value` changes (#34897) @hbjORbj +- ​[Joy] Add color inversion feature (#32511) @siriwatknp +- ​[Joy] Add `LinearProgress` component (#34514) @hbjORbj + +### Docs + +- ​[blog] Add blog post for high-level overview of all MUI products (#34325) @samuelsycamore +- ​[blog] Fix hydration mistmatch (#34857) @oliviertassinari +- ​[docs] Revise the Joy UI "Aspect Ratio" page (#34858) @samuelsycamore +- ​[docs] Fix Safari code font size (#34859) @oliviertassinari +- ​[docs] Fix spelling mistake (#34955) @punithnayak +- ​[docs] Fix 404 link of supported Material UI components @oliviertassinari +- ​[docs] Fix Safari button misalignment (#34861) @oliviertassinari +- ​[docs] Fix typo in docs title (#34926) @PunitSoniME +- ​[docs] Standardize all MUI Core "Usage" pages (#34183) @samuelsycamore +- ​[docs] Update templates' readme files to include required dependencies (#34757) @michaldudak +- ​[docs] Fix inconsistent theme colors when applying custom colors in playground (#34866) @cherniavskii +- ​[docs] Fix typo in bottom-navigation.md (#34884) @RoodyCode +- ​[website] Update MUI X open and future roles + about page (#34894) @DanailH +- ​[website] Remove one DOM node (#34960) @oliviertassinari +- ​[website] Use `span` for icon image (#34914) @siriwatknp +- ​[website] Fix subscribe input with Safari (#34869) @oliviertassinari + +### Core + +- ​[core] Ignore compiled icons in CodeQL @oliviertassinari +- ​[core] Add OSSF Scorecard action (#34854) @oliviertassinari +- ​[core] Fix duplicate id @oliviertassinari +- ​[core] A couple of simply fixes from #34870 (#34953) @oliviertassinari +- ​[core] Migrate outdated pattern to convention @oliviertassinari +- ​[core] Pin GitHub Actions dependencies (#34929) @renovate[bot] +- ​[core] Make the reproduction more important in the bug template (#34875) @oliviertassinari +- ​[core] Fix docs GitHub API rate limit (#34856) @oliviertassinari +- ​[core] Pin GitHub Action to digests (#34855) @oliviertassinari +- ​[core] Fix permissions in workflow @oliviertassinari +- ​[core] memoize context values for react/jsx-no-constructed-context-values (#34849) @Janpot +- ​[core] Fix @typescript-eslint/default-param-last issues (#34846) @Janpot +- ​[core] Fix HTML validation error (#34860) @oliviertassinari +- ​[core] Fix duplicate CodeQL build @oliviertassinari +- ​[test] Move Firefox tests to CircleCI (#34764) @oliviertassinari +- ​[test] Use screen when possible for simplicity (#34890) @oliviertassinari + +All contributors of this release in alphabetical order: @cherniavskii, @DanailH, @EduardoSCosta, @emlai, @hbjORbj, @Janpot, @michaldudak, @mnajdova, @oliviertassinari, @punithnayak, @PunitSoniME, @renovate[bot], @RoodyCode, @samuelsycamore, @siriwatknp, @VinceCYLiao + ## v5.10.11 diff --git a/benchmark/package.json b/benchmark/package.json index 16a6a753d81405..cb871a175cbb35 100644 --- a/benchmark/package.json +++ b/benchmark/package.json @@ -15,9 +15,9 @@ "@emotion/react": "^11.10.4", "@emotion/styled": "^11.10.4", "@mdx-js/react": "^2.1.5", - "@mui/material": "^5.10.11", + "@mui/material": "^5.10.12", "@mui/styles": "^5.10.10", - "@mui/system": "^5.10.10", + "@mui/system": "^5.10.12", "@styled-system/css": "^5.1.5", "benchmark": "^2.1.4", "playwright": "^1.27.1", diff --git a/docs/package.json b/docs/package.json index e79409043edadb..9417a49c6dafe5 100644 --- a/docs/package.json +++ b/docs/package.json @@ -33,17 +33,17 @@ "@fortawesome/fontawesome-svg-core": "^6.2.0", "@fortawesome/free-solid-svg-icons": "^6.2.0", "@fortawesome/react-fontawesome": "^0.2.0", - "@mui/base": "5.0.0-alpha.103", + "@mui/base": "5.0.0-alpha.104", "@mui/docs": "^5.10.9", "@mui/icons-material": "^5.10.9", - "@mui/joy": "5.0.0-alpha.51", - "@mui/lab": "5.0.0-alpha.105", - "@mui/material": "^5.10.11", - "@mui/material-next": "6.0.0-alpha.59", + "@mui/joy": "5.0.0-alpha.52", + "@mui/lab": "5.0.0-alpha.106", + "@mui/material": "^5.10.12", + "@mui/material-next": "6.0.0-alpha.60", "@mui/styled-engine": "^5.10.8", "@mui/styled-engine-sc": "^5.10.6", "@mui/styles": "^5.10.10", - "@mui/system": "^5.10.10", + "@mui/system": "^5.10.12", "@mui/types": "^7.2.0", "@mui/x-data-grid": "^5.17.9", "@mui/x-data-grid-generator": "^5.17.9", diff --git a/package.json b/package.json index e8b07d28bf62ee..abc4369f867686 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mui/monorepo", - "version": "5.10.11", + "version": "5.10.12", "private": true, "scripts": { "proptypes": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./scripts/generateProptypes.ts", diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index 5149d325e9f009..de986027c279a8 100644 --- a/packages/mui-base/package.json +++ b/packages/mui-base/package.json @@ -1,6 +1,6 @@ { "name": "@mui/base", - "version": "5.0.0-alpha.103", + "version": "5.0.0-alpha.104", "private": false, "author": "MUI Team", "description": "A library of headless ('unstyled') React UI components and low-level hooks.", diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json index f041e0f37d8fe4..9557d6c39c5d1e 100644 --- a/packages/mui-codemod/package.json +++ b/packages/mui-codemod/package.json @@ -1,6 +1,6 @@ { "name": "@mui/codemod", - "version": "5.10.11", + "version": "5.10.12", "bin": "./codemod.js", "private": false, "author": "MUI Team", diff --git a/packages/mui-core-downloads-tracker/package.json b/packages/mui-core-downloads-tracker/package.json index ef5a94d631c30f..ec95d0dba27dcf 100644 --- a/packages/mui-core-downloads-tracker/package.json +++ b/packages/mui-core-downloads-tracker/package.json @@ -1,6 +1,6 @@ { "name": "@mui/core-downloads-tracker", - "version": "5.10.11", + "version": "5.10.12", "private": false, "author": "MUI Team", "description": "Internal package to track number of downloads of our design system libraries", diff --git a/packages/mui-envinfo/package.json b/packages/mui-envinfo/package.json index 8b63b5f4ca100c..07e1e1da1f1bf6 100644 --- a/packages/mui-envinfo/package.json +++ b/packages/mui-envinfo/package.json @@ -6,7 +6,7 @@ }, "license": "MIT", "description": "Logs infos about the environment relevant to @mui/*", - "version": "2.0.6", + "version": "2.0.7", "bin": "./envinfo.js", "dependencies": { "envinfo": "^7.8.1" diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json index d13f1b21f0a6bb..8daecbb49b223d 100644 --- a/packages/mui-joy/package.json +++ b/packages/mui-joy/package.json @@ -1,6 +1,6 @@ { "name": "@mui/joy", - "version": "5.0.0-alpha.51", + "version": "5.0.0-alpha.52", "private": false, "author": "MUI Team", "description": "A library of beautifully designed React UI components.", @@ -57,9 +57,9 @@ }, "dependencies": { "@babel/runtime": "^7.19.0", - "@mui/base": "5.0.0-alpha.103", - "@mui/core-downloads-tracker": "^5.10.11", - "@mui/system": "^5.10.10", + "@mui/base": "5.0.0-alpha.104", + "@mui/core-downloads-tracker": "^5.10.12", + "@mui/system": "^5.10.12", "@mui/types": "^7.2.0", "@mui/utils": "^5.10.9", "clsx": "^1.2.1", diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json index f9c16b33db5a6c..4ae9bb53dba5bb 100644 --- a/packages/mui-lab/package.json +++ b/packages/mui-lab/package.json @@ -1,6 +1,6 @@ { "name": "@mui/lab", - "version": "5.0.0-alpha.105", + "version": "5.0.0-alpha.106", "private": false, "author": "MUI Team", "description": "Laboratory for new MUI modules.", @@ -61,8 +61,8 @@ }, "dependencies": { "@babel/runtime": "^7.19.0", - "@mui/base": "5.0.0-alpha.103", - "@mui/system": "^5.10.10", + "@mui/base": "5.0.0-alpha.104", + "@mui/system": "^5.10.12", "@mui/types": "^7.2.0", "@mui/utils": "^5.10.9", "clsx": "^1.2.1", diff --git a/packages/mui-material-next/package.json b/packages/mui-material-next/package.json index f85453fdfb71b5..87a63bfd4b4c67 100644 --- a/packages/mui-material-next/package.json +++ b/packages/mui-material-next/package.json @@ -1,6 +1,6 @@ { "name": "@mui/material-next", - "version": "6.0.0-alpha.59", + "version": "6.0.0-alpha.60", "private": false, "author": "MUI Team", "description": "v6-alpha: React components that implement Google's Material Design", @@ -59,9 +59,9 @@ }, "dependencies": { "@babel/runtime": "^7.19.0", - "@mui/base": "5.0.0-alpha.103", - "@mui/material": "^5.10.11", - "@mui/system": "^5.10.10", + "@mui/base": "5.0.0-alpha.104", + "@mui/material": "^5.10.12", + "@mui/system": "^5.10.12", "@mui/types": "^7.2.0", "@mui/utils": "^5.10.9", "@popperjs/core": "^2.11.6", diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index 22f47e264a2a37..5bbfa8bf3141bc 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -1,6 +1,6 @@ { "name": "@mui/material", - "version": "5.10.11", + "version": "5.10.12", "private": false, "author": "MUI Team", "description": "React components that implement Google's Material Design.", @@ -61,9 +61,9 @@ }, "dependencies": { "@babel/runtime": "^7.19.0", - "@mui/base": "5.0.0-alpha.103", - "@mui/core-downloads-tracker": "^5.10.11", - "@mui/system": "^5.10.10", + "@mui/base": "5.0.0-alpha.104", + "@mui/core-downloads-tracker": "^5.10.12", + "@mui/system": "^5.10.12", "@mui/types": "^7.2.0", "@mui/utils": "^5.10.9", "@types/react-transition-group": "^4.4.5", diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json index bba16d3506151e..46b424ace29ac3 100644 --- a/packages/mui-system/package.json +++ b/packages/mui-system/package.json @@ -1,6 +1,6 @@ { "name": "@mui/system", - "version": "5.10.10", + "version": "5.10.12", "private": false, "author": "MUI Team", "description": "CSS utilities for rapidly laying out custom designs.", From a4ac85fb1ebc4a3e7c4310a834de221db2785b63 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 31 Oct 2022 14:35:10 +0100 Subject: [PATCH 02/46] Remove autogenerated text --- CHANGELOG.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f1501ae63c55da..9f580ac75d58df 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,8 +8,6 @@ _Oct 31, 2022_ A big thanks to the 16 contributors who made this release possible. This release is mostly about 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements. -TODO INSERT HIGHLIGHTS - ### `@mui/material@5.10.12` - ​[Chip] Don't override icon color (#34247) @emlai From 7e1815a63f02e9f6863b075ca5bf915a8d639470 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 31 Oct 2022 14:42:09 +0100 Subject: [PATCH 03/46] Updated changelog --- CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9f580ac75d58df..82b7c8d0f3feef 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -35,10 +35,15 @@ A big thanks to the 16 contributors who made this release possible. This release - ​[docs] Fix 404 link of supported Material UI components @oliviertassinari - ​[docs] Fix Safari button misalignment (#34861) @oliviertassinari - ​[docs] Fix typo in docs title (#34926) @PunitSoniME +- ​[docs] Fix missing emotion prefixes (#34958) @oliviertassinari +- ​[docs] Improve UI display for copy code (#34950) @oliviertassinari - ​[docs] Standardize all MUI Core "Usage" pages (#34183) @samuelsycamore - ​[docs] Update templates' readme files to include required dependencies (#34757) @michaldudak - ​[docs] Fix inconsistent theme colors when applying custom colors in playground (#34866) @cherniavskii - ​[docs] Fix typo in bottom-navigation.md (#34884) @RoodyCode +- ​[website] Migrate about-us page to use CSS theme variables (#34919) @brianlu2610 +- ​[website] Migrate Product-Templates page to use CSS theme variables (#34913) @EduardoSCosta +- ​[website] Migrate career page to use CSS theme variables (#34908) @the-mgi - ​[website] Update MUI X open and future roles + about page (#34894) @DanailH - ​[website] Remove one DOM node (#34960) @oliviertassinari - ​[website] Use `span` for icon image (#34914) @siriwatknp @@ -48,7 +53,9 @@ A big thanks to the 16 contributors who made this release possible. This release - ​[core] Ignore compiled icons in CodeQL @oliviertassinari - ​[core] Add OSSF Scorecard action (#34854) @oliviertassinari +- ​[core] Fix extra GitHub Action permission (#34496) @sashashura - ​[core] Fix duplicate id @oliviertassinari +- ​[core] Enforce import \* as React (#34878) @da0x - ​[core] A couple of simply fixes from #34870 (#34953) @oliviertassinari - ​[core] Migrate outdated pattern to convention @oliviertassinari - ​[core] Pin GitHub Actions dependencies (#34929) @renovate[bot] From 1e556dc0379993afaa8f82879e5ab147615cebcd Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 31 Oct 2022 16:18:20 +0100 Subject: [PATCH 04/46] Updated changelog --- CHANGELOG.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 82b7c8d0f3feef..24270e3f8f00ae 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,10 @@ _Oct 31, 2022_ -A big thanks to the 16 contributors who made this release possible. This release is mostly about 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements. +A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨: + +- 🚀 The LinearProgress component has been added to Joy UI by @hbjORbj (#34514). +- Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements. ### `@mui/material@5.10.12` @@ -61,6 +64,7 @@ A big thanks to the 16 contributors who made this release possible. This release - ​[core] Pin GitHub Actions dependencies (#34929) @renovate[bot] - ​[core] Make the reproduction more important in the bug template (#34875) @oliviertassinari - ​[core] Fix docs GitHub API rate limit (#34856) @oliviertassinari +- ​[core] Fix eslint issues (#34964) @mnajdova - ​[core] Pin GitHub Action to digests (#34855) @oliviertassinari - ​[core] Fix permissions in workflow @oliviertassinari - ​[core] memoize context values for react/jsx-no-constructed-context-values (#34849) @Janpot From 2c1c0e1d7e7ce98324b21227d3e1bf6c9651cfeb Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 14 Nov 2022 17:06:54 +0100 Subject: [PATCH 05/46] [system] Explore different sx config --- packages/mui-system/src/borders.js | 12 +- packages/mui-system/src/palette.js | 2 +- packages/mui-system/src/sizing.js | 2 +- packages/mui-system/src/spacing.js | 4 +- packages/mui-system/src/style.js | 4 +- .../src/styleFunctionSx/defaultSxConfig.js | 233 ++++++++++++++++++ .../src/styleFunctionSx/styleFunctionSx.js | 61 +++-- 7 files changed, 292 insertions(+), 26 deletions(-) create mode 100644 packages/mui-system/src/styleFunctionSx/defaultSxConfig.js diff --git a/packages/mui-system/src/borders.js b/packages/mui-system/src/borders.js index 18f3360ca81e8a..e8049c36ad6b23 100644 --- a/packages/mui-system/src/borders.js +++ b/packages/mui-system/src/borders.js @@ -4,7 +4,7 @@ import compose from './compose'; import { createUnaryUnit, getValue } from './spacing'; import { handleBreakpoints } from './breakpoints'; -function getBorder(value) { +export function transform(value) { if (typeof value !== 'number') { return value; } @@ -15,31 +15,31 @@ function getBorder(value) { export const border = style({ prop: 'border', themeKey: 'borders', - transform: getBorder, + transform, }); export const borderTop = style({ prop: 'borderTop', themeKey: 'borders', - transform: getBorder, + transform, }); export const borderRight = style({ prop: 'borderRight', themeKey: 'borders', - transform: getBorder, + transform, }); export const borderBottom = style({ prop: 'borderBottom', themeKey: 'borders', - transform: getBorder, + transform, }); export const borderLeft = style({ prop: 'borderLeft', themeKey: 'borders', - transform: getBorder, + transform, }); export const borderColor = style({ diff --git a/packages/mui-system/src/palette.js b/packages/mui-system/src/palette.js index 8b9d7e83944ac7..37d6dbd3b47f45 100644 --- a/packages/mui-system/src/palette.js +++ b/packages/mui-system/src/palette.js @@ -1,7 +1,7 @@ import style from './style'; import compose from './compose'; -function transform(value, userValue) { +export function transform(value, userValue) { if (userValue === 'grey') { return userValue; } diff --git a/packages/mui-system/src/sizing.js b/packages/mui-system/src/sizing.js index 57e75c9cf7bcc9..b06cb38613bff6 100644 --- a/packages/mui-system/src/sizing.js +++ b/packages/mui-system/src/sizing.js @@ -2,7 +2,7 @@ import style from './style'; import compose from './compose'; import { handleBreakpoints, values as breakpointsValues } from './breakpoints'; -function transform(value) { +export function transform(value) { return value <= 1 && value !== 0 ? `${value * 100}%` : value; } diff --git a/packages/mui-system/src/spacing.js b/packages/mui-system/src/spacing.js index 9307f5b5c808c5..f22063fdfd1229 100644 --- a/packages/mui-system/src/spacing.js +++ b/packages/mui-system/src/spacing.js @@ -44,7 +44,7 @@ const getCssProperties = memoize((prop) => { return Array.isArray(direction) ? direction.map((dir) => property + dir) : [property + direction]; }); -const marginKeys = [ +export const marginKeys = [ 'm', 'mt', 'mr', @@ -67,7 +67,7 @@ const marginKeys = [ 'marginBlockEnd', ]; -const paddingKeys = [ +export const paddingKeys = [ 'p', 'pt', 'pr', diff --git a/packages/mui-system/src/style.js b/packages/mui-system/src/style.js index 3886763eae031a..72e220c618b9de 100644 --- a/packages/mui-system/src/style.js +++ b/packages/mui-system/src/style.js @@ -24,7 +24,7 @@ export function getPath(obj, path, checkVars = true) { }, obj); } -function getValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) { +export function getValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) { let value; if (typeof themeMapping === 'function') { @@ -36,7 +36,7 @@ function getValue(themeMapping, transform, propValueFinal, userValue = propValue } if (transform) { - value = transform(value, userValue); + value = transform(value, userValue, themeMapping); } return value; diff --git a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js new file mode 100644 index 00000000000000..51b00b16897fb2 --- /dev/null +++ b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js @@ -0,0 +1,233 @@ +import { getValue } from '../style'; +import { handleBreakpoints } from '../breakpoints'; +import { paddingKeys, padding, marginKeys, margin } from '../spacing'; +import { borderRadius, transform as borderTransform } from '../borders'; +import { gap, rowGap, columnGap } from '../cssGrid'; +import { transform as paletteTransform } from '../palette'; +import { maxWidth, transform as sizingTransform } from '../sizing'; + +const defaultSxConfig = { + // borders + border: { + themeKey: 'borders', + transform: borderTransform, + }, + + borderTop: { + themeKey: 'borders', + transform: borderTransform, + }, + + borderRight: { + themeKey: 'borders', + transform: borderTransform, + }, + + borderBottom: { + themeKey: 'borders', + transform: borderTransform, + }, + + borderLeft: { + themeKey: 'borders', + transform: borderTransform, + }, + + borderColor: { + themeKey: 'palette', + }, + + borderTopColor: { + themeKey: 'palette', + }, + + borderRightColor: { + themeKey: 'palette', + }, + + borderBottomColor: { + themeKey: 'palette', + }, + + borderLeftColor: { + themeKey: 'palette', + }, + + borderRadius: { + themeKey: 'shape.borderRadius', + style: borderRadius, + }, + + // palette + color: { + themeKey: 'palette', + transform: paletteTransform, + }, + bgcolor: { + themeKey: 'palette', + cssProperty: 'backgroundColor', + transform: paletteTransform, + }, + backgroundColor: { + themeKey: 'palette', + transform: paletteTransform, + }, + + // spacing + ...paddingKeys.reduce((styleDefinitions, paddingKey) => { + return { + ...styleDefinitions, + [paddingKey]: { + style: padding, + }, + }; + }, {}), + + ...marginKeys.reduce((styleDefinitions, marginKey) => { + return { + ...styleDefinitions, + [marginKey]: { + style: margin, + }, + }; + }, {}), + + // display + displayPrint: { + cssProperty: false, + transform: (value) => ({ + '@media print': { + display: value, + }, + }), + }, + display: {}, + overflow: {}, + textOverflow: {}, + visibility: {}, + whiteSpace: {}, + + // flexbox + flexBasis: {}, + flexDirection: {}, + flexWrap: {}, + justifyContent: {}, + alignItems: {}, + alignContent: {}, + order: {}, + flex: {}, + flexGrow: {}, + flexShrink: {}, + alignSelf: {}, + justifyItems: {}, + justifySelf: {}, + + // grid + gap: { + style: gap, + }, + rowGap: { + style: rowGap, + }, + columnGap: { + style: columnGap, + }, + gridColumn: {}, + gridRow: {}, + gridAutoFlow: {}, + gridAutoColumns: {}, + gridAutoRows: {}, + gridTemplateColumns: {}, + gridTemplateRows: {}, + gridTemplateAreas: {}, + gridArea: {}, + + // positions + position: {}, + zIndex: { + themeKey: 'zIndex', + }, + top: {}, + right: {}, + bottom: {}, + left: {}, + + // shadows + boxShadow: { + prop: 'boxShadow', + themeKey: 'shadows', + }, + + // sizing + width: { + transform: sizingTransform, + }, + maxWidth: { + style: maxWidth, + }, + minWidth: { + transform: sizingTransform, + }, + height: { + transform: sizingTransform, + }, + maxHeight: { + transform: sizingTransform, + }, + minHeight: { + transform: sizingTransform, + }, + size: { + style: (props) => { + const { size } = props; + // no mapping + const themeMapping = {}; + + const styleFromPropValue = (propValueFinal) => { + let value = getValue({ themeMapping }, sizingTransform, propValueFinal); + + if (propValueFinal === value && typeof propValueFinal === 'string') { + // Haven't found value + value = getValue( + themeMapping, + sizingTransform, + `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, + propValueFinal, + ); + } + + return { + width: value, + height: value, + }; + }; + + return handleBreakpoints(props, size, styleFromPropValue); + }, + }, + boxSizing: {}, + + // typography + fontFamily: { + themeKey: 'typography', + }, + fontSize: { + themeKey: 'typography', + }, + fontStyle: { + themeKey: 'typography', + }, + fontWeight: { + themeKey: 'typography', + }, + letterSpacing: {}, + textTransform: {}, + lineHeight: {}, + textAlign: {}, + typography: { + cssProperty: false, + themeKey: 'typography', + }, +}; + +export default defaultSxConfig; diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js index 084b3550890a1e..91969a5080c7d5 100644 --- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js +++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js @@ -1,10 +1,12 @@ +import { unstable_capitalize as capitalize } from '@mui/utils'; import merge from '../merge'; -import { styleFunctionMapping as defaultStyleFunctionMapping } from '../getThemeValue'; +import { getPath, getValue } from '../style'; import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints, } from '../breakpoints'; +import defaultSxConfig from './defaultSxConfig'; function objectsHaveSameKeys(...objects) { const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []); @@ -17,23 +19,54 @@ function callIfFn(maybeFn, arg) { } // eslint-disable-next-line @typescript-eslint/naming-convention -export function unstable_createStyleFunctionSx(styleFunctionMapping = defaultStyleFunctionMapping) { - const propToStyleFunction = Object.keys(styleFunctionMapping).reduce((acc, styleFnName) => { - styleFunctionMapping[styleFnName].filterProps.forEach((propName) => { - acc[propName] = styleFunctionMapping[styleFnName]; - }); - - return acc; - }, {}); - +export function unstable_createStyleFunctionSx(config = defaultSxConfig) { function getThemeValue(prop, value, theme) { - const inputProps = { + const props = { [prop]: value, theme, }; - const styleFunction = propToStyleFunction[prop]; - return styleFunction ? styleFunction(inputProps) : { [prop]: value }; + const options = config[prop]; + + if (!options) { + return { [prop]: value }; + } + + const { cssProperty = prop, themeKey, transform, style } = options; + + if (value == null) { + return null; + } + + const themeMapping = getPath(theme, themeKey) || {}; + + if (style) { + return style(props); + } + + const styleFromPropValue = (propValueFinal) => { + let value = getValue(themeMapping, transform, propValueFinal); + + if (propValueFinal === value && typeof propValueFinal === 'string') { + // Haven't found value + value = getValue( + themeMapping, + transform, + `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, + propValueFinal, + ); + } + + if (cssProperty === false) { + return value; + } + + return { + [cssProperty]: value, + }; + }; + + return handleBreakpoints(props, value, styleFromPropValue); } function styleFunctionSx(props) { @@ -67,7 +100,7 @@ export function unstable_createStyleFunctionSx(styleFunctionMapping = defaultSty const value = callIfFn(sxObject[styleKey], theme); if (value !== null && value !== undefined) { if (typeof value === 'object') { - if (propToStyleFunction[styleKey]) { + if (config[styleKey]) { css = merge(css, getThemeValue(styleKey, value, theme)); } else { const breakpointsValues = handleBreakpoints({ theme }, value, (x) => ({ From aa8dab7afc3ac758ec68925dae43b6fbdba702da Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 15 Nov 2022 09:10:10 +0100 Subject: [PATCH 06/46] lint issues --- packages/mui-system/src/borders.js | 10 +++++----- packages/mui-system/src/palette.js | 8 ++++---- packages/mui-system/src/sizing.js | 18 +++++++++--------- .../src/styleFunctionSx/defaultSxConfig.js | 9 +++++---- .../src/styleFunctionSx/styleFunctionSx.js | 8 ++++---- 5 files changed, 27 insertions(+), 26 deletions(-) diff --git a/packages/mui-system/src/borders.js b/packages/mui-system/src/borders.js index e8049c36ad6b23..e1310373841f8a 100644 --- a/packages/mui-system/src/borders.js +++ b/packages/mui-system/src/borders.js @@ -4,7 +4,7 @@ import compose from './compose'; import { createUnaryUnit, getValue } from './spacing'; import { handleBreakpoints } from './breakpoints'; -export function transform(value) { +export function borderTransform(value) { if (typeof value !== 'number') { return value; } @@ -15,19 +15,19 @@ export function transform(value) { export const border = style({ prop: 'border', themeKey: 'borders', - transform, + transform: borderTransform, }); export const borderTop = style({ prop: 'borderTop', themeKey: 'borders', - transform, + transform: borderTransform, }); export const borderRight = style({ prop: 'borderRight', themeKey: 'borders', - transform, + transform: borderTransform, }); export const borderBottom = style({ @@ -39,7 +39,7 @@ export const borderBottom = style({ export const borderLeft = style({ prop: 'borderLeft', themeKey: 'borders', - transform, + transform: borderTransform, }); export const borderColor = style({ diff --git a/packages/mui-system/src/palette.js b/packages/mui-system/src/palette.js index 37d6dbd3b47f45..10a49c9ffb3d26 100644 --- a/packages/mui-system/src/palette.js +++ b/packages/mui-system/src/palette.js @@ -1,7 +1,7 @@ import style from './style'; import compose from './compose'; -export function transform(value, userValue) { +export function paletteTransform(value, userValue) { if (userValue === 'grey') { return userValue; } @@ -11,20 +11,20 @@ export function transform(value, userValue) { export const color = style({ prop: 'color', themeKey: 'palette', - transform, + transform: paletteTransform, }); export const bgcolor = style({ prop: 'bgcolor', cssProperty: 'backgroundColor', themeKey: 'palette', - transform, + transform: paletteTransform, }); export const backgroundColor = style({ prop: 'backgroundColor', themeKey: 'palette', - transform, + transform: paletteTransform, }); const palette = compose(color, bgcolor, backgroundColor); diff --git a/packages/mui-system/src/sizing.js b/packages/mui-system/src/sizing.js index b06cb38613bff6..0454dfb1702845 100644 --- a/packages/mui-system/src/sizing.js +++ b/packages/mui-system/src/sizing.js @@ -2,13 +2,13 @@ import style from './style'; import compose from './compose'; import { handleBreakpoints, values as breakpointsValues } from './breakpoints'; -export function transform(value) { +export function sizingTransform(value) { return value <= 1 && value !== 0 ? `${value * 100}%` : value; } export const width = style({ prop: 'width', - transform, + transform: sizingTransform, }); export const maxWidth = (props) => { @@ -17,7 +17,7 @@ export const maxWidth = (props) => { const breakpoint = props.theme?.breakpoints?.values?.[propValue] || breakpointsValues[propValue]; return { - maxWidth: breakpoint || transform(propValue), + maxWidth: breakpoint || sizingTransform(propValue), }; }; return handleBreakpoints(props, props.maxWidth, styleFromPropValue); @@ -28,34 +28,34 @@ maxWidth.filterProps = ['maxWidth']; export const minWidth = style({ prop: 'minWidth', - transform, + transform: sizingTransform, }); export const height = style({ prop: 'height', - transform, + transform: sizingTransform, }); export const maxHeight = style({ prop: 'maxHeight', - transform, + transform: sizingTransform, }); export const minHeight = style({ prop: 'minHeight', - transform, + transform: sizingTransform, }); export const sizeWidth = style({ prop: 'size', cssProperty: 'width', - transform, + transform: sizingTransform, }); export const sizeHeight = style({ prop: 'size', cssProperty: 'height', - transform, + transform: sizingTransform, }); export const boxSizing = style({ diff --git a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js index 51b00b16897fb2..51162872e6cd73 100644 --- a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js +++ b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js @@ -1,10 +1,11 @@ +import { unstable_capitalize as capitalize } from '@mui/utils'; import { getValue } from '../style'; import { handleBreakpoints } from '../breakpoints'; import { paddingKeys, padding, marginKeys, margin } from '../spacing'; -import { borderRadius, transform as borderTransform } from '../borders'; +import { borderRadius, borderTransform } from '../borders'; import { gap, rowGap, columnGap } from '../cssGrid'; -import { transform as paletteTransform } from '../palette'; -import { maxWidth, transform as sizingTransform } from '../sizing'; +import { paletteTransform } from '../palette'; +import { maxWidth, sizingTransform } from '../sizing'; const defaultSxConfig = { // borders @@ -191,7 +192,7 @@ const defaultSxConfig = { value = getValue( themeMapping, sizingTransform, - `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, + `size${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal, ); } diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js index 91969a5080c7d5..e1bd5e1b48f777 100644 --- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js +++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js @@ -45,11 +45,11 @@ export function unstable_createStyleFunctionSx(config = defaultSxConfig) { } const styleFromPropValue = (propValueFinal) => { - let value = getValue(themeMapping, transform, propValueFinal); + let val = getValue(themeMapping, transform, propValueFinal); if (propValueFinal === value && typeof propValueFinal === 'string') { // Haven't found value - value = getValue( + val = getValue( themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, @@ -58,11 +58,11 @@ export function unstable_createStyleFunctionSx(config = defaultSxConfig) { } if (cssProperty === false) { - return value; + return val; } return { - [cssProperty]: value, + [cssProperty]: val, }; }; From 5593dc95225bfad36cfd961f1df5b895b33fcdd2 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 15 Nov 2022 09:32:38 +0100 Subject: [PATCH 07/46] Refactor Joy's usage --- packages/mui-joy/src/Box/Box.tsx | 2 - packages/mui-joy/src/styles/defaultTheme.ts | 2 + packages/mui-joy/src/styles/index.ts | 2 +- .../src/styles/styleFunctionSx.test.js | 152 +++++++++--------- .../mui-joy/src/styles/styleFunctionSx.ts | 113 ------------- packages/mui-joy/src/styles/styled.ts | 3 +- packages/mui-joy/src/styles/sxConfig.ts | 35 ++++ packages/mui-joy/src/styles/types/theme.ts | 1 + packages/mui-system/src/borders.js | 2 +- packages/mui-system/src/createBox.js | 9 +- packages/mui-system/src/createStyled.js | 3 +- packages/mui-system/src/index.d.ts | 1 + packages/mui-system/src/index.js | 1 + .../mui-system/src/styleFunctionSx/index.d.ts | 2 + .../mui-system/src/styleFunctionSx/index.js | 1 + .../src/styleFunctionSx/styleFunctionSx.js | 9 +- 16 files changed, 130 insertions(+), 208 deletions(-) delete mode 100644 packages/mui-joy/src/styles/styleFunctionSx.ts create mode 100644 packages/mui-joy/src/styles/sxConfig.ts diff --git a/packages/mui-joy/src/Box/Box.tsx b/packages/mui-joy/src/Box/Box.tsx index 6f3115e13cc403..9192e6a906140a 100644 --- a/packages/mui-joy/src/Box/Box.tsx +++ b/packages/mui-joy/src/Box/Box.tsx @@ -4,13 +4,11 @@ import { OverridableComponent } from '@mui/types'; import { unstable_ClassNameGenerator as ClassNameGenerator } from '../className'; import { BoxTypeMap } from './BoxProps'; import defaultTheme from '../styles/defaultTheme'; -import styleFunctionSx from '../styles/styleFunctionSx'; const Box = createBox({ defaultTheme, defaultClassName: 'JoyBox-root', generateClassName: ClassNameGenerator.generate, - styleFunctionSx, }) as OverridableComponent; Box.propTypes /* remove-proptypes */ = { diff --git a/packages/mui-joy/src/styles/defaultTheme.ts b/packages/mui-joy/src/styles/defaultTheme.ts index cce16945265ee6..007e70141c8a4a 100644 --- a/packages/mui-joy/src/styles/defaultTheme.ts +++ b/packages/mui-joy/src/styles/defaultTheme.ts @@ -3,6 +3,7 @@ import extendTheme from './extendTheme'; import type { CssVarsThemeOptions, ColorSystemOptions } from './extendTheme'; import type { Theme, RuntimeColorSystem } from './types'; import { createVariant, createSoftInversion, createSolidInversion } from './variantUtils'; +import sxConfig from './sxConfig'; export const getThemeWithVars = ( themeInput?: Omit & ColorSystemOptions, @@ -94,5 +95,6 @@ defaultTheme.colorInversion = deepmerge( }, defaultTheme.colorInversion, ); +defaultTheme.sxConfig = sxConfig; export default defaultTheme; diff --git a/packages/mui-joy/src/styles/index.ts b/packages/mui-joy/src/styles/index.ts index f674dcf5b89451..d8025aacbb8c02 100644 --- a/packages/mui-joy/src/styles/index.ts +++ b/packages/mui-joy/src/styles/index.ts @@ -71,7 +71,7 @@ export { default as styled } from './styled'; export { default as ThemeProvider } from './ThemeProvider'; export * from './ThemeProvider'; export { default as useThemeProps } from './useThemeProps'; -export { sx as experimental_sx } from './styleFunctionSx'; +export { sx as experimental_sx } from './sxConfig'; export { ColorInversionProvider, useColorInversion } from './ColorInversion'; export { default as extendTheme, createGetCssVar } from './extendTheme'; export type { CssVarsThemeOptions } from './extendTheme'; diff --git a/packages/mui-joy/src/styles/styleFunctionSx.test.js b/packages/mui-joy/src/styles/styleFunctionSx.test.js index b16baf81347169..19a970c40e1bb3 100644 --- a/packages/mui-joy/src/styles/styleFunctionSx.test.js +++ b/packages/mui-joy/src/styles/styleFunctionSx.test.js @@ -1,7 +1,7 @@ -import { expect } from 'chai'; +// import { expect } from 'chai'; import { createBreakpoints } from '@mui/system'; -import styleFunctionSx from './styleFunctionSx'; +// TODO: refactor test to test the actual sx prop describe('styleFunctionSx', () => { const theme = { palette: { @@ -44,89 +44,89 @@ describe('styleFunctionSx', () => { }, breakpoints: createBreakpoints({}), }; - it('color', () => { - expect(styleFunctionSx({ theme, sx: { color: 'primary.500' } })).to.deep.equal({ - color: 'var(--palette-primary-500)', - }); - }); + // it('color', () => { + // expect(styleFunctionSx({ theme, sx: { color: 'primary.500' } })).to.deep.equal({ + // color: 'var(--palette-primary-500)', + // }); + // }); - it('bgcolor', () => { - expect(styleFunctionSx({ theme, sx: { bgcolor: 'primary.containedBg' } })).to.deep.equal({ - backgroundColor: 'var(--palette-primary-containedBg)', - }); - }); + // it('bgcolor', () => { + // expect(styleFunctionSx({ theme, sx: { bgcolor: 'primary.containedBg' } })).to.deep.equal({ + // backgroundColor: 'var(--palette-primary-containedBg)', + // }); + // }); - it('backgroundColor', () => { - expect( - styleFunctionSx({ theme, sx: { backgroundColor: 'primary.containedBg' } }), - ).to.deep.equal({ - backgroundColor: 'var(--palette-primary-containedBg)', - }); - }); + // it('backgroundColor', () => { + // expect( + // styleFunctionSx({ theme, sx: { backgroundColor: 'primary.containedBg' } }), + // ).to.deep.equal({ + // backgroundColor: 'var(--palette-primary-containedBg)', + // }); + // }); - it('borderColor', () => { - expect(styleFunctionSx({ theme, sx: { borderColor: 'primary.outlinedBorder' } })).to.deep.equal( - { - borderColor: 'var(--palette-primary-outlinedBorder)', - }, - ); - }); + // it('borderColor', () => { + // expect(styleFunctionSx({ theme, sx: { borderColor: 'primary.outlinedBorder' } })).to.deep.equal( + // { + // borderColor: 'var(--palette-primary-outlinedBorder)', + // }, + // ); + // }); - it('borderRadius', () => { - expect(styleFunctionSx({ theme, sx: { borderRadius: 'md' } })).to.deep.equal({ - borderRadius: 'var(--radius-md)', - }); - }); + // it('borderRadius', () => { + // expect(styleFunctionSx({ theme, sx: { borderRadius: 'md' } })).to.deep.equal({ + // borderRadius: 'var(--radius-md)', + // }); + // }); - it('boxShadow', () => { - expect(styleFunctionSx({ theme, sx: { boxShadow: 'md' } })).to.deep.equal({ - boxShadow: 'var(--shadow-md)', - }); - }); + // it('boxShadow', () => { + // expect(styleFunctionSx({ theme, sx: { boxShadow: 'md' } })).to.deep.equal({ + // boxShadow: 'var(--shadow-md)', + // }); + // }); - it('fontFamily', () => { - expect(styleFunctionSx({ theme, sx: { fontFamily: 'display' } })).to.deep.equal({ - fontFamily: 'var(--fontFamily-display)', - }); - }); + // it('fontFamily', () => { + // expect(styleFunctionSx({ theme, sx: { fontFamily: 'display' } })).to.deep.equal({ + // fontFamily: 'var(--fontFamily-display)', + // }); + // }); - it('fontSize', () => { - expect(styleFunctionSx({ theme, sx: { fontSize: 'md' } })).to.deep.equal({ - fontSize: 'var(--fontSize-md)', - }); - }); + // it('fontSize', () => { + // expect(styleFunctionSx({ theme, sx: { fontSize: 'md' } })).to.deep.equal({ + // fontSize: 'var(--fontSize-md)', + // }); + // }); - it('fontWeight', () => { - expect(styleFunctionSx({ theme, sx: { fontWeight: 'md' } })).to.deep.equal({ - fontWeight: 'var(--fontWeight-md)', - }); - }); + // it('fontWeight', () => { + // expect(styleFunctionSx({ theme, sx: { fontWeight: 'md' } })).to.deep.equal({ + // fontWeight: 'var(--fontWeight-md)', + // }); + // }); - it('letterSpacing', () => { - expect(styleFunctionSx({ theme, sx: { letterSpacing: 'md' } })).to.deep.equal({ - letterSpacing: 'var(--letterSpacing-md)', - }); - }); + // it('letterSpacing', () => { + // expect(styleFunctionSx({ theme, sx: { letterSpacing: 'md' } })).to.deep.equal({ + // letterSpacing: 'var(--letterSpacing-md)', + // }); + // }); - it('lineHeight', () => { - expect(styleFunctionSx({ theme, sx: { lineHeight: 'md' } })).to.deep.equal({ - lineHeight: 'var(--lineHeight-md)', - }); - }); + // it('lineHeight', () => { + // expect(styleFunctionSx({ theme, sx: { lineHeight: 'md' } })).to.deep.equal({ + // lineHeight: 'var(--lineHeight-md)', + // }); + // }); - it('should handle reponsive styles', () => { - expect( - styleFunctionSx({ theme, sx: { fontSize: { xs: 'sm', md: 'md', xl: 'xl' } } }), - ).to.deep.equal({ - '@media (min-width:0px)': { - fontSize: 'var(--fontSize-sm)', - }, - '@media (min-width:900px)': { - fontSize: 'var(--fontSize-md)', - }, - '@media (min-width:1536px)': { - fontSize: 'var(--fontSize-xl)', - }, - }); - }); + // it('should handle reponsive styles', () => { + // expect( + // styleFunctionSx({ theme, sx: { fontSize: { xs: 'sm', md: 'md', xl: 'xl' } } }), + // ).to.deep.equal({ + // '@media (min-width:0px)': { + // fontSize: 'var(--fontSize-sm)', + // }, + // '@media (min-width:900px)': { + // fontSize: 'var(--fontSize-md)', + // }, + // '@media (min-width:1536px)': { + // fontSize: 'var(--fontSize-xl)', + // }, + // }); + // }); }); diff --git a/packages/mui-joy/src/styles/styleFunctionSx.ts b/packages/mui-joy/src/styles/styleFunctionSx.ts deleted file mode 100644 index 363b9dc8de62bf..00000000000000 --- a/packages/mui-joy/src/styles/styleFunctionSx.ts +++ /dev/null @@ -1,113 +0,0 @@ -import { - Interpolation, - unstable_createStyleFunctionSx, - compose, - style, - display, - flexbox, - grid, - positions, - sizing, - spacing, - border, - borderTop, - borderRight, - borderBottom, - borderLeft, - borderColor, - borderTopColor, - borderRightColor, - borderBottomColor, - borderLeftColor, - palette, - typographyVariant, -} from '@mui/system'; -import { Theme, SxProps } from './types'; - -// The default system themeKey is shape -const borderRadius = style({ - prop: 'borderRadius', - themeKey: 'radius', -}); - -const borders = compose( - border, - borderTop, - borderRight, - borderBottom, - borderLeft, - borderColor, - borderTopColor, - borderRightColor, - borderBottomColor, - borderLeftColor, - borderRadius, -); - -// The default system themeKey is shadows -const boxShadow = style({ - prop: 'boxShadow', - themeKey: 'shadow', -}); - -// The default system themeKey is typography -export const fontFamily = style({ - prop: 'fontFamily', - themeKey: 'fontFamily', -}); - -// The default system themeKey is typography -export const fontSize = style({ - prop: 'fontSize', - themeKey: 'fontSize', -}); - -// The default system themeKey is typography -export const fontWeight = style({ - prop: 'fontWeight', - themeKey: 'fontWeight', -}); - -// The default system themeKey is typography -export const letterSpacing = style({ - prop: 'letterSpacing', - themeKey: 'letterSpacing', -}); - -export const lineHeight = style({ - prop: 'lineHeight', - themeKey: 'lineHeight', -}); - -const typography = compose( - typographyVariant, - fontFamily, - fontSize, - fontWeight, - letterSpacing, - lineHeight, -); - -const styleFunctionMapping = { - borders, - display, - flexbox, - grid, - positions, - palette, - boxShadow, - sizing, - spacing, - typography, -}; - -const styleFunctionSx = unstable_createStyleFunctionSx(styleFunctionMapping); - -styleFunctionSx.filterProps = ['sx']; - -export const sx = (styles: SxProps) => { - return ({ theme }: { theme: Theme }) => - styleFunctionSx({ sx: styles, theme }) as Interpolation<{ theme: Theme }>; -}; - -export default styleFunctionSx; diff --git a/packages/mui-joy/src/styles/styled.ts b/packages/mui-joy/src/styles/styled.ts index 0b3efd0b9649e9..a6dfd1c5a1f408 100644 --- a/packages/mui-joy/src/styles/styled.ts +++ b/packages/mui-joy/src/styles/styled.ts @@ -1,8 +1,7 @@ import { createStyled } from '@mui/system'; import { Theme } from './types'; import defaultTheme from './defaultTheme'; -import styleFunctionSx from './styleFunctionSx'; -const styled = createStyled({ defaultTheme, styleFunctionSx }); +const styled = createStyled({ defaultTheme }); export default styled; diff --git a/packages/mui-joy/src/styles/sxConfig.ts b/packages/mui-joy/src/styles/sxConfig.ts new file mode 100644 index 00000000000000..3bb1885c1f9a4a --- /dev/null +++ b/packages/mui-joy/src/styles/sxConfig.ts @@ -0,0 +1,35 @@ +import { unstable_defaultSxConfig } from '@mui/system'; + +const sxConfig = { + ...unstable_defaultSxConfig, + // The default system themeKey is shape + borderRadius: { + themeKey: 'radius', + }, + // The default system themeKey is shadows + boxShadow: { + themeKey: 'shadow', + }, + // The default system themeKey is typography + fontFamily: { + themeKey: 'fontFamily', + }, + // The default system themeKey is typography + fontSize: { + themeKey: 'fontSize', + }, + // The default system themeKey is typography + fontWeight: { + themeKey: 'fontWeight', + }, + // The default system themeKey is typography + letterSpacing: { + themeKey: 'letterSpacing', + }, + // The default system themeKey is typography + lineHeight: { + themeKey: 'lineHeight', + }, +}; + +export default sxConfig; diff --git a/packages/mui-joy/src/styles/types/theme.ts b/packages/mui-joy/src/styles/types/theme.ts index 4621a31fdc4967..c492142ffc1d61 100644 --- a/packages/mui-joy/src/styles/types/theme.ts +++ b/packages/mui-joy/src/styles/types/theme.ts @@ -80,6 +80,7 @@ export interface Theme extends ThemeScales, RuntimeColorSystem { vars: ThemeVars; getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string; getColorSchemeSelector: (colorScheme: DefaultColorScheme | ExtendedColorScheme) => string; + sxConfig: object; } export type SxProps = SystemSxProps; diff --git a/packages/mui-system/src/borders.js b/packages/mui-system/src/borders.js index e1310373841f8a..7ed3d41588fa1c 100644 --- a/packages/mui-system/src/borders.js +++ b/packages/mui-system/src/borders.js @@ -33,7 +33,7 @@ export const borderRight = style({ export const borderBottom = style({ prop: 'borderBottom', themeKey: 'borders', - transform, + transform: borderTransform, }); export const borderLeft = style({ diff --git a/packages/mui-system/src/createBox.js b/packages/mui-system/src/createBox.js index a47792ad6df652..080b7df08c5e91 100644 --- a/packages/mui-system/src/createBox.js +++ b/packages/mui-system/src/createBox.js @@ -1,16 +1,11 @@ import * as React from 'react'; import clsx from 'clsx'; import styled from '@mui/styled-engine'; -import defaultStyleFunctionSx, { extendSxProp } from './styleFunctionSx'; +import styleFunctionSx, { extendSxProp } from './styleFunctionSx'; import useTheme from './useTheme'; export default function createBox(options = {}) { - const { - defaultTheme, - defaultClassName = 'MuiBox-root', - generateClassName, - styleFunctionSx = defaultStyleFunctionSx, - } = options; + const { defaultTheme, defaultClassName = 'MuiBox-root', generateClassName } = options; const BoxRoot = styled('div', { shouldForwardProp: (prop) => prop !== 'theme' && prop !== 'sx' && prop !== 'as', })(styleFunctionSx); diff --git a/packages/mui-system/src/createStyled.js b/packages/mui-system/src/createStyled.js index 8f5938fad48c17..679dd95d7c3f04 100644 --- a/packages/mui-system/src/createStyled.js +++ b/packages/mui-system/src/createStyled.js @@ -3,7 +3,7 @@ import styledEngineStyled, { internal_processStyles as processStyles } from '@mu import { getDisplayName } from '@mui/utils'; import createTheme from './createTheme'; import propsToClassKey from './propsToClassKey'; -import defaultStyleFunctionSx from './styleFunctionSx'; +import styleFunctionSx from './styleFunctionSx'; function isEmpty(obj) { return Object.keys(obj).length === 0; @@ -81,7 +81,6 @@ export default function createStyled(input = {}) { defaultTheme = systemDefaultTheme, rootShouldForwardProp = shouldForwardProp, slotShouldForwardProp = shouldForwardProp, - styleFunctionSx = defaultStyleFunctionSx, } = input; const systemSx = (props) => { diff --git a/packages/mui-system/src/index.d.ts b/packages/mui-system/src/index.d.ts index c2dc1bdda444e8..8784f66f88e3a1 100644 --- a/packages/mui-system/src/index.d.ts +++ b/packages/mui-system/src/index.d.ts @@ -119,6 +119,7 @@ export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, + unstable_defaultSxConfig, } from './styleFunctionSx'; export * from './styleFunctionSx'; diff --git a/packages/mui-system/src/index.js b/packages/mui-system/src/index.js index b6a85cbacdce68..2b97fd192d2435 100644 --- a/packages/mui-system/src/index.js +++ b/packages/mui-system/src/index.js @@ -29,6 +29,7 @@ export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, + unstable_defaultSxConfig, } from './styleFunctionSx'; export { default as experimental_sx } from './sx'; export { default as unstable_getThemeValue } from './getThemeValue'; diff --git a/packages/mui-system/src/styleFunctionSx/index.d.ts b/packages/mui-system/src/styleFunctionSx/index.d.ts index 7dd890cdebd973..62b15bc3c11f7d 100644 --- a/packages/mui-system/src/styleFunctionSx/index.d.ts +++ b/packages/mui-system/src/styleFunctionSx/index.d.ts @@ -6,4 +6,6 @@ export * from './OverwriteCSSProperties'; export * from './StandardCssProperties'; export { default as extendSxProp } from './extendSxProp'; + +export const unstable_defaultSxConfig: object; export * from './extendSxProp'; diff --git a/packages/mui-system/src/styleFunctionSx/index.js b/packages/mui-system/src/styleFunctionSx/index.js index ec677c0b0fa342..1b08c2e61dd050 100644 --- a/packages/mui-system/src/styleFunctionSx/index.js +++ b/packages/mui-system/src/styleFunctionSx/index.js @@ -1,3 +1,4 @@ export { default } from './styleFunctionSx'; export { unstable_createStyleFunctionSx } from './styleFunctionSx'; export { default as extendSxProp } from './extendSxProp'; +export { default as unstable_defaultSxConfig } from './defaultSxConfig'; diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js index e1bd5e1b48f777..beb424fe06319d 100644 --- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js +++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js @@ -19,8 +19,8 @@ function callIfFn(maybeFn, arg) { } // eslint-disable-next-line @typescript-eslint/naming-convention -export function unstable_createStyleFunctionSx(config = defaultSxConfig) { - function getThemeValue(prop, value, theme) { +export function unstable_createStyleFunctionSx() { + function getThemeValue(prop, value, theme, config) { const props = { [prop]: value, theme, @@ -71,6 +71,7 @@ export function unstable_createStyleFunctionSx(config = defaultSxConfig) { function styleFunctionSx(props) { const { sx, theme = {} } = props || {}; + const { sxConfig: config = defaultSxConfig } = theme; if (!sx) { return null; // Emotion & styled-components will neglect null } @@ -101,7 +102,7 @@ export function unstable_createStyleFunctionSx(config = defaultSxConfig) { if (value !== null && value !== undefined) { if (typeof value === 'object') { if (config[styleKey]) { - css = merge(css, getThemeValue(styleKey, value, theme)); + css = merge(css, getThemeValue(styleKey, value, theme, config)); } else { const breakpointsValues = handleBreakpoints({ theme }, value, (x) => ({ [styleKey]: x, @@ -114,7 +115,7 @@ export function unstable_createStyleFunctionSx(config = defaultSxConfig) { } } } else { - css = merge(css, getThemeValue(styleKey, value, theme)); + css = merge(css, getThemeValue(styleKey, value, theme, config)); } } }); From db412b56f0fd2419b6dd20da0d43aea03c389f16 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 15 Nov 2022 09:39:22 +0100 Subject: [PATCH 08/46] Fix experimental sx --- packages/mui-joy/src/styles/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-joy/src/styles/index.ts b/packages/mui-joy/src/styles/index.ts index d8025aacbb8c02..c9fc6d16493b62 100644 --- a/packages/mui-joy/src/styles/index.ts +++ b/packages/mui-joy/src/styles/index.ts @@ -1,5 +1,6 @@ // reexports from system for module augmentation export type { BreakpointOverrides } from '@mui/system'; +export { experimental_sx } from '@mui/system'; // Joy typings export type { ColorSchemeOverrides, SupportedColorScheme } from './types/colorScheme'; @@ -71,7 +72,6 @@ export { default as styled } from './styled'; export { default as ThemeProvider } from './ThemeProvider'; export * from './ThemeProvider'; export { default as useThemeProps } from './useThemeProps'; -export { sx as experimental_sx } from './sxConfig'; export { ColorInversionProvider, useColorInversion } from './ColorInversion'; export { default as extendTheme, createGetCssVar } from './extendTheme'; export type { CssVarsThemeOptions } from './extendTheme'; From c9b5e145d269828ccd59c6f172900504d00e1df4 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 15 Nov 2022 10:44:57 +0100 Subject: [PATCH 09/46] Fixes --- packages/mui-system/src/createBox.d.ts | 2 -- .../mui-system/src/styleFunctionSx/index.d.ts | 1 + .../src/styleFunctionSx/styleFunctionSx.js | 18 +++++++++--------- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/mui-system/src/createBox.d.ts b/packages/mui-system/src/createBox.d.ts index cdf0123ddde8b9..707fd655467278 100644 --- a/packages/mui-system/src/createBox.d.ts +++ b/packages/mui-system/src/createBox.d.ts @@ -1,9 +1,7 @@ import Box from './Box'; -import styleFunctionSx from './styleFunctionSx'; export default function createBox(options?: { defaultTheme: object; defaultClassName?: string; generateClassName?: (componentName: string) => string; - styleFunctionSx?: typeof styleFunctionSx; }): typeof Box; diff --git a/packages/mui-system/src/styleFunctionSx/index.d.ts b/packages/mui-system/src/styleFunctionSx/index.d.ts index 62b15bc3c11f7d..981163fd1eaa87 100644 --- a/packages/mui-system/src/styleFunctionSx/index.d.ts +++ b/packages/mui-system/src/styleFunctionSx/index.d.ts @@ -7,5 +7,6 @@ export * from './StandardCssProperties'; export { default as extendSxProp } from './extendSxProp'; +// eslint-disable-next-line @typescript-eslint/naming-convention export const unstable_defaultSxConfig: object; export * from './extendSxProp'; diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js index beb424fe06319d..0070aed71aeed2 100644 --- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js +++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js @@ -20,21 +20,21 @@ function callIfFn(maybeFn, arg) { // eslint-disable-next-line @typescript-eslint/naming-convention export function unstable_createStyleFunctionSx() { - function getThemeValue(prop, value, theme, config) { + function getThemeValue(prop, val, theme, config) { const props = { - [prop]: value, + [prop]: val, theme, }; const options = config[prop]; if (!options) { - return { [prop]: value }; + return { [prop]: val }; } const { cssProperty = prop, themeKey, transform, style } = options; - if (value == null) { + if (val == null) { return null; } @@ -45,11 +45,11 @@ export function unstable_createStyleFunctionSx() { } const styleFromPropValue = (propValueFinal) => { - let val = getValue(themeMapping, transform, propValueFinal); + let value = getValue(themeMapping, transform, propValueFinal); if (propValueFinal === value && typeof propValueFinal === 'string') { // Haven't found value - val = getValue( + value = getValue( themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, @@ -58,15 +58,15 @@ export function unstable_createStyleFunctionSx() { } if (cssProperty === false) { - return val; + return value; } return { - [cssProperty]: val, + [cssProperty]: value, }; }; - return handleBreakpoints(props, value, styleFromPropValue); + return handleBreakpoints(props, val, styleFromPropValue); } function styleFunctionSx(props) { From 3c27f5247cba4034db2f015779c7b45dd734bda7 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 15 Nov 2022 11:29:12 +0100 Subject: [PATCH 10/46] More fixes --- packages/mui-joy/src/styles/defaultTheme.ts | 2 -- packages/mui-joy/src/styles/extendTheme.ts | 7 +++++++ packages/mui-system/src/styleFunctionSx/extendSxProp.js | 6 ++++-- packages/mui-system/src/styleFunctionSx/styleFunctionSx.js | 6 +++++- 4 files changed, 16 insertions(+), 5 deletions(-) diff --git a/packages/mui-joy/src/styles/defaultTheme.ts b/packages/mui-joy/src/styles/defaultTheme.ts index 007e70141c8a4a..4c39cdeb03a02d 100644 --- a/packages/mui-joy/src/styles/defaultTheme.ts +++ b/packages/mui-joy/src/styles/defaultTheme.ts @@ -95,6 +95,4 @@ defaultTheme.colorInversion = deepmerge( }, defaultTheme.colorInversion, ); -defaultTheme.sxConfig = sxConfig; - export default defaultTheme; diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts index bff0c2f194c0b9..d543d47c86f3f3 100644 --- a/packages/mui-joy/src/styles/extendTheme.ts +++ b/packages/mui-joy/src/styles/extendTheme.ts @@ -7,6 +7,7 @@ import { unstable_createGetCssVar as systemCreateGetCssVar, colorChannel, } from '@mui/system'; +import defaultSxConfig from './sxConfig'; import colors from '../colors'; import { DefaultColorScheme, ExtendedColorScheme } from './types/colorScheme'; import { ColorSystem, ColorPaletteProp, PaletteRange } from './types/colorSystem'; @@ -60,6 +61,7 @@ export interface CssVarsThemeOptions extends Partial2Level { spacing?: SpacingOptions; components?: Components; colorSchemes?: Partial>; + sxConfig?: object; } export const createGetCssVar = (cssVarPrefix = 'joy') => @@ -623,5 +625,10 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { attachColorChannels(colorSystem.palette); }); + theme.sxConfig = { + ...defaultSxConfig, + ...themeOptions?.sxConfig, + } + return theme; } diff --git a/packages/mui-system/src/styleFunctionSx/extendSxProp.js b/packages/mui-system/src/styleFunctionSx/extendSxProp.js index c01ed5046faa17..9c169cccfcf763 100644 --- a/packages/mui-system/src/styleFunctionSx/extendSxProp.js +++ b/packages/mui-system/src/styleFunctionSx/extendSxProp.js @@ -1,5 +1,5 @@ import { isPlainObject } from '@mui/utils'; -import { propToStyleFunction } from '../getThemeValue'; +import defaultSxConfig from './defaultSxConfig'; const splitProps = (props) => { const result = { @@ -7,8 +7,10 @@ const splitProps = (props) => { otherProps: {}, }; + const config = props?.theme?.sxConfig ?? defaultSxConfig; + Object.keys(props).forEach((prop) => { - if (propToStyleFunction[prop]) { + if (config[prop]) { result.systemProps[prop] = props[prop]; } else { result.otherProps[prop] = props[prop]; diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js index 0070aed71aeed2..de09ca26dc3fb3 100644 --- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js +++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js @@ -71,7 +71,11 @@ export function unstable_createStyleFunctionSx() { function styleFunctionSx(props) { const { sx, theme = {} } = props || {}; - const { sxConfig: config = defaultSxConfig } = theme; + let config = defaultSxConfig; + + if (theme.sxConfig) { + config = theme.sxConfig; + } if (!sx) { return null; // Emotion & styled-components will neglect null } From c71e273d921824448522eb2ab00f1e25a2abe253 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 15 Nov 2022 13:17:57 +0100 Subject: [PATCH 11/46] Moved and fixed some tests --- packages/mui-joy/src/Box/Box.test.js | 222 +++++++++++++++++- .../mui-joy/src/styles/defaultTheme.test.js | 1 + packages/mui-joy/src/styles/defaultTheme.ts | 1 - .../mui-joy/src/styles/extendTheme.test.js | 1 + 4 files changed, 223 insertions(+), 2 deletions(-) diff --git a/packages/mui-joy/src/Box/Box.test.js b/packages/mui-joy/src/Box/Box.test.js index 54193a56457090..4260b7c961379a 100644 --- a/packages/mui-joy/src/Box/Box.test.js +++ b/packages/mui-joy/src/Box/Box.test.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { createRenderer, describeConformance } from 'test/utils'; -import { ThemeProvider } from '@mui/joy/styles'; +import { ThemeProvider, CssVarsProvider, extendTheme } from '@mui/joy/styles'; import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/joy/className'; import Box from '@mui/joy/Box'; @@ -65,4 +65,224 @@ describe('Joy ', () => { expect(container.firstChild).to.have.class('CompanyBox-root'); }); }); + + describe('styleFunctionSx', () => { + const theme = extendTheme({ + colorSchemes: { + light: { + palette: { + primary: { + 500: 'rgb(0, 0, 255)', + }, + }, + }, + }, + radius: { + md: '77px', + }, + shadow: { + md: "rgb(0, 0, 0) 0px 0px 10px 0px", + } + }); + + it('color', () => { + const isJSDOM = /jsdom/.test(window.navigator.userAgent); + + if (isJSDOM) { + this.skip(); + } + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + color: 'rgb(0, 0, 255)', + }); + }); + + it('bgcolor', () => { + const isJSDOM = /jsdom/.test(window.navigator.userAgent); + + if (isJSDOM) { + this.skip(); + } + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + backgroundColor: 'rgb(0, 0, 255)', + }); + }); + + it('backgroundColor', () => { + const isJSDOM = /jsdom/.test(window.navigator.userAgent); + + if (isJSDOM) { + this.skip(); + } + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + backgroundColor: 'rgb(0, 0, 255)', + }); + }); + + it('borderRadius', () => { + const isJSDOM = /jsdom/.test(window.navigator.userAgent); + + if (isJSDOM) { + this.skip(); + } + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + borderTopLeftRadius: '77px', + borderTopRightRadius: '77px', + borderBottomLeftRadius: '77px', + borderBottomRightRadius: '77px', + }); + }); + + it('boxShadow', () => { + const isJSDOM = /jsdom/.test(window.navigator.userAgent); + + if (isJSDOM) { + this.skip(); + } + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + boxShadow: "rgb(0, 0, 0) 0px 0px 10px 0px", + }); + }); + + it('fontSize', () => { + const isJSDOM = /jsdom/.test(window.navigator.userAgent); + + if (isJSDOM) { + this.skip(); + } + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + fontSize: '16px', + }); + }); + + it('fontWeight', () => { + const isJSDOM = /jsdom/.test(window.navigator.userAgent); + + if (isJSDOM) { + this.skip(); + } + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + fontWeight: "500", + }); + }); + + it('letterSpacing', () => { + const isJSDOM = /jsdom/.test(window.navigator.userAgent); + + if (isJSDOM) { + this.skip(); + } + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + letterSpacing: "1.328px", + }); + }); + + it('lineHeight', () => { + const isJSDOM = /jsdom/.test(window.navigator.userAgent); + + if (isJSDOM) { + this.skip(); + } + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + lineHeight: "24px", + }); + }); + + // it('should handle reponsive styles', () => { + // expect( + // styleFunctionSx({ theme, sx: { fontSize: { xs: 'sm', md: 'md', xl: 'xl' } } }), + // ).to.deep.equal({ + // '@media (min-width:0px)': { + // fontSize: 'var(--fontSize-sm)', + // }, + // '@media (min-width:900px)': { + // fontSize: 'var(--fontSize-md)', + // }, + // '@media (min-width:1536px)': { + // fontSize: 'var(--fontSize-xl)', + // }, + // }); + // }); + }); + }); diff --git a/packages/mui-joy/src/styles/defaultTheme.test.js b/packages/mui-joy/src/styles/defaultTheme.test.js index 38928cc057b694..7f26d5afa7a5a7 100644 --- a/packages/mui-joy/src/styles/defaultTheme.test.js +++ b/packages/mui-joy/src/styles/defaultTheme.test.js @@ -29,6 +29,7 @@ describe('defaultTheme', () => { 'vars', 'cssVarPrefix', 'getColorSchemeSelector', + 'sxConfig', ]).to.includes(field); }); }); diff --git a/packages/mui-joy/src/styles/defaultTheme.ts b/packages/mui-joy/src/styles/defaultTheme.ts index 4c39cdeb03a02d..39767dda4cf261 100644 --- a/packages/mui-joy/src/styles/defaultTheme.ts +++ b/packages/mui-joy/src/styles/defaultTheme.ts @@ -3,7 +3,6 @@ import extendTheme from './extendTheme'; import type { CssVarsThemeOptions, ColorSystemOptions } from './extendTheme'; import type { Theme, RuntimeColorSystem } from './types'; import { createVariant, createSoftInversion, createSolidInversion } from './variantUtils'; -import sxConfig from './sxConfig'; export const getThemeWithVars = ( themeInput?: Omit & ColorSystemOptions, diff --git a/packages/mui-joy/src/styles/extendTheme.test.js b/packages/mui-joy/src/styles/extendTheme.test.js index 37f5636066f82e..986b4301163504 100644 --- a/packages/mui-joy/src/styles/extendTheme.test.js +++ b/packages/mui-joy/src/styles/extendTheme.test.js @@ -23,6 +23,7 @@ describe('extendTheme', () => { 'colorInversionConfig', 'variants', 'cssVarPrefix', + 'sxConfig', ]).to.includes(field); }); }); From 457d61defddba229862a1fa8cc08de0e1df12151 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 15 Nov 2022 15:19:47 +0100 Subject: [PATCH 12/46] fixes & lint issues --- packages/mui-joy/src/Box/Box.test.js | 143 +++++++----------- packages/mui-joy/src/styles/extendTheme.ts | 2 +- .../src/styles/styleFunctionSx.test.js | 132 ---------------- 3 files changed, 55 insertions(+), 222 deletions(-) delete mode 100644 packages/mui-joy/src/styles/styleFunctionSx.test.js diff --git a/packages/mui-joy/src/Box/Box.test.js b/packages/mui-joy/src/Box/Box.test.js index 4260b7c961379a..f8790849d7245a 100644 --- a/packages/mui-joy/src/Box/Box.test.js +++ b/packages/mui-joy/src/Box/Box.test.js @@ -81,85 +81,77 @@ describe('Joy ', () => { md: '77px', }, shadow: { - md: "rgb(0, 0, 0) 0px 0px 10px 0px", - } + md: 'rgb(0, 0, 0) 0px 0px 10px 0px', + }, }); - it('color', () => { + it('color', function test() { const isJSDOM = /jsdom/.test(window.navigator.userAgent); if (isJSDOM) { this.skip(); } - + const { container } = render( - - + + , ); - + expect(container.firstChild).toHaveComputedStyle({ color: 'rgb(0, 0, 255)', }); }); - it('bgcolor', () => { + it('bgcolor', function test() { const isJSDOM = /jsdom/.test(window.navigator.userAgent); if (isJSDOM) { this.skip(); } - + const { container } = render( - - + + , ); - + expect(container.firstChild).toHaveComputedStyle({ backgroundColor: 'rgb(0, 0, 255)', }); }); - it('backgroundColor', () => { + it('backgroundColor', function test() { const isJSDOM = /jsdom/.test(window.navigator.userAgent); if (isJSDOM) { this.skip(); } - + const { container } = render( - - + + , ); - + expect(container.firstChild).toHaveComputedStyle({ backgroundColor: 'rgb(0, 0, 255)', }); }); - - it('borderRadius', () => { + + it('borderRadius', function test() { const isJSDOM = /jsdom/.test(window.navigator.userAgent); if (isJSDOM) { this.skip(); } - + const { container } = render( - - + + , ); - + expect(container.firstChild).toHaveComputedStyle({ borderTopLeftRadius: '77px', borderTopRightRadius: '77px', @@ -167,122 +159,95 @@ describe('Joy ', () => { borderBottomRightRadius: '77px', }); }); - - it('boxShadow', () => { + + it('boxShadow', function test() { const isJSDOM = /jsdom/.test(window.navigator.userAgent); if (isJSDOM) { this.skip(); } - + const { container } = render( - - + + , ); - + expect(container.firstChild).toHaveComputedStyle({ - boxShadow: "rgb(0, 0, 0) 0px 0px 10px 0px", + boxShadow: 'rgb(0, 0, 0) 0px 0px 10px 0px', }); }); - it('fontSize', () => { + it('fontSize', function test() { const isJSDOM = /jsdom/.test(window.navigator.userAgent); if (isJSDOM) { this.skip(); } - + const { container } = render( - - + + , ); - + expect(container.firstChild).toHaveComputedStyle({ fontSize: '16px', }); }); - - it('fontWeight', () => { + + it('fontWeight', function test() { const isJSDOM = /jsdom/.test(window.navigator.userAgent); if (isJSDOM) { this.skip(); } - + const { container } = render( - - + + , ); - + expect(container.firstChild).toHaveComputedStyle({ - fontWeight: "500", + fontWeight: '500', }); }); - it('letterSpacing', () => { + it('letterSpacing', function test() { const isJSDOM = /jsdom/.test(window.navigator.userAgent); if (isJSDOM) { this.skip(); } - + const { container } = render( - - + + , ); - + expect(container.firstChild).toHaveComputedStyle({ - letterSpacing: "1.328px", + letterSpacing: '1.328px', }); }); - it('lineHeight', () => { + it('lineHeight', function test() { const isJSDOM = /jsdom/.test(window.navigator.userAgent); if (isJSDOM) { this.skip(); } - + const { container } = render( - - + + , ); - + expect(container.firstChild).toHaveComputedStyle({ - lineHeight: "24px", + lineHeight: '24px', }); }); - - // it('should handle reponsive styles', () => { - // expect( - // styleFunctionSx({ theme, sx: { fontSize: { xs: 'sm', md: 'md', xl: 'xl' } } }), - // ).to.deep.equal({ - // '@media (min-width:0px)': { - // fontSize: 'var(--fontSize-sm)', - // }, - // '@media (min-width:900px)': { - // fontSize: 'var(--fontSize-md)', - // }, - // '@media (min-width:1536px)': { - // fontSize: 'var(--fontSize-xl)', - // }, - // }); - // }); }); - }); diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts index d543d47c86f3f3..ad3bc77fad07ec 100644 --- a/packages/mui-joy/src/styles/extendTheme.ts +++ b/packages/mui-joy/src/styles/extendTheme.ts @@ -628,7 +628,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { theme.sxConfig = { ...defaultSxConfig, ...themeOptions?.sxConfig, - } + }; return theme; } diff --git a/packages/mui-joy/src/styles/styleFunctionSx.test.js b/packages/mui-joy/src/styles/styleFunctionSx.test.js deleted file mode 100644 index 19a970c40e1bb3..00000000000000 --- a/packages/mui-joy/src/styles/styleFunctionSx.test.js +++ /dev/null @@ -1,132 +0,0 @@ -// import { expect } from 'chai'; -import { createBreakpoints } from '@mui/system'; - -// TODO: refactor test to test the actual sx prop -describe('styleFunctionSx', () => { - const theme = { - palette: { - primary: { - 500: '#ff5252', - }, - }, - vars: { - palette: { - primary: { - 500: 'var(--palette-primary-500)', - textColor: 'var(--palette-primary-textColor)', - containedBg: 'var(--palette-primary-containedBg)', - outlinedBorder: 'var(--palette-primary-outlinedBorder)', - }, - }, - radius: { - md: 'var(--radius-md)', - }, - shadow: { - md: 'var(--shadow-md)', - }, - fontFamily: { - display: 'var(--fontFamily-display)', - }, - fontSize: { - sm: 'var(--fontSize-sm)', - md: 'var(--fontSize-md)', - xl: 'var(--fontSize-xl)', - }, - fontWeight: { - md: 'var(--fontWeight-md)', - }, - letterSpacing: { - md: 'var(--letterSpacing-md)', - }, - lineHeight: { - md: 'var(--lineHeight-md)', - }, - }, - breakpoints: createBreakpoints({}), - }; - // it('color', () => { - // expect(styleFunctionSx({ theme, sx: { color: 'primary.500' } })).to.deep.equal({ - // color: 'var(--palette-primary-500)', - // }); - // }); - - // it('bgcolor', () => { - // expect(styleFunctionSx({ theme, sx: { bgcolor: 'primary.containedBg' } })).to.deep.equal({ - // backgroundColor: 'var(--palette-primary-containedBg)', - // }); - // }); - - // it('backgroundColor', () => { - // expect( - // styleFunctionSx({ theme, sx: { backgroundColor: 'primary.containedBg' } }), - // ).to.deep.equal({ - // backgroundColor: 'var(--palette-primary-containedBg)', - // }); - // }); - - // it('borderColor', () => { - // expect(styleFunctionSx({ theme, sx: { borderColor: 'primary.outlinedBorder' } })).to.deep.equal( - // { - // borderColor: 'var(--palette-primary-outlinedBorder)', - // }, - // ); - // }); - - // it('borderRadius', () => { - // expect(styleFunctionSx({ theme, sx: { borderRadius: 'md' } })).to.deep.equal({ - // borderRadius: 'var(--radius-md)', - // }); - // }); - - // it('boxShadow', () => { - // expect(styleFunctionSx({ theme, sx: { boxShadow: 'md' } })).to.deep.equal({ - // boxShadow: 'var(--shadow-md)', - // }); - // }); - - // it('fontFamily', () => { - // expect(styleFunctionSx({ theme, sx: { fontFamily: 'display' } })).to.deep.equal({ - // fontFamily: 'var(--fontFamily-display)', - // }); - // }); - - // it('fontSize', () => { - // expect(styleFunctionSx({ theme, sx: { fontSize: 'md' } })).to.deep.equal({ - // fontSize: 'var(--fontSize-md)', - // }); - // }); - - // it('fontWeight', () => { - // expect(styleFunctionSx({ theme, sx: { fontWeight: 'md' } })).to.deep.equal({ - // fontWeight: 'var(--fontWeight-md)', - // }); - // }); - - // it('letterSpacing', () => { - // expect(styleFunctionSx({ theme, sx: { letterSpacing: 'md' } })).to.deep.equal({ - // letterSpacing: 'var(--letterSpacing-md)', - // }); - // }); - - // it('lineHeight', () => { - // expect(styleFunctionSx({ theme, sx: { lineHeight: 'md' } })).to.deep.equal({ - // lineHeight: 'var(--lineHeight-md)', - // }); - // }); - - // it('should handle reponsive styles', () => { - // expect( - // styleFunctionSx({ theme, sx: { fontSize: { xs: 'sm', md: 'md', xl: 'xl' } } }), - // ).to.deep.equal({ - // '@media (min-width:0px)': { - // fontSize: 'var(--fontSize-sm)', - // }, - // '@media (min-width:900px)': { - // fontSize: 'var(--fontSize-md)', - // }, - // '@media (min-width:1536px)': { - // fontSize: 'var(--fontSize-xl)', - // }, - // }); - // }); -}); From aab6ec2bc9a0f12b1cc3483936afb59d460fb43a Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 16 Nov 2022 14:23:15 +0100 Subject: [PATCH 13/46] Update packages/mui-joy/src/Box/Box.test.js Signed-off-by: Marija Najdova --- packages/mui-joy/src/Box/Box.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-joy/src/Box/Box.test.js b/packages/mui-joy/src/Box/Box.test.js index f8790849d7245a..b99f66c0393e17 100644 --- a/packages/mui-joy/src/Box/Box.test.js +++ b/packages/mui-joy/src/Box/Box.test.js @@ -66,7 +66,7 @@ describe('Joy ', () => { }); }); - describe('styleFunctionSx', () => { + describe('sx', () => { const theme = extendTheme({ colorSchemes: { light: { From 5556acbe80afc16763d4591eda167c9afbe8f0fe Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 16 Nov 2022 14:23:48 +0100 Subject: [PATCH 14/46] Update packages/mui-joy/src/styles/defaultTheme.ts Signed-off-by: Marija Najdova --- packages/mui-joy/src/styles/defaultTheme.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mui-joy/src/styles/defaultTheme.ts b/packages/mui-joy/src/styles/defaultTheme.ts index 39767dda4cf261..cce16945265ee6 100644 --- a/packages/mui-joy/src/styles/defaultTheme.ts +++ b/packages/mui-joy/src/styles/defaultTheme.ts @@ -94,4 +94,5 @@ defaultTheme.colorInversion = deepmerge( }, defaultTheme.colorInversion, ); + export default defaultTheme; From d79f58009f42d6564ce36b0097dfff9d9a28557d Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 17 Nov 2022 15:50:39 +0100 Subject: [PATCH 15/46] Resolve comments from review --- .../mui-joy/src/styles/CssVarsProvider.tsx | 10 +- packages/mui-joy/src/styles/ThemeProvider.tsx | 16 +- .../mui-joy/src/styles/defaultTheme.test.js | 3 +- packages/mui-joy/src/styles/defaultTheme.ts | 7 +- .../mui-joy/src/styles/extendTheme.test.js | 8 +- packages/mui-joy/src/styles/extendTheme.ts | 18 ++- packages/mui-joy/src/styles/index.ts | 1 - .../src/styles/styleFunctionSx.spec.tsx | 6 +- packages/mui-joy/src/styles/styled.test.tsx | 30 +++- packages/mui-joy/src/styles/types/theme.ts | 4 +- .../mui-material/src/styles/createTheme.d.ts | 8 +- .../mui-material/src/styles/createTheme.js | 12 +- .../src/styles/experimental_extendTheme.js | 8 + .../src/styleFunctionSx/defaultSxConfig.js | 140 +++++++++++++++--- .../src/styleFunctionSx/extendSxProp.js | 2 +- .../src/styleFunctionSx/styleFunctionSx.d.ts | 3 +- .../src/styleFunctionSx/styleFunctionSx.js | 4 +- 17 files changed, 239 insertions(+), 41 deletions(-) diff --git a/packages/mui-joy/src/styles/CssVarsProvider.tsx b/packages/mui-joy/src/styles/CssVarsProvider.tsx index f47e62034c3886..ac0c07fbc604c4 100644 --- a/packages/mui-joy/src/styles/CssVarsProvider.tsx +++ b/packages/mui-joy/src/styles/CssVarsProvider.tsx @@ -1,8 +1,11 @@ import { deepmerge } from '@mui/utils'; -import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system'; +import { + unstable_createCssVarsProvider as createCssVarsProvider, + unstable_styleFunctionSx as styleFunctionSx, +} from '@mui/system'; import extendTheme from './extendTheme'; import { createSoftInversion, createSolidInversion } from './variantUtils'; -import type { Theme, DefaultColorScheme, ExtendedColorScheme } from './types'; +import type { Theme, DefaultColorScheme, ExtendedColorScheme, SxProps } from './types'; const shouldSkipGeneratingVar = (keys: string[]) => !!keys[0].match(/^(typography|variants|breakpoints|colorInversion|colorInversionConfig)$/) || @@ -30,6 +33,9 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssV mergedTheme.colorInversion, { clone: false }, ); + + mergedTheme.unstable_sx = (props: SxProps) => + styleFunctionSx({ sx: props, theme: mergedTheme }); return mergedTheme; }, shouldSkipGeneratingVar, diff --git a/packages/mui-joy/src/styles/ThemeProvider.tsx b/packages/mui-joy/src/styles/ThemeProvider.tsx index 76df36c94ff756..007b8c2e05c276 100644 --- a/packages/mui-joy/src/styles/ThemeProvider.tsx +++ b/packages/mui-joy/src/styles/ThemeProvider.tsx @@ -1,5 +1,10 @@ import * as React from 'react'; -import { ThemeProvider as SystemThemeProvider, useTheme as useSystemTheme } from '@mui/system'; +import { + ThemeProvider as SystemThemeProvider, + unstable_styleFunctionSx as styleFunctionSx, + useTheme as useSystemTheme, +} from '@mui/system'; +import { SxProps } from './types'; import defaultTheme, { getThemeWithVars } from './defaultTheme'; import type { CssVarsThemeOptions } from './extendTheme'; @@ -7,6 +12,13 @@ export const useTheme = () => { return useSystemTheme(defaultTheme); }; +const getTheme = (themeInput: CssVarsThemeOptions) => { + const theme = getThemeWithVars(themeInput); + theme.unstable_sx = (props: SxProps) => styleFunctionSx({ sx: props, theme: defaultTheme }); + + return theme; +}; + export default function ThemeProvider({ children, theme: themeInput, @@ -14,7 +26,7 @@ export default function ThemeProvider({ theme?: CssVarsThemeOptions; }>) { return ( - + {children} ); diff --git a/packages/mui-joy/src/styles/defaultTheme.test.js b/packages/mui-joy/src/styles/defaultTheme.test.js index 7f26d5afa7a5a7..b3125cabadaff9 100644 --- a/packages/mui-joy/src/styles/defaultTheme.test.js +++ b/packages/mui-joy/src/styles/defaultTheme.test.js @@ -29,7 +29,8 @@ describe('defaultTheme', () => { 'vars', 'cssVarPrefix', 'getColorSchemeSelector', - 'sxConfig', + 'unstable_sxConfig', + 'unstable_sx', ]).to.includes(field); }); }); diff --git a/packages/mui-joy/src/styles/defaultTheme.ts b/packages/mui-joy/src/styles/defaultTheme.ts index cce16945265ee6..5386d423e332e0 100644 --- a/packages/mui-joy/src/styles/defaultTheme.ts +++ b/packages/mui-joy/src/styles/defaultTheme.ts @@ -1,7 +1,9 @@ import { deepmerge } from '@mui/utils'; +import { unstable_styleFunctionSx as styleFunctionSx } from '@mui/system'; import extendTheme from './extendTheme'; +import defaultSxConfig from './sxConfig'; import type { CssVarsThemeOptions, ColorSystemOptions } from './extendTheme'; -import type { Theme, RuntimeColorSystem } from './types'; +import type { Theme, RuntimeColorSystem, SxProps } from './types'; import { createVariant, createSoftInversion, createSolidInversion } from './variantUtils'; export const getThemeWithVars = ( @@ -95,4 +97,7 @@ defaultTheme.colorInversion = deepmerge( defaultTheme.colorInversion, ); +defaultTheme.unstable_sxConfig = defaultSxConfig; +defaultTheme.unstable_sx = (props: SxProps) => styleFunctionSx({ sx: props, theme: defaultTheme }); + export default defaultTheme; diff --git a/packages/mui-joy/src/styles/extendTheme.test.js b/packages/mui-joy/src/styles/extendTheme.test.js index 986b4301163504..099eb44275df99 100644 --- a/packages/mui-joy/src/styles/extendTheme.test.js +++ b/packages/mui-joy/src/styles/extendTheme.test.js @@ -23,7 +23,8 @@ describe('extendTheme', () => { 'colorInversionConfig', 'variants', 'cssVarPrefix', - 'sxConfig', + 'unstable_sxConfig', + 'unstable_sx', ]).to.includes(field); }); }); @@ -45,4 +46,9 @@ describe('extendTheme', () => { expect(theme.cssVarPrefix).to.equal(''); expect(theme.typography.body1.fontSize).to.equal('var(--fontSize-md)'); }); + + it('should support the unstable_sx helper', () => { + const theme = extendTheme(); + expect(theme.unstable_sx({ color: 'primary.100' })).to.deep.equal({ color: '#DDF1FF' }); + }); }); diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts index ad3bc77fad07ec..852f126b46e3f5 100644 --- a/packages/mui-joy/src/styles/extendTheme.ts +++ b/packages/mui-joy/src/styles/extendTheme.ts @@ -6,6 +6,7 @@ import { createSpacing, unstable_createGetCssVar as systemCreateGetCssVar, colorChannel, + unstable_styleFunctionSx as styleFunctionSx, } from '@mui/system'; import defaultSxConfig from './sxConfig'; import colors from '../colors'; @@ -14,7 +15,7 @@ import { ColorSystem, ColorPaletteProp, PaletteRange } from './types/colorSystem import { Focus } from './types/focus'; import { TypographySystem, FontSize } from './types/typography'; import { Variants, VariantOverrides, ColorInversionConfig } from './types/variants'; -import { Theme, ThemeCssVar, ThemeScales } from './types'; +import { Theme, ThemeCssVar, ThemeScales, SxProps } from './types'; import { Components } from './components'; import { generateUtilityClass } from '../className'; import { createVariant } from './variantUtils'; @@ -61,7 +62,7 @@ export interface CssVarsThemeOptions extends Partial2Level { spacing?: SpacingOptions; components?: Components; colorSchemes?: Partial>; - sxConfig?: object; + unstable_sxConfig?: object; } export const createGetCssVar = (cssVarPrefix = 'joy') => @@ -625,10 +626,19 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { attachColorChannels(colorSystem.palette); }); - theme.sxConfig = { + theme.unstable_sxConfig = { ...defaultSxConfig, - ...themeOptions?.sxConfig, + ...themeOptions?.unstable_sxConfig, }; + theme.unstable_sx = (props: SxProps) => + styleFunctionSx({ + sx: props, + theme: { + ...theme, + // by default use light theme + ...theme.colorSchemes.light, + }, + }); return theme; } diff --git a/packages/mui-joy/src/styles/index.ts b/packages/mui-joy/src/styles/index.ts index c9fc6d16493b62..254a66e088fd5d 100644 --- a/packages/mui-joy/src/styles/index.ts +++ b/packages/mui-joy/src/styles/index.ts @@ -1,6 +1,5 @@ // reexports from system for module augmentation export type { BreakpointOverrides } from '@mui/system'; -export { experimental_sx } from '@mui/system'; // Joy typings export type { ColorSchemeOverrides, SupportedColorScheme } from './types/colorScheme'; diff --git a/packages/mui-joy/src/styles/styleFunctionSx.spec.tsx b/packages/mui-joy/src/styles/styleFunctionSx.spec.tsx index e143ae90a818e7..6bdc39bfcbb896 100644 --- a/packages/mui-joy/src/styles/styleFunctionSx.spec.tsx +++ b/packages/mui-joy/src/styles/styleFunctionSx.spec.tsx @@ -1,8 +1,8 @@ -import { experimental_sx as sx, styled } from '@mui/joy/styles'; +import { styled } from '@mui/joy/styles'; // Can be used in the styled() utility -const Test = styled('div')( - sx({ +const Test = styled('div')(({ theme }) => + theme.unstable_sx({ color: 'primary.100', bgcolor: 'primary.700', m: 2, diff --git a/packages/mui-joy/src/styles/styled.test.tsx b/packages/mui-joy/src/styles/styled.test.tsx index e4fe16ce320f13..c8cf753971a9a6 100644 --- a/packages/mui-joy/src/styles/styled.test.tsx +++ b/packages/mui-joy/src/styles/styled.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { createRenderer } from 'test/utils'; -import { ThemeProvider, styled } from '@mui/joy/styles'; +import { CssVarsProvider, ThemeProvider, styled, extendTheme } from '@mui/joy/styles'; import defaultTheme from './defaultTheme'; const toPixel = (val: string | number | undefined) => (typeof val === 'number' ? `${val}px` : val); @@ -47,4 +47,32 @@ describe('[Joy] styled', () => { borderBottomLeftRadius: '50%', }); }); + + it('supports unstable_sx in the theme callback', function test() { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const theme = extendTheme({ + colorSchemes: { + light: { + palette: { + primary: { + plainColor: 'rgb(255, 0, 0)', + }, + }, + }, + }, + }); + const Text = styled('div')(({ theme }) => theme.unstable_sx({ color: 'primary.plainColor' })); + + const { container } = render( + + Text + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + color: 'rgb(255, 0, 0)', + }); + }); }); diff --git a/packages/mui-joy/src/styles/types/theme.ts b/packages/mui-joy/src/styles/types/theme.ts index c492142ffc1d61..fa815b4537c974 100644 --- a/packages/mui-joy/src/styles/types/theme.ts +++ b/packages/mui-joy/src/styles/types/theme.ts @@ -4,6 +4,7 @@ import { Spacing, SxProps as SystemSxProps, SystemProps as SystemSystemProps, + CSSObject, } from '@mui/system'; import { DefaultColorScheme, ExtendedColorScheme } from './colorScheme'; import { ColorSystem } from './colorSystem'; @@ -80,7 +81,8 @@ export interface Theme extends ThemeScales, RuntimeColorSystem { vars: ThemeVars; getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string; getColorSchemeSelector: (colorScheme: DefaultColorScheme | ExtendedColorScheme) => string; - sxConfig: object; + unstable_sxConfig: object; + unstable_sx: (props: SxProps) => CSSObject; } export type SxProps = SystemSxProps; diff --git a/packages/mui-material/src/styles/createTheme.d.ts b/packages/mui-material/src/styles/createTheme.d.ts index e9b8fd92cb2084..70717ac79bec58 100644 --- a/packages/mui-material/src/styles/createTheme.d.ts +++ b/packages/mui-material/src/styles/createTheme.d.ts @@ -1,4 +1,9 @@ -import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme } from '@mui/system'; +import { + ThemeOptions as SystemThemeOptions, + Theme as SystemTheme, + SxProps, + CSSObject, +} from '@mui/system'; import { Mixins, MixinsOptions } from './createMixins'; import { Palette, PaletteOptions } from './createPalette'; import { Typography, TypographyOptions } from './createTypography'; @@ -36,6 +41,7 @@ export {}; */ export interface Theme extends BaseTheme { components?: Components; + unstable_sx: (props: SxProps) => CSSObject; } /** diff --git a/packages/mui-material/src/styles/createTheme.js b/packages/mui-material/src/styles/createTheme.js index 18f999af86aeca..68e44a41d502a5 100644 --- a/packages/mui-material/src/styles/createTheme.js +++ b/packages/mui-material/src/styles/createTheme.js @@ -1,5 +1,9 @@ import { deepmerge } from '@mui/utils'; -import { createTheme as systemCreateTheme } from '@mui/system'; +import { + createTheme as systemCreateTheme, + unstable_defaultSxConfig as defaultSxConfig, + unstable_styleFunctionSx as styleFunctionSx, +} from '@mui/system'; import MuiError from '@mui/utils/macros/MuiError.macro'; import generateUtilityClass from '../generateUtilityClass'; import createMixins from './createMixins'; @@ -104,6 +108,12 @@ function createTheme(options = {}, ...args) { }); } + muiTheme.unstable_sxConfig = { + ...defaultSxConfig, + ...other?.unstable_sxConfig, + }; + muiTheme.unstable_sx = (props) => styleFunctionSx({ sx: props, theme: muiTheme }); + return muiTheme; } diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 14ad3990b18de0..9eb5449b7b392b 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -6,6 +6,8 @@ import { lighten, emphasize, unstable_createGetCssVar as systemCreateGetCssVar, + unstable_defaultSxConfig as defaultSxConfig, + unstable_styleFunctionSx as styleFunctionSx, } from '@mui/system'; import createThemeWithoutVars from './createTheme'; import { getOverlayAlpha } from '../Paper/Paper'; @@ -295,5 +297,11 @@ export default function extendTheme(options = {}, ...args) { theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme); + theme.unstable_sxConfig = { + ...defaultSxConfig, + ...input?.unstable_sxConfig, + }; + theme.unstable_sx = (props) => styleFunctionSx({ sx: props, theme }); + return theme; } diff --git a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js index 51162872e6cd73..44248527fa6494 100644 --- a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js +++ b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js @@ -1,7 +1,7 @@ import { unstable_capitalize as capitalize } from '@mui/utils'; import { getValue } from '../style'; import { handleBreakpoints } from '../breakpoints'; -import { paddingKeys, padding, marginKeys, margin } from '../spacing'; +import { padding, margin } from '../spacing'; import { borderRadius, borderTransform } from '../borders'; import { gap, rowGap, columnGap } from '../cssGrid'; import { paletteTransform } from '../palette'; @@ -75,23 +75,127 @@ const defaultSxConfig = { }, // spacing - ...paddingKeys.reduce((styleDefinitions, paddingKey) => { - return { - ...styleDefinitions, - [paddingKey]: { - style: padding, - }, - }; - }, {}), - - ...marginKeys.reduce((styleDefinitions, marginKey) => { - return { - ...styleDefinitions, - [marginKey]: { - style: margin, - }, - }; - }, {}), + p: { + style: padding, + }, + pt: { + style: padding, + }, + pr: { + style: padding, + }, + pb: { + style: padding, + }, + pl: { + style: padding, + }, + px: { + style: padding, + }, + py: { + style: padding, + }, + padding: { + style: padding, + }, + paddingTop: { + style: padding, + }, + paddingRight: { + style: padding, + }, + paddingBottom: { + style: padding, + }, + paddingLeft: { + style: padding, + }, + paddingX: { + style: padding, + }, + paddingY: { + style: padding, + }, + paddingInline: { + style: padding, + }, + paddingInlineStart: { + style: padding, + }, + paddingInlineEnd: { + style: padding, + }, + paddingBlock: { + style: padding, + }, + paddingBlockStart: { + style: padding, + }, + paddingBlockEnd: { + style: padding, + }, + + m: { + style: margin, + }, + mt: { + style: margin, + }, + mr: { + style: margin, + }, + mb: { + style: margin, + }, + ml: { + style: margin, + }, + mx: { + style: margin, + }, + my: { + style: margin, + }, + margin: { + style: margin, + }, + marginTop: { + style: margin, + }, + marginRight: { + style: margin, + }, + marginBottom: { + style: margin, + }, + marginLeft: { + style: margin, + }, + marginX: { + style: margin, + }, + marginY: { + style: margin, + }, + marginInline: { + style: margin, + }, + marginInlineStart: { + style: margin, + }, + marginInlineEnd: { + style: margin, + }, + marginBlock: { + style: margin, + }, + marginBlockStart: { + style: margin, + }, + marginBlockEnd: { + style: margin, + }, // display displayPrint: { diff --git a/packages/mui-system/src/styleFunctionSx/extendSxProp.js b/packages/mui-system/src/styleFunctionSx/extendSxProp.js index 9c169cccfcf763..773172783f79c2 100644 --- a/packages/mui-system/src/styleFunctionSx/extendSxProp.js +++ b/packages/mui-system/src/styleFunctionSx/extendSxProp.js @@ -7,7 +7,7 @@ const splitProps = (props) => { otherProps: {}, }; - const config = props?.theme?.sxConfig ?? defaultSxConfig; + const config = props?.theme?.unstable_sxConfig ?? defaultSxConfig; Object.keys(props).forEach((prop) => { if (config[prop]) { diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.d.ts b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.d.ts index e86dcfc67e200e..929177b4cd99ee 100644 --- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.d.ts +++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.d.ts @@ -1,4 +1,5 @@ import * as CSS from 'csstype'; +import { CSSObject } from '@mui/styled-engine'; import { StandardCSSProperties } from './StandardCssProperties'; import { AliasesCSSProperties } from './AliasesCSSProperties'; import { OverwriteCSSProperties } from './OverwriteCSSProperties'; @@ -74,7 +75,7 @@ export type SxProps = >; export interface StyleFunctionSx { - (props: object): object; + (props: object): CSSObject; filterProps?: string[]; } diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js index de09ca26dc3fb3..219527c26b7041 100644 --- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js +++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js @@ -73,8 +73,8 @@ export function unstable_createStyleFunctionSx() { const { sx, theme = {} } = props || {}; let config = defaultSxConfig; - if (theme.sxConfig) { - config = theme.sxConfig; + if (theme.unstable_sxConfig) { + config = theme.unstable_sxConfig; } if (!sx) { return null; // Emotion & styled-components will neglect null From e23405bfeb8a9c233c2929b7468767bc1e065446 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 17 Nov 2022 15:50:54 +0100 Subject: [PATCH 16/46] Resolve comments from review --- .../mui-material/src/styles/CssVarsProvider.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/styles/CssVarsProvider.tsx b/packages/mui-material/src/styles/CssVarsProvider.tsx index f45fd6ec66bd77..a16b1f0d1b683b 100644 --- a/packages/mui-material/src/styles/CssVarsProvider.tsx +++ b/packages/mui-material/src/styles/CssVarsProvider.tsx @@ -1,5 +1,12 @@ -import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system'; -import experimental_extendTheme, { SupportedColorScheme } from './experimental_extendTheme'; +import { + unstable_createCssVarsProvider as createCssVarsProvider, + SxProps, + unstable_styleFunctionSx as styleFunctionSx, +} from '@mui/system'; +import experimental_extendTheme, { + SupportedColorScheme, + CssVarsTheme, +} from './experimental_extendTheme'; import createTypography from './createTypography'; import excludeVariablesFromRoot from './excludeVariablesFromRoot'; @@ -25,6 +32,9 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = typography: createTypography(theme.palette, theme.typography), }; + newTheme.unstable_sx = (props: SxProps) => + styleFunctionSx({ sx: props, theme: newTheme }); + return newTheme; }, shouldSkipGeneratingVar, From d6756ea50fd46b2ea007074b5b0fe58ffcbf7e3b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 18 Nov 2022 10:48:15 +0100 Subject: [PATCH 17/46] Resolve review comments --- packages/mui-joy/src/styles/CssVarsProvider.tsx | 5 +++-- packages/mui-joy/src/styles/ThemeProvider.tsx | 4 +++- packages/mui-joy/src/styles/defaultTheme.ts | 4 +++- packages/mui-joy/src/styles/extendTheme.test.js | 5 ----- packages/mui-joy/src/styles/extendTheme.ts | 11 ++++------- packages/mui-joy/src/styles/styled.test.tsx | 4 ++-- packages/mui-material/src/styles/CssVarsProvider.tsx | 8 ++++++-- packages/mui-material/src/styles/createTheme.js | 7 ++++++- .../src/styles/experimental_extendTheme.js | 7 ++++++- 9 files changed, 33 insertions(+), 22 deletions(-) diff --git a/packages/mui-joy/src/styles/CssVarsProvider.tsx b/packages/mui-joy/src/styles/CssVarsProvider.tsx index ac0c07fbc604c4..d0e215ba470b0a 100644 --- a/packages/mui-joy/src/styles/CssVarsProvider.tsx +++ b/packages/mui-joy/src/styles/CssVarsProvider.tsx @@ -34,8 +34,9 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssV { clone: false }, ); - mergedTheme.unstable_sx = (props: SxProps) => - styleFunctionSx({ sx: props, theme: mergedTheme }); + mergedTheme.unstable_sx = function sx(props: SxProps) { + return styleFunctionSx({ sx: props, theme: this }); + } return mergedTheme; }, shouldSkipGeneratingVar, diff --git a/packages/mui-joy/src/styles/ThemeProvider.tsx b/packages/mui-joy/src/styles/ThemeProvider.tsx index 007b8c2e05c276..2a8d8029d10eaa 100644 --- a/packages/mui-joy/src/styles/ThemeProvider.tsx +++ b/packages/mui-joy/src/styles/ThemeProvider.tsx @@ -14,7 +14,9 @@ export const useTheme = () => { const getTheme = (themeInput: CssVarsThemeOptions) => { const theme = getThemeWithVars(themeInput); - theme.unstable_sx = (props: SxProps) => styleFunctionSx({ sx: props, theme: defaultTheme }); + theme.unstable_sx = function sx(props: SxProps) { + return styleFunctionSx({ sx: props, theme: this }); + }; return theme; }; diff --git a/packages/mui-joy/src/styles/defaultTheme.ts b/packages/mui-joy/src/styles/defaultTheme.ts index 5386d423e332e0..7d48cf03a1291a 100644 --- a/packages/mui-joy/src/styles/defaultTheme.ts +++ b/packages/mui-joy/src/styles/defaultTheme.ts @@ -98,6 +98,8 @@ defaultTheme.colorInversion = deepmerge( ); defaultTheme.unstable_sxConfig = defaultSxConfig; -defaultTheme.unstable_sx = (props: SxProps) => styleFunctionSx({ sx: props, theme: defaultTheme }); +defaultTheme.unstable_sx = function sx(props: SxProps) { + return styleFunctionSx({ sx: props, theme: this }); +}; export default defaultTheme; diff --git a/packages/mui-joy/src/styles/extendTheme.test.js b/packages/mui-joy/src/styles/extendTheme.test.js index 099eb44275df99..cf39c5667968c9 100644 --- a/packages/mui-joy/src/styles/extendTheme.test.js +++ b/packages/mui-joy/src/styles/extendTheme.test.js @@ -46,9 +46,4 @@ describe('extendTheme', () => { expect(theme.cssVarPrefix).to.equal(''); expect(theme.typography.body1.fontSize).to.equal('var(--fontSize-md)'); }); - - it('should support the unstable_sx helper', () => { - const theme = extendTheme(); - expect(theme.unstable_sx({ color: 'primary.100' })).to.deep.equal({ color: '#DDF1FF' }); - }); }); diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts index 852f126b46e3f5..8e35b14a4bd33e 100644 --- a/packages/mui-joy/src/styles/extendTheme.ts +++ b/packages/mui-joy/src/styles/extendTheme.ts @@ -630,15 +630,12 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { ...defaultSxConfig, ...themeOptions?.unstable_sxConfig, }; - theme.unstable_sx = (props: SxProps) => - styleFunctionSx({ + theme.unstable_sx = function sx(props: SxProps) { + return styleFunctionSx({ sx: props, - theme: { - ...theme, - // by default use light theme - ...theme.colorSchemes.light, - }, + theme: this, }); + }; return theme; } diff --git a/packages/mui-joy/src/styles/styled.test.tsx b/packages/mui-joy/src/styles/styled.test.tsx index c8cf753971a9a6..8ce677f6efd539 100644 --- a/packages/mui-joy/src/styles/styled.test.tsx +++ b/packages/mui-joy/src/styles/styled.test.tsx @@ -52,7 +52,7 @@ describe('[Joy] styled', () => { if (/jsdom/.test(window.navigator.userAgent)) { this.skip(); } - const theme = extendTheme({ + const customTheme = extendTheme({ colorSchemes: { light: { palette: { @@ -66,7 +66,7 @@ describe('[Joy] styled', () => { const Text = styled('div')(({ theme }) => theme.unstable_sx({ color: 'primary.plainColor' })); const { container } = render( - + Text , ); diff --git a/packages/mui-material/src/styles/CssVarsProvider.tsx b/packages/mui-material/src/styles/CssVarsProvider.tsx index a16b1f0d1b683b..3a6b6d2e0e3840 100644 --- a/packages/mui-material/src/styles/CssVarsProvider.tsx +++ b/packages/mui-material/src/styles/CssVarsProvider.tsx @@ -32,8 +32,12 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = typography: createTypography(theme.palette, theme.typography), }; - newTheme.unstable_sx = (props: SxProps) => - styleFunctionSx({ sx: props, theme: newTheme }); + newTheme.unstable_sx = function sx(props: SxProps) { + return styleFunctionSx({ + sx: props, + theme: this, + }); + }; return newTheme; }, diff --git a/packages/mui-material/src/styles/createTheme.js b/packages/mui-material/src/styles/createTheme.js index 68e44a41d502a5..0073130a2a8070 100644 --- a/packages/mui-material/src/styles/createTheme.js +++ b/packages/mui-material/src/styles/createTheme.js @@ -112,7 +112,12 @@ function createTheme(options = {}, ...args) { ...defaultSxConfig, ...other?.unstable_sxConfig, }; - muiTheme.unstable_sx = (props) => styleFunctionSx({ sx: props, theme: muiTheme }); + muiTheme.unstable_sx = function sx(props) { + return styleFunctionSx({ + sx: props, + theme: this, + }); + }; return muiTheme; } diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js index 9eb5449b7b392b..f14399b4f31339 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.js @@ -301,7 +301,12 @@ export default function extendTheme(options = {}, ...args) { ...defaultSxConfig, ...input?.unstable_sxConfig, }; - theme.unstable_sx = (props) => styleFunctionSx({ sx: props, theme }); + theme.unstable_sx = function sx(props) { + return styleFunctionSx({ + sx: props, + theme: this, + }); + }; return theme; } From 3d13353712d5915b452a7abf1a46c238fbfdfa9f Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 18 Nov 2022 12:59:18 +0100 Subject: [PATCH 18/46] prettier --- packages/mui-joy/src/styles/CssVarsProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-joy/src/styles/CssVarsProvider.tsx b/packages/mui-joy/src/styles/CssVarsProvider.tsx index d0e215ba470b0a..9a21b99c68f689 100644 --- a/packages/mui-joy/src/styles/CssVarsProvider.tsx +++ b/packages/mui-joy/src/styles/CssVarsProvider.tsx @@ -36,7 +36,7 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssV mergedTheme.unstable_sx = function sx(props: SxProps) { return styleFunctionSx({ sx: props, theme: this }); - } + }; return mergedTheme; }, shouldSkipGeneratingVar, From 0d712551bc176765875bc01e59409b2308c8cab4 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 21 Nov 2022 11:35:17 +0100 Subject: [PATCH 19/46] Update docs' system performance section --- docs/data/system/getting-started/usage/usage.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/data/system/getting-started/usage/usage.md b/docs/data/system/getting-started/usage/usage.md index 9e300e6da04b24..2d1c0a179874c4 100644 --- a/docs/data/system/getting-started/usage/usage.md +++ b/docs/data/system/getting-started/usage/usage.md @@ -157,9 +157,9 @@ It works with both Emotion and styled-components. | Benchmark case | Code snippet | Time normalized | | :-------------------------------- | :-------------------- | --------------- | | a. Render 1,000 primitives | `
` | 100ms | - | b. Render 1,000 components | `
` | 120ms | - | c. Render 1,000 styled components | `` | 160ms | - | d. Render 1,000 Box | `` | 370ms | + | b. Render 1,000 components | `
` | 112ms | + | c. Render 1,000 styled components | `` | 181ms | + | d. Render 1,000 Box | `` | 296ms | From a41f4b08170ac319cd673cf658dcbbad034bdffa Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 21 Nov 2022 12:19:36 +0100 Subject: [PATCH 20/46] Convert to TS --- packages/mui-joy/src/styles/extendTheme.ts | 3 ++- packages/mui-joy/src/styles/sxConfig.ts | 4 ++-- packages/mui-joy/src/styles/types/theme.ts | 3 ++- .../mui-material/src/styles/createTheme.d.ts | 3 +++ packages/mui-system/src/style.d.ts | 16 ++++++++++---- packages/mui-system/src/style.js | 6 ++--- ...{defaultSxConfig.js => defaultSxConfig.ts} | 22 +++++++++++++++---- .../mui-system/src/styleFunctionSx/index.d.ts | 4 +++- .../src/styleFunctionSx/styleFunctionSx.js | 2 +- 9 files changed, 46 insertions(+), 17 deletions(-) rename packages/mui-system/src/styleFunctionSx/{defaultSxConfig.js => defaultSxConfig.ts} (90%) diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts index 8e35b14a4bd33e..141a3d4f05c220 100644 --- a/packages/mui-joy/src/styles/extendTheme.ts +++ b/packages/mui-joy/src/styles/extendTheme.ts @@ -7,6 +7,7 @@ import { unstable_createGetCssVar as systemCreateGetCssVar, colorChannel, unstable_styleFunctionSx as styleFunctionSx, + SxConfig, } from '@mui/system'; import defaultSxConfig from './sxConfig'; import colors from '../colors'; @@ -62,7 +63,7 @@ export interface CssVarsThemeOptions extends Partial2Level { spacing?: SpacingOptions; components?: Components; colorSchemes?: Partial>; - unstable_sxConfig?: object; + unstable_sxConfig?: SxConfig; } export const createGetCssVar = (cssVarPrefix = 'joy') => diff --git a/packages/mui-joy/src/styles/sxConfig.ts b/packages/mui-joy/src/styles/sxConfig.ts index 3bb1885c1f9a4a..40963c5e80b70c 100644 --- a/packages/mui-joy/src/styles/sxConfig.ts +++ b/packages/mui-joy/src/styles/sxConfig.ts @@ -1,6 +1,6 @@ -import { unstable_defaultSxConfig } from '@mui/system'; +import { SxConfig, unstable_defaultSxConfig } from '@mui/system'; -const sxConfig = { +const sxConfig: SxConfig = { ...unstable_defaultSxConfig, // The default system themeKey is shape borderRadius: { diff --git a/packages/mui-joy/src/styles/types/theme.ts b/packages/mui-joy/src/styles/types/theme.ts index fa815b4537c974..7a4a4352a606ae 100644 --- a/packages/mui-joy/src/styles/types/theme.ts +++ b/packages/mui-joy/src/styles/types/theme.ts @@ -5,6 +5,7 @@ import { SxProps as SystemSxProps, SystemProps as SystemSystemProps, CSSObject, + SxConfig, } from '@mui/system'; import { DefaultColorScheme, ExtendedColorScheme } from './colorScheme'; import { ColorSystem } from './colorSystem'; @@ -81,7 +82,7 @@ export interface Theme extends ThemeScales, RuntimeColorSystem { vars: ThemeVars; getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string; getColorSchemeSelector: (colorScheme: DefaultColorScheme | ExtendedColorScheme) => string; - unstable_sxConfig: object; + unstable_sxConfig: SxConfig; unstable_sx: (props: SxProps) => CSSObject; } diff --git a/packages/mui-material/src/styles/createTheme.d.ts b/packages/mui-material/src/styles/createTheme.d.ts index 70717ac79bec58..ef8cb895b1fb14 100644 --- a/packages/mui-material/src/styles/createTheme.d.ts +++ b/packages/mui-material/src/styles/createTheme.d.ts @@ -3,6 +3,7 @@ import { Theme as SystemTheme, SxProps, CSSObject, + SxConfig, } from '@mui/system'; import { Mixins, MixinsOptions } from './createMixins'; import { Palette, PaletteOptions } from './createPalette'; @@ -21,6 +22,7 @@ export interface ThemeOptions extends Omit { typography?: TypographyOptions | ((palette: Palette) => TypographyOptions); zIndex?: ZIndexOptions; unstable_strictMode?: boolean; + unstable_sxConfig?: SxConfig; } interface BaseTheme extends SystemTheme { @@ -42,6 +44,7 @@ export {}; export interface Theme extends BaseTheme { components?: Components; unstable_sx: (props: SxProps) => CSSObject; + unstable_sxConfig: SxConfig; } /** diff --git a/packages/mui-system/src/style.d.ts b/packages/mui-system/src/style.d.ts index 6cd7220f7ec578..ef00e3e785a134 100644 --- a/packages/mui-system/src/style.d.ts +++ b/packages/mui-system/src/style.d.ts @@ -1,6 +1,11 @@ import { CSSObject } from '@mui/styled-engine'; import { StyleFunction } from './Box'; +export type TransformFunction = ( + cssValue: unknown, + userValue: unknown, +) => number | string | React.CSSProperties | CSSObject; + export interface StyleOptions { cssProperty?: PropKey | keyof React.CSSProperties | false; prop: PropKey; @@ -8,12 +13,15 @@ export interface StyleOptions { * dot access in `Theme` */ themeKey?: string; - transform?: ( - cssValue: unknown, - userValue: unknown, - ) => number | string | React.CSSProperties | CSSObject; + transform?: TransformFunction; } export function style( options: StyleOptions, ): StyleFunction<{ [K in PropKey]?: unknown } & { theme?: Theme }> & { filterProps: string[] }; export function getPath(obj: T, path: string | undefined, checkVars?: boolean): null | unknown; +export function getStyleValue( + themeMapping: object | ((arg: any) => any), + transform: TransformFunction, + propValueFinal: unknown, + userValue?: unknown, +): any; diff --git a/packages/mui-system/src/style.js b/packages/mui-system/src/style.js index 72e220c618b9de..b88928a526909e 100644 --- a/packages/mui-system/src/style.js +++ b/packages/mui-system/src/style.js @@ -24,7 +24,7 @@ export function getPath(obj, path, checkVars = true) { }, obj); } -export function getValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) { +export function getStyleValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) { let value; if (typeof themeMapping === 'function') { @@ -54,11 +54,11 @@ function style(options) { const theme = props.theme; const themeMapping = getPath(theme, themeKey) || {}; const styleFromPropValue = (propValueFinal) => { - let value = getValue(themeMapping, transform, propValueFinal); + let value = getStyleValue(themeMapping, transform, propValueFinal); if (propValueFinal === value && typeof propValueFinal === 'string') { // Haven't found value - value = getValue( + value = getStyleValue( themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, diff --git a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.ts similarity index 90% rename from packages/mui-system/src/styleFunctionSx/defaultSxConfig.js rename to packages/mui-system/src/styleFunctionSx/defaultSxConfig.ts index 44248527fa6494..c5854d59430207 100644 --- a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js +++ b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.ts @@ -1,5 +1,6 @@ import { unstable_capitalize as capitalize } from '@mui/utils'; -import { getValue } from '../style'; +import { StyleFunction } from '../Box'; +import { getStyleValue as getValue, TransformFunction } from '../style'; import { handleBreakpoints } from '../breakpoints'; import { padding, margin } from '../spacing'; import { borderRadius, borderTransform } from '../borders'; @@ -7,7 +8,21 @@ import { gap, rowGap, columnGap } from '../cssGrid'; import { paletteTransform } from '../palette'; import { maxWidth, sizingTransform } from '../sizing'; -const defaultSxConfig = { +type SimpleStyleFunction = StyleFunction>>; + +export interface SxConfigRecord { + cssProperty?: keyof React.CSSProperties | false; + /** + * dot access in `Theme` + */ + themeKey?: string; + transform?: TransformFunction; + style?: SimpleStyleFunction; +} + +export type SxConfig = Record; + +const defaultSxConfig: SxConfig = { // borders border: { themeKey: 'borders', @@ -259,7 +274,6 @@ const defaultSxConfig = { // shadows boxShadow: { - prop: 'boxShadow', themeKey: 'shadows', }, @@ -288,7 +302,7 @@ const defaultSxConfig = { // no mapping const themeMapping = {}; - const styleFromPropValue = (propValueFinal) => { + const styleFromPropValue = (propValueFinal: any) => { let value = getValue({ themeMapping }, sizingTransform, propValueFinal); if (propValueFinal === value && typeof propValueFinal === 'string') { diff --git a/packages/mui-system/src/styleFunctionSx/index.d.ts b/packages/mui-system/src/styleFunctionSx/index.d.ts index 981163fd1eaa87..9a74ad3b184fe5 100644 --- a/packages/mui-system/src/styleFunctionSx/index.d.ts +++ b/packages/mui-system/src/styleFunctionSx/index.d.ts @@ -8,5 +8,7 @@ export * from './StandardCssProperties'; export { default as extendSxProp } from './extendSxProp'; // eslint-disable-next-line @typescript-eslint/naming-convention -export const unstable_defaultSxConfig: object; +export { default as unstable_defaultSxConfig } from './defaultSxConfig'; +export * from './defaultSxConfig'; + export * from './extendSxProp'; diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js index 219527c26b7041..e68997bdfa86f0 100644 --- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js +++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js @@ -1,6 +1,6 @@ import { unstable_capitalize as capitalize } from '@mui/utils'; import merge from '../merge'; -import { getPath, getValue } from '../style'; +import { getPath, getStyleValue as getValue } from '../style'; import { handleBreakpoints, createEmptyBreakpointObject, From 1d116d163e216d8f9d4cf92b65e1aaf8402897b3 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 21 Nov 2022 12:30:44 +0100 Subject: [PATCH 21/46] Use declaration file --- .../src/styleFunctionSx/defaultSxConfig.d.ts | 20 ++++++++++++++++++ ...{defaultSxConfig.ts => defaultSxConfig.js} | 21 +++---------------- 2 files changed, 23 insertions(+), 18 deletions(-) create mode 100644 packages/mui-system/src/styleFunctionSx/defaultSxConfig.d.ts rename packages/mui-system/src/styleFunctionSx/{defaultSxConfig.ts => defaultSxConfig.js} (90%) diff --git a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.d.ts b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.d.ts new file mode 100644 index 00000000000000..7b65306ec8afb5 --- /dev/null +++ b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.d.ts @@ -0,0 +1,20 @@ +import { StyleFunction } from '../Box'; +import { TransformFunction } from '../style'; + +type SimpleStyleFunction = StyleFunction>>; + +export interface SxConfigRecord { + cssProperty?: keyof React.CSSProperties | false; + /** + * dot access in `Theme` + */ + themeKey?: string; + transform?: TransformFunction; + style?: SimpleStyleFunction; +} + +export type SxConfig = Record; + +declare const defaultSxConfig: SxConfig; + +export default defaultSxConfig; diff --git a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.ts b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js similarity index 90% rename from packages/mui-system/src/styleFunctionSx/defaultSxConfig.ts rename to packages/mui-system/src/styleFunctionSx/defaultSxConfig.js index c5854d59430207..61594fd65a161a 100644 --- a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.ts +++ b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js @@ -1,6 +1,5 @@ import { unstable_capitalize as capitalize } from '@mui/utils'; -import { StyleFunction } from '../Box'; -import { getStyleValue as getValue, TransformFunction } from '../style'; +import { getStyleValue as getValue } from '../style'; import { handleBreakpoints } from '../breakpoints'; import { padding, margin } from '../spacing'; import { borderRadius, borderTransform } from '../borders'; @@ -8,21 +7,7 @@ import { gap, rowGap, columnGap } from '../cssGrid'; import { paletteTransform } from '../palette'; import { maxWidth, sizingTransform } from '../sizing'; -type SimpleStyleFunction = StyleFunction>>; - -export interface SxConfigRecord { - cssProperty?: keyof React.CSSProperties | false; - /** - * dot access in `Theme` - */ - themeKey?: string; - transform?: TransformFunction; - style?: SimpleStyleFunction; -} - -export type SxConfig = Record; - -const defaultSxConfig: SxConfig = { +const defaultSxConfig = { // borders border: { themeKey: 'borders', @@ -302,7 +287,7 @@ const defaultSxConfig: SxConfig = { // no mapping const themeMapping = {}; - const styleFromPropValue = (propValueFinal: any) => { + const styleFromPropValue = (propValueFinal) => { let value = getValue({ themeMapping }, sizingTransform, propValueFinal); if (propValueFinal === value && typeof propValueFinal === 'string') { From 0393080ce6d8e8ed50685eae9bdaea2ce2dc9f6a Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 21 Nov 2022 12:43:10 +0100 Subject: [PATCH 22/46] lint --- packages/mui-system/src/styleFunctionSx/index.d.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mui-system/src/styleFunctionSx/index.d.ts b/packages/mui-system/src/styleFunctionSx/index.d.ts index 9a74ad3b184fe5..cfce74e073b682 100644 --- a/packages/mui-system/src/styleFunctionSx/index.d.ts +++ b/packages/mui-system/src/styleFunctionSx/index.d.ts @@ -7,7 +7,6 @@ export * from './StandardCssProperties'; export { default as extendSxProp } from './extendSxProp'; -// eslint-disable-next-line @typescript-eslint/naming-convention export { default as unstable_defaultSxConfig } from './defaultSxConfig'; export * from './defaultSxConfig'; From eb4e6cb9ecdf02b7cebadb1553ff6ccbbf945d75 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 22 Nov 2022 13:00:07 +0100 Subject: [PATCH 23/46] Update @mui/material-next witht he latest sx config --- docs/pages/experiments/md3/index.tsx | 2 + .../src/styles/CssVarsProvider.tsx | 8 +- .../src/styles/Theme.types.ts | 4 +- .../src/styles/defaultTheme.ts | 7 + .../src/styles/extendTheme.ts | 13 + .../src/styles/styleFunctionSx.ts | 153 ------------ .../src/styles/styled.test.js | 222 ++++++++++++++++++ .../mui-material-next/src/styles/styled.ts | 3 +- .../mui-material-next/src/styles/sxConfig.ts | 95 ++++++++ .../src/styles/experimental_extendTheme.d.ts | 3 + 10 files changed, 353 insertions(+), 157 deletions(-) delete mode 100644 packages/mui-material-next/src/styles/styleFunctionSx.ts create mode 100644 packages/mui-material-next/src/styles/styled.test.js create mode 100644 packages/mui-material-next/src/styles/sxConfig.ts diff --git a/docs/pages/experiments/md3/index.tsx b/docs/pages/experiments/md3/index.tsx index 61614b46bf6467..244d68c5a33fc2 100644 --- a/docs/pages/experiments/md3/index.tsx +++ b/docs/pages/experiments/md3/index.tsx @@ -151,6 +151,7 @@ function DemoComponents() { bgcolor: 'error', border: 1, borderColor: 'tertiary', + borderRadius: '1px', }} > Button @@ -161,6 +162,7 @@ function DemoComponents() { bgcolor: 'error.40', border: 1, borderColor: 'tertiary.40', + borderRadius: 2, }} > Button diff --git a/packages/mui-material-next/src/styles/CssVarsProvider.tsx b/packages/mui-material-next/src/styles/CssVarsProvider.tsx index 05a9aef2bb47a2..c4baee7dc7ab37 100644 --- a/packages/mui-material-next/src/styles/CssVarsProvider.tsx +++ b/packages/mui-material-next/src/styles/CssVarsProvider.tsx @@ -1,4 +1,7 @@ -import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system'; +import { + unstable_createCssVarsProvider as createCssVarsProvider, + unstable_styleFunctionSx as styleFunctionSx, +} from '@mui/system'; import { SupportedColorScheme, private_createTypography as createTypography, @@ -26,6 +29,9 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = typography: createTypography(theme.palette, theme.typography), }; + newTheme.unstable_sx = function sx(props: SxProps) { + return styleFunctionSx({ sx: props, theme: this }); + }; return newTheme; }, shouldSkipGeneratingVar, diff --git a/packages/mui-material-next/src/styles/Theme.types.ts b/packages/mui-material-next/src/styles/Theme.types.ts index 5db38f25017d04..964e05a6342831 100644 --- a/packages/mui-material-next/src/styles/Theme.types.ts +++ b/packages/mui-material-next/src/styles/Theme.types.ts @@ -1,4 +1,4 @@ -import { SxProps as SystemSxProps } from '@mui/system'; +import { SxProps as SystemSxProps, SxConfig, CSSObject } from '@mui/system'; import { CssVarsTheme as MD2Theme, SupportedColorScheme, @@ -192,6 +192,8 @@ export interface Theme extends Omit { shape: Shapes; }; }; + unstable_sxConfig: SxConfig; + unstable_sx: (props: SystemSxProps) => CSSObject; } export type SxProps = SystemSxProps; diff --git a/packages/mui-material-next/src/styles/defaultTheme.ts b/packages/mui-material-next/src/styles/defaultTheme.ts index 394ec08f05c481..3daba490449ec5 100644 --- a/packages/mui-material-next/src/styles/defaultTheme.ts +++ b/packages/mui-material-next/src/styles/defaultTheme.ts @@ -1,6 +1,8 @@ import { deepmerge } from '@mui/utils'; +import { unstable_styleFunctionSx as styleFunctionSx, SxProps } from '@mui/system'; import extendTheme from './extendTheme'; import type { Theme, CssVarsThemeOptions, ColorSystemOptions } from './Theme.types'; +import defaultSxConfig from './sxConfig'; export const getThemeWithVars = ( themeInput?: Omit & ColorSystemOptions, @@ -78,4 +80,9 @@ export const getThemeWithVars = ( const defaultTheme = getThemeWithVars(); +defaultTheme.unstable_sxConfig = defaultSxConfig; +defaultTheme.unstable_sx = function sx(props: SxProps) { + return styleFunctionSx({ sx: props, theme: this }); +}; + export default defaultTheme; diff --git a/packages/mui-material-next/src/styles/extendTheme.ts b/packages/mui-material-next/src/styles/extendTheme.ts index 90df3bac3eefaf..4bbac5a95b50c9 100644 --- a/packages/mui-material-next/src/styles/extendTheme.ts +++ b/packages/mui-material-next/src/styles/extendTheme.ts @@ -6,6 +6,7 @@ import { lighten, emphasize, unstable_createGetCssVar as systemCreateGetCssVar, + unstable_styleFunctionSx as styleFunctionSx, } from '@mui/system'; import { createTheme as createThemeWithoutVars, @@ -14,6 +15,7 @@ import { ColorSystem as MD2ColorSystem, Overlays, } from '@mui/material/styles'; +import defaultSxConfig from './sxConfig'; import { Theme, MD3Palettes, MD3ColorSchemeTokens, CssVarsThemeOptions } from './Theme.types'; import md3CommonPalette from './palette'; import createMd3LightColorScheme from './createLightColorScheme'; @@ -420,5 +422,16 @@ export default function extendTheme(options: CssVarsThemeOptions = {}, ...args: theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme); + theme.unstable_sxConfig = { + ...defaultSxConfig, + ...input?.unstable_sxConfig, + }; + theme.unstable_sx = function sx(props: SxProps) { + return styleFunctionSx({ + sx: props, + theme: this, + }); + }; + return theme; } diff --git a/packages/mui-material-next/src/styles/styleFunctionSx.ts b/packages/mui-material-next/src/styles/styleFunctionSx.ts deleted file mode 100644 index 9160b29d1bd000..00000000000000 --- a/packages/mui-material-next/src/styles/styleFunctionSx.ts +++ /dev/null @@ -1,153 +0,0 @@ -import { - Interpolation, - unstable_createStyleFunctionSx, - compose, - getPath, - getStyleValue as getValue, - display, - flexbox, - grid, - positions, - sizing, - spacing, - border, - borderTop, - borderRight, - borderBottom, - borderLeft, - borderTopColor, - borderRightColor, - borderBottomColor, - borderLeftColor, - createUnaryUnit, - handleBreakpoints, - responsivePropType, - typography, -} from '@mui/system'; -import { SxProps, Theme } from './Theme.types'; - -interface PaletteStyleOptions { - prop: string; - cssProperty?: string | boolean; -} - -function paletteStyle(options: PaletteStyleOptions = { prop: 'color' }) { - const { prop, cssProperty = options.prop } = options; - - const fn = (props: Record) => { - if (props[prop] == null) { - return null; - } - - const propValue: any = props[prop]; - const theme = props.theme; - const colorThemeMapping = getPath(theme, 'sys.color') || {}; - const paletteThemeMapping = getPath(theme, 'ref.palette') || {}; - - const styleFromPropValue = (propValueFinal: any) => { - // check the value in the color mapping first - let value = getValue(colorThemeMapping, undefined, propValueFinal); - - if (propValueFinal === value) { - // haven't found value in colors mapping, so we are checking in the palette mapping - value = getValue(paletteThemeMapping, undefined, propValueFinal); - } - - if (cssProperty === false) { - return value; - } - - return { - [cssProperty as string]: value, - }; - }; - - return handleBreakpoints(props, propValue, styleFromPropValue); - }; - - fn.propTypes = - process.env.NODE_ENV !== 'production' - ? { - [prop]: responsivePropType, - } - : {}; - - fn.filterProps = [prop]; - - return fn; -} - -// Palette values should reference the color tokens -export const color = paletteStyle({ - prop: 'color', -}); - -export const bgcolor = paletteStyle({ - prop: 'bgcolor', - cssProperty: 'backgroundColor', -}); - -export const backgroundColor = paletteStyle({ - prop: 'backgroundColor', -}); - -const palette = compose(color, bgcolor, backgroundColor); - -// Border radius should mapa to md3.shape -export const borderRadius = (props: any) => { - if (props.borderRadius !== undefined && props.borderRadius !== null) { - const transformer = createUnaryUnit(props.theme, 'md3.shape.borderRadius', 4, 'borderRadius'); - const styleFromPropValue = (propValue: any) => ({ - // @ts-ignore - borderRadius: getValue(transformer, propValue), - }); - return handleBreakpoints(props, props.borderRadius, styleFromPropValue); - } - - return null; -}; - -borderRadius.propTypes = - process.env.NODE_ENV !== 'production' ? { borderRadius: responsivePropType } : {}; - -const borderColor = paletteStyle({ - prop: 'borderColor', -}); - -borderRadius.filterProps = ['borderRadius']; -const borders = compose( - border, - borderTop, - borderRight, - borderBottom, - borderLeft, - borderColor, - borderTopColor, - borderRightColor, - borderBottomColor, - borderLeftColor, - borderRadius, -); - -const styleFunctionMapping = { - borders, - display, - flexbox, - grid, - positions, - palette, - sizing, - spacing, - typography, -}; - -const styleFunctionSx = unstable_createStyleFunctionSx(styleFunctionMapping); - -styleFunctionSx.filterProps = ['sx']; - -export const sx = (styles: SxProps) => { - return ({ theme }: { theme: Theme }) => - styleFunctionSx({ sx: styles, theme }) as Interpolation<{ theme: Theme }>; -}; - -export default styleFunctionSx; diff --git a/packages/mui-material-next/src/styles/styled.test.js b/packages/mui-material-next/src/styles/styled.test.js new file mode 100644 index 00000000000000..73be38b819b873 --- /dev/null +++ b/packages/mui-material-next/src/styles/styled.test.js @@ -0,0 +1,222 @@ +import * as React from 'react'; +import { expect } from 'chai'; +import { createRenderer, screen } from 'test/utils'; +import { styled, extendTheme, CssVarsProvider } from '@mui/material-next/styles'; + +describe('styled', () => { + const { render } = createRenderer(); + + it('should work', () => { + const Div = styled('div')` + width: 200px; + `; + + const { container } = render(
Test
); + + expect(container.firstChild).toHaveComputedStyle({ + width: '200px', + }); + }); + + it('should use defaultTheme if no theme is provided', () => { + const Div = styled('div')` + width: ${(props) => props.theme.spacing(1)}; + `; + + const { container } = render(
Test
); + + expect(container.firstChild).toHaveComputedStyle({ + width: '8px', + }); + }); + + it('should use theme from context if available', () => { + const Div = styled('div')` + width: ${(props) => props.theme.spacing(1)}; + `; + + const theme = extendTheme({ + spacing: 10, + }); + + const { container } = render( + +
Test
+ , + ); + + expect(container.firstChild).toHaveComputedStyle({ + width: '10px', + }); + }); + + describe('dynamic styles', () => { + it('can adapt styles to props', () => { + const Div = styled('div')` + font-size: ${(props) => props.scale * 8}px; + padding-left: ${(props) => props.scale * 2}px; + `; + render(
); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + fontSize: '32px', + paddingLeft: '8px', + }); + }); + }); + + describe('sx prop', function test() { + it('should apply color prop to theme.sys.color if available', () => { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const Div = styled('div')``; + + render(
); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + color: 'rgb(179, 38, 30)', + }); + }); + it('should apply color prop to theme.ref.palette if available', () => { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const Div = styled('div')``; + + render(
); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + color: 'rgb(242, 184, 181)', + }); + }); + it('should apply bgcolor prop to theme.sys.color if available', () => { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const Div = styled('div')``; + + render(
); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + backgroundColor: 'rgb(179, 38, 30)', + }); + }); + it('should apply bgcolor prop to theme.ref.palette if available', () => { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const Div = styled('div')``; + + render(
); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + backgroundColor: 'rgb(242, 184, 181)', + }); + }); + it('should apply backgroundColor prop to theme.sys.color if available', () => { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const Div = styled('div')``; + + render(
); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + backgroundColor: 'rgb(179, 38, 30)', + }); + }); + it('should apply backgroundColor prop to theme.ref.palette if available', () => { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const Div = styled('div')``; + + render(
); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + backgroundColor: 'rgb(242, 184, 181)', + }); + }); + it('should apply border*Color props to theme.sys.color if available', () => { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const Div = styled('div')``; + + render( +
, + ); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + borderTopColor: 'rgb(179, 38, 30)', + borderBottomColor: 'rgb(179, 38, 30)', + borderLeftColor: 'rgb(179, 38, 30)', + borderRightColor: 'rgb(179, 38, 30)', + }); + }); + it('should apply border*Color props to theme.ref.palette if available', () => { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const Div = styled('div')``; + + render( +
, + ); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + borderTopColor: 'rgb(242, 184, 181)', + borderBottomColor: 'rgb(242, 184, 181)', + borderLeftColor: 'rgb(242, 184, 181)', + borderRightColor: 'rgb(242, 184, 181)', + }); + }); + it('should apply borderColor props to theme.sys.color if available', () => { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const Div = styled('div')``; + + render(
); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + borderTopColor: 'rgb(179, 38, 30)', + borderBottomColor: 'rgb(179, 38, 30)', + borderLeftColor: 'rgb(179, 38, 30)', + borderRightColor: 'rgb(179, 38, 30)', + }); + }); + it('should apply borderColor props to theme.ref.palette if available', () => { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const Div = styled('div')``; + + render(
); + + expect(screen.getByTestId('target')).toHaveComputedStyle({ + borderTopColor: 'rgb(242, 184, 181)', + borderBottomColor: 'rgb(242, 184, 181)', + borderLeftColor: 'rgb(242, 184, 181)', + borderRightColor: 'rgb(242, 184, 181)', + }); + }); + }); +}); diff --git a/packages/mui-material-next/src/styles/styled.ts b/packages/mui-material-next/src/styles/styled.ts index 2e8f6c5a463872..f0cccfa63f3c13 100644 --- a/packages/mui-material-next/src/styles/styled.ts +++ b/packages/mui-material-next/src/styles/styled.ts @@ -1,8 +1,7 @@ import { createStyled } from '@mui/system'; import { Theme } from './Theme.types'; import defaultTheme from './defaultTheme'; -import styleFunctionSx from './styleFunctionSx'; -const styled = createStyled({ defaultTheme, styleFunctionSx }); +const styled = createStyled({ defaultTheme }); export default styled; diff --git a/packages/mui-material-next/src/styles/sxConfig.ts b/packages/mui-material-next/src/styles/sxConfig.ts new file mode 100644 index 00000000000000..a1d61ca33451ce --- /dev/null +++ b/packages/mui-material-next/src/styles/sxConfig.ts @@ -0,0 +1,95 @@ +import { + getPath, + getStyleValue as getValue, + createUnaryUnit, + handleBreakpoints, +} from '@mui/system'; +import { SxConfig, unstable_defaultSxConfig } from '@mui/system'; + +interface PaletteStyleOptions { + prop: string; + cssProperty?: string | boolean; +} + +function createPaletteStyle(options: PaletteStyleOptions = { prop: 'color' }) { + const { prop, cssProperty = options.prop } = options; + + const fn = (props: Record) => { + if (props[prop] == null) { + return null; + } + + const propValue: any = props[prop]; + const theme = props.theme; + const colorThemeMapping = getPath(theme, 'sys.color') || {}; + const paletteThemeMapping = getPath(theme, 'ref.palette') || {}; + + const styleFromPropValue = (propValueFinal: any) => { + // check the value in the color mapping first + let value = getValue(colorThemeMapping, undefined, propValueFinal); + + if (propValueFinal === value) { + // haven't found value in colors mapping, so we are checking in the palette mapping + value = getValue(paletteThemeMapping, undefined, propValueFinal); + } + + if (cssProperty === false) { + return value; + } + + return { + [cssProperty as string]: value, + }; + }; + + return handleBreakpoints(props, propValue, styleFromPropValue); + }; + return fn; +} + +// Border radius should mapa to md3.shape +export const borderRadiusStyle = (props: any) => { + if (props.borderRadius !== undefined && props.borderRadius !== null) { + const transformer = createUnaryUnit(props.theme, 'md3.shape.borderRadius', 4, 'borderRadius'); + const styleFromPropValue = (propValue: any) => ({ + // @ts-ignore + borderRadius: transformer(propValue), + }); + return handleBreakpoints(props, props.borderRadius, styleFromPropValue); + } + + return null; +}; + +const sxConfig: SxConfig = { + ...unstable_defaultSxConfig, + color: { + style: createPaletteStyle({ prop: 'color' }), + }, + bgcolor: { + style: createPaletteStyle({ prop: 'bgcolor', cssProperty: 'backgroundColor' }), + }, + backgroundColor: { + style: createPaletteStyle({ prop: 'backgroundColor', cssProperty: 'backgroundColor' }), + }, + borderColor: { + style: createPaletteStyle({ prop: 'borderColor' }), + }, + borderTopColor: { + style: createPaletteStyle({ prop: 'borderTopColor' }), + }, + borderBottomColor: { + style: createPaletteStyle({ prop: 'borderBottomColor' }), + }, + borderLeftColor: { + style: createPaletteStyle({ prop: 'borderLeftColor' }), + }, + borderRightColor: { + style: createPaletteStyle({ prop: 'borderRightColor' }), + }, + borderRadius: { + style: borderRadiusStyle, + }, +}; + +export default sxConfig; diff --git a/packages/mui-material/src/styles/experimental_extendTheme.d.ts b/packages/mui-material/src/styles/experimental_extendTheme.d.ts index 3ade54bca13098..2fe728b1be0ed8 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.d.ts +++ b/packages/mui-material/src/styles/experimental_extendTheme.d.ts @@ -1,5 +1,6 @@ /* eslint-disable @typescript-eslint/naming-convention */ import { OverridableStringUnion } from '@mui/types'; +import { SxConfig, SxProps, CSSObject } from '@mui/system'; import { ThemeOptions, Theme } from './createTheme'; import { Palette, PaletteOptions } from './createPalette'; import { Shadows } from './shadows'; @@ -401,6 +402,8 @@ export interface CssVarsTheme extends ColorSystem { shadows: Theme['shadows']; mixins: Theme['mixins']; zIndex: Theme['zIndex']; + unstable_sxConfig: SxConfig; + unstable_sx: (props: SxProps) => CSSObject; } /** From a719745e2627e9d380205c97253ca7e9e4db212e Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 22 Nov 2022 14:00:47 +0100 Subject: [PATCH 24/46] TS fixes --- .../src/styles/CssVarsProvider.tsx | 2 ++ .../src/styles/extendTheme.ts | 1 + .../src/styles/styled.test.js | 22 +++++++++---------- .../mui-material-next/src/styles/sxConfig.ts | 4 ++-- packages/mui-system/src/style.d.ts | 2 +- 5 files changed, 17 insertions(+), 14 deletions(-) diff --git a/packages/mui-material-next/src/styles/CssVarsProvider.tsx b/packages/mui-material-next/src/styles/CssVarsProvider.tsx index c4baee7dc7ab37..b3a7522df9074e 100644 --- a/packages/mui-material-next/src/styles/CssVarsProvider.tsx +++ b/packages/mui-material-next/src/styles/CssVarsProvider.tsx @@ -1,12 +1,14 @@ import { unstable_createCssVarsProvider as createCssVarsProvider, unstable_styleFunctionSx as styleFunctionSx, + SxProps, } from '@mui/system'; import { SupportedColorScheme, private_createTypography as createTypography, private_excludeVariablesFromRoot as excludeVariablesFromRoot, } from '@mui/material/styles'; +import { Theme } from './Theme.types'; import defaultTheme from './defaultTheme'; const shouldSkipGeneratingVar = (keys: string[]) => diff --git a/packages/mui-material-next/src/styles/extendTheme.ts b/packages/mui-material-next/src/styles/extendTheme.ts index 4bbac5a95b50c9..b321d806e38908 100644 --- a/packages/mui-material-next/src/styles/extendTheme.ts +++ b/packages/mui-material-next/src/styles/extendTheme.ts @@ -7,6 +7,7 @@ import { emphasize, unstable_createGetCssVar as systemCreateGetCssVar, unstable_styleFunctionSx as styleFunctionSx, + SxProps, } from '@mui/system'; import { createTheme as createThemeWithoutVars, diff --git a/packages/mui-material-next/src/styles/styled.test.js b/packages/mui-material-next/src/styles/styled.test.js index 73be38b819b873..1cf5072593dfaa 100644 --- a/packages/mui-material-next/src/styles/styled.test.js +++ b/packages/mui-material-next/src/styles/styled.test.js @@ -65,8 +65,8 @@ describe('styled', () => { }); }); - describe('sx prop', function test() { - it('should apply color prop to theme.sys.color if available', () => { + describe('sx prop', () => { + it('should apply color prop to theme.sys.color if available', function test() { if (/jsdom/.test(window.navigator.userAgent)) { this.skip(); } @@ -78,7 +78,7 @@ describe('styled', () => { color: 'rgb(179, 38, 30)', }); }); - it('should apply color prop to theme.ref.palette if available', () => { + it('should apply color prop to theme.ref.palette if available', function test() { if (/jsdom/.test(window.navigator.userAgent)) { this.skip(); } @@ -90,7 +90,7 @@ describe('styled', () => { color: 'rgb(242, 184, 181)', }); }); - it('should apply bgcolor prop to theme.sys.color if available', () => { + it('should apply bgcolor prop to theme.sys.color if available', function test() { if (/jsdom/.test(window.navigator.userAgent)) { this.skip(); } @@ -102,7 +102,7 @@ describe('styled', () => { backgroundColor: 'rgb(179, 38, 30)', }); }); - it('should apply bgcolor prop to theme.ref.palette if available', () => { + it('should apply bgcolor prop to theme.ref.palette if available', function test() { if (/jsdom/.test(window.navigator.userAgent)) { this.skip(); } @@ -114,7 +114,7 @@ describe('styled', () => { backgroundColor: 'rgb(242, 184, 181)', }); }); - it('should apply backgroundColor prop to theme.sys.color if available', () => { + it('should apply backgroundColor prop to theme.sys.color if available', function test() { if (/jsdom/.test(window.navigator.userAgent)) { this.skip(); } @@ -126,7 +126,7 @@ describe('styled', () => { backgroundColor: 'rgb(179, 38, 30)', }); }); - it('should apply backgroundColor prop to theme.ref.palette if available', () => { + it('should apply backgroundColor prop to theme.ref.palette if available', function test() { if (/jsdom/.test(window.navigator.userAgent)) { this.skip(); } @@ -138,7 +138,7 @@ describe('styled', () => { backgroundColor: 'rgb(242, 184, 181)', }); }); - it('should apply border*Color props to theme.sys.color if available', () => { + it('should apply border*Color props to theme.sys.color if available', function test() { if (/jsdom/.test(window.navigator.userAgent)) { this.skip(); } @@ -163,7 +163,7 @@ describe('styled', () => { borderRightColor: 'rgb(179, 38, 30)', }); }); - it('should apply border*Color props to theme.ref.palette if available', () => { + it('should apply border*Color props to theme.ref.palette if available', function test() { if (/jsdom/.test(window.navigator.userAgent)) { this.skip(); } @@ -188,7 +188,7 @@ describe('styled', () => { borderRightColor: 'rgb(242, 184, 181)', }); }); - it('should apply borderColor props to theme.sys.color if available', () => { + it('should apply borderColor props to theme.sys.color if available', function test() { if (/jsdom/.test(window.navigator.userAgent)) { this.skip(); } @@ -203,7 +203,7 @@ describe('styled', () => { borderRightColor: 'rgb(179, 38, 30)', }); }); - it('should apply borderColor props to theme.ref.palette if available', () => { + it('should apply borderColor props to theme.ref.palette if available', function test() { if (/jsdom/.test(window.navigator.userAgent)) { this.skip(); } diff --git a/packages/mui-material-next/src/styles/sxConfig.ts b/packages/mui-material-next/src/styles/sxConfig.ts index a1d61ca33451ce..d0851627817825 100644 --- a/packages/mui-material-next/src/styles/sxConfig.ts +++ b/packages/mui-material-next/src/styles/sxConfig.ts @@ -26,11 +26,11 @@ function createPaletteStyle(options: PaletteStyleOptions = { prop: 'color' }) { const styleFromPropValue = (propValueFinal: any) => { // check the value in the color mapping first - let value = getValue(colorThemeMapping, undefined, propValueFinal); + let value = getValue(colorThemeMapping, null, propValueFinal); if (propValueFinal === value) { // haven't found value in colors mapping, so we are checking in the palette mapping - value = getValue(paletteThemeMapping, undefined, propValueFinal); + value = getValue(paletteThemeMapping, null, propValueFinal); } if (cssProperty === false) { diff --git a/packages/mui-system/src/style.d.ts b/packages/mui-system/src/style.d.ts index ef00e3e785a134..2f004defba6e59 100644 --- a/packages/mui-system/src/style.d.ts +++ b/packages/mui-system/src/style.d.ts @@ -21,7 +21,7 @@ export function style( export function getPath(obj: T, path: string | undefined, checkVars?: boolean): null | unknown; export function getStyleValue( themeMapping: object | ((arg: any) => any), - transform: TransformFunction, + transform: TransformFunction | null, propValueFinal: unknown, userValue?: unknown, ): any; From d55b720ecc9a41fbf621e7f0da2a3669f6dc6982 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 22 Nov 2022 14:50:53 +0100 Subject: [PATCH 25/46] lint fixes --- .../src/styles/styled.test.js | 20 ------------------- .../mui-material-next/src/styles/sxConfig.ts | 3 ++- 2 files changed, 2 insertions(+), 21 deletions(-) diff --git a/packages/mui-material-next/src/styles/styled.test.js b/packages/mui-material-next/src/styles/styled.test.js index 1cf5072593dfaa..4b768a25907b5e 100644 --- a/packages/mui-material-next/src/styles/styled.test.js +++ b/packages/mui-material-next/src/styles/styled.test.js @@ -30,26 +30,6 @@ describe('styled', () => { }); }); - it('should use theme from context if available', () => { - const Div = styled('div')` - width: ${(props) => props.theme.spacing(1)}; - `; - - const theme = extendTheme({ - spacing: 10, - }); - - const { container } = render( - -
Test
- , - ); - - expect(container.firstChild).toHaveComputedStyle({ - width: '10px', - }); - }); - describe('dynamic styles', () => { it('can adapt styles to props', () => { const Div = styled('div')` diff --git a/packages/mui-material-next/src/styles/sxConfig.ts b/packages/mui-material-next/src/styles/sxConfig.ts index d0851627817825..d5d4cea4af11ed 100644 --- a/packages/mui-material-next/src/styles/sxConfig.ts +++ b/packages/mui-material-next/src/styles/sxConfig.ts @@ -3,8 +3,9 @@ import { getStyleValue as getValue, createUnaryUnit, handleBreakpoints, + SxConfig, + unstable_defaultSxConfig, } from '@mui/system'; -import { SxConfig, unstable_defaultSxConfig } from '@mui/system'; interface PaletteStyleOptions { prop: string; From 8f4a2886a7a6ac6dde220e533a4d98bf2a9c9f43 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 22 Nov 2022 15:52:45 +0100 Subject: [PATCH 26/46] lint --- packages/mui-material-next/src/styles/styled.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material-next/src/styles/styled.test.js b/packages/mui-material-next/src/styles/styled.test.js index 4b768a25907b5e..43fa2987f0b07e 100644 --- a/packages/mui-material-next/src/styles/styled.test.js +++ b/packages/mui-material-next/src/styles/styled.test.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { createRenderer, screen } from 'test/utils'; -import { styled, extendTheme, CssVarsProvider } from '@mui/material-next/styles'; +import { styled } from '@mui/material-next/styles'; describe('styled', () => { const { render } = createRenderer(); From b7e3a5ae22cd1a802bfbca290aa85c3a6883b103 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 25 Nov 2022 13:21:18 +0100 Subject: [PATCH 27/46] Make sx work for both MD2 and MD3 --- docs/pages/experiments/md3/index.tsx | 1 + packages/mui-material-next/src/Button/Button.tsx | 2 ++ packages/mui-material-next/src/styles/Theme.types.ts | 1 + packages/mui-material-next/src/styles/extendTheme.ts | 8 ++++++++ .../src/styleFunctionSx/styleFunctionSx.js | 12 ++++++++---- 5 files changed, 20 insertions(+), 4 deletions(-) diff --git a/docs/pages/experiments/md3/index.tsx b/docs/pages/experiments/md3/index.tsx index 244d68c5a33fc2..0472963c9ffd07 100644 --- a/docs/pages/experiments/md3/index.tsx +++ b/docs/pages/experiments/md3/index.tsx @@ -167,6 +167,7 @@ function DemoComponents() { > Button + MD2 Button

CSS vars playground

diff --git a/packages/mui-material-next/src/Button/Button.tsx b/packages/mui-material-next/src/Button/Button.tsx index 0e4e9934cbe99f..e47eb12c204e11 100644 --- a/packages/mui-material-next/src/Button/Button.tsx +++ b/packages/mui-material-next/src/Button/Button.tsx @@ -469,6 +469,8 @@ const Button = React.forwardRef(function Button< tabIndex, type, variant, + // required for making sure the sx prop is handled correctly + materialYouComponent: true, }; const classes = useUtilityClasses(ownerState); diff --git a/packages/mui-material-next/src/styles/Theme.types.ts b/packages/mui-material-next/src/styles/Theme.types.ts index 964e05a6342831..f15715f51a7b1d 100644 --- a/packages/mui-material-next/src/styles/Theme.types.ts +++ b/packages/mui-material-next/src/styles/Theme.types.ts @@ -194,6 +194,7 @@ export interface Theme extends Omit { }; unstable_sxConfig: SxConfig; unstable_sx: (props: SystemSxProps) => CSSObject; + unstable_calculateSxConfig: (props: any) => SxConfig; } export type SxProps = SystemSxProps; diff --git a/packages/mui-material-next/src/styles/extendTheme.ts b/packages/mui-material-next/src/styles/extendTheme.ts index b321d806e38908..af28418ddf8c50 100644 --- a/packages/mui-material-next/src/styles/extendTheme.ts +++ b/packages/mui-material-next/src/styles/extendTheme.ts @@ -8,6 +8,7 @@ import { unstable_createGetCssVar as systemCreateGetCssVar, unstable_styleFunctionSx as styleFunctionSx, SxProps, + unstable_defaultSxConfig as systemDefaultSxConfig, } from '@mui/system'; import { createTheme as createThemeWithoutVars, @@ -427,6 +428,13 @@ export default function extendTheme(options: CssVarsThemeOptions = {}, ...args: ...defaultSxConfig, ...input?.unstable_sxConfig, }; + theme.unstable_calculateSxConfig = (props) => { + console.log(props); + if (props.ownerState?.materialYouComponent) { + return theme.unstable_sxConfig; + } + return systemDefaultSxConfig; + }; theme.unstable_sx = function sx(props: SxProps) { return styleFunctionSx({ sx: props, diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js index e68997bdfa86f0..df70049d4e5021 100644 --- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js +++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js @@ -71,15 +71,19 @@ export function unstable_createStyleFunctionSx() { function styleFunctionSx(props) { const { sx, theme = {} } = props || {}; - let config = defaultSxConfig; - if (theme.unstable_sxConfig) { - config = theme.unstable_sxConfig; - } if (!sx) { return null; // Emotion & styled-components will neglect null } + let config = defaultSxConfig; + + if (theme.unstable_sxConfig || theme.unstable_calculateSxConfig) { + config = theme.unstable_calculateSxConfig + ? theme.unstable_calculateSxConfig(props) + : theme.unstable_sxConfig; + } + /* * Receive `sxInput` as object or callback * and then recursively check keys & values to create media query object styles. From 985012e87bdc1b225871a4e6bc791cda9e028ea5 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 29 Nov 2022 09:16:38 +0100 Subject: [PATCH 28/46] Update packages/mui-material-next/src/styles/extendTheme.ts Co-authored-by: Siriwat K Signed-off-by: Marija Najdova --- packages/mui-material-next/src/styles/extendTheme.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mui-material-next/src/styles/extendTheme.ts b/packages/mui-material-next/src/styles/extendTheme.ts index af28418ddf8c50..ab214993cd70de 100644 --- a/packages/mui-material-next/src/styles/extendTheme.ts +++ b/packages/mui-material-next/src/styles/extendTheme.ts @@ -429,7 +429,6 @@ export default function extendTheme(options: CssVarsThemeOptions = {}, ...args: ...input?.unstable_sxConfig, }; theme.unstable_calculateSxConfig = (props) => { - console.log(props); if (props.ownerState?.materialYouComponent) { return theme.unstable_sxConfig; } From ab13d5b203c60b8c834c5e9710d52ddb008a1481 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 29 Nov 2022 11:59:43 +0100 Subject: [PATCH 29/46] Add more tests --- .../src/styles/styleFunctionSx.spec.tsx | 12 ++++++ .../mui-system/src/createTheme/createTheme.js | 13 ++++++ packages/mui-system/src/styled.test.js | 41 +++++++++++++++++++ 3 files changed, 66 insertions(+) diff --git a/packages/mui-joy/src/styles/styleFunctionSx.spec.tsx b/packages/mui-joy/src/styles/styleFunctionSx.spec.tsx index 6bdc39bfcbb896..e2bde5aad54bed 100644 --- a/packages/mui-joy/src/styles/styleFunctionSx.spec.tsx +++ b/packages/mui-joy/src/styles/styleFunctionSx.spec.tsx @@ -8,3 +8,15 @@ const Test = styled('div')(({ theme }) => m: 2, }), ); + +// Can be used in when styles are defined as arrays +const TestArray = styled('div')( + ({ theme }) => theme.unstable_sx({ color: 'primary.100' }), + ({ theme }) => theme.unstable_sx({ mt: 2 }), +); + +// Can be used inside pseudo elements +const TestPseudo = styled('div')(({ theme }) => ({ + ...theme.unstable_sx({ color: 'primary.100' }), + '&:hover': theme.unstable_sx({ color: 'primary.700' }), +})); diff --git a/packages/mui-system/src/createTheme/createTheme.js b/packages/mui-system/src/createTheme/createTheme.js index 079979a4af01e1..2cb236a1e2ac28 100644 --- a/packages/mui-system/src/createTheme/createTheme.js +++ b/packages/mui-system/src/createTheme/createTheme.js @@ -2,6 +2,8 @@ import { deepmerge } from '@mui/utils'; import createBreakpoints from './createBreakpoints'; import shape from './shape'; import createSpacing from './createSpacing'; +import styleFunctionSx from '../styleFunctionSx/styleFunctionSx'; +import defaultSxConfig from '../styleFunctionSx/defaultSxConfig'; function createTheme(options = {}, ...args) { const { @@ -29,6 +31,17 @@ function createTheme(options = {}, ...args) { muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme); + muiTheme.unstable_sxConfig = { + ...defaultSxConfig, + ...other?.unstable_sxConfig, + }; + muiTheme.unstable_sx = function sx(props) { + return styleFunctionSx({ + sx: props, + theme: this, + }); + }; + return muiTheme; } diff --git a/packages/mui-system/src/styled.test.js b/packages/mui-system/src/styled.test.js index 444aaa9bf1917c..995c4a7fabe95c 100644 --- a/packages/mui-system/src/styled.test.js +++ b/packages/mui-system/src/styled.test.js @@ -482,6 +482,47 @@ describe('styled', () => { }); }); + it('should resolve the theme.unstable_sx when used in an array styles', () => { + const TestComponent = styled('div')( + ({ theme: userTheme }) => + userTheme.unstable_sx({ + mt: 2, + }), + ({ theme: userTheme }) => + userTheme.unstable_sx({ + mb: 2, + }), + ); + const { container } = render( + + Test + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + marginTop: '16px', + marginBottom: '16px', + }); + }); + + it('should resolve the theme.unstable_sx when used in an pseudo object', () => { + const TestComponent = styled('div')(({ theme: userTheme }) => ({ + '&.test-classname': userTheme.unstable_sx({ + mt: 2, + }), + })); + + const { container } = render( + + Test + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + marginTop: '16px', + }); + }); + it('should respect the skipSx option', () => { const testOverridesResolver = (props, styles) => ({ ...styles.root, From 3b3f5b1845ae0cad4b16ae485b5f439787120485 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 29 Nov 2022 13:27:55 +0100 Subject: [PATCH 30/46] More generic solution to the `materialYouComponent` flag --- packages/mui-material-next/src/Button/Button.tsx | 2 -- packages/mui-material-next/src/styles/styled.ts | 2 +- packages/mui-system/src/createStyled.d.ts | 1 + packages/mui-system/src/createStyled.js | 3 ++- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mui-material-next/src/Button/Button.tsx b/packages/mui-material-next/src/Button/Button.tsx index e47eb12c204e11..0e4e9934cbe99f 100644 --- a/packages/mui-material-next/src/Button/Button.tsx +++ b/packages/mui-material-next/src/Button/Button.tsx @@ -469,8 +469,6 @@ const Button = React.forwardRef(function Button< tabIndex, type, variant, - // required for making sure the sx prop is handled correctly - materialYouComponent: true, }; const classes = useUtilityClasses(ownerState); diff --git a/packages/mui-material-next/src/styles/styled.ts b/packages/mui-material-next/src/styles/styled.ts index f0cccfa63f3c13..708763c8bc075b 100644 --- a/packages/mui-material-next/src/styles/styled.ts +++ b/packages/mui-material-next/src/styles/styled.ts @@ -2,6 +2,6 @@ import { createStyled } from '@mui/system'; import { Theme } from './Theme.types'; import defaultTheme from './defaultTheme'; -const styled = createStyled({ defaultTheme }); +const styled = createStyled({ defaultTheme, defaultProps: { materialYouComponent: true } }); export default styled; diff --git a/packages/mui-system/src/createStyled.d.ts b/packages/mui-system/src/createStyled.d.ts index b7897f31998594..b5efd26d08975e 100644 --- a/packages/mui-system/src/createStyled.d.ts +++ b/packages/mui-system/src/createStyled.d.ts @@ -35,4 +35,5 @@ export default function createStyled(options?: rootShouldForwardProp?: (prop: PropertyKey) => boolean; slotShouldForwardProp?: (prop: PropertyKey) => boolean; styleFunctionSx?: typeof styleFunctionSx; + defaultProps?: Record; }): CreateMUIStyled; diff --git a/packages/mui-system/src/createStyled.js b/packages/mui-system/src/createStyled.js index 679dd95d7c3f04..c7d072001e2b09 100644 --- a/packages/mui-system/src/createStyled.js +++ b/packages/mui-system/src/createStyled.js @@ -81,11 +81,12 @@ export default function createStyled(input = {}) { defaultTheme = systemDefaultTheme, rootShouldForwardProp = shouldForwardProp, slotShouldForwardProp = shouldForwardProp, + defaultProps = {}, } = input; const systemSx = (props) => { const theme = isEmpty(props.theme) ? defaultTheme : props.theme; - return styleFunctionSx({ ...props, theme }); + return styleFunctionSx({ ...props, ownerState: { ...props.ownerState, ...defaultProps }, theme }); }; systemSx.__mui_systemSx = true; From a387ed748359cb9ef79fe6832ddfc0a42de50502 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 30 Nov 2022 12:47:49 +0100 Subject: [PATCH 31/46] Resolve review comments --- .../src/styles/Theme.types.ts | 1 - .../src/styles/extendTheme.ts | 6 --- .../mui-material-next/src/styles/styled.ts | 2 +- .../mui-material-next/src/styles/sxConfig.ts | 44 +++---------------- packages/mui-system/src/createStyled.d.ts | 1 - packages/mui-system/src/createStyled.js | 3 +- .../src/styleFunctionSx/styleFunctionSx.js | 6 +-- 7 files changed, 10 insertions(+), 53 deletions(-) diff --git a/packages/mui-material-next/src/styles/Theme.types.ts b/packages/mui-material-next/src/styles/Theme.types.ts index f15715f51a7b1d..964e05a6342831 100644 --- a/packages/mui-material-next/src/styles/Theme.types.ts +++ b/packages/mui-material-next/src/styles/Theme.types.ts @@ -194,7 +194,6 @@ export interface Theme extends Omit { }; unstable_sxConfig: SxConfig; unstable_sx: (props: SystemSxProps) => CSSObject; - unstable_calculateSxConfig: (props: any) => SxConfig; } export type SxProps = SystemSxProps; diff --git a/packages/mui-material-next/src/styles/extendTheme.ts b/packages/mui-material-next/src/styles/extendTheme.ts index ab214993cd70de..cc807a7add41ed 100644 --- a/packages/mui-material-next/src/styles/extendTheme.ts +++ b/packages/mui-material-next/src/styles/extendTheme.ts @@ -428,12 +428,6 @@ export default function extendTheme(options: CssVarsThemeOptions = {}, ...args: ...defaultSxConfig, ...input?.unstable_sxConfig, }; - theme.unstable_calculateSxConfig = (props) => { - if (props.ownerState?.materialYouComponent) { - return theme.unstable_sxConfig; - } - return systemDefaultSxConfig; - }; theme.unstable_sx = function sx(props: SxProps) { return styleFunctionSx({ sx: props, diff --git a/packages/mui-material-next/src/styles/styled.ts b/packages/mui-material-next/src/styles/styled.ts index 708763c8bc075b..f0cccfa63f3c13 100644 --- a/packages/mui-material-next/src/styles/styled.ts +++ b/packages/mui-material-next/src/styles/styled.ts @@ -2,6 +2,6 @@ import { createStyled } from '@mui/system'; import { Theme } from './Theme.types'; import defaultTheme from './defaultTheme'; -const styled = createStyled({ defaultTheme, defaultProps: { materialYouComponent: true } }); +const styled = createStyled({ defaultTheme }); export default styled; diff --git a/packages/mui-material-next/src/styles/sxConfig.ts b/packages/mui-material-next/src/styles/sxConfig.ts index d5d4cea4af11ed..eb2bc0efa2743d 100644 --- a/packages/mui-material-next/src/styles/sxConfig.ts +++ b/packages/mui-material-next/src/styles/sxConfig.ts @@ -1,11 +1,4 @@ -import { - getPath, - getStyleValue as getValue, - createUnaryUnit, - handleBreakpoints, - SxConfig, - unstable_defaultSxConfig, -} from '@mui/system'; +import { getPath, handleBreakpoints, SxConfig, unstable_defaultSxConfig } from '@mui/system'; interface PaletteStyleOptions { prop: string; @@ -22,21 +15,13 @@ function createPaletteStyle(options: PaletteStyleOptions = { prop: 'color' }) { const propValue: any = props[prop]; const theme = props.theme; - const colorThemeMapping = getPath(theme, 'sys.color') || {}; - const paletteThemeMapping = getPath(theme, 'ref.palette') || {}; const styleFromPropValue = (propValueFinal: any) => { - // check the value in the color mapping first - let value = getValue(colorThemeMapping, null, propValueFinal); - - if (propValueFinal === value) { - // haven't found value in colors mapping, so we are checking in the palette mapping - value = getValue(paletteThemeMapping, null, propValueFinal); - } - - if (cssProperty === false) { - return value; - } + const value = + getPath(theme, `sys.color.${propValueFinal}`, true) || + getPath(theme, `ref.palette.${propValueFinal}`, true) || + getPath(theme, `palette.${propValueFinal}`, true) || + propValueFinal; return { [cssProperty as string]: value, @@ -48,20 +33,6 @@ function createPaletteStyle(options: PaletteStyleOptions = { prop: 'color' }) { return fn; } -// Border radius should mapa to md3.shape -export const borderRadiusStyle = (props: any) => { - if (props.borderRadius !== undefined && props.borderRadius !== null) { - const transformer = createUnaryUnit(props.theme, 'md3.shape.borderRadius', 4, 'borderRadius'); - const styleFromPropValue = (propValue: any) => ({ - // @ts-ignore - borderRadius: transformer(propValue), - }); - return handleBreakpoints(props, props.borderRadius, styleFromPropValue); - } - - return null; -}; - const sxConfig: SxConfig = { ...unstable_defaultSxConfig, color: { @@ -88,9 +59,6 @@ const sxConfig: SxConfig = { borderRightColor: { style: createPaletteStyle({ prop: 'borderRightColor' }), }, - borderRadius: { - style: borderRadiusStyle, - }, }; export default sxConfig; diff --git a/packages/mui-system/src/createStyled.d.ts b/packages/mui-system/src/createStyled.d.ts index b5efd26d08975e..b7897f31998594 100644 --- a/packages/mui-system/src/createStyled.d.ts +++ b/packages/mui-system/src/createStyled.d.ts @@ -35,5 +35,4 @@ export default function createStyled(options?: rootShouldForwardProp?: (prop: PropertyKey) => boolean; slotShouldForwardProp?: (prop: PropertyKey) => boolean; styleFunctionSx?: typeof styleFunctionSx; - defaultProps?: Record; }): CreateMUIStyled; diff --git a/packages/mui-system/src/createStyled.js b/packages/mui-system/src/createStyled.js index c7d072001e2b09..679dd95d7c3f04 100644 --- a/packages/mui-system/src/createStyled.js +++ b/packages/mui-system/src/createStyled.js @@ -81,12 +81,11 @@ export default function createStyled(input = {}) { defaultTheme = systemDefaultTheme, rootShouldForwardProp = shouldForwardProp, slotShouldForwardProp = shouldForwardProp, - defaultProps = {}, } = input; const systemSx = (props) => { const theme = isEmpty(props.theme) ? defaultTheme : props.theme; - return styleFunctionSx({ ...props, ownerState: { ...props.ownerState, ...defaultProps }, theme }); + return styleFunctionSx({ ...props, theme }); }; systemSx.__mui_systemSx = true; diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js index df70049d4e5021..81f71593081fb6 100644 --- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js +++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js @@ -78,10 +78,8 @@ export function unstable_createStyleFunctionSx() { let config = defaultSxConfig; - if (theme.unstable_sxConfig || theme.unstable_calculateSxConfig) { - config = theme.unstable_calculateSxConfig - ? theme.unstable_calculateSxConfig(props) - : theme.unstable_sxConfig; + if (theme.unstable_sxConfig) { + config = theme.unstable_sxConfig; } /* From e5039b09837e5c2fe5b55c045ad64958c11feba7 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 30 Nov 2022 13:07:52 +0100 Subject: [PATCH 32/46] lint --- packages/mui-material-next/src/styles/extendTheme.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mui-material-next/src/styles/extendTheme.ts b/packages/mui-material-next/src/styles/extendTheme.ts index cc807a7add41ed..b321d806e38908 100644 --- a/packages/mui-material-next/src/styles/extendTheme.ts +++ b/packages/mui-material-next/src/styles/extendTheme.ts @@ -8,7 +8,6 @@ import { unstable_createGetCssVar as systemCreateGetCssVar, unstable_styleFunctionSx as styleFunctionSx, SxProps, - unstable_defaultSxConfig as systemDefaultSxConfig, } from '@mui/system'; import { createTheme as createThemeWithoutVars, From 21f55ab4215c26779c407095edc93556f6c878ab Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 30 Nov 2022 13:40:04 +0100 Subject: [PATCH 33/46] Remove `experimental_sx` --- .../theme-components/GlobalThemeOverrideSx.js | 30 +++++++++---------- .../GlobalThemeOverrideSx.tsx | 30 +++++++++---------- docs/data/system/styled/UsingWithSx.js | 11 ++----- docs/data/system/styled/UsingWithSx.tsx | 11 ++----- docs/data/system/styled/styled.md | 6 ++-- .../callback-support-in-style-overrides.md | 29 ++++++++---------- packages/mui-material/src/styles/index.d.ts | 1 - packages/mui-material/src/styles/index.js | 1 - .../mui-material/src/styles/index.spec.ts | 19 ++++++------ .../mui-material/src/styles/styled.spec.tsx | 25 +++++----------- packages/mui-system/src/createStyled.test.js | 7 ++--- .../src/createTheme/createTheme.d.ts | 4 +++ .../createTheme.test.js} | 22 +++++++------- packages/mui-system/src/index.d.ts | 2 -- packages/mui-system/src/index.js | 1 - packages/mui-system/src/sx/index.d.ts | 1 - packages/mui-system/src/sx/index.js | 1 - packages/mui-system/src/sx/sx.d.ts | 4 --- packages/mui-system/src/sx/sx.js | 7 ----- packages/mui-system/src/sx/sx.spec.ts | 10 ------- 20 files changed, 86 insertions(+), 136 deletions(-) rename packages/mui-system/src/{sx/sx.test.js => createTheme/createTheme.test.js} (91%) delete mode 100644 packages/mui-system/src/sx/index.d.ts delete mode 100644 packages/mui-system/src/sx/index.js delete mode 100644 packages/mui-system/src/sx/sx.d.ts delete mode 100644 packages/mui-system/src/sx/sx.js delete mode 100644 packages/mui-system/src/sx/sx.spec.ts diff --git a/docs/data/material/customization/theme-components/GlobalThemeOverrideSx.js b/docs/data/material/customization/theme-components/GlobalThemeOverrideSx.js index d78df9369e8e28..28329516e060c1 100644 --- a/docs/data/material/customization/theme-components/GlobalThemeOverrideSx.js +++ b/docs/data/material/customization/theme-components/GlobalThemeOverrideSx.js @@ -1,9 +1,5 @@ import * as React from 'react'; -import { - ThemeProvider, - createTheme, - experimental_sx as sx, -} from '@mui/material/styles'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; import Chip from '@mui/material/Chip'; import Check from '@mui/icons-material/Check'; @@ -11,20 +7,22 @@ const finalTheme = createTheme({ components: { MuiChip: { styleOverrides: { - root: sx({ - // https://mui.com/system/getting-started/the-sx-prop/#spacing - px: 1, - py: 0.25, - // https://mui.com/system/borders/#border-radius - borderRadius: 1, // 4px as default. - }), + root: ({ theme }) => + theme.unstable_sx({ + // https://mui.com/system/getting-started/the-sx-prop/#spacing + px: 1, + py: 0.25, + // https://mui.com/system/borders/#border-radius + borderRadius: 1, // 4px as default. + }), label: { padding: 'initial', }, - icon: sx({ - mr: 0.5, - ml: '-2px', - }), + icon: ({ theme }) => + theme.unstable_sx({ + mr: 0.5, + ml: '-2px', + }), }, }, }, diff --git a/docs/data/material/customization/theme-components/GlobalThemeOverrideSx.tsx b/docs/data/material/customization/theme-components/GlobalThemeOverrideSx.tsx index d78df9369e8e28..28329516e060c1 100644 --- a/docs/data/material/customization/theme-components/GlobalThemeOverrideSx.tsx +++ b/docs/data/material/customization/theme-components/GlobalThemeOverrideSx.tsx @@ -1,9 +1,5 @@ import * as React from 'react'; -import { - ThemeProvider, - createTheme, - experimental_sx as sx, -} from '@mui/material/styles'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; import Chip from '@mui/material/Chip'; import Check from '@mui/icons-material/Check'; @@ -11,20 +7,22 @@ const finalTheme = createTheme({ components: { MuiChip: { styleOverrides: { - root: sx({ - // https://mui.com/system/getting-started/the-sx-prop/#spacing - px: 1, - py: 0.25, - // https://mui.com/system/borders/#border-radius - borderRadius: 1, // 4px as default. - }), + root: ({ theme }) => + theme.unstable_sx({ + // https://mui.com/system/getting-started/the-sx-prop/#spacing + px: 1, + py: 0.25, + // https://mui.com/system/borders/#border-radius + borderRadius: 1, // 4px as default. + }), label: { padding: 'initial', }, - icon: sx({ - mr: 0.5, - ml: '-2px', - }), + icon: ({ theme }) => + theme.unstable_sx({ + mr: 0.5, + ml: '-2px', + }), }, }, }, diff --git a/docs/data/system/styled/UsingWithSx.js b/docs/data/system/styled/UsingWithSx.js index 9e50b6d44f5f71..ba14414f409018 100644 --- a/docs/data/system/styled/UsingWithSx.js +++ b/docs/data/system/styled/UsingWithSx.js @@ -1,10 +1,5 @@ import * as React from 'react'; -import { - styled, - createTheme, - ThemeProvider, - experimental_sx as sx, -} from '@mui/system'; +import { styled, createTheme, ThemeProvider } from '@mui/system'; const customTheme = createTheme({ palette: { @@ -15,8 +10,8 @@ const customTheme = createTheme({ }, }); -const MyThemeComponent = styled('div')( - sx({ +const MyThemeComponent = styled('div')(({ theme }) => + theme.unstable_sx({ color: 'primary.contrastText', backgroundColor: 'primary.main', padding: 1, diff --git a/docs/data/system/styled/UsingWithSx.tsx b/docs/data/system/styled/UsingWithSx.tsx index 9e50b6d44f5f71..ba14414f409018 100644 --- a/docs/data/system/styled/UsingWithSx.tsx +++ b/docs/data/system/styled/UsingWithSx.tsx @@ -1,10 +1,5 @@ import * as React from 'react'; -import { - styled, - createTheme, - ThemeProvider, - experimental_sx as sx, -} from '@mui/system'; +import { styled, createTheme, ThemeProvider } from '@mui/system'; const customTheme = createTheme({ palette: { @@ -15,8 +10,8 @@ const customTheme = createTheme({ }, }); -const MyThemeComponent = styled('div')( - sx({ +const MyThemeComponent = styled('div')(({ theme }) => + theme.unstable_sx({ color: 'primary.contrastText', backgroundColor: 'primary.main', padding: 1, diff --git a/docs/data/system/styled/styled.md b/docs/data/system/styled/styled.md index 6f3a69f6f9238a..0f6d2013ace0fb 100644 --- a/docs/data/system/styled/styled.md +++ b/docs/data/system/styled/styled.md @@ -208,13 +208,13 @@ const MyStyledButton = (props) => ( ### How can I use the `sx` syntax with the `styled()` utility? -If you are one of those who prefers the `sx` syntax and wants to use it in both the `sx` prop and the `styled()` utility, you can use the `experimental_sx` utility from the `@mui/system`: +If you are one of those who prefers the `sx` syntax and wants to use it in both the `sx` prop and the `styled()` utility, you can use the `unstable_sx` utility from the `theme`: {{"demo": "UsingWithSx.js", "defaultCodeOpen": true}} -The overhead added by using the `experimental_sx` utility is the same as if you were to use the `sx` prop on the component. +The overhead added by using the `unstable_sx` utility is the same as if you were to use the `sx` prop on the component. -> Note: You can use `experimental_sx` outside of the `styled()` utility, too; e.g., for defining `variants` in your custom theme. +> Note: You can use `unstable_sx` outside of the `styled()` utility, too; e.g., for defining `variants` in your custom theme. ## How to use components selector API diff --git a/docs/pages/blog/callback-support-in-style-overrides.md b/docs/pages/blog/callback-support-in-style-overrides.md index 96f088a1226f55..b7e25bc17cd95d 100644 --- a/docs/pages/blog/callback-support-in-style-overrides.md +++ b/docs/pages/blog/callback-support-in-style-overrides.md @@ -117,26 +117,23 @@ const Label = styled('span')({ `sx` helps developers write less code and be more productive once they are familiar with the API. With the callback support in `styleOverrides`, it is now possible to use an `sx`-like syntax in global theme overrides. -All you need is to use the [`experimental_sx`](/system/styled/#how-can-i-use-the-sx-syntax-with-the-styled-utility) function. In the following example, I use `sx` to theme the `Chip` component: +All you need is to use the [`unstable_sx`](/system/styled/#how-can-i-use-the-sx-syntax-with-the-styled-utility) function from the `theme`. In the following example, the `sx` is used to style the `Chip` component: ```jsx -import { - ThemeProvider, - createTheme, - experimental_sx as sx, -} from '@mui/material/styles'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; + theme.unstable_sx({ + px: '12px', // shorthand for padding-left & right + py: '6px', // shorthand for padding-top & bottom + fontWeight: 500, + borderRadius: '8px', + }), label: { padding: 0, }, @@ -159,19 +156,19 @@ An array can be used as a return type to make the code easier to add/remove cond ```js // The is omitted for readability. { - root: ({ ownerState }) => [ - sx({ + root: ({ ownerState, theme }) => [ + theme.unstable_sx({ px: '12px', py: '6px', fontWeight: 500, borderRadius: '8px', }), ownerState.variant === 'outlined' && ownerState.color === 'default' && - sx({ + theme.unstable_sx({ borderColor: 'text.secondary', }), ownerState.size === 'small' && - sx({ + theme.unstable_sx({ fontSize: { xs: '0.875rem', sm: '0.75rem' }, }) ], diff --git a/packages/mui-material/src/styles/index.d.ts b/packages/mui-material/src/styles/index.d.ts index bb2e23b2f89e26..f7d1a625424649 100644 --- a/packages/mui-material/src/styles/index.d.ts +++ b/packages/mui-material/src/styles/index.d.ts @@ -64,7 +64,6 @@ export { ColorObject, StyledEngineProvider, SxProps, - experimental_sx, } from '@mui/system'; export { default as useTheme } from './useTheme'; export { default as useThemeProps } from './useThemeProps'; diff --git a/packages/mui-material/src/styles/index.js b/packages/mui-material/src/styles/index.js index 011245f31907b7..c87fa88993319e 100644 --- a/packages/mui-material/src/styles/index.js +++ b/packages/mui-material/src/styles/index.js @@ -13,7 +13,6 @@ export { lighten, css, keyframes, - experimental_sx, } from '@mui/system'; export { default as createTheme, createMuiTheme } from './createTheme'; export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictModeTheme'; diff --git a/packages/mui-material/src/styles/index.spec.ts b/packages/mui-material/src/styles/index.spec.ts index 537faa39dadef5..fc1e9f35054f10 100644 --- a/packages/mui-material/src/styles/index.spec.ts +++ b/packages/mui-material/src/styles/index.spec.ts @@ -1,25 +1,26 @@ -import { experimental_sx as sx, styled, createTheme } from '@mui/material/styles'; +import { styled, createTheme } from '@mui/material/styles'; -// Can use the experimental_sx in the styled() utility -const Test = styled('div')( - sx({ +// Can use the unstable_sx in the styled() utility +const Test = styled('div')(({ theme }) => + theme.unstable_sx({ color: 'primary.main', bgcolor: 'primary.light', m: 2, }), ); -// Can use the experimental_sx in the theme's variants +// Can use the unstable_sx in the theme's variants const customTheme = createTheme({ components: { MuiButton: { variants: [ { props: {}, - style: sx({ - m: 2, - p: 1, - }), + style: ({ theme }) => + theme.unstable_sx({ + m: 2, + p: 1, + }), }, ], }, diff --git a/packages/mui-material/src/styles/styled.spec.tsx b/packages/mui-material/src/styles/styled.spec.tsx index ecf22af2ef8d4f..5a15be60f0b7e0 100644 --- a/packages/mui-material/src/styles/styled.spec.tsx +++ b/packages/mui-material/src/styles/styled.spec.tsx @@ -1,11 +1,5 @@ import * as React from 'react'; -import { - styled, - css, - ThemeProvider, - createTheme, - experimental_sx as sx, -} from '@mui/material/styles'; +import { styled, css, ThemeProvider, createTheme } from '@mui/material/styles'; const Box = styled('div')(({ theme }) => ({ color: theme.palette.primary.main, @@ -140,13 +134,14 @@ function Button({ mark: (props) => ({ ...(props['data-index'] === 0 && {}), }), - thumb: sx({ - p: 1, - }), - track: ({ ownerState }) => [ - sx({ height: 10 }), + thumb: ({ theme }) => + theme.unstable_sx({ + p: 1, + }), + track: ({ ownerState, theme }) => [ + theme.unstable_sx({ height: 10 }), ownerState.orientation === 'vertical' && - sx({ + theme.unstable_sx({ my: 2, }), ], @@ -159,7 +154,3 @@ function Button({ Hello ; - -/** - * ============================================================ - */ diff --git a/packages/mui-system/src/createStyled.test.js b/packages/mui-system/src/createStyled.test.js index 05f3c9913d8b03..a6e26b80ca571e 100644 --- a/packages/mui-system/src/createStyled.test.js +++ b/packages/mui-system/src/createStyled.test.js @@ -4,7 +4,6 @@ import { spy } from 'sinon'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import { createRenderer } from 'test/utils'; import createStyled from './createStyled'; -import sx from './sx'; describe('createStyled', () => { const { render } = createRenderer(); @@ -294,12 +293,12 @@ describe('createStyled', () => { components: { MuiButton: { styleOverrides: { - root: sx({ + root: ({ theme }) => theme.unstable_sx({ pt: 10, }), - icon: ({ ownerState }) => [ + icon: ({ ownerState, theme }) => [ ownerState.color === 'primary' && - sx({ + theme.unstable_sx({ mr: 10, }), ], diff --git a/packages/mui-system/src/createTheme/createTheme.d.ts b/packages/mui-system/src/createTheme/createTheme.d.ts index f32a14211b791e..416dd3ad86b294 100644 --- a/packages/mui-system/src/createTheme/createTheme.d.ts +++ b/packages/mui-system/src/createTheme/createTheme.d.ts @@ -1,6 +1,8 @@ +import { CSSObject } from '@mui/styled-engine'; import { Breakpoints, BreakpointsOptions } from './createBreakpoints'; import { Shape, ShapeOptions } from './shape'; import { Spacing, SpacingOptions } from './createSpacing'; +import { SxConfig, SxProps } from '../styleFunctionSx'; export { Breakpoint, BreakpointOverrides } from './createBreakpoints'; @@ -32,6 +34,8 @@ export interface Theme { mixins?: unknown; typography?: unknown; zIndex?: unknown; + unstable_sxConfig: SxConfig; + unstable_sx: (props: SxProps) => CSSObject; } /** diff --git a/packages/mui-system/src/sx/sx.test.js b/packages/mui-system/src/createTheme/createTheme.test.js similarity index 91% rename from packages/mui-system/src/sx/sx.test.js rename to packages/mui-system/src/createTheme/createTheme.test.js index 2e14aa33e47a4e..56fad4eef063c0 100644 --- a/packages/mui-system/src/sx/sx.test.js +++ b/packages/mui-system/src/createTheme/createTheme.test.js @@ -1,9 +1,9 @@ import * as React from 'react'; import { expect } from 'chai'; import { createRenderer } from 'test/utils'; -import { experimental_sx as sx, styled, ThemeProvider } from '@mui/system'; +import { createTheme, styled, ThemeProvider } from '@mui/system'; -describe('sx', () => { +describe('createTheme', () => { const { render } = createRenderer(); const breakpointsValues = { xs: 0, @@ -15,7 +15,7 @@ describe('sx', () => { const round = (value) => Math.round(value * 1e5) / 1e5; - const theme = { + const theme = createTheme({ spacing: (val) => `${val * 10}px`, breakpoints: { keys: ['xs', 'sm', 'md', 'lg', 'xl'], @@ -52,7 +52,7 @@ describe('sx', () => { lineHeight: 1.43, }, }, - }; + }); describe('system', () => { it('resolves system when used inside styled()', function test() { @@ -60,8 +60,8 @@ describe('sx', () => { this.skip(); } - const Test = styled('div')( - sx({ + const Test = styled('div')(({ theme }) => + theme.unstable_sx({ color: 'primary.main', bgcolor: 'secondary.main', m: 2, @@ -105,7 +105,7 @@ describe('sx', () => { variants: [ { props: {}, // all props - style: sx({ + style: ({ theme }) => theme.unstable_sx({ color: 'primary.main', bgcolor: 'secondary.main', m: 2, @@ -119,8 +119,8 @@ describe('sx', () => { }, }; - const Test = styled('div', { name: 'MuiTest', slot: 'Root' })( - sx({ + const Test = styled('div', { name: 'MuiTest', slot: 'Root' })(({ theme }) => + theme.unstable_sx({ color: 'primary.main', bgcolor: 'secondary.main', m: 2, @@ -154,8 +154,8 @@ describe('sx', () => { }); it('does not throw if used without ThemeProvider', function test() { - const Test = styled('div')( - sx({ + const Test = styled('div')(({ theme }) => + theme.unstable_sx({ color: 'primary.main', bgcolor: 'secondary.main', m: 2, diff --git a/packages/mui-system/src/index.d.ts b/packages/mui-system/src/index.d.ts index 80f1e987a7b8b6..2f2a9d6b838bdb 100644 --- a/packages/mui-system/src/index.d.ts +++ b/packages/mui-system/src/index.d.ts @@ -123,8 +123,6 @@ export { } from './styleFunctionSx'; export * from './styleFunctionSx'; -export { default as experimental_sx } from './sx'; - export { default as Box } from './Box'; export * from './Box'; diff --git a/packages/mui-system/src/index.js b/packages/mui-system/src/index.js index cb3b5037de9d74..a3bf2528a8cc89 100644 --- a/packages/mui-system/src/index.js +++ b/packages/mui-system/src/index.js @@ -31,7 +31,6 @@ export { extendSxProp as unstable_extendSxProp, unstable_defaultSxConfig, } from './styleFunctionSx'; -export { default as experimental_sx } from './sx'; export { default as unstable_getThemeValue } from './getThemeValue'; export { default as Box } from './Box'; export { default as createBox } from './createBox'; diff --git a/packages/mui-system/src/sx/index.d.ts b/packages/mui-system/src/sx/index.d.ts deleted file mode 100644 index 4232fe22d6b4bb..00000000000000 --- a/packages/mui-system/src/sx/index.d.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './sx'; diff --git a/packages/mui-system/src/sx/index.js b/packages/mui-system/src/sx/index.js deleted file mode 100644 index 4232fe22d6b4bb..00000000000000 --- a/packages/mui-system/src/sx/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './sx'; diff --git a/packages/mui-system/src/sx/sx.d.ts b/packages/mui-system/src/sx/sx.d.ts deleted file mode 100644 index d17929c4ee803a..00000000000000 --- a/packages/mui-system/src/sx/sx.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { CSSObject } from '@mui/styled-engine'; -import { SxProps } from '../styleFunctionSx'; - -export default function sx(styles: SxProps): CSSObject; diff --git a/packages/mui-system/src/sx/sx.js b/packages/mui-system/src/sx/sx.js deleted file mode 100644 index 770503fa5136e5..00000000000000 --- a/packages/mui-system/src/sx/sx.js +++ /dev/null @@ -1,7 +0,0 @@ -import styleFunctionSx from '../styleFunctionSx'; - -function sx(styles) { - return ({ theme }) => styleFunctionSx({ sx: styles, theme }); -} - -export default sx; diff --git a/packages/mui-system/src/sx/sx.spec.ts b/packages/mui-system/src/sx/sx.spec.ts deleted file mode 100644 index faca7d15ad7d7a..00000000000000 --- a/packages/mui-system/src/sx/sx.spec.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { experimental_sx as sx, styled } from '@mui/system'; - -// Can be used in the styled() utility -const Test = styled('div')( - sx({ - color: 'primary.main', - bgcolor: 'primary.light', - m: 2, - }), -); From cf584ee2c4f1f3b96f19b8b698430b2a3a5ecb4c Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 30 Nov 2022 15:10:39 +0100 Subject: [PATCH 34/46] Small fixes & docs updates --- .../extend-sx-prop/ChangeTheBehaviorSxProp.js | 37 ++++++++++++++++ .../ChangeTheBehaviorSxProp.tsx | 44 +++++++++++++++++++ .../ChangeTheBehaviorSxProp.tsx.preview | 13 ++++++ .../extend-sx-prop/ExtendTheSxProp.js | 35 +++++++++++++++ .../extend-sx-prop/ExtendTheSxProp.tsx | 35 +++++++++++++++ .../ExtendTheSxProp.tsx.preview | 12 +++++ .../extend-sx-prop/extend-sx-prop.md | 24 ++++++++++ docs/data/system/pages.ts | 11 +++++ .../system/experimental-api/extend-sx-prop.js | 7 +++ packages/mui-system/src/createStyled.test.js | 7 +-- .../src/createTheme/createTheme.d.ts | 1 + .../src/createTheme/createTheme.test.js | 29 ++++++------ 12 files changed, 238 insertions(+), 17 deletions(-) create mode 100644 docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.js create mode 100644 docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx create mode 100644 docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx.preview create mode 100644 docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.js create mode 100644 docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx create mode 100644 docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx.preview create mode 100644 docs/data/system/experimental-api/extend-sx-prop/extend-sx-prop.md create mode 100644 docs/pages/system/experimental-api/extend-sx-prop.js diff --git a/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.js b/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.js new file mode 100644 index 00000000000000..591db7f83934ec --- /dev/null +++ b/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.js @@ -0,0 +1,37 @@ +import * as React from 'react'; +import { createTheme, ThemeProvider, Box, Stack } from '@mui/system'; + +// Retain type safety. + +const theme = createTheme({ + unstable_sxConfig: { + // You can now use the background key in sx + // by providing direct values from the palette + borderRadius: { + themeKey: 'shape', + }, + }, + shape: { + sm: 4, + md: 8, + lg: 12, + }, +}); + +export default function ExtendSxProp() { + return ( + + + + sm border radius + + + md border radius + + + lg border radius + + + + ); +} diff --git a/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx b/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx new file mode 100644 index 00000000000000..d1870cf10bba84 --- /dev/null +++ b/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx @@ -0,0 +1,44 @@ +import * as React from 'react'; +import { createTheme, ThemeProvider, Box, Stack } from '@mui/system'; + +// Retain type safety. +declare module '@mui/system' { + interface Shape { + sm: number; + md: number; + lg: number; + } +} + +const theme = createTheme({ + unstable_sxConfig: { + // You can now use the background key in sx + // by providing direct values from the palette + borderRadius: { + themeKey: 'shape', + }, + }, + shape: { + sm: 4, + md: 8, + lg: 12, + }, +}); + +export default function ExtendSxProp() { + return ( + + + + sm border radius + + + md border radius + + + lg border radius + + + + ); +} diff --git a/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx.preview b/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx.preview new file mode 100644 index 00000000000000..3fe54dbfee4d0f --- /dev/null +++ b/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx.preview @@ -0,0 +1,13 @@ + + + + sm border radius + + + md border radius + + + lg border radius + + + \ No newline at end of file diff --git a/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.js b/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.js new file mode 100644 index 00000000000000..8c58a6ac5bb32f --- /dev/null +++ b/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.js @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { createTheme, ThemeProvider, Box } from '@mui/system'; + +const theme = createTheme({ + unstable_sxConfig: { + // You can now use the background key in sx + // by providing direct values from the palette + background: { + themeKey: 'palette', + }, + }, + palette: { + primary: { + main: '#007FFF', + contrastText: '#FFFFFF', + }, + }, +}); + +export default function ExtendSxProp() { + return ( + + + Primary main background + + + ); +} diff --git a/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx b/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx new file mode 100644 index 00000000000000..8c58a6ac5bb32f --- /dev/null +++ b/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { createTheme, ThemeProvider, Box } from '@mui/system'; + +const theme = createTheme({ + unstable_sxConfig: { + // You can now use the background key in sx + // by providing direct values from the palette + background: { + themeKey: 'palette', + }, + }, + palette: { + primary: { + main: '#007FFF', + contrastText: '#FFFFFF', + }, + }, +}); + +export default function ExtendSxProp() { + return ( + + + Primary main background + + + ); +} diff --git a/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx.preview b/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx.preview new file mode 100644 index 00000000000000..f69e5ef3c1c0f0 --- /dev/null +++ b/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx.preview @@ -0,0 +1,12 @@ + + + Primary main background + + \ No newline at end of file diff --git a/docs/data/system/experimental-api/extend-sx-prop/extend-sx-prop.md b/docs/data/system/experimental-api/extend-sx-prop/extend-sx-prop.md new file mode 100644 index 00000000000000..a11f0dd42f0cef --- /dev/null +++ b/docs/data/system/experimental-api/extend-sx-prop/extend-sx-prop.md @@ -0,0 +1,24 @@ +# Extend the `sx` prop + +

Learn about the experimental API for extending or changing the behavior of the `sx` prop.

+ +## Extend the `sx` prop + +If you wish to add new keys that would be processed by the `sx` prop, you can do that by extending the `unstable_sxConfig` option inside the theme. + +{{"demo": "ExtendTheSxProp.js" }} + +## Override some of the existing behavior + +There is also a possibility to change some of the existing behavior. You can simply provide a custom config in the for the specific key. + +{{"demo": "ChangeTheBehaviorSxProp.js" }} + +## API + +Each key in the `unstable_sx` config can define the following properties: + +- `cssProperty` (_string_ [optional]): Indicates the css property, if it is different than the key +- `themeKey` (_string_ [optional]): The path of the theme mapping. +- `transform` (_(cssValue: unknown, userValue: unknown) => number | string | React.CSSProperties | CSSObject_ [optional]): Allows users to define a function that can transform the value before it is returned +- `style` (_(props: any) => CSSObject_ [optional]): Offers maximum customizability. Note that you need to make sure that the breakpoints values can be processed diff --git a/docs/data/system/pages.ts b/docs/data/system/pages.ts index b8dff15a1777d4..ec87a2933143c0 100644 --- a/docs/data/system/pages.ts +++ b/docs/data/system/pages.ts @@ -63,6 +63,17 @@ const pages = [ icon: 'CodeIcon', children: pagesApi, }, + { + pathname: '/system/experimental-api', + title: 'Experimental APIs', + icon: 'ExperimentIcon', + children: [ + { + pathname: '/system/experimental-api/extend-sx-prop', + title: 'Extend the `sx` prop', + }, + ], + }, { pathname: '/system/styles', title: 'Styles', diff --git a/docs/pages/system/experimental-api/extend-sx-prop.js b/docs/pages/system/experimental-api/extend-sx-prop.js new file mode 100644 index 00000000000000..834f55e4157508 --- /dev/null +++ b/docs/pages/system/experimental-api/extend-sx-prop.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docs/data/system/experimental-api/extend-sx-prop/extend-sx-prop.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/packages/mui-system/src/createStyled.test.js b/packages/mui-system/src/createStyled.test.js index a6e26b80ca571e..833ed5b735aad9 100644 --- a/packages/mui-system/src/createStyled.test.js +++ b/packages/mui-system/src/createStyled.test.js @@ -293,9 +293,10 @@ describe('createStyled', () => { components: { MuiButton: { styleOverrides: { - root: ({ theme }) => theme.unstable_sx({ - pt: 10, - }), + root: ({ theme }) => + theme.unstable_sx({ + pt: 10, + }), icon: ({ ownerState, theme }) => [ ownerState.color === 'primary' && theme.unstable_sx({ diff --git a/packages/mui-system/src/createTheme/createTheme.d.ts b/packages/mui-system/src/createTheme/createTheme.d.ts index 416dd3ad86b294..8de5e3c8d6340e 100644 --- a/packages/mui-system/src/createTheme/createTheme.d.ts +++ b/packages/mui-system/src/createTheme/createTheme.d.ts @@ -20,6 +20,7 @@ export interface ThemeOptions { components?: Record; typography?: unknown; zIndex?: Record; + unstable_sxConfig?: SxConfig; } export interface Theme { diff --git a/packages/mui-system/src/createTheme/createTheme.test.js b/packages/mui-system/src/createTheme/createTheme.test.js index 56fad4eef063c0..87f81935331142 100644 --- a/packages/mui-system/src/createTheme/createTheme.test.js +++ b/packages/mui-system/src/createTheme/createTheme.test.js @@ -60,8 +60,8 @@ describe('createTheme', () => { this.skip(); } - const Test = styled('div')(({ theme }) => - theme.unstable_sx({ + const Test = styled('div')(({ theme: t }) => + t.unstable_sx({ color: 'primary.main', bgcolor: 'secondary.main', m: 2, @@ -105,22 +105,23 @@ describe('createTheme', () => { variants: [ { props: {}, // all props - style: ({ theme }) => theme.unstable_sx({ - color: 'primary.main', - bgcolor: 'secondary.main', - m: 2, - p: 1, - fontSize: 'fontSize', - maxWidth: 'sm', - }), + style: ({ t }) => + t.unstable_sx({ + color: 'primary.main', + bgcolor: 'secondary.main', + m: 2, + p: 1, + fontSize: 'fontSize', + maxWidth: 'sm', + }), }, ], }, }, }; - const Test = styled('div', { name: 'MuiTest', slot: 'Root' })(({ theme }) => - theme.unstable_sx({ + const Test = styled('div', { name: 'MuiTest', slot: 'Root' })(({ theme: t }) => + t.unstable_sx({ color: 'primary.main', bgcolor: 'secondary.main', m: 2, @@ -154,8 +155,8 @@ describe('createTheme', () => { }); it('does not throw if used without ThemeProvider', function test() { - const Test = styled('div')(({ theme }) => - theme.unstable_sx({ + const Test = styled('div')(({ theme: t }) => + t.unstable_sx({ color: 'primary.main', bgcolor: 'secondary.main', m: 2, From 4cf4ce2a8b32017e39807b9a3088fc0853f6e990 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 30 Nov 2022 15:39:47 +0100 Subject: [PATCH 35/46] Fix test & translations --- docs/translations/translations.json | 2 ++ packages/mui-system/src/createTheme/createTheme.test.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 1e92e78e3cf931..8e6ad988386491 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -186,6 +186,8 @@ "/system/react-container": "Container", "/system/react-grid": "Grid", "/system/react-stack": "Stack", + "/system/experimental-api": "Experimental APIs", + "/system/experimental-api/extend-sx-prop": "Extend the `sx` prop", "/system/styles": "Styles", "/system/styles/basics": "Basics", "/system/styles/advanced": "Advanced", diff --git a/packages/mui-system/src/createTheme/createTheme.test.js b/packages/mui-system/src/createTheme/createTheme.test.js index 87f81935331142..c86c8911ccae13 100644 --- a/packages/mui-system/src/createTheme/createTheme.test.js +++ b/packages/mui-system/src/createTheme/createTheme.test.js @@ -105,7 +105,7 @@ describe('createTheme', () => { variants: [ { props: {}, // all props - style: ({ t }) => + style: ({ theme: t }) => t.unstable_sx({ color: 'primary.main', bgcolor: 'secondary.main', From 9afb5623daa48037671401406eccd5621b063241 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 1 Dec 2022 10:11:40 +0100 Subject: [PATCH 36/46] Apply suggestions from code review Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Co-authored-by: Olivier Tassinari Signed-off-by: Marija Najdova --- .../extend-sx-prop/extend-sx-prop.md | 18 +++++++++--------- docs/data/system/styled/styled.md | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/data/system/experimental-api/extend-sx-prop/extend-sx-prop.md b/docs/data/system/experimental-api/extend-sx-prop/extend-sx-prop.md index a11f0dd42f0cef..bad2f83929fc1a 100644 --- a/docs/data/system/experimental-api/extend-sx-prop/extend-sx-prop.md +++ b/docs/data/system/experimental-api/extend-sx-prop/extend-sx-prop.md @@ -1,14 +1,14 @@ -# Extend the `sx` prop +# Extend the sx prop -

Learn about the experimental API for extending or changing the behavior of the `sx` prop.

+

Learn about the experimental API for extending or changing the behavior of the sx prop.

-## Extend the `sx` prop +## Extend the sx prop -If you wish to add new keys that would be processed by the `sx` prop, you can do that by extending the `unstable_sxConfig` option inside the theme. +You can add new keys to be processed by the `sx` prop by extending the `unstable_sxConfig` option inside the theme, as shown below: {{"demo": "ExtendTheSxProp.js" }} -## Override some of the existing behavior +## Override existing behavior There is also a possibility to change some of the existing behavior. You can simply provide a custom config in the for the specific key. @@ -18,7 +18,7 @@ There is also a possibility to change some of the existing behavior. You can sim Each key in the `unstable_sx` config can define the following properties: -- `cssProperty` (_string_ [optional]): Indicates the css property, if it is different than the key -- `themeKey` (_string_ [optional]): The path of the theme mapping. -- `transform` (_(cssValue: unknown, userValue: unknown) => number | string | React.CSSProperties | CSSObject_ [optional]): Allows users to define a function that can transform the value before it is returned -- `style` (_(props: any) => CSSObject_ [optional]): Offers maximum customizability. Note that you need to make sure that the breakpoints values can be processed +- `cssProperty` (_string_ [optional]): Indicates the CSS property, if it is different than the key +- `themeKey` (_string_ [optional]): The path of the theme mapping +- `transform` (_(cssValue: unknown, userValue: unknown) => number | string | React.CSSProperties | CSSObject_ [optional]): Lets users define a function that can transform the value before it's returned +- `style` (_(props: any) => CSSObject_ [optional]): Offers maximum customizability. Note that you need to make sure that the breakpoint values can be processed diff --git a/docs/data/system/styled/styled.md b/docs/data/system/styled/styled.md index 0f6d2013ace0fb..5af4d2c8d68398 100644 --- a/docs/data/system/styled/styled.md +++ b/docs/data/system/styled/styled.md @@ -208,7 +208,7 @@ const MyStyledButton = (props) => ( ### How can I use the `sx` syntax with the `styled()` utility? -If you are one of those who prefers the `sx` syntax and wants to use it in both the `sx` prop and the `styled()` utility, you can use the `unstable_sx` utility from the `theme`: +If you prefer the `sx` syntax and want to use it in both the `sx` prop and the `styled()` utility, you can use the `unstable_sx` utility from the `theme`: {{"demo": "UsingWithSx.js", "defaultCodeOpen": true}} From 0debf6709c6754b04885cc80e9788525ec9cea83 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 1 Dec 2022 13:23:22 +0100 Subject: [PATCH 37/46] Update packages/mui-joy/src/styles/CssVarsProvider.tsx Co-authored-by: Olivier Tassinari Signed-off-by: Marija Najdova --- packages/mui-joy/src/styles/CssVarsProvider.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mui-joy/src/styles/CssVarsProvider.tsx b/packages/mui-joy/src/styles/CssVarsProvider.tsx index 9a21b99c68f689..ec25fd66ade574 100644 --- a/packages/mui-joy/src/styles/CssVarsProvider.tsx +++ b/packages/mui-joy/src/styles/CssVarsProvider.tsx @@ -34,6 +34,7 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssV { clone: false }, ); + // TOOD remove this intermediary function call. mergedTheme.unstable_sx = function sx(props: SxProps) { return styleFunctionSx({ sx: props, theme: this }); }; From d68bbe64494be708e0002d811868086b319a885c Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 1 Dec 2022 13:24:19 +0100 Subject: [PATCH 38/46] Update packages/mui-system/src/styleFunctionSx/styleFunctionSx.js Co-authored-by: Olivier Tassinari Signed-off-by: Marija Najdova --- packages/mui-system/src/styleFunctionSx/styleFunctionSx.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js index 81f71593081fb6..c675671f7abc0b 100644 --- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js +++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js @@ -76,11 +76,7 @@ export function unstable_createStyleFunctionSx() { return null; // Emotion & styled-components will neglect null } - let config = defaultSxConfig; - - if (theme.unstable_sxConfig) { - config = theme.unstable_sxConfig; - } + const config = theme.unstable_sxConfig ?? defaultSxConfig; /* * Receive `sxInput` as object or callback From 80a221f30278558c1f045360ad626f3b5fae1440 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 1 Dec 2022 13:25:08 +0100 Subject: [PATCH 39/46] Update docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx Co-authored-by: Olivier Tassinari Signed-off-by: Marija Najdova --- .../experimental-api/extend-sx-prop/ExtendTheSxProp.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx b/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx index 8c58a6ac5bb32f..a49eb28068c38b 100644 --- a/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx +++ b/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx @@ -6,10 +6,10 @@ const theme = createTheme({ // You can now use the background key in sx // by providing direct values from the palette background: { - themeKey: 'palette', + themeKey: 'colour', }, }, - palette: { + colour: { primary: { main: '#007FFF', contrastText: '#FFFFFF', From c0ffabae6ad07aa1b660b362cf6d5ab3a1bd70cb Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 1 Dec 2022 13:25:19 +0100 Subject: [PATCH 40/46] Update docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx Co-authored-by: Olivier Tassinari Signed-off-by: Marija Najdova --- .../extend-sx-prop/ChangeTheBehaviorSxProp.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx b/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx index d1870cf10bba84..a1aea7e3287a2f 100644 --- a/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx +++ b/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx @@ -27,8 +27,8 @@ const theme = createTheme({ export default function ExtendSxProp() { return ( - - + + sm border radius From e42d74c7dfeaa5bc4ec3338f438de74426fa0a63 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 1 Dec 2022 13:27:06 +0100 Subject: [PATCH 41/46] Update docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx Co-authored-by: Olivier Tassinari Signed-off-by: Marija Najdova --- .../experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx b/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx index a1aea7e3287a2f..4d8e3c1b78e8f9 100644 --- a/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx +++ b/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx @@ -25,7 +25,7 @@ const theme = createTheme({ }, }); -export default function ExtendSxProp() { +export default function ChangeTheBehaviorSxProp() { return ( From 75b5374ee1173464c1f4c2899690dc508c7770ac Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 1 Dec 2022 13:57:06 +0100 Subject: [PATCH 42/46] Address review comments --- .../theme-components/theme-components.md | 20 +++++----- .../ChangeTheBehaviorSxProp.js | 31 ++++++++++++++++ .../ChangeTheBehaviorSxProp.tsx | 16 +++----- .../ChangeTheBehaviorSxProp.tsx.preview | 5 +++ .../configure-the-sx-prop/ExtendTheSxProp.js | 37 +++++++++++++++++++ .../configure-the-sx-prop/ExtendTheSxProp.tsx | 37 +++++++++++++++++++ .../ExtendTheSxProp.tsx.preview | 8 ++++ .../configure-the-sx-prop.md} | 4 +- .../extend-sx-prop/ChangeTheBehaviorSxProp.js | 37 ------------------- .../ChangeTheBehaviorSxProp.tsx.preview | 13 ------- .../extend-sx-prop/ExtendTheSxProp.js | 35 ------------------ .../extend-sx-prop/ExtendTheSxProp.tsx | 35 ------------------ .../ExtendTheSxProp.tsx.preview | 12 ------ docs/data/system/pages.ts | 4 +- ...nd-sx-prop.js => configure-the-sx-prop.js} | 2 +- docs/translations/translations.json | 2 +- .../src/styleFunctionSx/defaultSxConfig.js | 28 -------------- 17 files changed, 140 insertions(+), 186 deletions(-) create mode 100644 docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js rename docs/data/system/experimental-api/{extend-sx-prop => configure-the-sx-prop}/ChangeTheBehaviorSxProp.tsx (60%) create mode 100644 docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx.preview create mode 100644 docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.js create mode 100644 docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx create mode 100644 docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx.preview rename docs/data/system/experimental-api/{extend-sx-prop/extend-sx-prop.md => configure-the-sx-prop/configure-the-sx-prop.md} (77%) delete mode 100644 docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.js delete mode 100644 docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx.preview delete mode 100644 docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.js delete mode 100644 docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx delete mode 100644 docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx.preview rename docs/pages/system/experimental-api/{extend-sx-prop.js => configure-the-sx-prop.js} (58%) diff --git a/docs/data/material/customization/theme-components/theme-components.md b/docs/data/material/customization/theme-components/theme-components.md index 188e86cabd1683..046c1c85dce85a 100644 --- a/docs/data/material/customization/theme-components/theme-components.md +++ b/docs/data/material/customization/theme-components/theme-components.md @@ -116,18 +116,20 @@ const finalTheme = createTheme({ components: { MuiChip: { styleOverrides: { - root: sx({ - px: 1, - py: 0.25, - borderRadius: 1, - }), + root: ({ theme }) => + theme.unstable_sx({ + px: 1, + py: 0.25, + borderRadius: 1, + }), label: { padding: 'initial', }, - icon: sx({ - mr: 0.5, - ml: '-2px', - }), + icon: ({ theme }) => + theme.unstable_sx({ + mr: 0.5, + ml: '-2px', + }), }, }, }, diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js new file mode 100644 index 00000000000000..37efe351afd4a5 --- /dev/null +++ b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js @@ -0,0 +1,31 @@ +import * as React from 'react'; +import { createTheme, ThemeProvider, Box, Stack } from '@mui/system'; + +// Retain type safety. + +const theme = createTheme({ + unstable_sxConfig: { + // You can now use the background key in sx + // by providing direct values from the palette + borderRadius: { + themeKey: 'shape', + }, + }, + shape: { + sm: 4, + md: 8, + lg: 12, + }, +}); + +export default function ChangeTheBehaviorSxProp() { + return ( + + + + + + + + ); +} diff --git a/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx similarity index 60% rename from docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx rename to docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx index 4d8e3c1b78e8f9..eb0477a69f2a34 100644 --- a/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx +++ b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx @@ -29,16 +29,10 @@ export default function ChangeTheBehaviorSxProp() { return ( - - sm border radius - - - md border radius - - - lg border radius - - - + + + + + ); } diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx.preview b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx.preview new file mode 100644 index 00000000000000..563ab3ef514f8b --- /dev/null +++ b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx.preview @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.js b/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.js new file mode 100644 index 00000000000000..d85493343de541 --- /dev/null +++ b/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.js @@ -0,0 +1,37 @@ +import * as React from 'react'; +import { createTheme, ThemeProvider, Box, handleBreakpoints } from '@mui/system'; + +const theme = createTheme({ + unstable_sxConfig: { + size: { + style: (props) => { + const { size, theme } = props; + + const styleFromPropValue = (propValueFinal) => { + const value = theme.spacing(propValueFinal); + + return { + width: value, + height: value, + }; + }; + + // Adding support for the breakpoints syntax + return handleBreakpoints(props, size, styleFromPropValue); + }, + }, + }, +}); + +export default function ExtendSxProp() { + return ( + + + + ); +} diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx b/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx new file mode 100644 index 00000000000000..5d11cd0adc3c2b --- /dev/null +++ b/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import { createTheme, ThemeProvider, Box, handleBreakpoints } from '@mui/system'; + +const theme = createTheme({ + unstable_sxConfig: { + size: { + style: (props) => { + const { size, theme } = props; + + const styleFromPropValue = (propValueFinal: number) => { + const value = theme.spacing(propValueFinal); + + return { + width: value, + height: value, + }; + }; + + // Adding support for the breakpoints syntax + return handleBreakpoints(props, size, styleFromPropValue); + }, + }, + }, +}); + +export default function ExtendSxProp() { + return ( + + + + ); +} diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx.preview b/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx.preview new file mode 100644 index 00000000000000..a591ed133aa0cf --- /dev/null +++ b/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx.preview @@ -0,0 +1,8 @@ + + + \ No newline at end of file diff --git a/docs/data/system/experimental-api/extend-sx-prop/extend-sx-prop.md b/docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md similarity index 77% rename from docs/data/system/experimental-api/extend-sx-prop/extend-sx-prop.md rename to docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md index bad2f83929fc1a..26c240f16bf7a9 100644 --- a/docs/data/system/experimental-api/extend-sx-prop/extend-sx-prop.md +++ b/docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md @@ -1,4 +1,4 @@ -# Extend the sx prop +# Configure the sx prop

Learn about the experimental API for extending or changing the behavior of the sx prop.

@@ -10,7 +10,7 @@ You can add new keys to be processed by the `sx` prop by extending the `unstable ## Override existing behavior -There is also a possibility to change some of the existing behavior. You can simply provide a custom config in the for the specific key. +There is also a possibility to change some of the existing behavior. For example, in some design systems, the border radiuses need to be restricted to specific values, instead of allowing any number to be used, as it is done by default in the MUI System. You can change this behavior, by providing a custom config for the `borderRadius` property: {{"demo": "ChangeTheBehaviorSxProp.js" }} diff --git a/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.js b/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.js deleted file mode 100644 index 591db7f83934ec..00000000000000 --- a/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.js +++ /dev/null @@ -1,37 +0,0 @@ -import * as React from 'react'; -import { createTheme, ThemeProvider, Box, Stack } from '@mui/system'; - -// Retain type safety. - -const theme = createTheme({ - unstable_sxConfig: { - // You can now use the background key in sx - // by providing direct values from the palette - borderRadius: { - themeKey: 'shape', - }, - }, - shape: { - sm: 4, - md: 8, - lg: 12, - }, -}); - -export default function ExtendSxProp() { - return ( - - - - sm border radius - - - md border radius - - - lg border radius - - - - ); -} diff --git a/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx.preview b/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx.preview deleted file mode 100644 index 3fe54dbfee4d0f..00000000000000 --- a/docs/data/system/experimental-api/extend-sx-prop/ChangeTheBehaviorSxProp.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - - - - sm border radius - - - md border radius - - - lg border radius - - - \ No newline at end of file diff --git a/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.js b/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.js deleted file mode 100644 index 8c58a6ac5bb32f..00000000000000 --- a/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.js +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; -import { createTheme, ThemeProvider, Box } from '@mui/system'; - -const theme = createTheme({ - unstable_sxConfig: { - // You can now use the background key in sx - // by providing direct values from the palette - background: { - themeKey: 'palette', - }, - }, - palette: { - primary: { - main: '#007FFF', - contrastText: '#FFFFFF', - }, - }, -}); - -export default function ExtendSxProp() { - return ( - - - Primary main background - - - ); -} diff --git a/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx b/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx deleted file mode 100644 index a49eb28068c38b..00000000000000 --- a/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; -import { createTheme, ThemeProvider, Box } from '@mui/system'; - -const theme = createTheme({ - unstable_sxConfig: { - // You can now use the background key in sx - // by providing direct values from the palette - background: { - themeKey: 'colour', - }, - }, - colour: { - primary: { - main: '#007FFF', - contrastText: '#FFFFFF', - }, - }, -}); - -export default function ExtendSxProp() { - return ( - - - Primary main background - - - ); -} diff --git a/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx.preview b/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx.preview deleted file mode 100644 index f69e5ef3c1c0f0..00000000000000 --- a/docs/data/system/experimental-api/extend-sx-prop/ExtendTheSxProp.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - - Primary main background - - \ No newline at end of file diff --git a/docs/data/system/pages.ts b/docs/data/system/pages.ts index ec87a2933143c0..73e526dcf956a3 100644 --- a/docs/data/system/pages.ts +++ b/docs/data/system/pages.ts @@ -69,8 +69,8 @@ const pages = [ icon: 'ExperimentIcon', children: [ { - pathname: '/system/experimental-api/extend-sx-prop', - title: 'Extend the `sx` prop', + pathname: '/system/experimental-api/configure-the-sx-prop', + title: 'Configure the `sx` prop', }, ], }, diff --git a/docs/pages/system/experimental-api/extend-sx-prop.js b/docs/pages/system/experimental-api/configure-the-sx-prop.js similarity index 58% rename from docs/pages/system/experimental-api/extend-sx-prop.js rename to docs/pages/system/experimental-api/configure-the-sx-prop.js index 834f55e4157508..45c27611cde73e 100644 --- a/docs/pages/system/experimental-api/extend-sx-prop.js +++ b/docs/pages/system/experimental-api/configure-the-sx-prop.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/experimental-api/extend-sx-prop/extend-sx-prop.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md?@mui/markdown'; export default function Page() { return ; diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 8e6ad988386491..fbb75728ebc1ba 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -187,7 +187,7 @@ "/system/react-grid": "Grid", "/system/react-stack": "Stack", "/system/experimental-api": "Experimental APIs", - "/system/experimental-api/extend-sx-prop": "Extend the `sx` prop", + "/system/experimental-api/configure-the-sx-prop": "Configure the `sx` prop", "/system/styles": "Styles", "/system/styles/basics": "Basics", "/system/styles/advanced": "Advanced", diff --git a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js index 61594fd65a161a..44dac0bc9a4c34 100644 --- a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js +++ b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.js @@ -281,34 +281,6 @@ const defaultSxConfig = { minHeight: { transform: sizingTransform, }, - size: { - style: (props) => { - const { size } = props; - // no mapping - const themeMapping = {}; - - const styleFromPropValue = (propValueFinal) => { - let value = getValue({ themeMapping }, sizingTransform, propValueFinal); - - if (propValueFinal === value && typeof propValueFinal === 'string') { - // Haven't found value - value = getValue( - themeMapping, - sizingTransform, - `size${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, - propValueFinal, - ); - } - - return { - width: value, - height: value, - }; - }; - - return handleBreakpoints(props, size, styleFromPropValue); - }, - }, boxSizing: {}, // typography From 37c6b59a02e0af2c828b90d11849671f3da19c0f Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 1 Dec 2022 15:12:12 +0100 Subject: [PATCH 43/46] lint issues --- .../experimental-api/configure-the-sx-prop/ExtendTheSxProp.js | 4 ++-- .../configure-the-sx-prop/ExtendTheSxProp.tsx | 4 ++-- docs/data/system/pages.ts | 2 +- docs/translations/translations.json | 2 +- packages/mui-system/src/styleFunctionSx/defaultSxConfig.js | 3 --- 5 files changed, 6 insertions(+), 9 deletions(-) diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.js b/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.js index d85493343de541..2b96d7f2a88f43 100644 --- a/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.js +++ b/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { createTheme, ThemeProvider, Box, handleBreakpoints } from '@mui/system'; -const theme = createTheme({ +const customTheme = createTheme({ unstable_sxConfig: { size: { style: (props) => { @@ -25,7 +25,7 @@ const theme = createTheme({ export default function ExtendSxProp() { return ( - + { @@ -25,7 +25,7 @@ const theme = createTheme({ export default function ExtendSxProp() { return ( - + Date: Thu, 1 Dec 2022 15:44:33 +0100 Subject: [PATCH 44/46] types --- .../configure-the-sx-prop/ExtendTheSxProp.tsx.preview | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx.preview b/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx.preview index a591ed133aa0cf..4ca9079ae6b641 100644 --- a/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx.preview +++ b/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx.preview @@ -1,4 +1,4 @@ - + Date: Wed, 7 Dec 2022 07:48:55 +0100 Subject: [PATCH 45/46] Update docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Signed-off-by: Marija Najdova --- .../configure-the-sx-prop/configure-the-sx-prop.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md b/docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md index 26c240f16bf7a9..28984c1fbbefb1 100644 --- a/docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md +++ b/docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md @@ -10,7 +10,9 @@ You can add new keys to be processed by the `sx` prop by extending the `unstable ## Override existing behavior -There is also a possibility to change some of the existing behavior. For example, in some design systems, the border radiuses need to be restricted to specific values, instead of allowing any number to be used, as it is done by default in the MUI System. You can change this behavior, by providing a custom config for the `borderRadius` property: +It is also possible to change some of the existing behavior of the `sx` prop. +For example, in some design systems, the border radiuses need to be restricted to specific values, instead of allowing any number to be used—as is the default with MUI System. +You can change this behavior by providing a custom config for the `borderRadius` property: {{"demo": "ChangeTheBehaviorSxProp.js" }} From cdd96c961b99c467080cb6ed0373c25319843e9b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 7 Dec 2022 07:53:22 +0100 Subject: [PATCH 46/46] prettier --- .../configure-the-sx-prop/configure-the-sx-prop.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md b/docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md index 28984c1fbbefb1..1e80481d137ec6 100644 --- a/docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md +++ b/docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md @@ -10,8 +10,8 @@ You can add new keys to be processed by the `sx` prop by extending the `unstable ## Override existing behavior -It is also possible to change some of the existing behavior of the `sx` prop. -For example, in some design systems, the border radiuses need to be restricted to specific values, instead of allowing any number to be used—as is the default with MUI System. +It is also possible to change some of the existing behavior of the `sx` prop. +For example, in some design systems, the border radiuses need to be restricted to specific values, instead of allowing any number to be used—as is the default with MUI System. You can change this behavior by providing a custom config for the `borderRadius` property: {{"demo": "ChangeTheBehaviorSxProp.js" }}