From 312270bc71224067e1910bbee9f800b4a2469cc7 Mon Sep 17 00:00:00 2001 From: David Cnoops Date: Fri, 23 Jun 2023 15:56:51 +0200 Subject: [PATCH 01/33] 5.13.6 (#37686) Signed-off-by: David Cnoops Co-authored-by: Marija Najdova --- CHANGELOG.md | 81 +++++++++++++++++++++++ benchmark/package.json | 4 +- docs/package.json | 12 ++-- package.json | 2 +- packages/mui-base/package.json | 4 +- packages/mui-docs/package.json | 4 +- packages/mui-joy/package.json | 8 +-- packages/mui-lab/package.json | 6 +- packages/mui-material-next/package.json | 10 +-- packages/mui-material/package.json | 8 +-- packages/mui-private-theming/package.json | 2 +- packages/mui-styles/package.json | 2 +- packages/mui-system/package.json | 4 +- packages/mui-utils/package.json | 2 +- 14 files changed, 115 insertions(+), 34 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 06d7d11e40acf5..bd75b336d5954d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,86 @@ # [Versions](https://mui.com/versions/) +## 5.13.6 + +_Jun 21, 2023_ + +A big thanks to the 25 contributors who made this release possible. Here are some highlights ✨: + +- 💫 Added [Slider](https://mui.com/material-ui/react-slider/#material-you-version) component using the new Material You design language (#37520) @DiegoAndai. +- 📚 Added [examples](https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts) showcasing how you can use Material UI with next.js's app directory (#37315) @smo043 + +### `@mui/material@5.13.6` + +- ​[Autocomplete] Fixed autocomplete's existing option selection (#37012) @bencevoros +- ​[Autocomplete] Add hint demos to Material UI and Joy UI docs (#37496) @sai6855 +- ​[Masonry] Fix ResizeObserver loop limit exceeded error (#37208) @hbjORbj +- ​[Tooltip][material] Improve warning when Tooltip receives string child (#37530) @DiegoAndai +- ​[Modal] Add missing members to ModalOwnProps (#37568) @ivp-dev +- ​[Slider] Arrow keys control does not work with float numbers (#37071) @gitstart +- ​[SvgIcon] allow `svg` as a child (#37231) @siriwatknp +- ​[Timeline] Add alternate reverse position (#37311) @abhinavkmrru +- ​[Tooltip] Fix type of sx prop in `slotProps` (#37550) @SuperKXT +- ​[TouchRipple] perf: avoid calling `clearTimeout()` (#37512) @romgrk + +### `@mui/material-next@6.0.0-alpha.90` + +- ​[Material You] Add Slider component with Material You design (#37520) @DiegoAndai + +### `@mui/joy@5.0.0-alpha.85` + +- ​[ButtonGroup][joy] Missing border when spacing is more than zero (#37577) @siriwatknp +- ​[CardActions][joy] Add `CardActions` component (#37441) @siriwatknp +- ​[Menu][joy] Fix closing of `Menu` in demos (#36917) @sai6855 + +### `@mui/base@5.0.0-beta.5` + +- ​[Menu][base] Add the resetHighlight action (#37392) @michaldudak +- ​[Select][base] Expose the `areOptionsEqual` prop (#37615) @michaldudak + +### `@mui/utils@5.13.2` + +- ​[utils] Allow nested imports in @mui/utils to speed up build (#37586) @flaviendelangle + +### Docs + +- ​[docs][base] Improve Base UI all components images (#37590) @danilo-leal +- ​[docs][base] Add pages for coming soon components (#37575) @danilo-leal +- ​[docs][base] Add a Snackbar introduction demo (#37602) @danilo-leal +- ​[docs][base] Add page for all Base UI components (#37536) @danilo-leal +- ​[docs] Fix scrollbar on snackbar page (#37657) @oliviertassinari +- ​[docs] Switch order of snackbar buttons in demos (#37389) @Primajin +- ​[docs] Add support for Tailwind CSS and plain CSS demos (#37319) @mnajdova +- ​[docs] Tree view color fix for dark mode in Gmail example (#37051) @PunitSoniME +- ​[docs] Inline the Base UI demo (#37603) @oliviertassinari +- ​[docs] Fix typo in themed components page (#37598) @vinayr +- ​[docs] Fix render inline code in CSS description generation (#37448) @alexfauquette +- ​[docs] Add styles to styled argument list (#37558) @DiegoAndai +- ​[docs] Improve awkward wording in READMEs of example projects (#37110) @DIWAKARKASHYAP +- ​[docs] Fix small base -> base-ui migration issue (#37594) @oliviertassinari +- ​[docs] Fix GitHub typo (#37578) @oliviertassinari +- ​[docs] Improve release guide (#37547) @DiegoAndai +- ​[docs] Review fixes to the Material UI's "Example projects" page (#37444) @danilo-leal +- ​[docs][joy] Add a messages template (#37546) @sernstberger +- ​[docs][joy] Add pages for coming soon Joy UI components (#36920) @danilo-leal +- ​[docs][joy] Add design and consistency tweaks to the Playground (#37580) @danilo-leal +- ​[docs] Add and revise Base UI + Create React App examples (#36825) @samuelsycamore +- ​[docs-infra] Fix demos border radius (#37658) @oliviertassinari +- ​[docs-infra] Add analyticsTags to Algolia (#37600) @Janpot +- ​[docs-infra] Simplify product id handling (#37593) @oliviertassinari +- ​[CHANGELOG] Add missing release date for v5.13.5 @oliviertassinari +- ​[examples] Shell command fix in the readme file of material-next-app-router-ts example (#37675) @bablukpik +- ​[examples] Next.js v13 app router with Material UI (#37315) @smo043 + +### Core + +- ​[core] Update to Node.js v18 for `test-dev` CI (#37604) @ZeeshanTamboli +- ​[core] Add priority support issue template (#37671) @DanailH +- ​[website] Update roadmap page (#37587) @cherniavskii +- ​[website] Add CSP to limit iframes to self @oliviertassinari +- ​[website] Link mui-x Stack Overflow in footer link (#37509) @richbustos + +All contributors of this release in alphabetical order: @abhinavkmrru, @alexfauquette, @bencevoros, @cherniavskii, @danilo-leal, @DiegoAndai, @DIWAKARKASHYAP, @flaviendelangle, @gitstart, @hbjORbj, @ivp-dev, @Janpot, @michaldudak, @mnajdova, @oliviertassinari, @Primajin, @PunitSoniME, @richbustos, @romgrk, @sai6855, @sernstberger, @siriwatknp, @SuperKXT, @vinayr, @ZeeshanTamboli + ## 5.13.5 _Jun 12, 2023_ diff --git a/benchmark/package.json b/benchmark/package.json index e5e95c17270ce8..de52a0f4334850 100644 --- a/benchmark/package.json +++ b/benchmark/package.json @@ -15,9 +15,9 @@ "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mdx-js/react": "^2.3.0", - "@mui/material": "^5.13.5", + "@mui/material": "^5.13.6", "@mui/styles": "^5.13.2", - "@mui/system": "^5.13.5", + "@mui/system": "^5.13.6", "@styled-system/css": "^5.1.5", "benchmark": "^2.1.4", "playwright": "^1.35.1", diff --git a/docs/package.json b/docs/package.json index ee73c36205f0e7..7ed941d68647b5 100644 --- a/docs/package.json +++ b/docs/package.json @@ -31,18 +31,18 @@ "@fortawesome/fontawesome-svg-core": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/react-fontawesome": "^0.2.0", - "@mui/base": "5.0.0-beta.4", - "@mui/docs": "^5.12.4", + "@mui/base": "5.0.0-beta.5", + "@mui/docs": "^5.13.6", "@mui/icons-material": "^5.11.16", - "@mui/joy": "5.0.0-alpha.84", + "@mui/joy": "5.0.0-alpha.85", "@mui/lab": "5.0.0-alpha.134", "@mui/markdown": "^5.0.0", - "@mui/material": "^5.13.5", - "@mui/material-next": "6.0.0-alpha.89", + "@mui/material": "^5.13.6", + "@mui/material-next": "6.0.0-alpha.90", "@mui/styled-engine": "^5.13.2", "@mui/styled-engine-sc": "^5.12.0", "@mui/styles": "^5.13.2", - "@mui/system": "^5.13.5", + "@mui/system": "^5.13.6", "@mui/types": "^7.2.4", "@mui/x-data-grid": "6.8.0", "@mui/x-data-grid-generator": "6.8.0", diff --git a/package.json b/package.json index 266d2fc682a336..b818e52816415a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mui/monorepo", - "version": "5.13.5", + "version": "5.13.6", "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 39d5adefffe33f..b418abe09c4b3c 100644 --- a/packages/mui-base/package.json +++ b/packages/mui-base/package.json @@ -1,6 +1,6 @@ { "name": "@mui/base", - "version": "5.0.0-beta.4", + "version": "5.0.0-beta.5", "private": false, "author": "MUI Team", "description": "A library of headless ('unstyled') React UI components and low-level hooks.", @@ -54,7 +54,7 @@ "@babel/runtime": "^7.22.5", "@emotion/is-prop-valid": "^1.2.1", "@mui/types": "^7.2.4", - "@mui/utils": "^5.13.1", + "@mui/utils": "^5.13.6", "@popperjs/core": "^2.11.8", "clsx": "^1.2.1", "prop-types": "^15.8.1", diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json index f8973b8cb2e3ac..38cb75d8a25506 100644 --- a/packages/mui-docs/package.json +++ b/packages/mui-docs/package.json @@ -1,6 +1,6 @@ { "name": "@mui/docs", - "version": "5.12.4", + "version": "5.13.6", "private": false, "author": "MUI Team", "description": "MUI Docs - Documentation building blocks.", @@ -45,7 +45,7 @@ }, "dependencies": { "@babel/runtime": "^7.22.5", - "@mui/utils": "^5.13.1", + "@mui/utils": "^5.13.6", "nprogress": "^0.2.0" }, "publishConfig": { diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json index 5b62f38344b5a3..85fde5d52773d7 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.84", + "version": "5.0.0-alpha.85", "private": false, "author": "MUI Team", "description": "A library of beautifully designed React UI components.", @@ -57,11 +57,11 @@ }, "dependencies": { "@babel/runtime": "^7.22.5", - "@mui/base": "5.0.0-beta.4", + "@mui/base": "5.0.0-beta.5", "@mui/core-downloads-tracker": "^5.13.4", - "@mui/system": "^5.13.5", + "@mui/system": "^5.13.6", "@mui/types": "^7.2.4", - "@mui/utils": "^5.13.1", + "@mui/utils": "^5.13.6", "clsx": "^1.2.1", "csstype": "^3.1.2", "prop-types": "^15.8.1", diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json index 92ab9359342000..6c2696cdbdfbdd 100644 --- a/packages/mui-lab/package.json +++ b/packages/mui-lab/package.json @@ -61,10 +61,10 @@ }, "dependencies": { "@babel/runtime": "^7.22.5", - "@mui/base": "5.0.0-beta.4", - "@mui/system": "^5.13.5", + "@mui/base": "5.0.0-beta.5", + "@mui/system": "^5.13.6", "@mui/types": "^7.2.4", - "@mui/utils": "^5.13.1", + "@mui/utils": "^5.13.6", "clsx": "^1.2.1", "prop-types": "^15.8.1", "react-is": "^18.2.0" diff --git a/packages/mui-material-next/package.json b/packages/mui-material-next/package.json index aca2b85e5863fd..c97bdfa1a8c1e2 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.89", + "version": "6.0.0-alpha.90", "private": false, "author": "MUI Team", "description": "v6-alpha: React components that implement Google's Material Design", @@ -59,11 +59,11 @@ }, "dependencies": { "@babel/runtime": "^7.22.5", - "@mui/base": "5.0.0-beta.4", - "@mui/material": "^5.13.5", - "@mui/system": "^5.13.5", + "@mui/base": "5.0.0-beta.5", + "@mui/material": "^5.13.6", + "@mui/system": "^5.13.6", "@mui/types": "^7.2.4", - "@mui/utils": "^5.13.1", + "@mui/utils": "^5.13.6", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.6", "clsx": "^1.2.1", diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index 6ea5770cca0e54..c10f1a199b6a93 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -1,6 +1,6 @@ { "name": "@mui/material", - "version": "5.13.5", + "version": "5.13.6", "private": false, "author": "MUI Team", "description": "React components that implement Google's Material Design.", @@ -61,11 +61,11 @@ }, "dependencies": { "@babel/runtime": "^7.22.5", - "@mui/base": "5.0.0-beta.4", + "@mui/base": "5.0.0-beta.5", "@mui/core-downloads-tracker": "^5.13.4", - "@mui/system": "^5.13.5", + "@mui/system": "^5.13.6", "@mui/types": "^7.2.4", - "@mui/utils": "^5.13.1", + "@mui/utils": "^5.13.6", "@types/react-transition-group": "^4.4.6", "clsx": "^1.2.1", "csstype": "^3.1.2", diff --git a/packages/mui-private-theming/package.json b/packages/mui-private-theming/package.json index 7f5d1c7b2582c0..958e1e8d6891e0 100644 --- a/packages/mui-private-theming/package.json +++ b/packages/mui-private-theming/package.json @@ -48,7 +48,7 @@ }, "dependencies": { "@babel/runtime": "^7.22.5", - "@mui/utils": "^5.13.1", + "@mui/utils": "^5.13.6", "prop-types": "^15.8.1" }, "sideEffects": false, diff --git a/packages/mui-styles/package.json b/packages/mui-styles/package.json index 5b98120be6bdba..38dbb23a6cd54d 100644 --- a/packages/mui-styles/package.json +++ b/packages/mui-styles/package.json @@ -51,7 +51,7 @@ "@emotion/hash": "^0.9.1", "@mui/private-theming": "^5.13.1", "@mui/types": "^7.2.4", - "@mui/utils": "^5.13.1", + "@mui/utils": "^5.13.6", "clsx": "^1.2.1", "csstype": "^3.1.2", "hoist-non-react-statics": "^3.3.2", diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json index 2ce85ccca229e9..fa3fe691171b03 100644 --- a/packages/mui-system/package.json +++ b/packages/mui-system/package.json @@ -1,6 +1,6 @@ { "name": "@mui/system", - "version": "5.13.5", + "version": "5.13.6", "private": false, "author": "MUI Team", "description": "CSS utilities for rapidly laying out custom designs.", @@ -61,7 +61,7 @@ "@mui/private-theming": "^5.13.1", "@mui/styled-engine": "^5.13.2", "@mui/types": "^7.2.4", - "@mui/utils": "^5.13.1", + "@mui/utils": "^5.13.6", "clsx": "^1.2.1", "csstype": "^3.1.2", "prop-types": "^15.8.1" diff --git a/packages/mui-utils/package.json b/packages/mui-utils/package.json index a95e7efd0d02a8..a4e0ec8bf546af 100644 --- a/packages/mui-utils/package.json +++ b/packages/mui-utils/package.json @@ -1,6 +1,6 @@ { "name": "@mui/utils", - "version": "5.13.1", + "version": "5.13.6", "private": false, "author": "MUI Team", "description": "Utility functions for React components.", From 17165b0996e2c2ef24c61b8d072efbbbff4c6c62 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 23 Jun 2023 12:38:13 -0300 Subject: [PATCH 02/33] [docs-infra] Adjust demo component container design (#37659) Signed-off-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> --- docs/src/modules/components/Demo.js | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index bfb8f157933110..5d46eada56dcbf 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -256,8 +256,10 @@ const DemoRootMaterial = styled('div', { radial-gradient(at 0% 20%, ${ (theme.vars || theme).palette.primary[50] } 0px, transparent 50%), - radial-gradient(at 93% 85%, ${alpha(theme.palette.primary[100], 0.2)} 0px, transparent 50%), - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23003A75' fill-opacity='0.03'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");`, + radial-gradient(at 93% 85%, ${alpha( + theme.palette.primary[100], + 0.2, + )} 0px, transparent 50%);`, ...theme.applyDarkStyles({ borderColor: alpha(theme.palette.primaryDark[500], 0.7), backgroundColor: (theme.vars || theme).palette.primaryDark[800], @@ -274,8 +276,10 @@ const DemoRootMaterial = styled('div', { radial-gradient(at 0% 5%, ${ (theme.vars || theme).palette.primaryDark[700] } 0px, transparent 35%), - radial-gradient(at 93% 85%, ${alpha(theme.palette.primaryDark[500], 0.8)} 0px, transparent 50%), - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23003A75' fill-opacity='0.15'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");`, + radial-gradient(at 93% 85%, ${alpha( + theme.palette.primaryDark[500], + 0.8, + )} 0px, transparent 50%);`, }), }), ...(hiddenToolbar && { @@ -296,6 +300,7 @@ const DemoRootJoy = joyStyled('div', { ...(bg === 'outlined' && { borderLeftWidth: 1, borderRightWidth: 1, + borderRadius: '12px 12px 0 0', }), /* Make no difference between the demo and the markdown. */ ...(bg === 'inline' && { @@ -305,18 +310,15 @@ const DemoRootJoy = joyStyled('div', { /* Isolate the demo with an outline. */ ...(bg === 'outlined' && { padding: theme.spacing(3), + borderRadius: 0, border: `1px solid`, borderColor: grey[100], borderLeftWidth: 0, borderRightWidth: 0, backgroundColor: alpha(grey[50], 0.2), - backgroundImage: ` - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23003A75' fill-opacity='0.03'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");`, ...theme.applyDarkStyles({ borderColor: alpha(grey[700], 0.3), backgroundColor: alpha(blueDark[800], 0.2), - backgroundImage: ` - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23003A75' fill-opacity='0.10'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");`, }), }), /* Prepare the background to display an inner elevation. */ @@ -326,6 +328,10 @@ const DemoRootJoy = joyStyled('div', { }), /* Mostly meant for introduction demos. */ ...(bg === 'gradient' && { + [theme.breakpoints.up('sm')]: { + borderRadius: '12px', + }, + borderRadius: 0, padding: theme.spacing(0), overflow: 'auto', backgroundColor: alpha(blue[50], 0.5), From 2a7ead173909b579d4d5fca021813af1a80bee68 Mon Sep 17 00:00:00 2001 From: Victor Zanivan Monteiro Date: Fri, 23 Jun 2023 15:44:28 -0300 Subject: [PATCH 03/33] [docs][base] Fix horizontal scrolling on the mobile input page (#37688) --- docs/data/base/components/input/InputAdornments.js | 8 +++++++- docs/data/base/components/input/InputAdornments.tsx | 8 +++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/docs/data/base/components/input/InputAdornments.js b/docs/data/base/components/input/InputAdornments.js index 71e3963941b019..3b4b15ccc4022d 100644 --- a/docs/data/base/components/input/InputAdornments.js +++ b/docs/data/base/components/input/InputAdornments.js @@ -60,7 +60,13 @@ export default function InputAdornments() { }; return ( - * + *': { ml: 1 } }}> + kg} diff --git a/docs/data/base/components/input/InputAdornments.tsx b/docs/data/base/components/input/InputAdornments.tsx index 808931cc4476d6..2def0819b334f4 100644 --- a/docs/data/base/components/input/InputAdornments.tsx +++ b/docs/data/base/components/input/InputAdornments.tsx @@ -58,7 +58,13 @@ export default function InputAdornments() { }; return ( - * + *': { ml: 1 } }}> + kg} From 9340efd2c55554b116ab4721f8749f20df7fa1ac Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Fri, 23 Jun 2023 20:47:40 +0200 Subject: [PATCH 04/33] [docs] Shorten overview page URLs (#37660) --- CHANGELOG.md | 8 ++++---- README.md | 16 ++++++++-------- .../customization/customization.md | 2 +- .../base/getting-started/overview/overview-pt.md | 4 ++-- .../base/getting-started/overview/overview-zh.md | 4 ++-- .../base/getting-started/overview/overview.md | 4 ++-- .../getting-started/quickstart/quickstart.md | 2 +- docs/data/base/pages.ts | 5 +++-- .../joy/getting-started/overview/overview-pt.md | 2 +- .../joy/getting-started/overview/overview-zh.md | 2 +- .../joy/getting-started/overview/overview.md | 2 +- .../using-joy-ui-and-material-ui-pt.md | 2 +- .../using-joy-ui-and-material-ui-zh.md | 2 +- .../using-joy-ui-and-material-ui.md | 2 +- docs/data/joy/pages.ts | 5 +++-- .../click-away-listener/click-away-listener.md | 2 +- docs/data/material/components/no-ssr/no-ssr.md | 2 +- docs/data/material/components/portal/portal.md | 2 +- .../textarea-autosize/textarea-autosize.md | 2 +- .../material/customization/theming/theming-pt.md | 2 +- .../material/customization/theming/theming-zh.md | 2 +- .../material/customization/theming/theming.md | 2 +- .../getting-started/overview/overview-pt.md | 2 +- .../getting-started/overview/overview-zh.md | 2 +- .../getting-started/overview/overview.md | 2 +- .../understand-mui-packages-pt.md | 2 +- .../understand-mui-packages-zh.md | 2 +- .../understand-mui-packages.md | 2 +- docs/data/material/pages.ts | 5 +++-- docs/data/styles/advanced/advanced-pt.md | 2 +- docs/data/styles/advanced/advanced-zh.md | 2 +- docs/data/styles/advanced/advanced.md | 2 +- docs/data/styles/api/api-pt.md | 2 +- docs/data/styles/api/api-zh.md | 2 +- docs/data/styles/api/api.md | 2 +- docs/data/styles/basics/basics-pt.md | 2 +- docs/data/styles/basics/basics-zh.md | 2 +- docs/data/styles/basics/basics.md | 2 +- .../getting-started/overview/overview-pt.md | 4 ++-- .../getting-started/overview/overview-zh.md | 4 ++-- .../system/getting-started/overview/overview.md | 4 ++-- docs/data/system/pages.ts | 5 +++-- .../getting-started/{overview.js => index.js} | 0 docs/pages/blog/2021.md | 2 +- docs/pages/blog/docs-restructure-2022.md | 6 +++--- docs/pages/blog/first-look-at-joy.md | 2 +- docs/pages/blog/introducing-mui-base.md | 8 ++++---- .../pages/blog/making-customizable-components.md | 2 +- docs/pages/blog/material-ui-is-now-mui.md | 2 +- docs/pages/blog/mui-core-v5.md | 2 +- docs/pages/blog/mui-product-comparison.md | 8 ++++---- .../getting-started/{overview.js => index.js} | 0 .../getting-started/{overview.js => index.js} | 0 .../getting-started/{overview.js => index.js} | 0 docs/public/_redirects | 14 ++++++++------ docs/src/modules/components/AppSearch.js | 2 +- .../modules/utils/getProductInfoFromUrl.test.js | 4 +--- docs/src/pages/careers/designer.md | 4 ++-- docs/src/route.ts | 10 +++++----- docs/translations/translations.json | 16 ++++++++-------- examples/base-cra-ts/README.md | 2 +- packages/markdown/parseMarkdown.js | 2 +- packages/mui-base/README.md | 2 +- packages/mui-base/package.json | 2 +- packages/mui-joy/README.md | 2 +- packages/mui-material-next/package.json | 2 +- packages/mui-material/package.json | 2 +- packages/mui-system/README.md | 2 +- packages/mui-system/package.json | 2 +- test/e2e-website/products-drawer.spec.ts | 2 +- 70 files changed, 117 insertions(+), 113 deletions(-) rename docs/pages/base-ui/getting-started/{overview.js => index.js} (100%) rename docs/pages/joy-ui/getting-started/{overview.js => index.js} (100%) rename docs/pages/material-ui/getting-started/{overview.js => index.js} (100%) rename docs/pages/system/getting-started/{overview.js => index.js} (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index bd75b336d5954d..d12a21ee892c35 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9858,7 +9858,7 @@ A big thanks to the 34 contributors who made this release possible. Here are som While the source code is currently hosted in the [main repository](https://github.com/mui/material-ui), we might move it to the [x repository](https://github.com/mui/mui-x) in the future, depending on what is easier for the commercial date range picker. The date picker will stay open source no matter what. -- 📚 Revamp the documentation for [the system](https://mui.com/system/getting-started/overview/). The System contains CSS utilities. The documentation now promotes the use of the `sx` prop. It's ideal for adding one-off styles, e.g. padding, but when pushed to its limits, it can be used to implement quickly a complete page. +- 📚 Revamp the documentation for [the system](https://mui.com/system/getting-started/). The System contains CSS utilities. The documentation now promotes the use of the `sx` prop. It's ideal for adding one-off styles, e.g. padding, but when pushed to its limits, it can be used to implement quickly a complete page. - 👩‍🎨 Upgrade emotion to v11 (#23007) @mnajdova. - And many more 🐛 bug fixes and 📚 improvements. @@ -10260,7 +10260,7 @@ Here are some highlights ✨: If you target IE11, you need to use the new bundle (`legacy`). We are treating IE11 as a second class-citizen, which is a continuation of the direction taken in #22873. - 🚀 Improve the internal benchmark suite (#22923, #23058) @mnajdova. - This was a prerequisite step to improve the [system](https://mui.com/system/getting-started/overview/). We needed to be able to measure performance. After #22945, we have measured that the `Box` component is x3 faster in v5-alpha compared to v4. + This was a prerequisite step to improve the [system](https://mui.com/system/getting-started/). We needed to be able to measure performance. After #22945, we have measured that the `Box` component is x3 faster in v5-alpha compared to v4. - ✏️ A new blog post: [Q3 2020 Update](https://mui.com/blog/2020-q3-update/) (#23055) @oliviertassinari. - 🐙 Migrate more tests to react-testing-library @deiga, @Morteza-Jenabzadeh, @nicholas-l. - And many more 🐛 bug fixes and 📚 improvements. @@ -10601,7 +10601,7 @@ Here are some highlights ✨: The new styling solution saves 2kB gzipped in the bundle compared to JSS, and about 14 kB gzipped if you were already using emotion or styled-components. - Last but not least, the change allows us to take advantage dynamic style props. We will use them for dynamic color props, variant props, and new style props (an improved [system](https://mui.com/system/getting-started/overview/)). + Last but not least, the change allows us to take advantage dynamic style props. We will use them for dynamic color props, variant props, and new style props (an improved [system](https://mui.com/system/getting-started/)). This change has been in our roadmap for more than a year. We announced it in the [v4 release blog post](https://mui.com/blog/material-ui-v4-is-out/) as a direction v5 would take. @@ -11854,7 +11854,7 @@ A big thanks to the 33 contributors who made this release possible. Here are som /> ``` -- [Typography] Replace the `srOnly` prop so as to not duplicate the capabilities of [System](https://mui.com/system/getting-started/overview/) (#21413) @mnajdova. +- [Typography] Replace the `srOnly` prop so as to not duplicate the capabilities of [System](https://mui.com/system/getting-started/) (#21413) @mnajdova. ```diff -import Typography from '@material-ui/core/Typography'; diff --git a/README.md b/README.md index 9f1e3586302996..611bade828522e 100644 --- a/README.md +++ b/README.md @@ -7,13 +7,13 @@ **MUI Core** contains foundational React UI component libraries for shipping new features faster. -- [_Material UI_](https://mui.com/material-ui/getting-started/overview/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://m2.material.io/design/introduction/) system. +- [_Material UI_](https://mui.com/material-ui/getting-started/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://m2.material.io/design/introduction/) system. -- [_Joy UI_](https://mui.com/joy-ui/getting-started/overview/) is a beautifully designed library of React UI components. +- [_Joy UI_](https://mui.com/joy-ui/getting-started/) is a beautifully designed library of React UI components. -- [_Base UI_](https://mui.com/base-ui/getting-started/overview/) is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features. +- [_Base UI_](https://mui.com/base-ui/getting-started/) is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features. -- [_MUI System_](https://mui.com/system/getting-started/overview/) is a collection of CSS utilities to help you rapidly lay out custom designs. +- [_MUI System_](https://mui.com/system/getting-started/) is a collection of CSS utilities to help you rapidly lay out custom designs.
@@ -177,10 +177,10 @@ Our documentation features [a collection of example projects using Material UI]( ## Documentation -- [Material UI](https://mui.com/material-ui/getting-started/overview/) -- [Joy UI](https://mui.com/joy-ui/getting-started/overview/) -- [Base UI](https://mui.com/base-ui/getting-started/overview/) -- [MUI System](https://mui.com/system/getting-started/overview/) +- [Material UI](https://mui.com/material-ui/getting-started/) +- [Joy UI](https://mui.com/joy-ui/getting-started/) +- [Base UI](https://mui.com/base-ui/getting-started/) +- [MUI System](https://mui.com/system/getting-started/) ## Premium themes diff --git a/docs/data/base/getting-started/customization/customization.md b/docs/data/base/getting-started/customization/customization.md index 3714f3b5b06ead..ddf03248968a56 100644 --- a/docs/data/base/getting-started/customization/customization.md +++ b/docs/data/base/getting-started/customization/customization.md @@ -84,7 +84,7 @@ See our [Working with Tailwind CSS guide](/base-ui/guides/working-with-tailwind- #### Styled components -If you use a CSS-in-JS solution with a styled-components-like API (such as [MUI System](/system/getting-started/overview/) or [Emotion](https://emotion.sh/docs/introduction)), the best method is to provide the styled subcomponents using the [`slots` prop](#overriding-subcomponent-slots), as shown in the [demo below](#overriding-subcomponent-slots). +If you use a CSS-in-JS solution with a styled-components-like API (such as [MUI System](/system/getting-started/) or [Emotion](https://emotion.sh/docs/introduction)), the best method is to provide the styled subcomponents using the [`slots` prop](#overriding-subcomponent-slots), as shown in the [demo below](#overriding-subcomponent-slots). Alternatively, you can wrap the whole unstyled component in a `styled` utility and target the individual subcomponents using CSS classes: diff --git a/docs/data/base/getting-started/overview/overview-pt.md b/docs/data/base/getting-started/overview/overview-pt.md index b28aca05b66d94..9fdaba2f181fa8 100644 --- a/docs/data/base/getting-started/overview/overview-pt.md +++ b/docs/data/base/getting-started/overview/overview-pt.md @@ -8,7 +8,7 @@ title: Overview ## Introduction -Base UI is a library of unstyled React UI components. These components were extracted from [Material UI](/material-ui/getting-started/overview/), and are now available as a standalone package. They feature the same robust engineering but without implementing Material Design. +Base UI is a library of unstyled React UI components. These components were extracted from [Material UI](/material-ui/getting-started/), and are now available as a standalone package. They feature the same robust engineering but without implementing Material Design. Base UI includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. @@ -30,7 +30,7 @@ Look for the [`package: base`](https://github.com/mui/material-ui/labels/package ## Base UI vs. Material UI -Base UI features many of the same components as [Material UI](/material-ui/getting-started/overview/), but without the Material Design implementation. +Base UI features many of the same components as [Material UI](/material-ui/getting-started/), but without the Material Design implementation. Base UI is not packaged with any default theme or built-in style engine. This makes it a great choice if you need complete control over how your app's CSS is implemented. diff --git a/docs/data/base/getting-started/overview/overview-zh.md b/docs/data/base/getting-started/overview/overview-zh.md index b28aca05b66d94..9fdaba2f181fa8 100644 --- a/docs/data/base/getting-started/overview/overview-zh.md +++ b/docs/data/base/getting-started/overview/overview-zh.md @@ -8,7 +8,7 @@ title: Overview ## Introduction -Base UI is a library of unstyled React UI components. These components were extracted from [Material UI](/material-ui/getting-started/overview/), and are now available as a standalone package. They feature the same robust engineering but without implementing Material Design. +Base UI is a library of unstyled React UI components. These components were extracted from [Material UI](/material-ui/getting-started/), and are now available as a standalone package. They feature the same robust engineering but without implementing Material Design. Base UI includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. @@ -30,7 +30,7 @@ Look for the [`package: base`](https://github.com/mui/material-ui/labels/package ## Base UI vs. Material UI -Base UI features many of the same components as [Material UI](/material-ui/getting-started/overview/), but without the Material Design implementation. +Base UI features many of the same components as [Material UI](/material-ui/getting-started/), but without the Material Design implementation. Base UI is not packaged with any default theme or built-in style engine. This makes it a great choice if you need complete control over how your app's CSS is implemented. diff --git a/docs/data/base/getting-started/overview/overview.md b/docs/data/base/getting-started/overview/overview.md index 60e01fd62d5419..9f10b2b5574383 100644 --- a/docs/data/base/getting-started/overview/overview.md +++ b/docs/data/base/getting-started/overview/overview.md @@ -9,7 +9,7 @@ title: Overview ## Introduction Base UI is a library of unstyled React UI components and low-level hooks. -These components were extracted from [Material UI](/material-ui/getting-started/overview/), and are now available as a standalone package. +These components were extracted from [Material UI](/material-ui/getting-started/), and are now available as a standalone package. They feature the same robust engineering but without implementing Material Design. Base UI includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. @@ -34,7 +34,7 @@ Look for the [`package: base-ui`](https://github.com/mui/material-ui/labels/pack ## Base UI vs. Material UI -Base UI features many of the same components as [Material UI](/material-ui/getting-started/overview/), but without the Material Design implementation. +Base UI features many of the same components as [Material UI](/material-ui/getting-started/), but without the Material Design implementation. Base UI is not packaged with any default theme or built-in style engine. This makes it a great choice if you need complete control over how your app's CSS is implemented. diff --git a/docs/data/base/getting-started/quickstart/quickstart.md b/docs/data/base/getting-started/quickstart/quickstart.md index c3f5fdb3c9da95..e4f5f7eb614bf4 100644 --- a/docs/data/base/getting-started/quickstart/quickstart.md +++ b/docs/data/base/getting-started/quickstart/quickstart.md @@ -132,7 +132,7 @@ The demo below shows how to build the Primer button using Tailwind CSS: ### Styling with MUI System -[MUI System](/system/getting-started/overview/) is a small set of CSS utilties that provide a styled-components-like API for building out designs that adhere to a theme. +[MUI System](/system/getting-started/) is a small set of CSS utilties that provide a styled-components-like API for building out designs that adhere to a theme. MUI System's core utility is a [`styled` function](/system/styled/) that's equivalent to the `styled()` function in emotion and styled-components. Interpolations or arguments that are functions called by `styled` receive the `theme` from an upper `ThemeProvider`. diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts index 94bd97f26415c2..22ee40931f1923 100644 --- a/docs/data/base/pages.ts +++ b/docs/data/base/pages.ts @@ -3,10 +3,11 @@ import pagesApi from 'docs/data/base/pagesApi'; const pages = [ { - pathname: '/base-ui/getting-started', + pathname: '/base-ui/getting-started-group', + title: 'Getting started', icon: standardNavIcons.DescriptionIcon, children: [ - { pathname: '/base-ui/getting-started/overview', title: 'Overview' }, + { pathname: '/base-ui/getting-started', title: 'Overview' }, { pathname: '/base-ui/getting-started/quickstart', title: 'Quickstart' }, { pathname: '/base-ui/getting-started/usage', title: 'Usage' }, { pathname: '/base-ui/getting-started/customization', title: 'Customization' }, diff --git a/docs/data/joy/getting-started/overview/overview-pt.md b/docs/data/joy/getting-started/overview/overview-pt.md index 042aeaf66b8ddf..0699dd59bbd4d5 100644 --- a/docs/data/joy/getting-started/overview/overview-pt.md +++ b/docs/data/joy/getting-started/overview/overview-pt.md @@ -20,7 +20,7 @@ Look for the [`package: joy`](https://github.com/mui/material-ui/labels/package% - **Ship faster:** Joy UI gives you a significant amount of prebuilt components you need to develop web apps, with a sleek and carefully designed look and feel, allowing you to achieve a good-looking result without a dedicated designer. - **Extensive customization:** you're encouraged to customize each and every tiny piece of the Joy UI components so they match your desired design. -- **Accessibility in mind:** Joy UI components are built on top of [Base UI's unstyled components and low-level hooks](/base-ui/getting-started/overview/), giving you support for several accessibility features out of the box. We do our best to make all components screen reader-friendly, also offering suggestions for optimizing accessibility throughout our documentation. +- **Accessibility in mind:** Joy UI components are built on top of [Base UI's unstyled components and low-level hooks](/base-ui/getting-started/), giving you support for several accessibility features out of the box. We do our best to make all components screen reader-friendly, also offering suggestions for optimizing accessibility throughout our documentation. ## Joy UI vs. Material UI diff --git a/docs/data/joy/getting-started/overview/overview-zh.md b/docs/data/joy/getting-started/overview/overview-zh.md index 3a730fabaa9c63..24a47e75d9627d 100644 --- a/docs/data/joy/getting-started/overview/overview-zh.md +++ b/docs/data/joy/getting-started/overview/overview-zh.md @@ -20,7 +20,7 @@ Look for the [`package: joy`](https://github.com/mui/material-ui/labels/package% - **更快交付：** Joy UI 给了您大量你开发网页应用所需的预定义组件， 圆润而细致的外观感，让你能够在没有设计师的情况下取得很好的结果。 - **深度自定义：** 你可以自定义 Joy UI 每一个小块组件，使得它们符合你的设计风格。 -- **可访问性：** Joy UI 是建立在 [Base UI 的无样式基础组件和低级钩子上](/base-ui/getting-started/overview/)的一套新组件，并给予您开箱即用的一些辅助功能支持。 我们尽最大努力使所有组件对屏幕阅读器友好，同时文档中也提供了无障碍访问的建议。 +- **可访问性：** Joy UI 是建立在 [Base UI 的无样式基础组件和低级钩子上](/base-ui/getting-started/)的一套新组件，并给予您开箱即用的一些辅助功能支持。 我们尽最大努力使所有组件对屏幕阅读器友好，同时文档中也提供了无障碍访问的建议。 ## Joy UI 与 Material UI 对比 diff --git a/docs/data/joy/getting-started/overview/overview.md b/docs/data/joy/getting-started/overview/overview.md index 4f01b2afc60e06..0ad9733b242b85 100644 --- a/docs/data/joy/getting-started/overview/overview.md +++ b/docs/data/joy/getting-started/overview/overview.md @@ -26,7 +26,7 @@ Look for the [`package: joy-ui`](https://github.com/mui/material-ui/labels/packa - **Ship faster:** Joy UI gives you pre-built components with a sleek and carefully designed look and feel, so you don't need design skills to ship beautiful UIs rapidly. - **Extensive customization options:** you can customize each and every tiny piece of Joy UI's components to match your own unique design. -- **Accessibility in mind:** Joy UI components are built on top of [Base UI's unstyled components and low-level hooks](/base-ui/getting-started/overview/), giving you support for many accessibility features out of the box. +- **Accessibility in mind:** Joy UI components are built on top of [Base UI's unstyled components and low-level hooks](/base-ui/getting-started/), giving you support for many accessibility features out of the box. We do our best to make all components screen reader-friendly, and also offer suggestions for optimizing accessibility throughout our documentation. ## Joy UI vs. Material UI diff --git a/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui-pt.md b/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui-pt.md index faef97b29895d0..639843282ec117 100644 --- a/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui-pt.md +++ b/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui-pt.md @@ -15,7 +15,7 @@ There are two main use cases for using them together: Additionally, keep these in mind when using them together: -- Both of them use [MUI System](/system/getting-started/overview/) as their syle engine, which uses React context for theming. +- Both of them use [MUI System](/system/getting-started/) as their syle engine, which uses React context for theming. - Joy UI requires wrapping your application with the `CssVarsProvider` component but you're able to import it from either @mui/joy or @mui/material. ## Case A: Joy UI in a Material UI project diff --git a/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui-zh.md b/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui-zh.md index faef97b29895d0..639843282ec117 100644 --- a/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui-zh.md +++ b/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui-zh.md @@ -15,7 +15,7 @@ There are two main use cases for using them together: Additionally, keep these in mind when using them together: -- Both of them use [MUI System](/system/getting-started/overview/) as their syle engine, which uses React context for theming. +- Both of them use [MUI System](/system/getting-started/) as their syle engine, which uses React context for theming. - Joy UI requires wrapping your application with the `CssVarsProvider` component but you're able to import it from either @mui/joy or @mui/material. ## Case A: Joy UI in a Material UI project diff --git a/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md b/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md index 8e80ef58d37007..a7e5f8015c52d6 100644 --- a/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md +++ b/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md @@ -15,7 +15,7 @@ Once Joy UI reaches component parity with Material UI, we recommend that you **_ Additionally, keep these in mind when using them together: -- Both of them use [MUI System](/system/getting-started/overview/) as their style engine, which uses React context for theming. +- Both of them use [MUI System](/system/getting-started/) as their style engine, which uses React context for theming. - Theme scoping must be done on one of the libraries. ## Prerequisite diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts index 2fc62554189a38..ca1d73de3b48d8 100644 --- a/docs/data/joy/pages.ts +++ b/docs/data/joy/pages.ts @@ -3,10 +3,11 @@ import pagesApi from './pagesApi'; const pages = [ { - pathname: '/joy-ui/getting-started', + pathname: '/joy-ui/getting-started-group', + title: 'Getting started', icon: standardNavIcons.DescriptionIcon, children: [ - { pathname: '/joy-ui/getting-started/overview' }, + { pathname: '/joy-ui/getting-started', title: 'Overview' }, { pathname: '/joy-ui/getting-started/installation' }, { pathname: '/joy-ui/getting-started/usage' }, { pathname: '/joy-ui/getting-started/tutorial' }, diff --git a/docs/data/material/components/click-away-listener/click-away-listener.md b/docs/data/material/components/click-away-listener/click-away-listener.md index 8cb03a6e407ba4..a1549bcf725b22 100644 --- a/docs/data/material/components/click-away-listener/click-away-listener.md +++ b/docs/data/material/components/click-away-listener/click-away-listener.md @@ -14,6 +14,6 @@ githubLabel: 'component: ClickAwayListener' :::warning Please refer to the [Click-Away Listener](/base-ui/react-click-away-listener/) component page in the Base UI docs for demos and details on usage. -Click-Away Listener is a part of the standalone [Base UI](/base-ui/getting-started/overview/) component library. +Click-Away Listener is a part of the standalone [Base UI](/base-ui/getting-started/) component library. It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version, after `@mui/base` gets a stable release. ::: diff --git a/docs/data/material/components/no-ssr/no-ssr.md b/docs/data/material/components/no-ssr/no-ssr.md index 3b452d8a20f8b7..eab6907e657e67 100644 --- a/docs/data/material/components/no-ssr/no-ssr.md +++ b/docs/data/material/components/no-ssr/no-ssr.md @@ -13,6 +13,6 @@ components: NoSsr :::warning Please refer to the [No-SSR](/base-ui/react-no-ssr/) component page in the Base UI docs for demos and details on usage. -No-SSR is a part of the standalone [Base UI](/base-ui/getting-started/overview/) component library. +No-SSR is a part of the standalone [Base UI](/base-ui/getting-started/) component library. It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version, after `@mui/base` gets a stable release. ::: diff --git a/docs/data/material/components/portal/portal.md b/docs/data/material/components/portal/portal.md index b6893492abe550..c867b630ea5a19 100644 --- a/docs/data/material/components/portal/portal.md +++ b/docs/data/material/components/portal/portal.md @@ -14,6 +14,6 @@ githubLabel: 'component: Portal' :::warning Please refer to the [Portal](/base-ui/react-portal/) component page in the Base UI docs for demos and details on usage. -Portal is a part of the standalone [Base UI](/base-ui/getting-started/overview/) component library. +Portal is a part of the standalone [Base UI](/base-ui/getting-started/) component library. It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version, after `@mui/base` gets a stable release. ::: diff --git a/docs/data/material/components/textarea-autosize/textarea-autosize.md b/docs/data/material/components/textarea-autosize/textarea-autosize.md index 7dadda3aabfe24..0d424093d5144a 100644 --- a/docs/data/material/components/textarea-autosize/textarea-autosize.md +++ b/docs/data/material/components/textarea-autosize/textarea-autosize.md @@ -14,6 +14,6 @@ githubLabel: 'component: TextareaAutosize' :::warning Please refer to the [Textarea Autosize](/base-ui/react-textarea-autosize/) component page in the Base UI docs for demos and details on usage. -Textarea Autosize is a part of the standalone [Base UI](/base-ui/getting-started/overview/) component library. +Textarea Autosize is a part of the standalone [Base UI](/base-ui/getting-started/) component library. It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version, after `@mui/base` gets a stable release. ::: diff --git a/docs/data/material/customization/theming/theming-pt.md b/docs/data/material/customization/theming/theming-pt.md index 5345eab58f2c46..6aa17e4f04ee75 100644 --- a/docs/data/material/customization/theming/theming-pt.md +++ b/docs/data/material/customization/theming/theming-pt.md @@ -30,7 +30,7 @@ Você pode conferir a [seção do tema padrão](/material-ui/customization/defau ### Variáveis customizáveis -When using MUI's theme with [MUI System](/system/getting-started/overview/) or [any other styling solution](/material-ui/guides/interoperability/), it can be convenient to add additional variables to the theme so you can use them everywhere. Por exemplo: +When using MUI's theme with [MUI System](/system/getting-started/) or [any other styling solution](/material-ui/guides/interoperability/), it can be convenient to add additional variables to the theme so you can use them everywhere. Por exemplo: ```jsx const theme = createTheme({ diff --git a/docs/data/material/customization/theming/theming-zh.md b/docs/data/material/customization/theming/theming-zh.md index 51ee30b4b5bf9f..1537af3d601d31 100644 --- a/docs/data/material/customization/theming/theming-zh.md +++ b/docs/data/material/customization/theming/theming-zh.md @@ -30,7 +30,7 @@ You can check out the [default theme section](/material-ui/customization/default ### 自定义变量 -When using MUI's theme with [MUI System](/system/getting-started/overview/) or [any other styling solution](/material-ui/guides/interoperability/), it can be convenient to add additional variables to the theme so you can use them everywhere. For instance: +When using MUI's theme with [MUI System](/system/getting-started/) or [any other styling solution](/material-ui/guides/interoperability/), it can be convenient to add additional variables to the theme so you can use them everywhere. For instance: ```jsx const theme = createTheme({ diff --git a/docs/data/material/customization/theming/theming.md b/docs/data/material/customization/theming/theming.md index e54ceeb0fc8b64..205f9d87e9b8b8 100644 --- a/docs/data/material/customization/theming/theming.md +++ b/docs/data/material/customization/theming/theming.md @@ -33,7 +33,7 @@ You can check out the [default theme section](/material-ui/customization/default ### Custom variables -When using Material UI's theme with [MUI System](/system/getting-started/overview/) or [any other styling solution](/material-ui/guides/interoperability/), it can be convenient to add additional variables to the theme so you can use them everywhere. +When using Material UI's theme with [MUI System](/system/getting-started/) or [any other styling solution](/material-ui/guides/interoperability/), it can be convenient to add additional variables to the theme so you can use them everywhere. For instance: ```jsx diff --git a/docs/data/material/getting-started/overview/overview-pt.md b/docs/data/material/getting-started/overview/overview-pt.md index 13c88be95a1403..e66cb29b624292 100644 --- a/docs/data/material/getting-started/overview/overview-pt.md +++ b/docs/data/material/getting-started/overview/overview-pt.md @@ -28,7 +28,7 @@ Material UI v5 supports Material Design v2. Adoption of v3 is tentatively planne ## Material UI vs. Base UI -Material UI and [Base UI](/base-ui/getting-started/overview/) feature many of the same UI components, but Base UI comes without any default styles or styling solutions. +Material UI and [Base UI](/base-ui/getting-started/) feature many of the same UI components, but Base UI comes without any default styles or styling solutions. Material UI is _comprehensive_ in that it comes packaged with default styles, and is optimized to work with [Emotion](https://emotion.sh/) (or [styled-components](https://styled-components.com/)). diff --git a/docs/data/material/getting-started/overview/overview-zh.md b/docs/data/material/getting-started/overview/overview-zh.md index 13c88be95a1403..e66cb29b624292 100644 --- a/docs/data/material/getting-started/overview/overview-zh.md +++ b/docs/data/material/getting-started/overview/overview-zh.md @@ -28,7 +28,7 @@ Material UI v5 supports Material Design v2. Adoption of v3 is tentatively planne ## Material UI vs. Base UI -Material UI and [Base UI](/base-ui/getting-started/overview/) feature many of the same UI components, but Base UI comes without any default styles or styling solutions. +Material UI and [Base UI](/base-ui/getting-started/) feature many of the same UI components, but Base UI comes without any default styles or styling solutions. Material UI is _comprehensive_ in that it comes packaged with default styles, and is optimized to work with [Emotion](https://emotion.sh/) (or [styled-components](https://styled-components.com/)). diff --git a/docs/data/material/getting-started/overview/overview.md b/docs/data/material/getting-started/overview/overview.md index f27a29b51fe3db..6cf8eff87bcbf8 100644 --- a/docs/data/material/getting-started/overview/overview.md +++ b/docs/data/material/getting-started/overview/overview.md @@ -35,7 +35,7 @@ You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/293 ## Material UI vs. Base UI -Material UI and [Base UI](/base-ui/getting-started/overview/) feature many of the same UI components, but Base UI comes without any default styles or styling solutions. +Material UI and [Base UI](/base-ui/getting-started/) feature many of the same UI components, but Base UI comes without any default styles or styling solutions. Material UI is _comprehensive_ in that it comes packaged with default styles, and is optimized to work with [Emotion](https://emotion.sh/) (or [styled-components](https://styled-components.com/)). diff --git a/docs/data/material/guides/understand-mui-packages/understand-mui-packages-pt.md b/docs/data/material/guides/understand-mui-packages/understand-mui-packages-pt.md index 78a8308b75e7b7..b5cbdac7fc5e53 100644 --- a/docs/data/material/guides/understand-mui-packages/understand-mui-packages-pt.md +++ b/docs/data/material/guides/understand-mui-packages/understand-mui-packages-pt.md @@ -44,7 +44,7 @@ Material UI is a comprehensive library of components that features our implement ### Base UI -[Base UI](/base-ui/getting-started/overview/) is our library of "unstyled" components and hooks. With Base, you gain complete control over your app's CSS and accessibility features. +[Base UI](/base-ui/getting-started/) is our library of "unstyled" components and hooks. With Base, you gain complete control over your app's CSS and accessibility features. The Base package includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. diff --git a/docs/data/material/guides/understand-mui-packages/understand-mui-packages-zh.md b/docs/data/material/guides/understand-mui-packages/understand-mui-packages-zh.md index 78a8308b75e7b7..b5cbdac7fc5e53 100644 --- a/docs/data/material/guides/understand-mui-packages/understand-mui-packages-zh.md +++ b/docs/data/material/guides/understand-mui-packages/understand-mui-packages-zh.md @@ -44,7 +44,7 @@ Material UI is a comprehensive library of components that features our implement ### Base UI -[Base UI](/base-ui/getting-started/overview/) is our library of "unstyled" components and hooks. With Base, you gain complete control over your app's CSS and accessibility features. +[Base UI](/base-ui/getting-started/) is our library of "unstyled" components and hooks. With Base, you gain complete control over your app's CSS and accessibility features. The Base package includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. diff --git a/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md b/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md index d6155bd36f466f..e9bbc789b6ccc6 100644 --- a/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md +++ b/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md @@ -46,7 +46,7 @@ Material UI is a comprehensive library of components that features our implement ### Base UI -[Base UI](/base-ui/getting-started/overview/) is our library of "unstyled" components and hooks. +[Base UI](/base-ui/getting-started/) is our library of "unstyled" components and hooks. With Base, you gain complete control over your app's CSS and accessibility features. The Base package includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts index 8529bf185bc5d9..80cdb6191b0fd3 100644 --- a/docs/data/material/pages.ts +++ b/docs/data/material/pages.ts @@ -4,10 +4,11 @@ import { MuiPage } from 'docs/src/MuiPage'; const pages: MuiPage[] = [ { - pathname: '/material-ui/getting-started', + pathname: '/material-ui/getting-started-group', + title: 'Getting started', icon: standardNavIcons.DescriptionIcon, children: [ - { pathname: '/material-ui/getting-started/overview' }, + { pathname: '/material-ui/getting-started', title: 'Overview' }, { pathname: '/material-ui/getting-started/installation' }, { pathname: '/material-ui/getting-started/usage' }, { pathname: '/material-ui/getting-started/example-projects' }, diff --git a/docs/data/styles/advanced/advanced-pt.md b/docs/data/styles/advanced/advanced-pt.md index 0ba044b359e80e..3be28f79589cfa 100644 --- a/docs/data/styles/advanced/advanced-pt.md +++ b/docs/data/styles/advanced/advanced-pt.md @@ -2,7 +2,7 @@

Esta seção aborda o uso mais avançado de @material-ui/core/styles.

-> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI. It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5. If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative. +> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI. It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5. If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/) documentation which is the recommended alternative. > ⚠️ `@mui/styles` is not compatible with [React.StrictMode](https://react.dev/reference/react/StrictMode) or React 18. diff --git a/docs/data/styles/advanced/advanced-zh.md b/docs/data/styles/advanced/advanced-zh.md index ccfb6b1d8d9e1b..9c267495d103cc 100644 --- a/docs/data/styles/advanced/advanced-zh.md +++ b/docs/data/styles/advanced/advanced-zh.md @@ -2,7 +2,7 @@

本节包含了 @mui/core/styles 的一些更多的进阶用法。

-> ⚠️ `@mui/styles` 是MUI的_**传统**_样式解决方案。 它依赖于[JSS](https://cssinjs.org/)作为样式解决方案，在 `@mui/material `中已经不使用了，在v5中被废弃。 If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative. +> ⚠️ `@mui/styles` 是MUI的_**传统**_样式解决方案。 它依赖于[JSS](https://cssinjs.org/)作为样式解决方案，在 `@mui/material `中已经不使用了，在v5中被废弃。 If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/) documentation which is the recommended alternative. > ⚠️ `@mui/styles` 与 [React.StrictMode](https://react.dev/reference/react/StrictMode) 或 React 18 不兼容。 diff --git a/docs/data/styles/advanced/advanced.md b/docs/data/styles/advanced/advanced.md index bb86bcac14e9bf..73f386df78f2d4 100644 --- a/docs/data/styles/advanced/advanced.md +++ b/docs/data/styles/advanced/advanced.md @@ -4,7 +4,7 @@ > ⚠️ `@mui/styles` is the _**legacy**_ styling solution for Material UI. > It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5. -> If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative. +> If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/) documentation which is the recommended alternative. > ⚠️ `@mui/styles` is not compatible with [React.StrictMode](https://react.dev/reference/react/StrictMode) or React 18. diff --git a/docs/data/styles/api/api-pt.md b/docs/data/styles/api/api-pt.md index 8ac93e958b45b4..0678371afa6127 100644 --- a/docs/data/styles/api/api-pt.md +++ b/docs/data/styles/api/api-pt.md @@ -6,7 +6,7 @@ title: A referência da API do @material-ui/core/styles.

Uma função que retorna uma função geradora de nome de classe.

-> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI. It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5. If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative. +> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI. It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5. If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/) documentation which is the recommended alternative. > ⚠️ `@mui/styles` is not compatible with [React.StrictMode](https://react.dev/reference/react/StrictMode) or React 18. diff --git a/docs/data/styles/api/api-zh.md b/docs/data/styles/api/api-zh.md index bbffb2575441da..bb38f3105cc2d6 100644 --- a/docs/data/styles/api/api-zh.md +++ b/docs/data/styles/api/api-zh.md @@ -6,7 +6,7 @@ title: '@mui/core/styles 的 API 参考文档。'

一个返回 类名称生成器函数 的函数。

-> ⚠️ `@mui/styles`是MUI的_**传统**_样式解决方案。 它依赖于 [JSS ](https://cssinjs.org/)作为样式解决方案，在`@mui/material`中已经不使用了，在v5中被废弃。 If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative. +> ⚠️ `@mui/styles`是MUI的_**传统**_样式解决方案。 它依赖于 [JSS ](https://cssinjs.org/)作为样式解决方案，在`@mui/material`中已经不使用了，在v5中被废弃。 If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/) documentation which is the recommended alternative. > ⚠️ `@mui/styles`与 [React.StrictMode](https://react.dev/reference/react/StrictMode) 或 React 18 不兼容。 diff --git a/docs/data/styles/api/api.md b/docs/data/styles/api/api.md index 7f02a0efcd0069..6e17758f21cf38 100644 --- a/docs/data/styles/api/api.md +++ b/docs/data/styles/api/api.md @@ -8,7 +8,7 @@ title: Styles API > ⚠️ `@mui/styles` is the _**legacy**_ styling solution for Material UI. > It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5. -> If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative. +> If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/) documentation which is the recommended alternative. > ⚠️ `@mui/styles` is not compatible with [React.StrictMode](https://react.dev/reference/react/StrictMode) or React 18. diff --git a/docs/data/styles/basics/basics-pt.md b/docs/data/styles/basics/basics-pt.md index 5297a5ddbad198..ae8172e1675919 100644 --- a/docs/data/styles/basics/basics-pt.md +++ b/docs/data/styles/basics/basics-pt.md @@ -2,7 +2,7 @@

Você pode usar a solução de estilo do Material-UI na sua aplicação, esteja ou não usando componentes de Material-UI.

-> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI. It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5. If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative. +> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI. It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5. If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/) documentation which is the recommended alternative. > ⚠️ `@mui/styles` is not compatible with [React.StrictMode](https://react.dev/reference/react/StrictMode) or React 18. diff --git a/docs/data/styles/basics/basics-zh.md b/docs/data/styles/basics/basics-zh.md index 76ad315a558d2a..615d67eed665b2 100644 --- a/docs/data/styles/basics/basics-zh.md +++ b/docs/data/styles/basics/basics-zh.md @@ -2,7 +2,7 @@

无论您是否使用了 Material-UI 组件，都可以在应用中使用 Material-UI 的样式方案。

-> ⚠️ `@mui/styles`是MUI的_**传统**_样式解决方案。 它依赖于 [JSS ](https://cssinjs.org/)作为样式解决方案，在`@mui/material`中已经不使用了，在v5中被废弃。 If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative. +> ⚠️ `@mui/styles`是MUI的_**传统**_样式解决方案。 它依赖于 [JSS ](https://cssinjs.org/)作为样式解决方案，在`@mui/material`中已经不使用了，在v5中被废弃。 If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/) documentation which is the recommended alternative. > ⚠️ `@mui/styles` 与 [React.StrictMode](https://react.dev/reference/react/StrictMode) 或 React 18 不兼容。 diff --git a/docs/data/styles/basics/basics.md b/docs/data/styles/basics/basics.md index 081bd359a2ae26..0c0f4dd72dcc9f 100644 --- a/docs/data/styles/basics/basics.md +++ b/docs/data/styles/basics/basics.md @@ -4,7 +4,7 @@ > ⚠️ `@mui/styles` is the _**legacy**_ styling solution for Material UI. > It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5. -> If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative. +> If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/) documentation which is the recommended alternative. > ⚠️ `@mui/styles` is not compatible with [React.StrictMode](https://react.dev/reference/react/StrictMode) or React 18. diff --git a/docs/data/system/getting-started/overview/overview-pt.md b/docs/data/system/getting-started/overview/overview-pt.md index cdbc7b7eed176b..4cc543eb172561 100644 --- a/docs/data/system/getting-started/overview/overview-pt.md +++ b/docs/data/system/getting-started/overview/overview-pt.md @@ -8,7 +8,7 @@ title: Overview ## Introduction -MUI System is a set of CSS utilities to help you build custom designs more efficiently when working with MUI component libraries like [Material UI](/material-ui/getting-started/overview/), [Joy UI](/joy-ui/getting-started/overview/), and [Base UI](/base-ui/getting-started/overview/). +MUI System is a set of CSS utilities to help you build custom designs more efficiently when working with MUI component libraries like [Material UI](/material-ui/getting-started/), [Joy UI](/joy-ui/getting-started/), and [Base UI](/base-ui/getting-started/). The System gives you a set of flexible, generic wrapper components like [`Box`](/system/react-box/) and [`Container`](/system/react-container/) that can be quickly customized using the `sx` prop. This prop lets you define styles directly within the components themselves, rather than creating bulky and redundant `const` definitions with styled-components. It also gives you direct access to your theme's custom design tokens to ensure consistency in one-off styles. Learn more on [the `sx` prop page](/system/getting-started/the-sx-prop/). @@ -21,6 +21,6 @@ The System gives you a set of flexible, generic wrapper components like [`Box`]( ## MUI System vs. Base UI -[Base UI](/base-ui/getting-started/overview/) is a library of "unstyled" React components, while MUI System is a set of utilities for quickly applying styles to those components (as well as other MUI component libraries like Material UI and Joy UI). +[Base UI](/base-ui/getting-started/) is a library of "unstyled" React components, while MUI System is a set of utilities for quickly applying styles to those components (as well as other MUI component libraries like Material UI and Joy UI). Base UI is a standalone component library, whereas the System is _supplemental_ in that it's designed to be paired with Base and other MUI components, as well as third-party components. See the [Custom components page](/system/getting-started/custom-components/) for details on how to use MUI System with non-MUI components. diff --git a/docs/data/system/getting-started/overview/overview-zh.md b/docs/data/system/getting-started/overview/overview-zh.md index cdbc7b7eed176b..4cc543eb172561 100644 --- a/docs/data/system/getting-started/overview/overview-zh.md +++ b/docs/data/system/getting-started/overview/overview-zh.md @@ -8,7 +8,7 @@ title: Overview ## Introduction -MUI System is a set of CSS utilities to help you build custom designs more efficiently when working with MUI component libraries like [Material UI](/material-ui/getting-started/overview/), [Joy UI](/joy-ui/getting-started/overview/), and [Base UI](/base-ui/getting-started/overview/). +MUI System is a set of CSS utilities to help you build custom designs more efficiently when working with MUI component libraries like [Material UI](/material-ui/getting-started/), [Joy UI](/joy-ui/getting-started/), and [Base UI](/base-ui/getting-started/). The System gives you a set of flexible, generic wrapper components like [`Box`](/system/react-box/) and [`Container`](/system/react-container/) that can be quickly customized using the `sx` prop. This prop lets you define styles directly within the components themselves, rather than creating bulky and redundant `const` definitions with styled-components. It also gives you direct access to your theme's custom design tokens to ensure consistency in one-off styles. Learn more on [the `sx` prop page](/system/getting-started/the-sx-prop/). @@ -21,6 +21,6 @@ The System gives you a set of flexible, generic wrapper components like [`Box`]( ## MUI System vs. Base UI -[Base UI](/base-ui/getting-started/overview/) is a library of "unstyled" React components, while MUI System is a set of utilities for quickly applying styles to those components (as well as other MUI component libraries like Material UI and Joy UI). +[Base UI](/base-ui/getting-started/) is a library of "unstyled" React components, while MUI System is a set of utilities for quickly applying styles to those components (as well as other MUI component libraries like Material UI and Joy UI). Base UI is a standalone component library, whereas the System is _supplemental_ in that it's designed to be paired with Base and other MUI components, as well as third-party components. See the [Custom components page](/system/getting-started/custom-components/) for details on how to use MUI System with non-MUI components. diff --git a/docs/data/system/getting-started/overview/overview.md b/docs/data/system/getting-started/overview/overview.md index 24451a50861a1c..fd93e97d7f7053 100644 --- a/docs/data/system/getting-started/overview/overview.md +++ b/docs/data/system/getting-started/overview/overview.md @@ -8,7 +8,7 @@ title: Overview ## Introduction -MUI System is a set of CSS utilities to help you build custom designs more efficiently when working with MUI component libraries like [Material UI](/material-ui/getting-started/overview/), [Joy UI](/joy-ui/getting-started/overview/), and [Base UI](/base-ui/getting-started/overview/). +MUI System is a set of CSS utilities to help you build custom designs more efficiently when working with MUI component libraries like [Material UI](/material-ui/getting-started/), [Joy UI](/joy-ui/getting-started/), and [Base UI](/base-ui/getting-started/). The System gives you a set of flexible, generic wrapper components like [`Box`](/system/react-box/) and [`Container`](/system/react-container/) that can be quickly customized using the `sx` prop. This prop lets you define styles directly within the components themselves, rather than creating bulky and redundant `const` definitions with styled-components. @@ -24,7 +24,7 @@ Learn more on [the `sx` prop page](/system/getting-started/the-sx-prop/). ## MUI System vs. Base UI -[Base UI](/base-ui/getting-started/overview/) is a library of "unstyled" React components, while MUI System is a set of utilities for quickly applying styles to those components (as well as other MUI component libraries like Material UI and Joy UI). +[Base UI](/base-ui/getting-started/) is a library of "unstyled" React components, while MUI System is a set of utilities for quickly applying styles to those components (as well as other MUI component libraries like Material UI and Joy UI). Base UI is a standalone component library, whereas MUI System is _supplemental_ in that it's designed to be paired with Base UI and other MUI components, as well as third-party components. See the [Custom components page](/system/getting-started/custom-components/) for details on how to use MUI System with non-MUI components. diff --git a/docs/data/system/pages.ts b/docs/data/system/pages.ts index a5ab1037cf81ed..ad26d780f8b2e2 100644 --- a/docs/data/system/pages.ts +++ b/docs/data/system/pages.ts @@ -3,10 +3,11 @@ import pagesApi from 'docs/data/system/pagesApi'; const pages = [ { - pathname: '/system/getting-started', + pathname: '/system/getting-started-group', + title: 'Getting started', icon: standardNavIcons.DescriptionIcon, children: [ - { pathname: '/system/getting-started/overview' }, + { pathname: '/system/getting-started', title: 'Overview' }, { pathname: '/system/getting-started/installation' }, { pathname: '/system/getting-started/usage' }, { pathname: '/system/getting-started/the-sx-prop' }, diff --git a/docs/pages/base-ui/getting-started/overview.js b/docs/pages/base-ui/getting-started/index.js similarity index 100% rename from docs/pages/base-ui/getting-started/overview.js rename to docs/pages/base-ui/getting-started/index.js diff --git a/docs/pages/blog/2021.md b/docs/pages/blog/2021.md index 423e18b6d1ef50..27aa56ca27a8d6 100644 --- a/docs/pages/blog/2021.md +++ b/docs/pages/blog/2021.md @@ -123,7 +123,7 @@ To continue improving the customization experience, we will double down on the v These components and hooks contain the main functionalities and accessibility, without being opinionated about how styles are applied or what styles. We still have work to do to have a full set of unstyled components. -You can read more about them in [the docs](/base-ui/getting-started/overview/) and keep track of our progress in [#27170](https://github.com/mui/material-ui/issues/27170). +You can read more about them in [the docs](/base-ui/getting-started/) and keep track of our progress in [#27170](https://github.com/mui/material-ui/issues/27170). Our high-level plan is to use the unstyled components and hooks as the basis of the Material Design components and our second design system. diff --git a/docs/pages/blog/docs-restructure-2022.md b/docs/pages/blog/docs-restructure-2022.md index d052e1cf34b631..1f6477269352dd 100644 --- a/docs/pages/blog/docs-restructure-2022.md +++ b/docs/pages/blog/docs-restructure-2022.md @@ -33,9 +33,9 @@ We added an identifier and menu to the upper-left corner of the docs for improve As for the URLs, this is how they look now: - MUI Core: - - Material UI: [https://mui.com/material-ui/](https://mui.com/material-ui/getting-started/overview/) - - Base UI: [https://mui.com/base-ui/](https://mui.com/base-ui/getting-started/overview/) - - MUI System: [https://mui.com/system/](https://mui.com/system/getting-started/overview/) + - Material UI: [https://mui.com/material-ui/](https://mui.com/material-ui/getting-started/) + - Base UI: [https://mui.com/base-ui/](https://mui.com/base-ui/getting-started/) + - MUI System: [https://mui.com/system/](https://mui.com/system/getting-started/) - MUI X: - Data grid: [https://mui.com/x/react-data-grid/](https://mui.com/x/react-data-grid/) - Date and Time pickers: [https://mui.com/x/react-date-pickers/](https://mui.com/x/react-date-pickers/getting-started/) diff --git a/docs/pages/blog/first-look-at-joy.md b/docs/pages/blog/first-look-at-joy.md index 40484d5aa258f8..ef411fd839550a 100644 --- a/docs/pages/blog/first-look-at-joy.md +++ b/docs/pages/blog/first-look-at-joy.md @@ -7,7 +7,7 @@ tags: ['News', 'MUI Core'] card: true --- -First look at Joy UI: a new starting point for your design system. +First look at Joy UI: a new starting point for your design system. If you're a close follower of everything MUI, you might be aware that we've been working on a new design system. If not, then this post will give you a first look at **Joy UI**－MUI's new starting point for your design system! diff --git a/docs/pages/blog/introducing-mui-base.md b/docs/pages/blog/introducing-mui-base.md index 88981730999bec..d7f7d007a46641 100644 --- a/docs/pages/blog/introducing-mui-base.md +++ b/docs/pages/blog/introducing-mui-base.md @@ -7,7 +7,7 @@ tags: ['News', 'MUI Core'] card: true --- -Demo components built with Base UI, a newly introduced library of unstyled components and hooks +Demo components built with Base UI, a newly introduced library of unstyled components and hooks While Material UI is excellent for building sleek user interfaces that adhere closely to Material Design, it can become unwieldy when your design system diverges significantly from the defaults. We get it. @@ -42,7 +42,7 @@ Base UI offers two kinds of building blocks: unstyled components and hooks. Components are more straightforward to use of the two. Place a component on a page, add your own styles, and it's ready to go! It's important to note that you are not limited to the styling options available in Material UI. -You can, of course, still use [MUI System](https://mui.com/system/getting-started/overview/), but if you prefer Emotion, Tailwind CSS, plain CSS, or any other styling engine, they are available too! +You can, of course, still use [MUI System](https://mui.com/system/getting-started/), but if you prefer Emotion, Tailwind CSS, plain CSS, or any other styling engine, they are available too! Check out the [Working with Tailwind CSS guide](/base-ui/guides/working-with-tailwind-css/) for an example of using this library. In contrast to Material UI, Base UI's components do not have any default styles. @@ -84,7 +84,7 @@ function MySwitch(props: UseSwitchParameters) { ## What's included The initial version of the library contains 17 components. -Check out the [Base UI documentation](/base-ui/getting-started/overview/) for details. +Check out the [Base UI documentation](/base-ui/getting-started/) for details. You can track our progress in adding new components—and comment to influence our priorities—in [this dedicated GitHub issue](https://github.com/mui/material-ui/issues/27170). @@ -108,7 +108,7 @@ or yarn: yarn add @mui/base ``` -Check out [the docs](/base-ui/getting-started/overview/), play with the components, and be sure to let us know what you think! +Check out [the docs](/base-ui/getting-started/), play with the components, and be sure to let us know what you think! If you find any bugs or want to share ideas for improvements, please don't hesitate to open an issue in the [MUI Core repository on GitHub](https://github.com/mui/material-ui/issues/new/choose). Be sure to include "[base]" in the issue title to help us keep things organized. diff --git a/docs/pages/blog/making-customizable-components.md b/docs/pages/blog/making-customizable-components.md index 1acec5df13d8d8..3d9238c915bc92 100644 --- a/docs/pages/blog/making-customizable-components.md +++ b/docs/pages/blog/making-customizable-components.md @@ -305,7 +305,7 @@ In our last two annual [developer surveys](/blog/2021-developer-survey-results/) Thanks to the slot strategy and the introduction of supplementary tools like [MUI System's `sx` prop](https://mui.com/system/getting-started/the-sx-prop/), it has never been easier to customize MUI's components to suit your specific needs. -[Material UI](https://mui.com/material-ui/getting-started/overview/) and [Joy UI](https://mui.com/joy-ui/getting-started/overview/) are designed to be both beautiful and flexible right out of the box, while [Base UI](https://mui.com/base-ui/getting-started/overview/) gives you the most freedom to implement your own custom styling solution. +[Material UI](https://mui.com/material-ui/getting-started/) and [Joy UI](https://mui.com/joy-ui/getting-started/) are designed to be both beautiful and flexible right out of the box, while [Base UI](https://mui.com/base-ui/getting-started/) gives you the most freedom to implement your own custom styling solution. [MUI X](https://mui.com/x/introduction/) is comprised of fully featured complex components like the `DataGrid` which—as we've seen—can still be customized in many ways with minimal friction. Get started building with the MUI X Data Grid by [installing the MIT-licensed Community package](https://mui.com/x/react-data-grid/getting-started/#installation) today. diff --git a/docs/pages/blog/material-ui-is-now-mui.md b/docs/pages/blog/material-ui-is-now-mui.md index 1945f8258536c0..9ed080b18abe2b 100644 --- a/docs/pages/blog/material-ui-is-now-mui.md +++ b/docs/pages/blog/material-ui-is-now-mui.md @@ -12,7 +12,7 @@ card: true Starting today we are evolving our brand identity to clarifying the difference between our company and our products. - Material-UI: the organization is now called **[MUI](https://github.com/mui)**. -- Material-UI: the Material Design components developed by MUI is now called **[Material UI](https://mui.com/material-ui/getting-started/overview/)**, we ditched the hyphen! +- Material-UI: the Material Design components developed by MUI is now called **[Material UI](https://mui.com/material-ui/getting-started/)**, we ditched the hyphen! - Material-UI: the set of foundational MIT React components is now called **[MUI Core](https://github.com/mui/material-ui)**. - Material-UI X: the set of advanced React components is now called **[MUI X](https://github.com/mui/mui-x)**. diff --git a/docs/pages/blog/mui-core-v5.md b/docs/pages/blog/mui-core-v5.md index 610835ce67b998..62d000c64cf021 100644 --- a/docs/pages/blog/mui-core-v5.md +++ b/docs/pages/blog/mui-core-v5.md @@ -724,7 +724,7 @@ To continue improving the customization experience, we are doubling down on the These components and hooks contain the main functionalities and accessibility, without being opinionated about how styles are applied nor what styles. We still have work to do to have a full set of unstyled components. -You can read more about them in [the docs](/base-ui/getting-started/overview/) and keep track of our progress in [#27170](https://github.com/mui/material-ui/issues/27170). +You can read more about them in [the docs](/base-ui/getting-started/) and keep track of our progress in [#27170](https://github.com/mui/material-ui/issues/27170). Our high-level plan is to use the unstyled components and hooks as the basis of the Material components and second design system. We are aiming to complete this work with the next major release (v6). diff --git a/docs/pages/blog/mui-product-comparison.md b/docs/pages/blog/mui-product-comparison.md index 298a0ac0774e06..bb9ddfacae5dfa 100644 --- a/docs/pages/blog/mui-product-comparison.md +++ b/docs/pages/blog/mui-product-comparison.md @@ -45,7 +45,7 @@ It includes a comprehensive collection of prebuilt components that are ready for Material UI is beautiful by design and features a suite of customization options that make it easy to implement your own custom design system on top of our components. -Get started in the [Material UI docs](/material-ui/getting-started/overview/). +Get started in the [Material UI docs](/material-ui/getting-started/). #### Key features @@ -67,7 +67,7 @@ It's intended to serve as an alternative to Material UI for designs that don't a Try Joy UI if you appreciate the comprehensiveness and reliability of Material UI, but don't need all of the additional baggage that comes along with Material Design. -Get started in the [Joy UI docs](/joy-ui/getting-started/overview/). +Get started in the [Joy UI docs](/joy-ui/getting-started/). #### Key features @@ -88,7 +88,7 @@ They feature the same robust engineering but without any default styling solutio Base UI includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. -Get started in the [Base UI docs](/base-ui/getting-started/overview/). +Get started in the [Base UI docs](/base-ui/getting-started/). #### Key features @@ -112,7 +112,7 @@ The System gives you a set of flexible, generic wrapper components like Box and This prop lets you define styles directly within the components themselves, rather than creating bulky and redundant `const` definitions with styled-components. It also gives you direct access to your theme's custom design tokens to ensure consistency in one-off styles. -Get started in the [MUI System docs](/system/getting-started/overview/). +Get started in the [MUI System docs](/system/getting-started/). #### Key features diff --git a/docs/pages/joy-ui/getting-started/overview.js b/docs/pages/joy-ui/getting-started/index.js similarity index 100% rename from docs/pages/joy-ui/getting-started/overview.js rename to docs/pages/joy-ui/getting-started/index.js diff --git a/docs/pages/material-ui/getting-started/overview.js b/docs/pages/material-ui/getting-started/index.js similarity index 100% rename from docs/pages/material-ui/getting-started/overview.js rename to docs/pages/material-ui/getting-started/index.js diff --git a/docs/pages/system/getting-started/overview.js b/docs/pages/system/getting-started/index.js similarity index 100% rename from docs/pages/system/getting-started/overview.js rename to docs/pages/system/getting-started/index.js diff --git a/docs/public/_redirects b/docs/public/_redirects index 1276ecafd05d5b..7086d3bdff3c38 100644 --- a/docs/public/_redirects +++ b/docs/public/_redirects @@ -359,8 +359,8 @@ https://v4.material-ui.com/* https://v4.mui.com/:splat 301! /company/about/ /about/ 301 /:lang/company/about/ /:lang/about/ 301 /company/jobs/ /careers/ 301 -/material-ui/customization/unstyled-components/ /base-ui/getting-started/overview/ 301 -/:lang/material-ui/customization/unstyled-components/ /:lang/base-ui/getting-started/overview/ 301 +/material-ui/customization/unstyled-components/ /base-ui/getting-started/ 301 +/:lang/material-ui/customization/unstyled-components/ /:lang/base-ui/getting-started/ 301 /material-ui/guides/migration-v4/ /material-ui/migration/migration-v4/ 301 /:lang/material-ui/guides/migration-v4/ /:lang/material-ui/migration/migration-v4/ 301 /material-ui/guides/migration-v3/ /material-ui/migration/migration-v3/ 301 @@ -389,8 +389,8 @@ https://v4.material-ui.com/* https://v4.mui.com/:splat 301! /:lang/joy-ui/core-features/automatic-adjustment/ /:lang/joy-ui/main-features/automatic-adjustment/ 301 /joy-ui/core-features/perfect-dark-mode/ /joy-ui/main-features/dark-mode-optimization/ 301 /:lang/joy-ui/core-features/perfect-dark-mode/ /:lang/joy-ui/main-features/dark-mode-optimization/ 301 -/system/basics/ /system/getting-started/overview/ 301 -/:lang/system/basics/ /:lang/system/getting-started/overview/ 301 +/system/basics/ /system/getting-started/ 301 +/:lang/system/basics/ /:lang/system/getting-started/ 301 /system/the-sx-prop/ /system/getting-started/the-sx-prop/ 301 /:lang/system/the-sx-prop/ /:lang/system/getting-started/the-sx-prop/ 301 /system/advanced/ /system/getting-started/custom-components/ 301 @@ -477,12 +477,14 @@ https://v4.material-ui.com/* https://v4.mui.com/:splat 301! /base/api/use-tabs-list/ /base-ui/react-tabs/hooks-api/#use-tabs-list 301 /base/* /base-ui/:splat 301 /base-ui/api/:component/ /base-ui/react-:component/components-api/#:component 301 - /joy-ui/customization/theme-tokens/ /joy-ui/customization/theme-colors/ 301 /joy-ui/guides/apply-dark-mode/ /joy-ui/customization/dark-mode/ 301 - /material-ui/experimental-api/css-variables/ /material-ui/experimental-api/css-theme-variables/overview/ 301 /material-ui/experimental-api/css-theme-variables/ /material-ui/experimental-api/css-theme-variables/overview/ 302 +/material-ui/getting-started/overview/ /material-ui/getting-started/ 301 +/joy-ui/getting-started/overview/ /joy-ui/getting-started/ 301 +/base-ui/getting-started/overview/ /base-ui/getting-started/ 301 +/system/getting-started/overview/ /system/getting-started/ 301 # Proxies diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js index 581eacfeb2cabd..76631f932a7ef5 100644 --- a/docs/src/modules/components/AppSearch.js +++ b/docs/src/modules/components/AppSearch.js @@ -128,7 +128,7 @@ function NewStartScreen() { icon: , }, items: [ - { name: 'Overview', href: '/system/getting-started/overview/' }, + { name: 'Overview', href: '/system/getting-started/' }, { name: 'Properties', href: '/system/properties/' }, { name: 'The sx prop', href: '/system/getting-started/the-sx-prop/' }, ], diff --git a/docs/src/modules/utils/getProductInfoFromUrl.test.js b/docs/src/modules/utils/getProductInfoFromUrl.test.js index 8267ad617c570e..acb166281ca6f3 100644 --- a/docs/src/modules/utils/getProductInfoFromUrl.test.js +++ b/docs/src/modules/utils/getProductInfoFromUrl.test.js @@ -21,9 +21,7 @@ describe('getProductInfoFromUrl', () => { it('get system', () => { expect(getProductInfoFromUrl('/system/').productId).to.equal('system'); - expect(getProductInfoFromUrl('/zh/system/getting-started/overview/').productId).to.equal( - 'system', - ); + expect(getProductInfoFromUrl('/zh/system/getting-started/').productId).to.equal('system'); }); it('get data-grid', () => { diff --git a/docs/src/pages/careers/designer.md b/docs/src/pages/careers/designer.md index 2de469c49779ee..0255e708410f55 100644 --- a/docs/src/pages/careers/designer.md +++ b/docs/src/pages/careers/designer.md @@ -27,8 +27,8 @@ The new brand was fundamental to set the stage for MUI to become larger than Mat Currently, we have five main projects that are not at all related to MD: - [MUI Core](https://mui.com/core/): - - [Base UI](https://mui.com/base-ui/getting-started/overview/): the unstyled version of the components. - - [MUI System](https://mui.com/system/getting-started/overview/): our most recent take on styling for React components. + - [Base UI](https://mui.com/base-ui/getting-started/): the unstyled version of the components. + - [MUI System](https://mui.com/system/getting-started/): our most recent take on styling for React components. - [MUI Joy (working title)](https://github.com/mui/material-ui/discussions/29024): a second design system as an alternative to Material Design. - [MUI X](https://mui.com/x/): as mentioned, a growing set of advanced components. Today, the flagship is the [Data Grid](https://mui.com/x/react-data-grid/), a game-changing component for presenting large amounts of data, which integrates perfectly with MUI Core. diff --git a/docs/src/route.ts b/docs/src/route.ts index 24c57b53c42f8f..7a1cc0b8533385 100644 --- a/docs/src/route.ts +++ b/docs/src/route.ts @@ -9,16 +9,16 @@ const ROUTES = { about: '/about/', rssFeed: '/feed/blog/rss.xml', handbook: 'https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b', - baseDocs: '/base-ui/getting-started/overview/', - materialDocs: '/material-ui/getting-started/overview/', - joyDocs: '/joy-ui/getting-started/overview/', - systemDocs: '/system/getting-started/overview/', + baseDocs: '/base-ui/getting-started/', + materialDocs: '/material-ui/getting-started/', + joyDocs: '/joy-ui/getting-started/', + systemDocs: '/system/getting-started/', materialIcons: '/material-ui/material-icons/', freeTemplates: '/material-ui/getting-started/templates/', components: '/material-ui/getting-started/supported-components/', customization: '/material-ui/customization/how-to-customize/', theming: '/material-ui/customization/theming/', - documentation: '/material-ui/getting-started/overview/', + documentation: '/material-ui/getting-started/', communityHelp: '/material-ui/getting-started/support/#community-help-free', blog: '/blog/', showcase: '/material-ui/discover-more/showcase/', diff --git a/docs/translations/translations.json b/docs/translations/translations.json index bc3e13d0b4b464..19b4b35db9fd48 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -191,8 +191,8 @@ "visit": "Visit the website", "whosUsing": "Who's using MUI?", "pages": { - "/system/getting-started": "Getting started", - "/system/getting-started/overview": "Overview", + "/system/getting-started-group": "Getting started", + "/system/getting-started": "Overview", "/system/getting-started/installation": "Installation", "/system/getting-started/usage": "Usage", "/system/getting-started/the-sx-prop": "The sx prop", @@ -222,8 +222,8 @@ "/system/styles": "Styles", "/system/styles/basics": "Basics", "/system/styles/advanced": "Advanced", - "/base-ui/getting-started": "Getting started", - "/base-ui/getting-started/overview": "Overview", + "/base-ui/getting-started-group": "Getting started", + "/base-ui/getting-started": "Overview", "/base-ui/getting-started/quickstart": "Quickstart", "/base-ui/getting-started/usage": "Usage", "/base-ui/getting-started/customization": "Customization", @@ -300,8 +300,8 @@ "/base-ui/guides": "How-to guides", "/base-ui/guides/working-with-tailwind-css": "Working with Tailwind CSS", "/base-ui/guides/overriding-component-structure": "Overriding component structure", - "/material-ui/getting-started": "Getting started", - "/material-ui/getting-started/overview": "Overview", + "/material-ui/getting-started-group": "Getting started", + "/material-ui/getting-started": "Overview", "/material-ui/getting-started/installation": "Installation", "/material-ui/getting-started/usage": "Usage", "/material-ui/getting-started/example-projects": "Example projects", @@ -437,8 +437,8 @@ "/material-ui/migration/migration-v3": "Migration from v3 to v4", "/material-ui/migration/migration-v0x": "Migration from v0.x to v1", "https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=sidenav": "Templates", - "/joy-ui/getting-started": "Getting started", - "/joy-ui/getting-started/overview": "Overview", + "/joy-ui/getting-started-group": "Getting started", + "/joy-ui/getting-started": "Overview", "/joy-ui/getting-started/installation": "Installation", "/joy-ui/getting-started/usage": "Usage", "/joy-ui/getting-started/tutorial": "Tutorial", diff --git a/examples/base-cra-ts/README.md b/examples/base-cra-ts/README.md index 5a7467085fe129..baf0826ca99941 100644 --- a/examples/base-cra-ts/README.md +++ b/examples/base-cra-ts/README.md @@ -1,6 +1,6 @@ # Base UI - Create React App example in TypeScript -[Base UI](https://mui.com/base-ui/getting-started/overview/) is a library of unstyled React UI components which includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. +[Base UI](https://mui.com/base-ui/getting-started/) is a library of unstyled React UI components which includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. [Create React App](https://create-react-app.dev/) is a framework for quickly creating a new React project without the need to configure complex build tools or development environments. diff --git a/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js index bca606f4834a99..7b676394b20abf 100644 --- a/packages/markdown/parseMarkdown.js +++ b/packages/markdown/parseMarkdown.js @@ -485,7 +485,7 @@ function prepareMarkdown(config) { ## Unstyled :::success -[Base UI](/base-ui/getting-started/overview/) provides a headless ("unstyled") version of this [${title}](${headers.unstyled}). Try it if you need more flexibility in customization and a smaller bundle size. +[Base UI](/base-ui/getting-started/) provides a headless ("unstyled") version of this [${title}](${headers.unstyled}). Try it if you need more flexibility in customization and a smaller bundle size. ::: `); } diff --git a/packages/mui-base/README.md b/packages/mui-base/README.md index aad65aa8723409..49955a382e19b9 100644 --- a/packages/mui-base/README.md +++ b/packages/mui-base/README.md @@ -18,4 +18,4 @@ yarn add @mui/base -[The documentation](https://mui.com/base-ui/getting-started/overview/) +[The documentation](https://mui.com/base-ui/getting-started/) diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index b418abe09c4b3c..0b7320ceef9c36 100644 --- a/packages/mui-base/package.json +++ b/packages/mui-base/package.json @@ -21,7 +21,7 @@ "bugs": { "url": "https://github.com/mui/material-ui/issues" }, - "homepage": "https://mui.com/base-ui/getting-started/overview/", + "homepage": "https://mui.com/base-ui/getting-started/", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui" diff --git a/packages/mui-joy/README.md b/packages/mui-joy/README.md index e4e36c9392fa70..b1b3c3aa08a314 100644 --- a/packages/mui-joy/README.md +++ b/packages/mui-joy/README.md @@ -9,4 +9,4 @@ It features foundational components such as the ones you'd find in Material UI a > We're adding new components and features regularly, and you're welcome to contribute! > Look for the [`package: joy-ui`](https://github.com/mui/material-ui/labels/package:%20joy-ui) label on open issues and pull requests in the mui/material-ui repository on GitHub to see what other community members are working on, and feel free to submit your own. -Get to know more at [Joy UI's overview page](https://mui.com/joy-ui/getting-started/overview/). +Get to know more at [Joy UI's overview page](https://mui.com/joy-ui/getting-started/). diff --git a/packages/mui-material-next/package.json b/packages/mui-material-next/package.json index c97bdfa1a8c1e2..cc3bd21e5e8323 100644 --- a/packages/mui-material-next/package.json +++ b/packages/mui-material-next/package.json @@ -21,7 +21,7 @@ "bugs": { "url": "https://github.com/mui/material-ui/issues" }, - "homepage": "https://mui.com/material-ui/getting-started/overview/", + "homepage": "https://mui.com/material-ui/getting-started/", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui" diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index c10f1a199b6a93..82ef4d5abc8f69 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -21,7 +21,7 @@ "bugs": { "url": "https://github.com/mui/material-ui/issues" }, - "homepage": "https://mui.com/material-ui/getting-started/overview/", + "homepage": "https://mui.com/material-ui/getting-started/", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui" diff --git a/packages/mui-system/README.md b/packages/mui-system/README.md index dcd62fa1936ddd..c8bb59879cf1a7 100644 --- a/packages/mui-system/README.md +++ b/packages/mui-system/README.md @@ -20,4 +20,4 @@ yarn add @mui/system @emotion/react @emotion/styled -[The documentation](https://mui.com/system/getting-started/overview/) +[The documentation](https://mui.com/system/getting-started/) diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json index fa3fe691171b03..be740897c626b3 100644 --- a/packages/mui-system/package.json +++ b/packages/mui-system/package.json @@ -20,7 +20,7 @@ "bugs": { "url": "https://github.com/mui/material-ui/issues" }, - "homepage": "https://mui.com/system/getting-started/overview/", + "homepage": "https://mui.com/system/getting-started/", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui" diff --git a/test/e2e-website/products-drawer.spec.ts b/test/e2e-website/products-drawer.spec.ts index a6be018ff51bff..2a596bb33ff099 100644 --- a/test/e2e-website/products-drawer.spec.ts +++ b/test/e2e-website/products-drawer.spec.ts @@ -17,7 +17,7 @@ test('able to navigate between products', async ({ page }) => { await expect(page.locator('#mui-product-menu a[href^="/system/"]')).toHaveAttribute( 'href', - '/system/getting-started/overview/', + '/system/getting-started/', ); await expect(page.locator('#mui-product-menu a[href^="/x/introduction/"]')).toBeVisible(); From 35d8bd6a0004667c370953c9ad7468197cca6a85 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 23 Jun 2023 17:11:29 -0300 Subject: [PATCH 05/33] [docs-infra] Polish demo toolbar button designs (#37680) --- docs/src/modules/components/DemoToolbar.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js index 9c027a36c2649b..c9a7b031c40a91 100644 --- a/docs/src/modules/components/DemoToolbar.js +++ b/docs/src/modules/components/DemoToolbar.js @@ -137,7 +137,7 @@ const Button = styled(MDButton)(({ theme }) => ({ border: 'none', paddingLeft: theme.spacing(1), paddingRight: theme.spacing(0.5), - fontSize: '0.85rem', + fontSize: theme.typography.pxToRem(13), fontWeight: theme.typography.fontWeightMedium, color: theme.palette.primary.main, '& svg': { @@ -172,8 +172,8 @@ const MenuItem = styled(MDMenuItem)(({ theme }) => ({ const ToggleButton = styled(MDToggleButton)(({ theme }) => [ theme.unstable_sx({ - padding: theme.spacing(0, 1), - fontSize: '0.85rem', + padding: theme.spacing(0, 1, 0.1, 1), + fontSize: theme.typography.pxToRem(13), borderRadius: 99, borderColor: 'grey.200', '&.Mui-disabled': { @@ -602,6 +602,7 @@ export default function DemoToolbar(props) { onClick={handleCodeOpenClick} color="default" {...getControlProps(3)} + sx={{ borderRadius: 1 }} > @@ -615,6 +616,7 @@ export default function DemoToolbar(props) { data-ga-event-action="codesandbox" onClick={() => codeSandbox.createReactApp(demoData).openSandbox('/demo')} {...getControlProps(4)} + sx={{ borderRadius: 1 }} > @@ -628,6 +630,7 @@ export default function DemoToolbar(props) { data-ga-event-action="stackblitz" onClick={() => stackBlitz.createReactApp(demoData).openSandbox('demo')} {...getControlProps(5)} + sx={{ borderRadius: 1 }} > @@ -643,6 +646,7 @@ export default function DemoToolbar(props) { data-ga-event-action="copy" onClick={handleCopyClick} {...getControlProps(6)} + sx={{ borderRadius: 1 }} > @@ -654,6 +658,7 @@ export default function DemoToolbar(props) { data-ga-event-action="reset-focus" onClick={handleResetFocusClick} {...getControlProps(7)} + sx={{ borderRadius: 1 }} > @@ -666,6 +671,7 @@ export default function DemoToolbar(props) { data-ga-event-action="reset" onClick={onResetDemoClick} {...getControlProps(8)} + sx={{ borderRadius: 1 }} > @@ -676,6 +682,7 @@ export default function DemoToolbar(props) { aria-owns={anchorEl ? 'demo-menu-more' : undefined} aria-haspopup="true" {...getControlProps(9)} + sx={{ borderRadius: 1 }} > From 314c3d4b9edf13e3084a621f7680cf0bcff20f9f Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 25 Jun 2023 00:37:10 +0200 Subject: [PATCH 06/33] [docs-infra] Support rendering markdown outside of docs (#37691) --- docs/src/modules/components/AppLayoutDocs.js | 2 +- .../components/AppLayoutDocsWithoutAppFrame.js | 10 +++++----- docs/src/modules/components/EditPage.js | 11 ++++++----- docs/src/modules/components/MarkdownDocsV2.js | 6 +++--- packages/markdown/loader.js | 11 +++++++---- packages/markdown/parseMarkdown.js | 6 +++--- packages/markdown/parseMarkdown.test.js | 14 +++++++++++--- 7 files changed, 36 insertions(+), 24 deletions(-) diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js index f11c2fa2890c12..82f4ee53b6e5e8 100644 --- a/docs/src/modules/components/AppLayoutDocs.js +++ b/docs/src/modules/components/AppLayoutDocs.js @@ -135,7 +135,7 @@ function AppLayoutDocs(props) { */} - + {children} diff --git a/docs/src/modules/components/AppLayoutDocsWithoutAppFrame.js b/docs/src/modules/components/AppLayoutDocsWithoutAppFrame.js index e63e059189e516..95d45b99d3d66f 100644 --- a/docs/src/modules/components/AppLayoutDocsWithoutAppFrame.js +++ b/docs/src/modules/components/AppLayoutDocsWithoutAppFrame.js @@ -77,7 +77,7 @@ const ActionsDiv = styled('div')(({ theme }) => ({ }, })); -function AppLayoutDocs(props) { +function AppLayoutDocsWithoutAppFrame(props) { const router = useRouter(); const { children, @@ -133,7 +133,7 @@ function AppLayoutDocs(props) { */} - + {children} @@ -148,7 +148,7 @@ function AppLayoutDocs(props) { ); } -AppLayoutDocs.propTypes = { +AppLayoutDocsWithoutAppFrame.propTypes = { children: PropTypes.node.isRequired, description: PropTypes.string.isRequired, disableAd: PropTypes.bool.isRequired, @@ -160,7 +160,7 @@ AppLayoutDocs.propTypes = { }; if (process.env.NODE_ENV !== 'production') { - AppLayoutDocs.propTypes = exactProp(AppLayoutDocs.propTypes); + AppLayoutDocsWithoutAppFrame.propTypes = exactProp(AppLayoutDocsWithoutAppFrame.propTypes); } -export default AppLayoutDocs; +export default AppLayoutDocsWithoutAppFrame; diff --git a/docs/src/modules/components/EditPage.js b/docs/src/modules/components/EditPage.js index c6085b3e5d3630..720f957d57c219 100644 --- a/docs/src/modules/components/EditPage.js +++ b/docs/src/modules/components/EditPage.js @@ -4,21 +4,22 @@ import Button from '@mui/material/Button'; import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n'; import GitHubIcon from '@mui/icons-material/GitHub'; +const LOCALES = { zh: 'zh-CN', pt: 'pt-BR', es: 'es-ES' }; + export default function EditPage(props) { - const { markdownLocation } = props; + const { sourceLocation } = props; const t = useTranslate(); const userLanguage = useUserLanguage(); - const LOCALES = { zh: 'zh-CN', pt: 'pt-BR', es: 'es-ES' }; const CROWDIN_ROOT_URL = 'https://translate.mui.com/project/material-ui-docs/'; const crowdInLocale = LOCALES[userLanguage] || userLanguage; - const crowdInPath = markdownLocation.substring(0, markdownLocation.lastIndexOf('/')); + const crowdInPath = sourceLocation.substring(0, sourceLocation.lastIndexOf('/')); return (
- + ); } diff --git a/packages/markdown/loader.js b/packages/markdown/loader.js index ca83f59b686e5c..8ffdc93b75a23f 100644 --- a/packages/markdown/loader.js +++ b/packages/markdown/loader.js @@ -121,12 +121,15 @@ module.exports = async function demoLoader() { }), ); - const pageFilename = this.context - .replace(this.rootContext, '') + // Use .. as the docs runs from the /docs folder + const repositoryRoot = path.join(this.rootContext, '..'); + const fileRelativeContext = path + .relative(repositoryRoot, this.context) // win32 to posix .replace(/\\/g, '/'); + const { docs } = prepareMarkdown({ - pageFilename, + fileRelativeContext, translations, componentPackageMapping, options, @@ -157,7 +160,7 @@ module.exports = async function demoLoader() { // The import paths currently use a completely different format. // They should just use relative imports. let moduleID = `./${demoName.replace( - `pages/${pageFilename.replace(/^\/src\/pages\//, '')}/`, + `pages/${fileRelativeContext.replace(/^docs\/src\/pages\//, '')}/`, '', )}`; diff --git a/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js index 7b676394b20abf..3d8f9ddafcc6c8 100644 --- a/packages/markdown/parseMarkdown.js +++ b/packages/markdown/parseMarkdown.js @@ -426,11 +426,11 @@ function resolveComponentApiUrl(product, componentPkg, component) { /** * @param {object} config * @param {Array<{ markdown: string, filename: string, userLanguage: string }>} config.translations - Mapping of locale to its markdown - * @param {string} config.pageFilename - posix filename relative to nextjs pages directory + * @param {string} config.fileRelativeContext - posix filename relative to repository root directory * @param {object} config.options - provided to the webpack loader */ function prepareMarkdown(config) { - const { pageFilename, translations, componentPackageMapping = {}, options } = config; + const { fileRelativeContext, translations, componentPackageMapping = {}, options } = config; const demos = {}; /** @@ -446,7 +446,7 @@ function prepareMarkdown(config) { .forEach((translation) => { const { filename, markdown, userLanguage } = translation; const headers = getHeaders(markdown); - const location = headers.filename || `/docs${pageFilename}/${filename}`; + const location = headers.filename || `/${fileRelativeContext}/${filename}`; const title = headers.title || getTitle(markdown); const description = headers.description || getDescription(markdown); diff --git a/packages/markdown/parseMarkdown.test.js b/packages/markdown/parseMarkdown.test.js index 4dba88ddf1c124..a65f433bc1170f 100644 --- a/packages/markdown/parseMarkdown.test.js +++ b/packages/markdown/parseMarkdown.test.js @@ -9,7 +9,7 @@ import { describe('parseMarkdown', () => { const defaultParams = { - pageFilename: '/test', + fileRelativeContext: 'test/bar', options: { env: {}, }, @@ -439,7 +439,12 @@ authors: ...defaultParams, translations: [{ filename: 'index.md', markdown, userLanguage: 'en' }], }); - }).to.throw(/\[foo]\(\/foo\) in \/docs\/test\/index\.md is missing a trailing slash/); + }).to.throw(`docs-infra: Missing trailing slash. The following link: +[foo](/foo) in /test/bar/index.md is missing a trailing slash, please add it. + +See https://ahrefs.com/blog/trailing-slash/ for more details. + +Please report this to https://github.com/markedjs/marked.`); }); it('should report missing leading splashes', () => { @@ -457,7 +462,10 @@ authors: ...defaultParams, translations: [{ filename: 'index.md', markdown, userLanguage: 'en' }], }); - }).to.throw(/\[foo]\(foo\/\) in \/docs\/test\/index\.md is missing a leading slash/); + }).to.throw(`docs-infra: Missing leading slash. The following link: +[foo](foo/) in /test/bar/index.md is missing a leading slash, please add it. + +Please report this to https://github.com/markedjs/marked.`); }); it('should report title too long', () => { From 16ecbedc3014a6d8e13dbc4c2daea6cb9cb065d8 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Sun, 25 Jun 2023 14:15:48 +0530 Subject: [PATCH 07/33] Bump react-virtuoso to ^4.3.11 (#37701) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- docs/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/package.json b/docs/package.json index 7ed941d68647b5..620fd8d40c6070 100644 --- a/docs/package.json +++ b/docs/package.json @@ -108,7 +108,7 @@ "react-simple-code-editor": "^0.13.1", "react-swipeable-views": "^0.14.0", "react-transition-group": "^4.4.5", - "react-virtuoso": "^4.3.10", + "react-virtuoso": "^4.3.11", "react-window": "^1.8.9", "recharts": "2.7.1", "rimraf": "^3.0.2", diff --git a/yarn.lock b/yarn.lock index 15e74452371c03..ef5f54793de511 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14054,10 +14054,10 @@ react-transition-group@^4.4.5: loose-envify "^1.4.0" prop-types "^15.6.2" -react-virtuoso@^4.3.10: - version "4.3.10" - resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-4.3.10.tgz#5f4c41c23f94b9bfbcef80fc5cdb1b59aca258fc" - integrity sha512-/LDICLCmPRDMOheCKmuHj/U7CGjLT/WtMWZGfOothhhubQeWGbR6mtGyd+uD80Yw/n3ICZtYwERQZnTM8eC0ag== +react-virtuoso@^4.3.11: + version "4.3.11" + resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-4.3.11.tgz#ab24e707287ef1b4bb5b52f3b14795ba896e9768" + integrity sha512-0YrCvQ5GsIKRcN34GxrzhSJGuMNI+hGxWci5cTVuPQ8QWTEsrKfCyqm7YNBMmV3pu7onG1YVUBo86CyCXdejXg== react-window@^1.8.9: version "1.8.9" From d84209403c92c613c28ccf1f93197e41cd2011e8 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 25 Jun 2023 13:47:03 +0200 Subject: [PATCH 08/33] [test] Remove failing test in dev --- test/e2e-website/README.md | 6 +++--- test/e2e-website/styles-legacy.spec.ts | 6 ------ 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/test/e2e-website/README.md b/test/e2e-website/README.md index 9fa68ae9d1ae67..f67344cf1b5442 100644 --- a/test/e2e-website/README.md +++ b/test/e2e-website/README.md @@ -2,11 +2,11 @@ ## Running locally -1. Run `yarn docs:dev` to start docs in development server. -2. Run `yarn test:e2e-website:dev` in a separate terminal to run the test suites (`*.spec.ts`) inside `test/e2e-website` folder. +1. Run `yarn docs:dev` to start the development docs server. +2. Run `yarn test:e2e-website` in a separate terminal to run the test suites (`*.spec.ts`) inside `test/e2e-website` folder. > use --headed to run tests in headed browsers, check out [Playwright CLI](https://playwright.dev/docs/intro#command-line) for more options ## CI -After netlify deploy the preview site, the `netlify/functions/deploy-succeeded.js` hook calls CircleCI API to run the `e2e-website` workflow against the deployed url. +After Netlify deploys the preview site, the `netlify/functions/deploy-succeeded.js` hook calls CircleCI API to run the `e2e-website` workflow against the deployed URL. diff --git a/test/e2e-website/styles-legacy.spec.ts b/test/e2e-website/styles-legacy.spec.ts index 0b619f30643717..b5f11235f98a91 100644 --- a/test/e2e-website/styles-legacy.spec.ts +++ b/test/e2e-website/styles-legacy.spec.ts @@ -4,12 +4,6 @@ import { TestFixture } from './playwright.config'; const test = base.extend({}); -test('should see legacy styles', async ({ page }) => { - await page.goto(`/styles/basics/`); - - await expect(page.locator('h1:has-text("@mui/styles")')).toBeVisible(); -}); - test('should see legacy styles inside system', async ({ page }) => { await page.goto(`/system/styles/basics/`); From fbf3723ada4d8d4f7e421c4c2496d1b7e1cbb5dc Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 25 Jun 2023 16:43:53 +0200 Subject: [PATCH 09/33] [website] Match Copyright with the rest of the website --- docs/scripts/generateRSSFeed.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/scripts/generateRSSFeed.ts b/docs/scripts/generateRSSFeed.ts index 59ea849788f88c..94a7348680ef83 100644 --- a/docs/scripts/generateRSSFeed.ts +++ b/docs/scripts/generateRSSFeed.ts @@ -18,7 +18,7 @@ export default function generateRssFeed(allBlogPosts: Array) { language: 'en', image: `${siteUrl}/static/logo.svg`, favicon: `${siteUrl}/favicon.ico`, - copyright: `Copyright © ${new Date().getFullYear()} Material UI SAS.`, + copyright: `Copyright © ${new Date().getFullYear()} Material UI SAS, trading as MUI.`, feedLinks: { rss2: `${siteUrl}/public${ROUTES.rssFeed}`, }, From 5fe7fe61cf19ccd92bf77a6938ff2cdea6d2b264 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 26 Jun 2023 11:09:55 +0530 Subject: [PATCH 10/33] Bump MUI X to 6.9.0 (#37703) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- docs/package.json | 12 +++---- yarn.lock | 90 +++++++++++++++++++++++------------------------ 2 files changed, 51 insertions(+), 51 deletions(-) diff --git a/docs/package.json b/docs/package.json index 620fd8d40c6070..d43e1d5d4f976c 100644 --- a/docs/package.json +++ b/docs/package.json @@ -44,12 +44,12 @@ "@mui/styles": "^5.13.2", "@mui/system": "^5.13.6", "@mui/types": "^7.2.4", - "@mui/x-data-grid": "6.8.0", - "@mui/x-data-grid-generator": "6.8.0", - "@mui/x-data-grid-pro": "6.8.0", - "@mui/x-date-pickers": "6.8.0", - "@mui/x-date-pickers-pro": "6.8.0", - "@mui/x-license-pro": "6.6.0", + "@mui/x-data-grid": "6.9.0", + "@mui/x-data-grid-generator": "6.9.0", + "@mui/x-data-grid-pro": "6.9.0", + "@mui/x-date-pickers": "6.9.0", + "@mui/x-date-pickers-pro": "6.9.0", + "@mui/x-license-pro": "6.9.0", "@react-spring/web": "^9.7.2", "@trendmicro/react-interpolate": "^0.5.5", "@types/autosuggest-highlight": "^3.2.0", diff --git a/yarn.lock b/yarn.lock index ef5f54793de511..6d4ba701099b98 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2020,90 +2020,90 @@ react-test-renderer "^18.0.0" semver "^5.7.0" -"@mui/x-data-grid-generator@6.8.0": - version "6.8.0" - resolved "https://registry.yarnpkg.com/@mui/x-data-grid-generator/-/x-data-grid-generator-6.8.0.tgz#8e1b17d7416816f9e4099078f29b010855b8da7b" - integrity sha512-5Zo2SjlAKwhksZOylamsjCg6bf7tVMAYEGf25aSDEsMzG4bdIezLDbkxTYHR33C9R36hsIncGnsc2uJyxWuHiQ== - dependencies: - "@babel/runtime" "^7.21.0" - "@mui/base" "^5.0.0-beta.2" - "@mui/x-data-grid-premium" "6.8.0" +"@mui/x-data-grid-generator@6.9.0": + version "6.9.0" + resolved "https://registry.yarnpkg.com/@mui/x-data-grid-generator/-/x-data-grid-generator-6.9.0.tgz#64a29d2527ad496c3139e9f4caac59e819e00d90" + integrity sha512-+vMoWknonPb+Bzv4/82xK/RzimceoBcNcKQiL2Coklu7/VkwjqG2ne7TKV4tryEI7kkfqRzL/vgdaQOzr4d0Zw== + dependencies: + "@babel/runtime" "^7.22.5" + "@mui/base" "^5.0.0-beta.4" + "@mui/x-data-grid-premium" "6.9.0" chance "^1.1.11" clsx "^1.2.1" lru-cache "^7.18.3" -"@mui/x-data-grid-premium@6.8.0": - version "6.8.0" - resolved "https://registry.yarnpkg.com/@mui/x-data-grid-premium/-/x-data-grid-premium-6.8.0.tgz#f51afcf2c4416581e81598fbd7daf5ba2b07f3ef" - integrity sha512-AvaIDGd5y8FUQYCldAjtyqS47YOmkWNgrlIxesYKSeoqiuqOvYiLVB1qTob+WEwqmO2JgTUE/QWYQB6DK/77ww== +"@mui/x-data-grid-premium@6.9.0": + version "6.9.0" + resolved "https://registry.yarnpkg.com/@mui/x-data-grid-premium/-/x-data-grid-premium-6.9.0.tgz#9091c328b2bd34f25b23dab7ddc85d75cd78a025" + integrity sha512-hnJhuku7hHFj56ccNvlqrYhI67M6nd7ikBUotjiwnOmL2Frh6PpSQeNfBJ1fg3KArzTQ2+QE3+fPSP6yZ90LIQ== dependencies: - "@babel/runtime" "^7.21.0" + "@babel/runtime" "^7.22.5" "@mui/utils" "^5.13.1" - "@mui/x-data-grid" "6.8.0" - "@mui/x-data-grid-pro" "6.8.0" - "@mui/x-license-pro" "6.6.0" + "@mui/x-data-grid" "6.9.0" + "@mui/x-data-grid-pro" "6.9.0" + "@mui/x-license-pro" "6.9.0" "@types/format-util" "^1.0.2" clsx "^1.2.1" exceljs "^4.3.0" prop-types "^15.8.1" reselect "^4.1.8" -"@mui/x-data-grid-pro@6.8.0": - version "6.8.0" - resolved "https://registry.yarnpkg.com/@mui/x-data-grid-pro/-/x-data-grid-pro-6.8.0.tgz#9a4fda1e3b3978b1ec369351a04a09c4b356b2b6" - integrity sha512-Ymda4DhFQodOsM1wiAkW/ux1mVSfVMDvYbfFrJdxgO0QrE7rocZhENAs5czT4nmBkdudXpWx5Dd08tC5kUS+JQ== +"@mui/x-data-grid-pro@6.9.0": + version "6.9.0" + resolved "https://registry.yarnpkg.com/@mui/x-data-grid-pro/-/x-data-grid-pro-6.9.0.tgz#d712762d2068b7da3d87f1cc7451d49dad065b35" + integrity sha512-wfepX78XW0IzTgtL+aBlZJQs02ZP0G4B0fQhJPlxA3E3RRGwXhys8vWJfkvxX2Vz2VaRvYcvldCbUp8R5Pxr7g== dependencies: - "@babel/runtime" "^7.21.0" + "@babel/runtime" "^7.22.5" "@mui/utils" "^5.13.1" - "@mui/x-data-grid" "6.8.0" - "@mui/x-license-pro" "6.6.0" + "@mui/x-data-grid" "6.9.0" + "@mui/x-license-pro" "6.9.0" "@types/format-util" "^1.0.2" clsx "^1.2.1" prop-types "^15.8.1" reselect "^4.1.8" -"@mui/x-data-grid@6.8.0": - version "6.8.0" - resolved "https://registry.yarnpkg.com/@mui/x-data-grid/-/x-data-grid-6.8.0.tgz#6f04084dceca61c71e5594f6437ee7f038c89f01" - integrity sha512-L4CJb2zJDkyBXItfY1QwXt57ap1vIigPGiNrmuJZ8APS1jHafO1dftBWSfJyDJXsnQ5UsDBXsX1nagX51AebpQ== +"@mui/x-data-grid@6.9.0": + version "6.9.0" + resolved "https://registry.yarnpkg.com/@mui/x-data-grid/-/x-data-grid-6.9.0.tgz#3383722e0c23e09d25da1a3357865644c12576ac" + integrity sha512-JlvLvYHUrfFBQMQa7fzkxUmEVygQL5IWt0cww1Rs4zKYaVcDM5v1T8ZhFOrOQp04c7meB+CykuP94r3Dn30wqQ== dependencies: - "@babel/runtime" "^7.21.0" + "@babel/runtime" "^7.22.5" "@mui/utils" "^5.13.1" clsx "^1.2.1" prop-types "^15.8.1" reselect "^4.1.8" -"@mui/x-date-pickers-pro@6.8.0": - version "6.8.0" - resolved "https://registry.yarnpkg.com/@mui/x-date-pickers-pro/-/x-date-pickers-pro-6.8.0.tgz#fca1dbed30f875c437b45a0217ed4373d77fb56d" - integrity sha512-1RcguI4rtIpOSShohNnKHdu6Ngw7m9/p81uL9gWfR06pOPtmstkqfj2nzgxzerap02PBE81HD9rFlpGxOOGSOw== +"@mui/x-date-pickers-pro@6.9.0": + version "6.9.0" + resolved "https://registry.yarnpkg.com/@mui/x-date-pickers-pro/-/x-date-pickers-pro-6.9.0.tgz#3f70bc4de2b7a001a9dfb0419f74bdb236b7bb85" + integrity sha512-+POpBT3V845xOWddmvOkBiV0oOO7r3EPtY78pIfQ9vAikswUQ6BTXKvv6E8c6YBFi0KwAtqCm2k8G/TZNrxp2g== dependencies: - "@babel/runtime" "^7.21.0" + "@babel/runtime" "^7.22.5" "@mui/utils" "^5.13.1" - "@mui/x-date-pickers" "6.8.0" - "@mui/x-license-pro" "6.6.0" + "@mui/x-date-pickers" "6.9.0" + "@mui/x-license-pro" "6.9.0" clsx "^1.2.1" prop-types "^15.8.1" react-transition-group "^4.4.5" -"@mui/x-date-pickers@6.8.0": - version "6.8.0" - resolved "https://registry.yarnpkg.com/@mui/x-date-pickers/-/x-date-pickers-6.8.0.tgz#c31427185073e488a3ea597a9f82f180ae10ec68" - integrity sha512-QqJ8heAA07pCNYL1e1WIriJE1MTpZieEVvOu4FMkqByq9WB+Dyn+J3OdchS3d3Lw0BxuoZyJ9dsa0VgPIm5MhA== +"@mui/x-date-pickers@6.9.0": + version "6.9.0" + resolved "https://registry.yarnpkg.com/@mui/x-date-pickers/-/x-date-pickers-6.9.0.tgz#8fabcecc5e908ff243eced686eafbbc15862f024" + integrity sha512-aQ2FPQIf+Il85pkNdJ/vQaCEMJ/RiFor9qJzgSfm1NkCMlvAL8GguLxbvn3M0UdY3wSIdT23C4xyQRji7rV5Xg== dependencies: - "@babel/runtime" "^7.21.0" + "@babel/runtime" "^7.22.5" "@mui/utils" "^5.13.1" "@types/react-transition-group" "^4.4.6" clsx "^1.2.1" prop-types "^15.8.1" react-transition-group "^4.4.5" -"@mui/x-license-pro@6.6.0": - version "6.6.0" - resolved "https://registry.yarnpkg.com/@mui/x-license-pro/-/x-license-pro-6.6.0.tgz#8341bfb222dfbc8d70d1ed7304841ec09ffc2997" - integrity sha512-jLmAAQJdKWzcGjpw/gm1ZBdzig9y4sJjgfzO0RpDg2mPK25uZfDKGt6ZRwv8IkJHa6ulwOdudJx5YgvQM9Jj0Q== +"@mui/x-license-pro@6.9.0": + version "6.9.0" + resolved "https://registry.yarnpkg.com/@mui/x-license-pro/-/x-license-pro-6.9.0.tgz#56bca2ef7b1723b10dca3f5bc1f2677b829dd440" + integrity sha512-mai2k82Zaqw2QnuWeeMljztVOk3n1ZaSU19owQYDnAeW2MyYoDFH//HAVLyCraAun2P1GeZtwU6shcPb4sFRIw== dependencies: - "@babel/runtime" "^7.21.0" + "@babel/runtime" "^7.22.5" "@mui/utils" "^5.13.1" "@next/env@13.1.6": From b09c279fd8e219996b091eb5ded4d978d32f5094 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 26 Jun 2023 13:44:00 +0530 Subject: [PATCH 11/33] Bump globby to ^13.2.0 (#37706) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- yarn.lock | 13 ++++++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index b818e52816415a..ac934bae0bf0ce 100644 --- a/package.json +++ b/package.json @@ -150,7 +150,7 @@ "fast-glob": "^3.2.12", "format-util": "^1.0.5", "fs-extra": "^10.1.0", - "globby": "^13.1.4", + "globby": "^13.2.0", "google-auth-library": "^8.8.0", "html-webpack-plugin": "^5.5.3", "jsdom": "^21.1.2", diff --git a/yarn.lock b/yarn.lock index 6d4ba701099b98..904f31bf68f976 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8841,7 +8841,7 @@ globby@11.1.0, globby@^11.0.1, globby@^11.0.3, globby@^11.1.0: merge2 "^1.4.1" slash "^3.0.0" -globby@13.1.4, globby@^13.1.1, globby@^13.1.4: +globby@13.1.4: version "13.1.4" resolved "https://registry.yarnpkg.com/globby/-/globby-13.1.4.tgz#2f91c116066bcec152465ba36e5caa4a13c01317" integrity sha512-iui/IiiW+QrJ1X1hKH5qwlMQyv34wJAYwH1vrf8b9kBA4sNiif3gKsMHa+BrdnOpEudWjpotfa7LrTzB1ERS/g== @@ -8852,6 +8852,17 @@ globby@13.1.4, globby@^13.1.1, globby@^13.1.4: merge2 "^1.4.1" slash "^4.0.0" +globby@^13.1.1, globby@^13.2.0: + version "13.2.0" + resolved "https://registry.yarnpkg.com/globby/-/globby-13.2.0.tgz#7dd5678d765c4680c2e6d106230d86cb727cb1af" + integrity sha512-jWsQfayf13NvqKUIL3Ta+CIqMnvlaIDFveWE/dpOZ9+3AMEJozsxDvKA02zync9UuvOM8rOXzsD5GqKP4OnWPQ== + dependencies: + dir-glob "^3.0.1" + fast-glob "^3.2.11" + ignore "^5.2.0" + merge2 "^1.4.1" + slash "^4.0.0" + globjoin@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/globjoin/-/globjoin-0.1.4.tgz#2f4494ac8919e3767c5cbb691e9f463324285d43" From d24a3e72263a8ec84aeb5dac8f1e1564e6f6a4b8 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 26 Jun 2023 11:39:18 +0200 Subject: [PATCH 12/33] [docs-infra] Improve the edit page experience (#37695) --- docs/next.config.js | 2 +- docs/src/modules/components/EditPage.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/next.config.js b/docs/next.config.js index 976515eb7fa64d..a8216a5762b290 100644 --- a/docs/next.config.js +++ b/docs/next.config.js @@ -173,7 +173,7 @@ module.exports = withDocsInfra({ : null, LIB_VERSION: pkg.version, FEEDBACK_URL: process.env.FEEDBACK_URL, - SOURCE_CODE_ROOT_URL: 'https://github.com/mui/material-ui/blob/master', // #default-branch-switch + SOURCE_GITHUB_BRANCH: 'master', // #default-branch-switch SOURCE_CODE_REPO: 'https://github.com/mui/material-ui', GITHUB_TEMPLATE_DOCS_FEEDBACK: '4.docs-feedback.yml', BUILD_ONLY_ENGLISH_LOCALE: buildOnlyEnglishLocale, diff --git a/docs/src/modules/components/EditPage.js b/docs/src/modules/components/EditPage.js index 720f957d57c219..68543aceb42e75 100644 --- a/docs/src/modules/components/EditPage.js +++ b/docs/src/modules/components/EditPage.js @@ -19,7 +19,7 @@ export default function EditPage(props) { component="a" href={ userLanguage === 'en' - ? `${process.env.SOURCE_CODE_ROOT_URL}${sourceLocation}` + ? `${process.env.SOURCE_CODE_REPO}/edit/${process.env.SOURCE_GITHUB_BRANCH}${sourceLocation}` : `${CROWDIN_ROOT_URL}${crowdInLocale}#/${process.env.SOURCE_CODE_ROOT_URL.replace( 'https://github.com/mui/', '', From ae9618d8259de445cd406bce6dafacb564bbe3e6 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 26 Jun 2023 13:42:15 +0200 Subject: [PATCH 13/33] [test] Fix test:e2e local run (#37719) --- package.json | 4 ++-- test/README.md | 2 +- test/bundling/fixtures/create-react-app/package.json | 2 +- .../create-react-app/testCreateReactAppIntegration.js | 2 +- test/bundling/fixtures/esbuild/package.json | 2 +- test/bundling/fixtures/esbuild/testEsbuildIntegration.js | 2 +- .../fixtures/next-webpack4/testNextWebpack4Integration.js | 2 +- .../fixtures/next-webpack5/testNextWebpack5Integration.js | 2 +- test/bundling/fixtures/snowpack/package.json | 2 +- test/bundling/fixtures/snowpack/testSnowpackIntegration.js | 2 +- test/bundling/fixtures/vite/package.json | 2 +- test/bundling/fixtures/vite/testViteIntegration.js | 2 +- test/e2e/index.test.ts | 2 +- test/regressions/README.md | 2 +- test/regressions/index.test.js | 2 +- 15 files changed, 16 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index ac934bae0bf0ce..19a72d4d2fb63d 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "test:e2e:build": "webpack --config test/e2e/webpack.config.js", "test:e2e:dev": "concurrently \"yarn test:e2e:build --watch\" \"yarn test:e2e:server\"", "test:e2e:run": "mocha --config test/e2e/.mocharc.js 'test/e2e/**/*.test.{js,ts,tsx}'", - "test:e2e:server": "serve test/e2e", + "test:e2e:server": "serve test/e2e -p 5001", "test:e2e-website": "playwright test test/e2e-website --config test/e2e-website/playwright.config.ts", "test:e2e-website:dev": "cross-env PLAYWRIGHT_TEST_BASE_URL=http://localhost:3000 playwright test test/e2e-website --config test/e2e-website/playwright.config.ts", "test:karma": "cross-env NODE_ENV=test karma start test/karma.conf.js", @@ -62,7 +62,7 @@ "test:regressions:build": "webpack --config test/regressions/webpack.config.js", "test:regressions:dev": "concurrently \"yarn test:regressions:build --watch\" \"yarn test:regressions:server\"", "test:regressions:run": "mocha --config test/regressions/.mocharc.js --delay 'test/regressions/**/*.test.js'", - "test:regressions:server": "serve test/regressions", + "test:regressions:server": "serve test/regressions -p 5001", "test:umd": "node packages/mui-material/test/umd/run.js", "test:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' 'test/utils/**/*.test.{js,ts,tsx}'", "test:argos": "node ./scripts/pushArgos.mjs", diff --git a/test/README.md b/test/README.md index edf763d555fba6..15e3e58a82e21e 100644 --- a/test/README.md +++ b/test/README.md @@ -198,7 +198,7 @@ You can pass the same arguments as you could to `mocha`. For example, `yarn test:regressions:run --watch --grep "docs-system-basic"` to take new screenshots of every demo in `docs/src/pages/system/basic`. You can view the screenshots in `test/regressions/screenshots/chrome`. -Alternatively, you might want to open `http://localhost:3000` (while `yarn test:regressions:dev` is running) to view individual views separately. +Alternatively, you might want to open `http://localhost:5001` (while `yarn test:regressions:dev` is running) to view individual views separately. ### Caveats diff --git a/test/bundling/fixtures/create-react-app/package.json b/test/bundling/fixtures/create-react-app/package.json index a34863cc3c0fba..0dfd28e22b6163 100644 --- a/test/bundling/fixtures/create-react-app/package.json +++ b/test/bundling/fixtures/create-react-app/package.json @@ -4,7 +4,7 @@ "license": "MIT", "scripts": { "start": "yarn cross-env DISABLE_ESLINT_PLUGIN=true SKIP_PREFLIGHT_CHECK=true react-scripts build && concurrently --success first --kill-others \"yarn server\" \"node testCreateReactAppIntegration\"", - "server": "serve -s build" + "server": "serve -p 5001 -s build" }, "dependencies": { "@emotion/core": "11.0.0", diff --git a/test/bundling/fixtures/create-react-app/testCreateReactAppIntegration.js b/test/bundling/fixtures/create-react-app/testCreateReactAppIntegration.js index e8cb1a55f26540..2142cdc2cd2230 100644 --- a/test/bundling/fixtures/create-react-app/testCreateReactAppIntegration.js +++ b/test/bundling/fixtures/create-react-app/testCreateReactAppIntegration.js @@ -46,7 +46,7 @@ async function main() { `Expected no console messages but got ${consoleMessage.type()}: '${consoleMessage.text()}' `, ); }); - await attemptGoto(page, 'http://localhost:3000/'); + await attemptGoto(page, 'http://localhost:5001/'); await browser.close(); } diff --git a/test/bundling/fixtures/esbuild/package.json b/test/bundling/fixtures/esbuild/package.json index 2a473e9b8bd781..e5fe6cf7c413ac 100644 --- a/test/bundling/fixtures/esbuild/package.json +++ b/test/bundling/fixtures/esbuild/package.json @@ -5,7 +5,7 @@ "scripts": { "start": "yarn build && concurrently --success first --kill-others \"yarn server\" \"node testEsbuildIntegration\"", "build": "esbuild esbuild.fixture.js --bundle --outfile=build/esbuild.fixture.js", - "server": "serve -s build" + "server": "serve -p 5001 -s build" }, "dependencies": { "@emotion/core": "11.0.0", diff --git a/test/bundling/fixtures/esbuild/testEsbuildIntegration.js b/test/bundling/fixtures/esbuild/testEsbuildIntegration.js index e8cb1a55f26540..2142cdc2cd2230 100644 --- a/test/bundling/fixtures/esbuild/testEsbuildIntegration.js +++ b/test/bundling/fixtures/esbuild/testEsbuildIntegration.js @@ -46,7 +46,7 @@ async function main() { `Expected no console messages but got ${consoleMessage.type()}: '${consoleMessage.text()}' `, ); }); - await attemptGoto(page, 'http://localhost:3000/'); + await attemptGoto(page, 'http://localhost:5001/'); await browser.close(); } diff --git a/test/bundling/fixtures/next-webpack4/testNextWebpack4Integration.js b/test/bundling/fixtures/next-webpack4/testNextWebpack4Integration.js index 4b6a7a75a9a634..5f6fc1c70e3dba 100644 --- a/test/bundling/fixtures/next-webpack4/testNextWebpack4Integration.js +++ b/test/bundling/fixtures/next-webpack4/testNextWebpack4Integration.js @@ -46,7 +46,7 @@ async function main() { `Expected no console messages but got ${consoleMessage.type()}: '${consoleMessage.text()}' `, ); }); - await attemptGoto(page, 'http://localhost:3000/next-webpack.fixture'); + await attemptGoto(page, 'http://localhost:5001/next-webpack.fixture'); await browser.close(); } diff --git a/test/bundling/fixtures/next-webpack5/testNextWebpack5Integration.js b/test/bundling/fixtures/next-webpack5/testNextWebpack5Integration.js index 4b6a7a75a9a634..5f6fc1c70e3dba 100644 --- a/test/bundling/fixtures/next-webpack5/testNextWebpack5Integration.js +++ b/test/bundling/fixtures/next-webpack5/testNextWebpack5Integration.js @@ -46,7 +46,7 @@ async function main() { `Expected no console messages but got ${consoleMessage.type()}: '${consoleMessage.text()}' `, ); }); - await attemptGoto(page, 'http://localhost:3000/next-webpack.fixture'); + await attemptGoto(page, 'http://localhost:5001/next-webpack.fixture'); await browser.close(); } diff --git a/test/bundling/fixtures/snowpack/package.json b/test/bundling/fixtures/snowpack/package.json index 8de4df5e55316b..28cd40a553d98e 100644 --- a/test/bundling/fixtures/snowpack/package.json +++ b/test/bundling/fixtures/snowpack/package.json @@ -4,7 +4,7 @@ "license": "MIT", "scripts": { "start": "yarn snowpack build && concurrently --success first --kill-others \"yarn server\" \"node testSnowpackIntegration\"", - "server": "serve -s build" + "server": "serve -p 5001 -s build" }, "dependencies": { "@emotion/core": "11.0.0", diff --git a/test/bundling/fixtures/snowpack/testSnowpackIntegration.js b/test/bundling/fixtures/snowpack/testSnowpackIntegration.js index dc37edbdd7e85a..32ef4ef36b0fa5 100644 --- a/test/bundling/fixtures/snowpack/testSnowpackIntegration.js +++ b/test/bundling/fixtures/snowpack/testSnowpackIntegration.js @@ -56,7 +56,7 @@ async function main() { ); } }); - await attemptGoto(page, 'http://localhost:3000/'); + await attemptGoto(page, 'http://localhost:5001/'); await browser.close(); } diff --git a/test/bundling/fixtures/vite/package.json b/test/bundling/fixtures/vite/package.json index 731a8ce1a2c46b..c7fe1c26df4858 100644 --- a/test/bundling/fixtures/vite/package.json +++ b/test/bundling/fixtures/vite/package.json @@ -4,7 +4,7 @@ "license": "MIT", "scripts": { "start": "yarn vite build && concurrently --success first --kill-others \"yarn server\" \"node testViteIntegration\"", - "server": "serve -s build" + "server": "serve -p 5001 -s build" }, "dependencies": { "@emotion/core": "11.0.0", diff --git a/test/bundling/fixtures/vite/testViteIntegration.js b/test/bundling/fixtures/vite/testViteIntegration.js index e8cb1a55f26540..2142cdc2cd2230 100644 --- a/test/bundling/fixtures/vite/testViteIntegration.js +++ b/test/bundling/fixtures/vite/testViteIntegration.js @@ -46,7 +46,7 @@ async function main() { `Expected no console messages but got ${consoleMessage.type()}: '${consoleMessage.text()}' `, ); }); - await attemptGoto(page, 'http://localhost:3000/'); + await attemptGoto(page, 'http://localhost:5001/'); await browser.close(); } diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts index b1a2fbf47e168b..a00a3cf5455fbd 100644 --- a/test/e2e/index.test.ts +++ b/test/e2e/index.test.ts @@ -61,7 +61,7 @@ async function attemptGoto(page: playwright.Page, url: string): Promise } describe('e2e', () => { - const baseUrl = 'http://localhost:3000'; + const baseUrl = 'http://localhost:5001'; let browser: playwright.Browser; let page: playwright.Page; const screen: PlaywrightScreen = { diff --git a/test/regressions/README.md b/test/regressions/README.md index 51829efcbf0470..850f7fa6ad42a7 100644 --- a/test/regressions/README.md +++ b/test/regressions/README.md @@ -29,7 +29,7 @@ If you're adding a new test prefer a new component instead of editing existing f `yarn test:regressions:dev` will build all fixtures and render an overview page that lists all fixtures. This can be used to debug individual fixtures. -By default, a devtools-like view is shown that can be disabled by appending `#no-dev` to the URL e.g. `http://localhost:3000/docs-customization-typography/CustomResponsiveFontSizes#no-dev` or forced by appending `#dev` to the URL e.g. `http://localhost:3000/docs-customization-typography/CustomResponsiveFontSizes#dev`. +By default, a devtools-like view is shown that can be disabled by appending `#no-dev` to the URL e.g. `http://localhost:5001/docs-customization-typography/CustomResponsiveFontSizes#no-dev` or forced by appending `#dev` to the URL e.g. `http://localhost:5001/docs-customization-typography/CustomResponsiveFontSizes#dev`. ### Automatic diff --git a/test/regressions/index.test.js b/test/regressions/index.test.js index 1b8864f81fbb73..0b5f64b2c5f3f2 100644 --- a/test/regressions/index.test.js +++ b/test/regressions/index.test.js @@ -3,7 +3,7 @@ import * as path from 'path'; import * as playwright from 'playwright'; async function main() { - const baseUrl = 'http://localhost:3000'; + const baseUrl = 'http://localhost:5001'; const screenshotDir = path.resolve(__dirname, './screenshots/chrome'); const browser = await playwright.chromium.launch({ From 067391d42fd7e55d25a892d26cd9489f6598ea99 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 26 Jun 2023 13:51:36 +0200 Subject: [PATCH 14/33] =?UTF-8?q?[docs=E2=80=93infra]=20Prevent=20displayi?= =?UTF-8?q?ng=20multiple=20ads=20(#37696)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/src/modules/components/AdCarbon.js | 54 ++++++++++++++----------- 1 file changed, 30 insertions(+), 24 deletions(-) diff --git a/docs/src/modules/components/AdCarbon.js b/docs/src/modules/components/AdCarbon.js index cf903c5bb1331c..c19ed0ef953c54 100644 --- a/docs/src/modules/components/AdCarbon.js +++ b/docs/src/modules/components/AdCarbon.js @@ -1,16 +1,42 @@ import * as React from 'react'; -import GlobalStyles from '@mui/material/GlobalStyles'; +import { styled } from '@mui/material/styles'; import loadScript from 'docs/src/modules/utils/loadScript'; import AdDisplay from 'docs/src/modules/components/AdDisplay'; import { adStylesObject } from 'docs/src/modules/components/ad.styles'; +const CarbonRoot = styled('span')(({ theme }) => { + const styles = adStylesObject['body-image'](theme); + + return { + '& > div': { + // The isolation logic of carbonads is broken. + // Once the script starts loading, it will asynchronous resolve, with no way to stop it. + // This leads to duplication of the ad. + // + // To solve the issue, we only display the #carbonads div + display: 'none', + }, + '& #carbonads': { + display: 'block', + ...styles.root, + '& .carbon-img': styles.imgWrapper, + '& img': styles.img, + '& a, & a:hover': styles.a, + '& .carbon-text': styles.description, + '& .carbon-poweredby': styles.poweredby, + }, + }; +}); + function AdCarbonImage() { const ref = React.useRef(null); React.useEffect(() => { - // The isolation logic of carbonads is flawed. + // The isolation logic of carbonads is broken. // Once the script starts loading, it will asynchronous resolve, with no way to stop it. - // This leads to duplication of the ad. To solve the issue, we debounce the load action. + // This leads to duplication of the ad. + // + // To solve the issue, e.g. StrictModel double effect execution, we debounce the load action. const load = setTimeout(() => { const script = loadScript( 'https://cdn.carbonads.com/carbon.js?serve=CKYIL27L&placement=material-uicom', @@ -24,27 +50,7 @@ function AdCarbonImage() { }; }, []); - return ( - - { - const styles = adStylesObject['body-image'](theme); - - return { - '#carbonads': { - ...styles.root, - '& .carbon-img': styles.imgWrapper, - '& img': styles.img, - '& a, & a:hover': styles.a, - '& .carbon-text': styles.description, - '& .carbon-poweredby': styles.poweredby, - }, - }; - }} - /> - - - ); + return ; } export function AdCarbonInline(props) { From ddaed57f1f98e8e35af38f7b174d16f421ed6d2d Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 26 Jun 2023 21:45:20 +0200 Subject: [PATCH 15/33] [docs][base] Add Tailwind CSS & plain CSS demos on the Input page (#37685) --- .../input/UnstyledInputBasic/css/index.js | 85 +++++++++++++++++++ .../input/UnstyledInputBasic/css/index.tsx | 85 +++++++++++++++++++ .../UnstyledInputBasic/css/index.tsx.preview | 8 ++ .../system/index.js} | 0 .../system/index.tsx} | 0 .../system/index.tsx.preview} | 0 .../UnstyledInputBasic/tailwind/index.js | 27 ++++++ .../UnstyledInputBasic/tailwind/index.tsx | 27 ++++++ .../tailwind/index.tsx.preview | 11 +++ docs/data/base/components/input/input.md | 2 +- docs/src/modules/sandbox/CodeSandbox.test.js | 35 +------- docs/src/modules/sandbox/CreateReactApp.ts | 13 ++- docs/src/modules/sandbox/StackBlitz.test.js | 28 +----- docs/tailwind.config.js | 8 +- 14 files changed, 271 insertions(+), 58 deletions(-) create mode 100644 docs/data/base/components/input/UnstyledInputBasic/css/index.js create mode 100644 docs/data/base/components/input/UnstyledInputBasic/css/index.tsx create mode 100644 docs/data/base/components/input/UnstyledInputBasic/css/index.tsx.preview rename docs/data/base/components/input/{UnstyledInputBasic.js => UnstyledInputBasic/system/index.js} (100%) rename docs/data/base/components/input/{UnstyledInputBasic.tsx => UnstyledInputBasic/system/index.tsx} (100%) rename docs/data/base/components/input/{UnstyledInputBasic.tsx.preview => UnstyledInputBasic/system/index.tsx.preview} (100%) create mode 100644 docs/data/base/components/input/UnstyledInputBasic/tailwind/index.js create mode 100644 docs/data/base/components/input/UnstyledInputBasic/tailwind/index.tsx create mode 100644 docs/data/base/components/input/UnstyledInputBasic/tailwind/index.tsx.preview diff --git a/docs/data/base/components/input/UnstyledInputBasic/css/index.js b/docs/data/base/components/input/UnstyledInputBasic/css/index.js new file mode 100644 index 00000000000000..c01e01d088184d --- /dev/null +++ b/docs/data/base/components/input/UnstyledInputBasic/css/index.js @@ -0,0 +1,85 @@ +import * as React from 'react'; +import Input from '@mui/base/Input'; +import { useTheme } from '@mui/system'; + +export default function UnstyledInputBasic() { + return ( + + + + + ); +} + +const cyan = { + 50: '#E9F8FC', + 100: '#BDEBF4', + 200: '#99D8E5', + 300: '#66BACC', + 400: '#1F94AD', + 500: '#0D5463', + 600: '#094855', + 700: '#063C47', + 800: '#043039', + 900: '#022127', +}; + +const grey = { + 50: '#F3F6F9', + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +function Styles() { + // Replace this with your app logic for determining dark mode + const isDarkMode = useIsDarkMode(); + + return ( + + ); +} diff --git a/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx b/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx new file mode 100644 index 00000000000000..c01e01d088184d --- /dev/null +++ b/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx @@ -0,0 +1,85 @@ +import * as React from 'react'; +import Input from '@mui/base/Input'; +import { useTheme } from '@mui/system'; + +export default function UnstyledInputBasic() { + return ( + + + + + ); +} + +const cyan = { + 50: '#E9F8FC', + 100: '#BDEBF4', + 200: '#99D8E5', + 300: '#66BACC', + 400: '#1F94AD', + 500: '#0D5463', + 600: '#094855', + 700: '#063C47', + 800: '#043039', + 900: '#022127', +}; + +const grey = { + 50: '#F3F6F9', + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +function Styles() { + // Replace this with your app logic for determining dark mode + const isDarkMode = useIsDarkMode(); + + return ( + + ); +} diff --git a/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx.preview b/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx.preview new file mode 100644 index 00000000000000..b4003b693f4f3a --- /dev/null +++ b/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx.preview @@ -0,0 +1,8 @@ + + + + \ No newline at end of file diff --git a/docs/data/base/components/input/UnstyledInputBasic.js b/docs/data/base/components/input/UnstyledInputBasic/system/index.js similarity index 100% rename from docs/data/base/components/input/UnstyledInputBasic.js rename to docs/data/base/components/input/UnstyledInputBasic/system/index.js diff --git a/docs/data/base/components/input/UnstyledInputBasic.tsx b/docs/data/base/components/input/UnstyledInputBasic/system/index.tsx similarity index 100% rename from docs/data/base/components/input/UnstyledInputBasic.tsx rename to docs/data/base/components/input/UnstyledInputBasic/system/index.tsx diff --git a/docs/data/base/components/input/UnstyledInputBasic.tsx.preview b/docs/data/base/components/input/UnstyledInputBasic/system/index.tsx.preview similarity index 100% rename from docs/data/base/components/input/UnstyledInputBasic.tsx.preview rename to docs/data/base/components/input/UnstyledInputBasic/system/index.tsx.preview diff --git a/docs/data/base/components/input/UnstyledInputBasic/tailwind/index.js b/docs/data/base/components/input/UnstyledInputBasic/tailwind/index.js new file mode 100644 index 00000000000000..b185ff8fcca573 --- /dev/null +++ b/docs/data/base/components/input/UnstyledInputBasic/tailwind/index.js @@ -0,0 +1,27 @@ +import * as React from 'react'; +import Input from '@mui/base/Input'; +import { useTheme } from '@mui/system'; + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +export default function UnstyledInputBasic() { + // Replace this with your app logic for determining dark modes + const isDarkMode = useIsDarkMode(); + + return ( + + ); +} diff --git a/docs/data/base/components/input/UnstyledInputBasic/tailwind/index.tsx b/docs/data/base/components/input/UnstyledInputBasic/tailwind/index.tsx new file mode 100644 index 00000000000000..b185ff8fcca573 --- /dev/null +++ b/docs/data/base/components/input/UnstyledInputBasic/tailwind/index.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import Input from '@mui/base/Input'; +import { useTheme } from '@mui/system'; + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +export default function UnstyledInputBasic() { + // Replace this with your app logic for determining dark modes + const isDarkMode = useIsDarkMode(); + + return ( + + ); +} diff --git a/docs/data/base/components/input/UnstyledInputBasic/tailwind/index.tsx.preview b/docs/data/base/components/input/UnstyledInputBasic/tailwind/index.tsx.preview new file mode 100644 index 00000000000000..f4371eaa02797f --- /dev/null +++ b/docs/data/base/components/input/UnstyledInputBasic/tailwind/index.tsx.preview @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/docs/data/base/components/input/input.md b/docs/data/base/components/input/input.md index 6ecbb4f32dcd7c..e7049a239aa11c 100644 --- a/docs/data/base/components/input/input.md +++ b/docs/data/base/components/input/input.md @@ -42,7 +42,7 @@ Input behaves similarly to the native HTML ``, except that it's nested in The following demo shows how to create and style an input component, including `placeholder` text: -{{"demo": "UnstyledInputBasic.js", "defaultCodeOpen": false}} +{{"demo": "UnstyledInputBasic", "defaultCodeOpen": false}} ### Anatomy diff --git a/docs/src/modules/sandbox/CodeSandbox.test.js b/docs/src/modules/sandbox/CodeSandbox.test.js index 013228031a2de9..86d80384e9a25a 100644 --- a/docs/src/modules/sandbox/CodeSandbox.test.js +++ b/docs/src/modules/sandbox/CodeSandbox.test.js @@ -123,7 +123,7 @@ describe('CodeSandbox', () => { }); }); - it('generate the correct Tailwind JavaScript result', () => { + it('generate the correct index.html result when Tailwind is used', () => { const result = CodeSandbox.createReactApp({ title: 'BasicButtons Material Demo', githubLocation: @@ -133,35 +133,8 @@ describe('CodeSandbox', () => { raw: testCase, codeStyling: 'Tailwind', }); - expect(result.files).to.deep.equal({ - 'package.json': { - content: { - description: - 'https://github.com/mui/material-ui/blob/v5.7.0/docs/data/material/components/buttons/BasicButtons.js', - dependencies: { - react: 'latest', - '@mui/material': 'latest', - 'react-dom': 'latest', - '@emotion/react': 'latest', - '@emotion/styled': 'latest', - }, - devDependencies: { - 'react-scripts': 'latest', - }, - }, - }, - 'public/index.html': { - content: - '\n\n \n BasicButtons Material Demo\n \n \n \n \n \n \n \n \n
\n \n', - }, - 'demo.js': { - content: - 'import * as React from \'react\';\nimport Stack from \'@mui/material/Stack\';\nimport Button from \'@mui/material/Button\';\n\nexport default function BasicButtons() {\n return (\n \n \n \n \n \n );\n}\n', - }, - 'index.js': { - content: - "import * as React from 'react';\nimport * as ReactDOM from 'react-dom/client';\nimport { StyledEngineProvider } from '@mui/material/styles';\nimport Demo from './demo';\n\nReactDOM.createRoot(document.querySelector(\"#root\")).render(\n \n \n \n \n \n);", - }, - }); + expect(result.files['public/index.html'].content).to.contain( + '', + ); }); }); diff --git a/docs/src/modules/sandbox/CreateReactApp.ts b/docs/src/modules/sandbox/CreateReactApp.ts index a444a76614a6ea..433fd3d5d6155b 100644 --- a/docs/src/modules/sandbox/CreateReactApp.ts +++ b/docs/src/modules/sandbox/CreateReactApp.ts @@ -24,7 +24,18 @@ export const getHtml = ({ codeStyling === 'Tailwind' ? ` - ` + + ` : '' } diff --git a/docs/src/modules/sandbox/StackBlitz.test.js b/docs/src/modules/sandbox/StackBlitz.test.js index 214e432a60af5f..f64a0fcdfedb54 100644 --- a/docs/src/modules/sandbox/StackBlitz.test.js +++ b/docs/src/modules/sandbox/StackBlitz.test.js @@ -90,7 +90,7 @@ describe('StackBlitz', () => { }); }); - it('generate the correct Tailwind JavaScript result', () => { + it('generate the correct index.html result when Tailwind is used', () => { const { openSandbox, ...result } = StackBlitz.createReactApp({ title: 'BasicButtons Material Demo', githubLocation: @@ -100,28 +100,8 @@ describe('StackBlitz', () => { raw: testCase, codeStyling: 'Tailwind', }); - expect(result).to.deep.equal({ - title: 'BasicButtons Material Demo', - description: - 'https://github.com/mui/material-ui/blob/v5.7.0/docs/data/material/components/buttons/BasicButtons.js', - files: { - 'index.html': - '\n\n \n BasicButtons Material Demo\n \n \n \n \n \n \n \n \n
\n \n', - 'demo.js': - 'import * as React from \'react\';\nimport Stack from \'@mui/material/Stack\';\nimport Button from \'@mui/material/Button\';\n\nexport default function BasicButtons() {\n return (\n \n \n \n \n \n );\n}\n', - 'index.js': - "import * as React from 'react';\nimport * as ReactDOM from 'react-dom/client';\nimport { StyledEngineProvider } from '@mui/material/styles';\nimport Demo from './demo';\n\nReactDOM.createRoot(document.querySelector(\"#root\")).render(\n \n \n \n \n \n);", - }, - dependencies: { - react: 'latest', - '@mui/material': 'latest', - 'react-dom': 'latest', - '@emotion/react': 'latest', - '@emotion/styled': 'latest', - }, - devDependencies: { - 'react-scripts': 'latest', - }, - }); + expect(result.files['index.html']).to.contain( + '', + ); }); }); diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js index 44e4abc3f64cde..bbafda154a4c66 100644 --- a/docs/tailwind.config.js +++ b/docs/tailwind.config.js @@ -1,12 +1,18 @@ /** @type {import('tailwindcss').Config} */ module.exports = { + darkMode: 'class', content: [ './data/**/*.{js,ts,jsx,tsx,mdx}', './pages/**/*.{js,ts,jsx,tsx,mdx}', './src/**/*.{js,ts,jsx,tsx,mdx}', ], + // This needs to be kept in sync with docs/src/modules/sandbox/CreateReactApp.tsx theme: { - extend: {}, + extend: { + boxShadow: { + 'outline-purple': '0 0 0 3px #c084fc', + }, + }, }, corePlugins: { // Remove the Tailwind CSS preflight styles so it can use Material UI's preflight instead (CssBaseline). From 3a17e018ca76e2cb48e66ef22a3b3bd59b46bc5a Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 26 Jun 2023 22:01:37 +0200 Subject: [PATCH 16/33] [blog] Fix mismatch between plan and link --- docs/pages/blog/mui-x-v6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/blog/mui-x-v6.md b/docs/pages/blog/mui-x-v6.md index f73cdc9b5eac61..ce2ad21aebf620 100644 --- a/docs/pages/blog/mui-x-v6.md +++ b/docs/pages/blog/mui-x-v6.md @@ -16,7 +16,7 @@ tags: ['MUI X', 'News'] - [Data Grid - feature highlights ✨](#data-grid-features-highlights-✨) - [ApiRef moved to the MIT (Community) version](#apiref-moved-to-the-mit-community-version) - [Improved column menu](#improved-column-menu) - - [Row pinning is now stable](#row-pinning-is-now-stable) [](/x/introduction/licensing/#premium-plan) + - [Row pinning is now stable](#row-pinning-is-now-stable) [](/x/introduction/licensing/#pro-plan) - [Aggregation is now stable](#aggregation-is-now-stable) [](/x/introduction/licensing/#premium-plan) - [Cell selection](#cell-selection) [](/x/introduction/licensing/#premium-plan) - [Use web workers to export data to excel files](#use-web-workers-to-export-data-to-excel-files) [](/x/introduction/licensing/#premium-plan) From f864cb4a8bf7fbe99e430ea30560d310768aaf18 Mon Sep 17 00:00:00 2001 From: Zeeshan Tamboli Date: Tue, 27 Jun 2023 12:07:35 +0530 Subject: [PATCH 17/33] [Timeline] Fix position `alternate-reverse` generated classname (#37678) --- packages/mui-lab/src/Timeline/Timeline.test.tsx | 11 ++++++++++- packages/mui-lab/src/Timeline/Timeline.tsx | 6 +++--- .../mui-lab/src/TimelineContent/TimelineContent.js | 6 +++--- packages/mui-lab/src/TimelineItem/TimelineItem.js | 7 ++++--- .../TimelineOppositeContent.js | 6 +++--- .../src/internal/convertTimelinePositionToClass.ts | 7 +++++++ 6 files changed, 30 insertions(+), 13 deletions(-) create mode 100644 packages/mui-lab/src/internal/convertTimelinePositionToClass.ts diff --git a/packages/mui-lab/src/Timeline/Timeline.test.tsx b/packages/mui-lab/src/Timeline/Timeline.test.tsx index ba44b0cecb2824..1c0aab5da7d025 100644 --- a/packages/mui-lab/src/Timeline/Timeline.test.tsx +++ b/packages/mui-lab/src/Timeline/Timeline.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { createRenderer, describeConformance } from 'test/utils'; +import { expect } from 'chai'; +import { createRenderer, describeConformance, screen } from 'test/utils'; import Timeline, { timelineClasses as classes } from '@mui/lab/Timeline'; describe('', () => { @@ -15,4 +16,12 @@ describe('', () => { testStateOverrides: { prop: 'position', value: 'left', styleKey: 'positionLeft' }, skip: ['componentProp', 'componentsProp'], })); + + it('should have correct classname', () => { + render(); + + expect(screen.getByTestId('timeline-root')).to.have.class( + 'MuiTimeline-positionAlternateReverse', + ); + }); }); diff --git a/packages/mui-lab/src/Timeline/Timeline.tsx b/packages/mui-lab/src/Timeline/Timeline.tsx index e4da2a1cf72d34..9b932e063044ed 100644 --- a/packages/mui-lab/src/Timeline/Timeline.tsx +++ b/packages/mui-lab/src/Timeline/Timeline.tsx @@ -4,11 +4,11 @@ import clsx from 'clsx'; import { SxProps } from '@mui/system'; // eslint-disable-next-line no-restricted-imports -- importing types import { InternalStandardProps as StandardProps } from '@mui/material'; -import { capitalize } from '@mui/material/utils'; import { unstable_composeClasses as composeClasses } from '@mui/base'; import { styled, useThemeProps, Theme } from '@mui/material/styles'; import TimelineContext from './TimelineContext'; import { getTimelineUtilityClass } from './timelineClasses'; +import convertTimelinePositionToClass from '../internal/convertTimelinePositionToClass'; export type TimelineClassKey = keyof NonNullable; @@ -54,7 +54,7 @@ const useUtilityClasses = (ownerState: OwnerState) => { const { position, classes } = ownerState; const slots = { - root: ['root', position && `position${capitalize(position)}`], + root: ['root', position && convertTimelinePositionToClass(position)], }; return composeClasses(slots, getTimelineUtilityClass, classes); @@ -68,7 +68,7 @@ const TimelineRoot = styled('ul' as const, { return [ styles.root, ownerState.position && - styles[`position${capitalize(ownerState.position)}` as TimelineClassKey], + styles[convertTimelinePositionToClass(ownerState.position) as TimelineClassKey], ]; }, })<{ ownerState: OwnerState }>({ diff --git a/packages/mui-lab/src/TimelineContent/TimelineContent.js b/packages/mui-lab/src/TimelineContent/TimelineContent.js index 4b7561249f8b8e..909a397a61f9d1 100644 --- a/packages/mui-lab/src/TimelineContent/TimelineContent.js +++ b/packages/mui-lab/src/TimelineContent/TimelineContent.js @@ -1,18 +1,18 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { capitalize } from '@mui/material/utils'; import { styled, useThemeProps } from '@mui/material/styles'; import { unstable_composeClasses as composeClasses } from '@mui/base'; import Typography from '@mui/material/Typography'; import TimelineContext from '../Timeline/TimelineContext'; import { getTimelineContentUtilityClass } from './timelineContentClasses'; +import convertTimelinePositionToClass from '../internal/convertTimelinePositionToClass'; const useUtilityClasses = (ownerState) => { const { position, classes } = ownerState; const slots = { - root: ['root', `position${capitalize(position)}`], + root: ['root', convertTimelinePositionToClass(position)], }; return composeClasses(slots, getTimelineContentUtilityClass, classes); @@ -23,7 +23,7 @@ const TimelineContentRoot = styled(Typography, { slot: 'Root', overridesResolver: (props, styles) => { const { ownerState } = props; - return [styles.root, styles[`position${capitalize(ownerState.position)}`]]; + return [styles.root, styles[convertTimelinePositionToClass(ownerState.position)]]; }, })(({ ownerState }) => ({ flex: 1, diff --git a/packages/mui-lab/src/TimelineItem/TimelineItem.js b/packages/mui-lab/src/TimelineItem/TimelineItem.js index 3498b2d339c7cc..15181d332a49f9 100644 --- a/packages/mui-lab/src/TimelineItem/TimelineItem.js +++ b/packages/mui-lab/src/TimelineItem/TimelineItem.js @@ -1,13 +1,14 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { capitalize, isMuiElement } from '@mui/material/utils'; +import { isMuiElement } from '@mui/material/utils'; import { styled, useThemeProps } from '@mui/material/styles'; import { unstable_composeClasses as composeClasses } from '@mui/base'; import { timelineContentClasses } from '../TimelineContent'; import { timelineOppositeContentClasses } from '../TimelineOppositeContent'; import TimelineContext from '../Timeline/TimelineContext'; import { getTimelineItemUtilityClass } from './timelineItemClasses'; +import convertTimelinePositionToClass from '../internal/convertTimelinePositionToClass'; const useUtilityClasses = (ownerState) => { const { position, classes, hasOppositeContent } = ownerState; @@ -15,7 +16,7 @@ const useUtilityClasses = (ownerState) => { const slots = { root: [ 'root', - `position${capitalize(position)}`, + convertTimelinePositionToClass(position), !hasOppositeContent && 'missingOppositeContent', ], }; @@ -29,7 +30,7 @@ const TimelineItemRoot = styled('li', { overridesResolver: (props, styles) => { const { ownerState } = props; - return [styles.root, styles[`position${capitalize(ownerState.position)}`]]; + return [styles.root, styles[convertTimelinePositionToClass(ownerState.position)]]; }, })(({ ownerState }) => ({ listStyle: 'none', diff --git a/packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js b/packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js index df84ddf17e085a..a18cf2ae42316d 100644 --- a/packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js +++ b/packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js @@ -2,17 +2,17 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { styled, useThemeProps } from '@mui/material/styles'; -import { capitalize } from '@mui/material/utils'; import { unstable_composeClasses as composeClasses } from '@mui/base'; import Typography from '@mui/material/Typography'; import TimelineContext from '../Timeline/TimelineContext'; import { getTimelineOppositeContentUtilityClass } from './timelineOppositeContentClasses'; +import convertTimelinePositionToClass from '../internal/convertTimelinePositionToClass'; const useUtilityClasses = (ownerState) => { const { position, classes } = ownerState; const slots = { - root: ['root', `position${capitalize(position)}`], + root: ['root', convertTimelinePositionToClass(position)], }; return composeClasses(slots, getTimelineOppositeContentUtilityClass, classes); @@ -23,7 +23,7 @@ const TimelineOppositeContentRoot = styled(Typography, { slot: 'Root', overridesResolver: (props, styles) => { const { ownerState } = props; - return [styles.root, styles[`position${capitalize(ownerState.position)}`]]; + return [styles.root, styles[convertTimelinePositionToClass(ownerState.position)]]; }, })(({ ownerState }) => ({ padding: '6px 16px', diff --git a/packages/mui-lab/src/internal/convertTimelinePositionToClass.ts b/packages/mui-lab/src/internal/convertTimelinePositionToClass.ts new file mode 100644 index 00000000000000..39ec913709b8d0 --- /dev/null +++ b/packages/mui-lab/src/internal/convertTimelinePositionToClass.ts @@ -0,0 +1,7 @@ +import { capitalize } from '@mui/material/utils'; + +export default function convertTimelinePositionToClass(position: string): string { + return position === 'alternate-reverse' + ? 'positionAlternateReverse' + : `position${capitalize(position)}`; +} From 5046cc18373a169edbd75ef471245c23d8363fc9 Mon Sep 17 00:00:00 2001 From: Danail Hadjiatanasov Date: Tue, 27 Jun 2023 11:22:07 +0300 Subject: [PATCH 18/33] [core] Fix priority support prompt action flow (#37726) --- .github/workflows/priority-support-validation-prompt.yml | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/.github/workflows/priority-support-validation-prompt.yml b/.github/workflows/priority-support-validation-prompt.yml index ae863a9f4fdfb5..bdc45206a6e161 100644 --- a/.github/workflows/priority-support-validation-prompt.yml +++ b/.github/workflows/priority-support-validation-prompt.yml @@ -16,16 +16,16 @@ jobs: steps: - name: Find Comment - uses: peter-evans/create-or-update-comment@c6c9a1a66007646a28c153e2a8580a5bad27bcfa # v3.0.2 + uses: peter-evans/find-comment@v2 # v2.4.0 id: findComment with: - issue-number: ${{ github.event.pull_request.number }} + issue-number: ${{ github.event.issue.number }} comment-author: 'github-actions[bot]' body-includes: You have created a priority support request - name: Create comment if: ${{ steps.findComment.outputs.comment-id == '' && contains(github.event.label.name, 'unknown') }} - uses: peter-evans/create-or-update-comment@c6c9a1a66007646a28c153e2a8580a5bad27bcfa # v3.0.2 + uses: peter-evans/create-or-update-comment@5f728c3dae25f329afbe34ee4d08eef25569d79f # v3.0.2 with: issue-number: ${{ github.event.issue.number }} body: | @@ -39,8 +39,9 @@ jobs: - name: Update comment if: ${{ steps.findComment.outputs.comment-id != '' && contains(github.event.label.name, 'priority') }} - uses: peter-evans/create-or-update-comment@c6c9a1a66007646a28c153e2a8580a5bad27bcfa # v3.0.2 + uses: peter-evans/create-or-update-comment@5f728c3dae25f329afbe34ee4d08eef25569d79f # v3.0.2 with: comment-id: ${{ steps.findComment.outputs.comment-id }} body: | Thank you for verifying your support key 🔑, your SLA starts now. + edit-mode: replace From e9c7c7c3ffb898c7a7f2429f1120da52f08ce74b Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Tue, 27 Jun 2023 08:44:23 -0300 Subject: [PATCH 19/33] [docs-infra] Tweak editable code blocks callout design (#37681) --- docs/src/modules/components/DemoEditor.tsx | 25 +++++++++++++++------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx index 6ea257316242b6..71adf8d82a4d35 100644 --- a/docs/src/modules/components/DemoEditor.tsx +++ b/docs/src/modules/components/DemoEditor.tsx @@ -8,7 +8,7 @@ import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; import CodeCopyButton from 'docs/src/modules/components/CodeCopyButton'; import { useTranslate } from 'docs/src/modules/utils/i18n'; import { useCodeCopy } from 'docs/src/modules/utils/CodeCopy'; -import { blue, blueDark } from 'docs/src/modules/brandingTheme'; +import { blueDark } from 'docs/src/modules/brandingTheme'; const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [ { @@ -37,10 +37,10 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [ theme.applyDarkStyles({ '& .scrollContainer': { '&:hover': { - boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primaryDark[400]}`, + boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primaryDark[300]}`, }, '&:focus-within': { - boxShadow: `0 0 0 2px ${(theme.vars || theme).palette.primaryDark.main}`, + boxShadow: `0 0 0 2px ${(theme.vars || theme).palette.primaryDark[400]}`, }, }, }), @@ -129,22 +129,31 @@ export default function DemoEditor(props: DemoEditorProps) { sx={(theme) => ({ position: 'absolute', top: theme.spacing(1), - padding: theme.spacing(0.5, 1), + padding: theme.spacing(0.2, 1, 0.5, 1), outline: 0, left: '50%', border: '1px solid', - borderColor: blue[400], - backgroundColor: blueDark[600], - color: blueDark[50], + borderColor: blueDark[600], + backgroundColor: blueDark[700], + color: '#FFF', transform: 'translateX(-50%)', - borderRadius: '4px', + borderRadius: '6px', fontSize: theme.typography.pxToRem(13), transition: 'all 0.3s', + boxShadow: '0 2px 4px rgba(0,0,0,0.5)', '&:not(:focus)': { top: 0, opacity: 0, pointerEvents: 'none', }, + '> kbd': { + padding: theme.spacing(0.2, 0.4), + backgroundColor: blueDark[500], + fontSize: theme.typography.pxToRem(11), + borderRadius: '6px', + border: '1px solid', + borderColor: blueDark[400], + }, })} dangerouslySetInnerHTML={{ __html: t('editorHint'), From 1aa32058beeee1950a4fa4df71bdb8060227eea8 Mon Sep 17 00:00:00 2001 From: sai chand <60743144+sai6855@users.noreply.github.com> Date: Tue, 27 Jun 2023 18:49:53 +0530 Subject: [PATCH 20/33] [Slider][base][material][joy] Fix not draggable on the edge when `disableSwap={true}` (#35998) Co-authored-by: ZeeshanTamboli --- docs/pages/base-ui/api/use-slider.json | 7 +++++++ docs/translations/api-docs/use-slider/use-slider.json | 1 + packages/mui-base/src/Slider/Slider.tsx | 4 +++- packages/mui-base/src/useSlider/useSlider.ts | 8 ++++++++ packages/mui-base/src/useSlider/useSlider.types.ts | 6 ++++++ packages/mui-joy/src/Slider/Slider.tsx | 4 +++- packages/mui-material/src/Slider/Slider.js | 3 ++- 7 files changed, 30 insertions(+), 3 deletions(-) diff --git a/docs/pages/base-ui/api/use-slider.json b/docs/pages/base-ui/api/use-slider.json index 9ae1c1772dca78..991e2ab88c9540 100644 --- a/docs/pages/base-ui/api/use-slider.json +++ b/docs/pages/base-ui/api/use-slider.json @@ -81,6 +81,13 @@ }, "required": true }, + "getThumbStyle": { + "type": { + "name": "(index: number) => object", + "description": "(index: number) => object" + }, + "required": true + }, "marks": { "type": { "name": "Mark[]", "description": "Mark[]" }, "required": true }, "open": { "type": { "name": "number", "description": "number" }, "required": true }, "range": { "type": { "name": "boolean", "description": "boolean" }, "required": true }, diff --git a/docs/translations/api-docs/use-slider/use-slider.json b/docs/translations/api-docs/use-slider/use-slider.json index f6eb4b3482a511..ecab859f0c56d0 100644 --- a/docs/translations/api-docs/use-slider/use-slider.json +++ b/docs/translations/api-docs/use-slider/use-slider.json @@ -28,6 +28,7 @@ "getHiddenInputProps": "Resolver for the hidden input slot's props.", "getRootProps": "Resolver for the root slot's props.", "getThumbProps": "Resolver for the thumb slot's props.", + "getThumbStyle": "Resolver for the thumb slot's style prop.", "marks": "The marks of the slider. Marks indicate predetermined values to which the user can move the slider.", "open": "The thumb index for the current value when in hover state.", "range": "If true, the slider is a range slider when the value prop passed is an array.", diff --git a/packages/mui-base/src/Slider/Slider.tsx b/packages/mui-base/src/Slider/Slider.tsx index 524ae6d2b4c2e1..46ac1d3163a5b0 100644 --- a/packages/mui-base/src/Slider/Slider.tsx +++ b/packages/mui-base/src/Slider/Slider.tsx @@ -94,6 +94,7 @@ const Slider = React.forwardRef(function Slider diff --git a/packages/mui-base/src/useSlider/useSlider.ts b/packages/mui-base/src/useSlider/useSlider.ts index 4c63f3f31e22f2..0ffa6704b801c7 100644 --- a/packages/mui-base/src/useSlider/useSlider.ts +++ b/packages/mui-base/src/useSlider/useSlider.ts @@ -657,6 +657,13 @@ export default function useSlider(parameters: UseSliderParameters): UseSliderRet }; }; + const getThumbStyle = (index: number) => { + return { + // So the non active thumb doesn't show its label on hover. + pointerEvents: active !== -1 && active !== index ? 'none' : undefined, + }; + }; + const getHiddenInputProps = ( otherHandlers: TOther = {} as TOther, ): UseSliderHiddenInputProps => { @@ -710,5 +717,6 @@ export default function useSlider(parameters: UseSliderParameters): UseSliderRet trackLeap, trackOffset, values, + getThumbStyle, }; } diff --git a/packages/mui-base/src/useSlider/useSlider.types.ts b/packages/mui-base/src/useSlider/useSlider.types.ts index 3a97779145f687..95eaa44b22d11f 100644 --- a/packages/mui-base/src/useSlider/useSlider.types.ts +++ b/packages/mui-base/src/useSlider/useSlider.types.ts @@ -212,6 +212,12 @@ export interface UseSliderReturnValue { getThumbProps: ( otherHandlers?: TOther, ) => UseSliderThumbSlotProps; + /** + * Resolver for the thumb slot's style prop. + * @param index of the currently moved thumb + * @returns props that should be spread on the style prop of thumb slot + */ + getThumbStyle: (index: number) => object; /** * The marks of the slider. Marks indicate predetermined values to which the user can move the slider. */ diff --git a/packages/mui-joy/src/Slider/Slider.tsx b/packages/mui-joy/src/Slider/Slider.tsx index 05fb1842b0603f..00b4ee4dc65134 100644 --- a/packages/mui-joy/src/Slider/Slider.tsx +++ b/packages/mui-joy/src/Slider/Slider.tsx @@ -442,6 +442,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) { classes: classesProp, disabled, defaultValue, + disableSwap, isRtl, max, min, @@ -471,6 +472,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) { values, trackOffset, trackLeap, + getThumbStyle, } = useSlider({ ...ownerState, rootRef: ref }); ownerState.marked = marks.length > 0 && marks.some((mark) => mark.label); @@ -617,7 +619,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) { })} style={{ ...style, - pointerEvents: disableSwap && active !== index ? 'none' : undefined, + ...getThumbStyle(index), ...thumbProps.style, }} > diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index def516b22cddfa..c7099bdb2ee8cf 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -569,6 +569,7 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) { values, trackOffset, trackLeap, + getThumbStyle, } = useSlider({ ...ownerState, rootRef: ref }); ownerState.marked = marks.length > 0 && marks.some((mark) => mark.label); @@ -767,7 +768,7 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) { })} style={{ ...style, - pointerEvents: disableSwap && active !== index ? 'none' : undefined, + ...getThumbStyle(index), ...thumbProps.style, }} > From 19ee5b695256708550617b5581fc3d2c27fad227 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 27 Jun 2023 19:34:52 +0200 Subject: [PATCH 21/33] Bump react-router-dom to ^6.14.0 (#37708) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- docs/package.json | 2 +- package.json | 2 +- yarn.lock | 30 +++++++++++++++--------------- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/docs/package.json b/docs/package.json index d43e1d5d4f976c..0a6dff219a6dc8 100644 --- a/docs/package.json +++ b/docs/package.json @@ -103,7 +103,7 @@ "react-intersection-observer": "^9.5.1", "react-is": "^18.2.0", "react-number-format": "^5.2.2", - "react-router-dom": "^6.13.0", + "react-router-dom": "^6.14.0", "react-runner": "^1.0.3", "react-simple-code-editor": "^0.13.1", "react-swipeable-views": "^0.14.0", diff --git a/package.json b/package.json index 19a72d4d2fb63d..4aaec4c4a9231b 100644 --- a/package.json +++ b/package.json @@ -177,7 +177,7 @@ "raw-loader": "4.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.13.0", + "react-router-dom": "^6.14.0", "react-test-renderer": "^18.2.0", "remark": "^13.0.0", "rimraf": "^3.0.2", diff --git a/yarn.lock b/yarn.lock index 904f31bf68f976..c9fb021dbdecaf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2798,10 +2798,10 @@ "@react-spring/shared" "~9.7.2" "@react-spring/types" "~9.7.2" -"@remix-run/router@1.6.3": - version "1.6.3" - resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.6.3.tgz#8205baf6e17ef93be35bf62c37d2d594e9be0dad" - integrity sha512-EXJysQ7J3veRECd0kZFQwYYd5sJMcq2O/m60zu1W2l3oVQ9xtub8jTOtYRE0+M2iomyG/W3Ps7+vp2kna0C27Q== +"@remix-run/router@1.7.0": + version "1.7.0" + resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.7.0.tgz#550a8d5760b78efc5d60f62b5829b0f74c1fde81" + integrity sha512-Eu1V3kz3mV0wUpVTiFHuaT8UD1gj/0VnoFHQYX35xlslQUpe8CuYoKFn9d4WZFHm3yDywz6ALZuGdnUPKrNeAw== "@rollup/plugin-replace@^5.0.2": version "5.0.2" @@ -13962,20 +13962,20 @@ react-resize-detector@^8.0.4: dependencies: lodash "^4.17.21" -react-router-dom@^6.13.0: - version "6.13.0" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.13.0.tgz#6651f456bb2af42ef14f6880123b1f575539e81f" - integrity sha512-6Nqoqd7fgwxxVGdbiMHTpDHCYPq62d7Wk1Of7B82vH7ZPwwsRaIa22zRZKPPg413R5REVNiyuQPKDG1bubcOFA== +react-router-dom@^6.14.0: + version "6.14.0" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.14.0.tgz#7ce6c3f73549e4d40216ba150253d3bf30812b33" + integrity sha512-YEwlApKwzMMMbGbhh+Q7MsloTldcwMgHxUY/1g0uA62+B1hZo2jsybCWIDCL8zvIDB1FA0pBKY9chHbZHt+2dQ== dependencies: - "@remix-run/router" "1.6.3" - react-router "6.13.0" + "@remix-run/router" "1.7.0" + react-router "6.14.0" -react-router@6.13.0: - version "6.13.0" - resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.13.0.tgz#7e4427a271dae0cafbdb88c56ccbd9b1434ee93f" - integrity sha512-Si6KnfEnJw7gUQkNa70dlpI1bul46FuSxX5t5WwlUBxE25DAz2BjVkwaK8Y2s242bQrZPXCpmwLPtIO5pv4tXg== +react-router@6.14.0: + version "6.14.0" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.14.0.tgz#1c3e8e922d934d43a253fd862c72c82167c0a7f1" + integrity sha512-OD+vkrcGbvlwkspUFDgMzsu1RXwdjNh83YgG/28lBnDzgslhCgxIqoExLlxsfTpIygp7fc+Hd3esloNwzkm2xA== dependencies: - "@remix-run/router" "1.6.3" + "@remix-run/router" "1.7.0" react-runner@^1.0.3: version "1.0.3" From 5e05e68f9aaae113b1818b2cbef85e17254c42c7 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 27 Jun 2023 19:36:51 +0200 Subject: [PATCH 22/33] Bump envinfo to ^7.10.0 (#37705) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- packages/mui-envinfo/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/mui-envinfo/package.json b/packages/mui-envinfo/package.json index f3f2272a13e070..8e98082b63c33d 100644 --- a/packages/mui-envinfo/package.json +++ b/packages/mui-envinfo/package.json @@ -9,7 +9,7 @@ "version": "2.0.8", "bin": "./envinfo.js", "dependencies": { - "envinfo": "^7.8.1" + "envinfo": "^7.10.0" }, "author": "MUI Team", "bugs": { diff --git a/yarn.lock b/yarn.lock index c9fb021dbdecaf..05f857fed75204 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7284,10 +7284,10 @@ env-paths@^2.2.0: resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2" integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A== -envinfo@^7.7.3, envinfo@^7.7.4, envinfo@^7.8.1: - version "7.8.1" - resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475" - integrity sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw== +envinfo@^7.10.0, envinfo@^7.7.3, envinfo@^7.7.4: + version "7.10.0" + resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.10.0.tgz#55146e3909cc5fe63c22da63fb15b05aeac35b13" + integrity sha512-ZtUjZO6l5mwTHvc1L9+1q5p/R3wTopcfqMW8r5t8SJSKqeVI/LtajORwRFEKpEFuekjD0VBjwu1HMxL4UalIRw== enzyme-adapter-utils@^1.13.1: version "1.14.0" From e4bab4d534baedadbc6d31bf031051f32e30d0c8 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 27 Jun 2023 19:37:31 +0200 Subject: [PATCH 23/33] Bump webpack to ^5.88.0 (#37709) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- benchmark/package.json | 2 +- package.json | 2 +- yarn.lock | 28 ++++++++++++++-------------- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/benchmark/package.json b/benchmark/package.json index de52a0f4334850..6a7d42e33be8fd 100644 --- a/benchmark/package.json +++ b/benchmark/package.json @@ -30,7 +30,7 @@ "serve-handler": "^6.1.5", "styled-components": "^5.3.11", "theme-ui": "^0.16.0", - "webpack": "^5.85.0", + "webpack": "^5.88.0", "webpack-cli": "^4.10.0" } } diff --git a/package.json b/package.json index 4aaec4c4a9231b..54935c62715fac 100644 --- a/package.json +++ b/package.json @@ -202,7 +202,7 @@ "typescript": "^4.9.5", "unist-util-visit": "^2.0.3", "util": "^0.12.5", - "webpack": "^5.85.0", + "webpack": "^5.88.0", "webpack-bundle-analyzer": "^4.9.0", "webpack-cli": "^4.10.0", "yargs": "^17.7.2", diff --git a/yarn.lock b/yarn.lock index 05f857fed75204..8f7861ecdfdc75 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7230,10 +7230,10 @@ enhanced-resolve@^0.9.1: memory-fs "^0.2.0" tapable "^0.1.8" -enhanced-resolve@^5.14.1: - version "5.14.1" - resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.14.1.tgz#de684b6803724477a4af5d74ccae5de52c25f6b3" - integrity sha512-Vklwq2vDKtl0y/vtwjSesgJ5MYS7Etuk5txS8VdKL4AOS1aUlD96zqIfsOSLQsdv3xgMRbtkWM8eG9XDfKUPow== +enhanced-resolve@^5.15.0: + version "5.15.0" + resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz#1af946c7d93603eb88e9896cee4904dc012e9c35" + integrity sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg== dependencies: graceful-fs "^4.2.4" tapable "^2.2.0" @@ -14838,10 +14838,10 @@ scheduler@^0.23.0: dependencies: loose-envify "^1.1.0" -schema-utils@^3.0.0, schema-utils@^3.1.1, schema-utils@^3.1.2: - version "3.1.2" - resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.2.tgz#36c10abca6f7577aeae136c804b0c741edeadc99" - integrity sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg== +schema-utils@^3.0.0, schema-utils@^3.1.1, schema-utils@^3.2.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe" + integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg== dependencies: "@types/json-schema" "^7.0.8" ajv "^6.12.5" @@ -16930,10 +16930,10 @@ webpack-sources@^3.2.3: resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde" integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w== -webpack@^5, webpack@^5.85.0: - version "5.85.0" - resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.85.0.tgz#c14a6a3a91f84d67c450225661fda8da36bc7f49" - integrity sha512-7gazTiYqwo5OSqwH1tigLDL2r3qDeP2dOKYgd+LlXpsUMqDTklg6tOghexqky0/+6QY38kb/R/uRPUleuL43zg== +webpack@^5, webpack@^5.88.0: + version "5.88.0" + resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.88.0.tgz#a07aa2f8e7a64a8f1cec0c6c2e180e3cb34440c8" + integrity sha512-O3jDhG5e44qIBSi/P6KpcCcH7HD+nYIHVBhdWFxcLOcIGN8zGo5nqF3BjyNCxIh4p1vFdNnreZv2h2KkoAw3lw== dependencies: "@types/eslint-scope" "^3.7.3" "@types/estree" "^1.0.0" @@ -16944,7 +16944,7 @@ webpack@^5, webpack@^5.85.0: acorn-import-assertions "^1.9.0" browserslist "^4.14.5" chrome-trace-event "^1.0.2" - enhanced-resolve "^5.14.1" + enhanced-resolve "^5.15.0" es-module-lexer "^1.2.1" eslint-scope "5.1.1" events "^3.2.0" @@ -16954,7 +16954,7 @@ webpack@^5, webpack@^5.85.0: loader-runner "^4.2.0" mime-types "^2.1.27" neo-async "^2.6.2" - schema-utils "^3.1.2" + schema-utils "^3.2.0" tapable "^2.1.1" terser-webpack-plugin "^5.3.7" watchpack "^2.4.0" From 8af275f35c8e0f9c4e22ed793ddc289c904ccd16 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 27 Jun 2023 19:47:24 +0200 Subject: [PATCH 24/33] Bump aws-sdk to ^2.1405.0 (#37704) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- packages/feedback/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/feedback/package.json b/packages/feedback/package.json index 5f7146743b12bb..60e7dd1310c2ae 100644 --- a/packages/feedback/package.json +++ b/packages/feedback/package.json @@ -25,6 +25,6 @@ "claudia": "^5.14.1" }, "optionalDependencies": { - "aws-sdk": "^2.1399.0" + "aws-sdk": "^2.1405.0" } } diff --git a/yarn.lock b/yarn.lock index 8f7861ecdfdc75..4b98703c4c5cd7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4747,10 +4747,10 @@ available-typed-arrays@^1.0.5: resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7" integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw== -aws-sdk@^2.1009.0, aws-sdk@^2.1399.0: - version "2.1399.0" - resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.1399.0.tgz#a3288dbd20a322bf504c3380e5ce33af91425a1a" - integrity sha512-u9G78zs4vN/jl/AI+wNA0qnId2bUmXaCUrzRjTqN8/MWMda7igXmWHbcLmUC3BKmQPrp3EzgC+jBzFWoz5QL9A== +aws-sdk@^2.1009.0, aws-sdk@^2.1405.0: + version "2.1405.0" + resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.1405.0.tgz#66a5e448f1f26e904b4a65ae880d40a7b42af3b1" + integrity sha512-NVVZpRmr+KoBq5xFbB+ivCMDPGx8g1XOZVcswXotZZZIQVdDdHixrkZDqOrZ/p1hJ0eylGc7VQ8mkR7DVryXlQ== dependencies: buffer "4.9.2" events "1.1.1" From 11a758c330b7c5e88880bce795019a0fdb874e13 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 27 Jun 2023 19:48:12 +0200 Subject: [PATCH 25/33] Bump recharts to 2.7.2 (#37702) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- docs/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/package.json b/docs/package.json index 0a6dff219a6dc8..830737eea55b8f 100644 --- a/docs/package.json +++ b/docs/package.json @@ -110,7 +110,7 @@ "react-transition-group": "^4.4.5", "react-virtuoso": "^4.3.11", "react-window": "^1.8.9", - "recharts": "2.7.1", + "recharts": "2.7.2", "rimraf": "^3.0.2", "styled-components": "^5.3.11", "stylis": "^4.2.0", diff --git a/yarn.lock b/yarn.lock index 4b98703c4c5cd7..9817f78bc2b9d8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14299,10 +14299,10 @@ recharts-scale@^0.4.4: dependencies: decimal.js-light "^2.4.1" -recharts@*, recharts@2.7.1: - version "2.7.1" - resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.7.1.tgz#6bc928fef35c51b3220ca70acf74cb43e0ebae20" - integrity sha512-lr4rVlyddTjhXbX6doElETM/2ya1BJ7L367rdAwMavL68DVn/Zkm1hcdlZtOX2QT2yaR8sQ5Ana66HPT7lFDIA== +recharts@*, recharts@2.7.2: + version "2.7.2" + resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.7.2.tgz#6d813681910ad33a4bbf3bdd06c6f64f20b39319" + integrity sha512-HMKRBkGoOXHW+7JcRa6+MukPSifNtJlqbc+JreGVNA407VLE/vOP+8n3YYjprDVVIF9E2ZgwWnL3D7K/LUFzBg== dependencies: classnames "^2.2.5" eventemitter3 "^4.0.1" From 27e56b77a1a81b4553c83673fa39bc3261b3924b Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 27 Jun 2023 19:49:01 +0200 Subject: [PATCH 26/33] Bump react-redux to ^8.1.1 (#37700) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- benchmark/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/benchmark/package.json b/benchmark/package.json index 6a7d42e33be8fd..af1074cf8771a8 100644 --- a/benchmark/package.json +++ b/benchmark/package.json @@ -25,7 +25,7 @@ "react-dom": "^18.2.0", "react-is": "^18.2.0", "react-jss": "^10.10.0", - "react-redux": "^8.1.0", + "react-redux": "^8.1.1", "redux": "^4.2.1", "serve-handler": "^6.1.5", "styled-components": "^5.3.11", diff --git a/yarn.lock b/yarn.lock index 9817f78bc2b9d8..ab9849ce79c2f3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13943,10 +13943,10 @@ react-reconciler@^0.29.0: loose-envify "^1.1.0" scheduler "^0.23.0" -react-redux@^8.1.0: - version "8.1.0" - resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.0.tgz#4e147339f00bbaac7196bc42bc99e6fc412846e7" - integrity sha512-CtHZzAOxi7GQvTph4dVLWwZHAWUjV2kMEQtk50OrN8z3gKxpWg3Tz7JfDw32N3Rpd7fh02z73cF6yZkK467gbQ== +react-redux@^8.1.1: + version "8.1.1" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.1.tgz#8e740f3fd864a4cd0de5ba9cdc8ad39cc9e7c81a" + integrity sha512-5W0QaKtEhj+3bC0Nj0NkqkhIv8gLADH/2kYFMTHxCVqQILiWzLv6MaLuV5wJU3BQEdHKzTfcvPN0WMS6SC1oyA== dependencies: "@babel/runtime" "^7.12.1" "@types/hoist-non-react-statics" "^3.3.1" From e80ddfc78d07cf232b42cb696ee0872045ddef27 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 27 Jun 2023 19:49:23 +0200 Subject: [PATCH 27/33] Bump @types/react-is to ^18.2.1 (#37699) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- packages/mui-utils/package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 54935c62715fac..5cb53595ee8828 100644 --- a/package.json +++ b/package.json @@ -107,7 +107,7 @@ "@types/node": "^18.16.18", "@types/prettier": "^2.7.3", "@types/react": "^18.2.12", - "@types/react-is": "^18.2.0", + "@types/react-is": "^18.2.1", "@types/react-test-renderer": "^18.0.0", "@types/sinon": "^10.0.15", "@types/stylis": "^4.2.0", diff --git a/packages/mui-utils/package.json b/packages/mui-utils/package.json index a4e0ec8bf546af..8f1a79e1cac46a 100644 --- a/packages/mui-utils/package.json +++ b/packages/mui-utils/package.json @@ -44,7 +44,7 @@ "dependencies": { "@babel/runtime": "^7.22.5", "@types/prop-types": "^15.7.5", - "@types/react-is": "^18.2.0", + "@types/react-is": "^18.2.1", "prop-types": "^15.8.1", "react-is": "^18.2.0" }, diff --git a/yarn.lock b/yarn.lock index ab9849ce79c2f3..7c863ab4c47f27 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3633,10 +3633,10 @@ dependencies: "@types/react" "*" -"@types/react-is@^18.2.0": - version "18.2.0" - resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-18.2.0.tgz#2f5137853a46017b3d56447940fb3eb92bbf24a5" - integrity sha512-1vz2yObaQkLL7YFe/pme2cpvDsCwI1WXIfL+5eLz0MI9gFG24Re16RzUsI8t9XZn9ZWvgLNDrJBmrqXJO7GNQQ== +"@types/react-is@^18.2.1": + version "18.2.1" + resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-18.2.1.tgz#61d01c2a6fc089a53520c0b66996d458fdc46863" + integrity sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw== dependencies: "@types/react" "*" From d496d2d832a2f348a3a9793dc19d03443dbfedb2 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 27 Jun 2023 19:54:02 +0200 Subject: [PATCH 28/33] Bump jsdom to ^22.1.0 (#37714) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Michał Dudak --- package.json | 2 +- packages/mui-joy/src/Button/Button.test.tsx | 2 +- yarn.lock | 75 +++------------------ 3 files changed, 12 insertions(+), 67 deletions(-) diff --git a/package.json b/package.json index 5cb53595ee8828..ae6d63ae82db9b 100644 --- a/package.json +++ b/package.json @@ -153,7 +153,7 @@ "globby": "^13.2.0", "google-auth-library": "^8.8.0", "html-webpack-plugin": "^5.5.3", - "jsdom": "^21.1.2", + "jsdom": "^22.1.0", "karma": "^6.4.2", "karma-browserstack-launcher": "~1.6.0", "karma-chrome-launcher": "^3.2.0", diff --git a/packages/mui-joy/src/Button/Button.test.tsx b/packages/mui-joy/src/Button/Button.test.tsx index 80a3e9c4570af1..4906a03a210910 100644 --- a/packages/mui-joy/src/Button/Button.test.tsx +++ b/packages/mui-joy/src/Button/Button.test.tsx @@ -142,7 +142,7 @@ describe('Joy ; } diff --git a/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx b/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx index bd3fe646922256..440dbce1836f89 100644 --- a/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx +++ b/docs/data/base/guides/overriding-component-structure/OverridingRootSlot.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Button from '@mui/base/Button'; -export default function DivButton() { +export default function OverridingRootSlot() { return ; } diff --git a/docs/data/joy/components/alert/AlertInvertedColors.js b/docs/data/joy/components/alert/AlertInvertedColors.js index 2d934e76480147..7a6d2c4b7f945a 100644 --- a/docs/data/joy/components/alert/AlertInvertedColors.js +++ b/docs/data/joy/components/alert/AlertInvertedColors.js @@ -12,7 +12,7 @@ import Check from '@mui/icons-material/Check'; import Close from '@mui/icons-material/Close'; import Warning from '@mui/icons-material/Warning'; -export default function AlertBasic() { +export default function AlertInvertedColors() { return ( Invalid diff --git a/docs/data/joy/components/autocomplete/AutocompleteError.tsx b/docs/data/joy/components/autocomplete/AutocompleteError.tsx index 6910d8180e5dcb..c6aaedb391dfd6 100644 --- a/docs/data/joy/components/autocomplete/AutocompleteError.tsx +++ b/docs/data/joy/components/autocomplete/AutocompleteError.tsx @@ -4,7 +4,7 @@ import FormLabel from '@mui/joy/FormLabel'; import FormHelperText from '@mui/joy/FormHelperText'; import Autocomplete from '@mui/joy/Autocomplete'; -export default function InputAppearance() { +export default function AutocompleteError() { return ( Invalid diff --git a/docs/data/joy/components/autocomplete/BasicAutocomplete.js b/docs/data/joy/components/autocomplete/BasicAutocomplete.js index 25ca9c48b98eed..cbe6e2cd7412c0 100644 --- a/docs/data/joy/components/autocomplete/BasicAutocomplete.js +++ b/docs/data/joy/components/autocomplete/BasicAutocomplete.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Autocomplete from '@mui/joy/Autocomplete'; -export default function ComboBox() { +export default function BasicAutocomplete() { return ( diff --git a/docs/data/joy/components/avatar/EllipsisAvatarAction.tsx b/docs/data/joy/components/avatar/EllipsisAvatarAction.tsx index 3599e5f0dfac02..3986425b6aa9d3 100644 --- a/docs/data/joy/components/avatar/EllipsisAvatarAction.tsx +++ b/docs/data/joy/components/avatar/EllipsisAvatarAction.tsx @@ -4,7 +4,7 @@ import AvatarGroup from '@mui/joy/AvatarGroup'; import IconButton from '@mui/joy/IconButton'; import SvgIcon from '@mui/joy/SvgIcon'; -export default function GroupedAvatars() { +export default function EllipsisAvatarAction() { return ( diff --git a/docs/data/joy/components/avatar/MaxAndTotalAvatars.js b/docs/data/joy/components/avatar/MaxAndTotalAvatars.js index 2336aae8acf02e..251adc266ffd45 100644 --- a/docs/data/joy/components/avatar/MaxAndTotalAvatars.js +++ b/docs/data/joy/components/avatar/MaxAndTotalAvatars.js @@ -15,7 +15,7 @@ function clampAvatars(avatars, options = { max: 5 }) { return { avatars: avatars.slice(0, maxAvatars).reverse(), surplus }; } -export default function GroupedAvatars() { +export default function MaxAndTotalAvatars() { const dataFromTheServer = { people: [ { diff --git a/docs/data/joy/components/avatar/MaxAndTotalAvatars.tsx b/docs/data/joy/components/avatar/MaxAndTotalAvatars.tsx index ad3fed00d110cf..f8cd9a27af2cd3 100644 --- a/docs/data/joy/components/avatar/MaxAndTotalAvatars.tsx +++ b/docs/data/joy/components/avatar/MaxAndTotalAvatars.tsx @@ -18,7 +18,7 @@ function clampAvatars( return { avatars: avatars.slice(0, maxAvatars).reverse(), surplus }; } -export default function GroupedAvatars() { +export default function MaxAndTotalAvatars() { const dataFromTheServer = { people: [ { diff --git a/docs/data/joy/components/badge/BadgeInset.js b/docs/data/joy/components/badge/BadgeInset.js index a4170906e152d0..abb0a854e082b0 100644 --- a/docs/data/joy/components/badge/BadgeInset.js +++ b/docs/data/joy/components/badge/BadgeInset.js @@ -2,7 +2,7 @@ import * as React from 'react'; import Avatar from '@mui/joy/Avatar'; import Badge from '@mui/joy/Badge'; -export default function SimpleBadge() { +export default function BadgeInset() { return ( diff --git a/docs/data/joy/components/badge/BadgeInset.tsx b/docs/data/joy/components/badge/BadgeInset.tsx index a4170906e152d0..abb0a854e082b0 100644 --- a/docs/data/joy/components/badge/BadgeInset.tsx +++ b/docs/data/joy/components/badge/BadgeInset.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Avatar from '@mui/joy/Avatar'; import Badge from '@mui/joy/Badge'; -export default function SimpleBadge() { +export default function BadgeInset() { return ( diff --git a/docs/data/joy/components/badge/BadgeVisibility.js b/docs/data/joy/components/badge/BadgeVisibility.js index 045e8b48ddd068..f48bdbbb8dfb01 100644 --- a/docs/data/joy/components/badge/BadgeVisibility.js +++ b/docs/data/joy/components/badge/BadgeVisibility.js @@ -4,7 +4,7 @@ import Box from '@mui/joy/Box'; import Switch from '@mui/joy/Switch'; import Typography from '@mui/joy/Typography'; -export default function ColorBadge() { +export default function BadgeVisibility() { const [invisible, setInvisible] = React.useState(false); return ( diff --git a/docs/data/joy/components/badge/ContentBadge.tsx b/docs/data/joy/components/badge/ContentBadge.tsx index 64f4325bcebd9a..2df6bf4cbd0fb2 100644 --- a/docs/data/joy/components/badge/ContentBadge.tsx +++ b/docs/data/joy/components/badge/ContentBadge.tsx @@ -3,7 +3,7 @@ import Box from '@mui/joy/Box'; import Badge from '@mui/joy/Badge'; import Typography from '@mui/joy/Typography'; -export default function SimpleBadge() { +export default function ContentBadge() { return ( diff --git a/docs/data/joy/components/badge/NumberBadge.js b/docs/data/joy/components/badge/NumberBadge.js index 5e181bd6c908da..acb6a27ae0cc05 100644 --- a/docs/data/joy/components/badge/NumberBadge.js +++ b/docs/data/joy/components/badge/NumberBadge.js @@ -7,7 +7,7 @@ import Checkbox from '@mui/joy/Checkbox'; import Add from '@mui/icons-material/Add'; import Remove from '@mui/icons-material/Remove'; -export default function ColorBadge() { +export default function NumberBadge() { const [count, setCount] = React.useState(0); const [showZero, setShowZero] = React.useState(false); return ( diff --git a/docs/data/joy/components/badge/NumberBadge.tsx b/docs/data/joy/components/badge/NumberBadge.tsx index 5e181bd6c908da..acb6a27ae0cc05 100644 --- a/docs/data/joy/components/badge/NumberBadge.tsx +++ b/docs/data/joy/components/badge/NumberBadge.tsx @@ -7,7 +7,7 @@ import Checkbox from '@mui/joy/Checkbox'; import Add from '@mui/icons-material/Add'; import Remove from '@mui/icons-material/Remove'; -export default function ColorBadge() { +export default function NumberBadge() { const [count, setCount] = React.useState(0); const [showZero, setShowZero] = React.useState(false); return ( diff --git a/docs/data/joy/components/button/ButtonDisabled.js b/docs/data/joy/components/button/ButtonDisabled.js index e048a8cbf14f45..a7ca9574d455ad 100644 --- a/docs/data/joy/components/button/ButtonDisabled.js +++ b/docs/data/joy/components/button/ButtonDisabled.js @@ -2,7 +2,7 @@ import * as React from 'react'; import Box from '@mui/joy/Box'; import Button from '@mui/joy/Button'; -export default function DisabledButtons() { +export default function ButtonDisabled() { return (