diff --git a/.circleci/config.yml b/.circleci/config.yml index 6a93b0944e60b6..74998eba11ed6e 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -166,17 +166,17 @@ jobs: echo "no changes" fi - run: - name: typescript-to-proptypes + name: internal-scripts command: | # latest commit LATEST_COMMIT=$(git rev-parse HEAD) - # latest commit where packages/typescript-to-proptypes was changed - FOLDER_COMMIT=$(git log -1 --format=format:%H --full-diff packages/typescript-to-proptypes) + # latest commit where internal-scripts was changed + FOLDER_COMMIT=$(git log -1 --format=format:%H --full-diff packages-internal/scripts) if [ $FOLDER_COMMIT = $LATEST_COMMIT ]; then echo "changes, let's run the tests" - pnpm --filter typescript-to-proptypes test + pnpm --filter @mui/internal-scripts test else echo "no changes" fi diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index f81bc2357a68b9..d19d051a72b16a 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -3,6 +3,9 @@ "installCommand": "install:codesandbox", "node": "18", "packages": [ + "packages/docs-utils", + "packages/markdown", + "packages/mui-babel-macros", "packages/mui-base", "packages/mui-codemod", "packages/mui-core-downloads-tracker", @@ -19,28 +22,37 @@ "packages/mui-system", "packages/mui-types", "packages/mui-utils", - "packages/docs-utils", - "packages/typescript-to-proptypes" + "packages-internal/scripts", + "packages/zero-runtime", + "packages/zero-unplugin", + "packages/zero-vite-plugin", + "packages/zero-next-plugin" ], "publishDirectory": { "@mui/base": "packages/mui-base/build", "@mui/codemod": "packages/mui-codemod/build", "@mui/core-downloads-tracker": "packages/mui-core-downloads-tracker/build", "@mui/icons-material": "packages/mui-icons-material/build", + "@mui/internal-babel-macros": "packages/mui-babel-macros", + "@mui/internal-markdown": "packages/markdown", + "@mui/internal-scripts": "packages-internal/scripts", "@mui/joy": "packages/mui-joy/build", "@mui/lab": "packages/mui-lab/build", "@mui/material-next": "packages/mui-material-next/build", "@mui/material-nextjs": "packages/mui-material-nextjs/build", "@mui/material": "packages/mui-material/build", "@mui/private-theming": "packages/mui-private-theming/build", - "@mui/styled-engine-sc": "packages/mui-styled-engine-sc/build", "@mui/styled-engine": "packages/mui-styled-engine/build", + "@mui/styled-engine-sc": "packages/mui-styled-engine-sc/build", "@mui/styles": "packages/mui-styles/build", "@mui/system": "packages/mui-system/build", "@mui/types": "packages/mui-types/build", "@mui/utils": "packages/mui-utils/build", "@mui-internal/docs-utils": "packages/docs-utils", - "@mui-internal/typescript-to-proptypes": "packages/typescript-to-proptypes" + "@mui/zero-runtime": "packages/zero-runtime", + "@mui/zero-unplugin": "packages/zero-unplugin", + "@mui/zero-vite-plugin": "packages/zero-vite-plugin", + "@mui/zero-next-plugin": "packages/zero-next-plugin" }, "sandboxes": [ "/examples/material-ui-cra-ts", diff --git a/.eslintignore b/.eslintignore index 859965ff105a95..d6b5b184b02ed5 100644 --- a/.eslintignore +++ b/.eslintignore @@ -26,7 +26,7 @@ /packages/zero-runtime/tests/fixtures/ /packages/zero-next-plugin/loader.js # Ignore fixtures -/packages/typescript-to-proptypes/test/*/* +/packages-internal/scripts/typescript-to-proptypes/test/*/* /test/bundling/fixtures/**/*.fixture.js # just an import that reports eslint errors depending on whether the fixture (which is not checked in) exists /test/bundling/fixtures/create-react-app/src/index.js diff --git a/.eslintrc.js b/.eslintrc.js index fe096a7451f376..a06ac35ae3f3ae 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -413,7 +413,7 @@ module.exports = { }, }, { - files: ['packages/typescript-to-proptypes/src/**/*.ts'], + files: ['packages-internal/scripts/typescript-to-proptypes/src/**/*.ts'], rules: { // Working with flags is common in TypeScript compiler 'no-bitwise': 'off', diff --git a/.github/styles/Vocab/accept.txt b/.github/styles/Vocab/accept.txt deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/.github/styles/Vocab/reject.txt b/.github/styles/Vocab/reject.txt deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 6714e7b20c77d0..24255495324d9b 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -37,7 +37,7 @@ jobs: node-version: 18 cache: 'pnpm' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies - run: pnpm install - - run: pnpm release:build + - run: pnpm build:ci - run: pnpm release:changelog env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/support-stackoverflow.yml b/.github/workflows/support-stackoverflow.yml index c9d8fa6bb0a4a1..c4c5cb41bce07e 100644 --- a/.github/workflows/support-stackoverflow.yml +++ b/.github/workflows/support-stackoverflow.yml @@ -22,14 +22,14 @@ jobs: # Comment to post on issues marked as support requests. Add a link # to a support page, or set to `false` to disable issue-comment: | - 👋 Thanks for using MUI Core! + 👋 Thanks for using our open-source projects! We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request. - For support, please check out https://mui.com/getting-started/support/. Thanks! + For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks! - If you have a question on Stack Overflow, you are welcome to link to it here, it might help others. + If you have a question on Stack Overflow, you are welcome to link to it here, it might help others. If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened. close-issue: true lock-issue: false diff --git a/.gitignore b/.gitignore index f1ddd44449467c..1e7a18dca293e9 100644 --- a/.gitignore +++ b/.gitignore @@ -39,6 +39,5 @@ package-lock.json size-snapshot.json docs/public/static/blog/feed/* # vale downloaded config -.github/styles/Google -.github/styles/write-good +.github/styles/ .nx/cache diff --git a/.vale.ini b/.vale.ini index d4d101e0960108..d1720b276aac71 100644 --- a/.vale.ini +++ b/.vale.ini @@ -2,20 +2,14 @@ StylesPath = .github/styles MinAlertLevel = suggestion -Packages = Google +# The docs/writing-rules.zip is generated by `pnpm docs:zipRules` +Packages = Google, docs/writing-rules.zip [*.md] # Ignore code injection which start with {{... BlockIgnores = {{.* -# Custom syle -# BasedOnStyles = Blog - -Blog.ComposedWords = YES -Blog.NamingConventions = YES -Blog.Typos = YES -Blog.BrandName = YES -Blog.NoCompanyName = YES +BasedOnStyles = writing-rules # Google: Google.FirstPerson = YES # Avoid first-person pronouns such as I, me, ...'. diff --git a/CHANGELOG.md b/CHANGELOG.md index 50a3a15f76698f..d3e7f2c243f52e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,121 @@ # [Versions](https://mui.com/versions/) +## v5.15.11 + + + +_Feb 21, 2024_ + +A big thanks to the 26 contributors who made this release possible. +This release was mostly about 🐛 bug fixes and 📚 documentation improvements. + +### `@mui/material@5.15.11` + +- [Alert] Deprecate components and componentsProps props (#40681) @DiegoAndai +- [Autocomplete] Caret transformation issue with font size change (#41066) @dpertsin +- [StepLabel] Add type for StepIconComponent (#41082) @harrydigos +- [TablePagination] Fix type error in Select props (#39137) @PaulKristoffersson +- [Transitions] External ownerState is incorrectly forwarded to inner components (#41187) @gitstart +- Use direct import (#40851) @siriwatknp + +### `@mui/material-nextjs@5.15.11` + +- Fix missing babel/runtime dependency in material-ui-nextjs (#41077) @siriwatknp + +### `@mui/system@5.15.11` + +- Use direct import (#40851) @siriwatknp +- Move useMediaQuery to system (#39463) @justintoman +- Consolidate the variants props callback arguments (#41222) @mnajdova +- Merge props and ownerState in the variants props callback (#41219) @mnajdova + +### `@mui/codemod@5.15.11` + +- [AccordionSummary] Add contentGutters deprecation codemods (#41006) @DiegoAndai +- [PaginationItem] Add codemod for deprecated classes (#41145) @sai6855 + +### `@mui/utils@5.15.11` + +- Port `useLocalStorageState` hook from Toolpad (#41096) @Janpot + +### `@mui/base@5.0.0-beta.37` + +- [Switch] Add missing role attribute (#40907) @KirankumarAmbati +- [TextareaAutosize] Improve implementation (#40789) @ZeeshanTamboli + +### `@mui/lab@5.0.0-alpha.164` + +- [Masonry] Ability to sort elements from left to right (#39904) @Rishi556 + +### Docs + +- [base-ui] Fix focus state demo in Base UI autocomplete (#41104) @oliviertassinari +- [base-ui] Update the Accessibility page demos design (#40995) @danilo-leal +- [joy-ui] Fix LinearProgressWithLabel example (#41194) @khgiddon +- [joy-ui] Fix 404 image on the docs @oliviertassinari +- [material-ui] Add a "start now" section on the Overview page (#41137) @danilo-leal +- [material-ui] Inform about deprecated TablePagination SelectProps usage (#41186) @gitstart +- [material-ui] Update the Testing page's Argos link (#41170) @gregberge +- [material-ui] Remove Masonry component and Material Design icon from the landing page template (#41080) @zanivan +- [material-ui] Standardize all references to Material Design 3 (M3) (#40903) @samuelsycamore +- [material-ui] Add stray fixes around a few pages (#41038) @danilo-leal +- [material-ui][joy-ui][system] Restore and revise the Box docs (#40622) @samuelsycamore +- [material-ui] Add simpler demo for default behavior (#40980) @zanivan +- [system] Explain why AppRouterCacheProvider (#40909) @oliviertassinari +- Link to react-transition group with https @oliviertassinari +- Update broken URL hashes (#41185) @LukasTy +- Prefer https links @oliviertassinari +- Fix MUI Treasury link @oliviertassinari +- Migrate the last > quotes to ::: callouts @oliviertassinari + +### Core + +- [blog] Add new product tags and stray adjustments (#41193) @danilo-leal +- [blog] Simplify `/base-ui-2024-plans/` page (#41171) @oliviertassinari +- [blog] Add link to Base UI API changes RFC (#41089) @michaldudak +- [blog] Remove the "News" tag (#41208) @danilo-leal +- [changelog] Remove @mui/system@5.15.10 (#41093) @michaldudak +- [code-infra] Move typescript-to-proptypes to internal-scripts package (#41079) @michaldudak +- [code-infra] Move Link to @mui/docs (#40889) @Janpot +- [code-infra] Use `experimental.cpus` to control amount of export workers in Next.js (#41132) @Janpot +- [code-infra] Load commonjs files in next.config.mjs with require (#41108) @Janpot +- [code-infra] Prepare babel macros package for publishing to npm (#41178) @michaldudak +- [code-infra] Build internal packages before publishing (#41210) @michaldudak +- [core] Improve the release instructions (#40973) @mnajdova +- [core] Simplify Next.js Demo Zero Runtime guide @oliviertassinari +- [core] Fix TypeScript spelling in changelog @oliviertassinari +- [core] Fix small detail in the autocomplete demo @oliviertassinari +- [core] Increase node memory limit on Netlify build (#41111) @michaldudak +- [core][Tooltip] Remove incorrect code comment (#41179) @ZeeshanTamboli +- [core] Fix missing context display names (#41168) @oliviertassinari +- [core][base-ui] Remove `@mui/base` dev dependency from Base UI workspace (#41216) @ZeeshanTamboli +- [zero][demo] Fix sample next app build (#41197) @brijeshb42 +- [docs-infra] Simplify copy logic (#41167) @oliviertassinari +- [docs-infra] New way of providing API layout config (#41106) @alexfauquette +- [docs-infra] Reduce scrollbar width on ROC (#41148) @oliviertassinari +- [docs-infra] Add external link arrow (#41129) @siriwatknp +- [docs-infra] Fix external link arrow (#41181) @alexfauquette +- [docs-infra] Flag NPM and Github as wrong spellings @oliviertassinari +- [docs-infra] Fix display when the default props is undefined (#41114) @oliviertassinari +- [docs-infra] Remove random layout assignment (#40862) @alexfauquette +- [docs-infra] Add spacing and contrast improvements (#41191) @danilo-leal +- [docs-infra] Share vale-config (#41176) @alexfauquette +- [test] Generalize test utils (#41175) @michaldudak +- [typescript-to-proptypes] Support using `Omit` on types with conditional properties (#41033) @flaviendelangle +- [website] Match chart component names @oliviertassinari +- [website] Add Marblism diamond sponsor (#41097) @rluzists1 +- [website] Add overall improvements to the Material UI page (#41075) @danilo-leal +- [website] Fix responsive breakpoints @oliviertassinari +- [website] Fix overloading of footer JS files @oliviertassinari +- [website] Improve the footer's chip contrast (#41209) @danilo-leal +- [zero] Update to latest version of wyw-in-js (#41182) @brijeshb42 +- [zero] Setup basic testing framework (#40986) @brijeshb42 +- [zero] Fix wrong CSS order by moving import to last (#41002) @siriwatknp +- [zero] Export `extendTheme` for creating a zero-runtime theme (#40897) @siriwatknp +- [zero] Move extendTheme to its own subpath (#41204) @brijeshb42 + +All contributors of this release in alphabetical order: @alexfauquette, @brijeshb42, @danilo-leal, @DiegoAndai, @dpertsin, @flaviendelangle, @gitstart, @gregberge, @harrydigos, @Janpot, @justintoman, @khgiddon, @KirankumarAmbati, @LukasTy, @michaldudak, @mnajdova, @nikosgavalas, @oliviertassinari, @PaulKristoffersson, @Rishi556, @rluzists1, @sai6855, @samuelsycamore, @siriwatknp, @zanivan, @ZeeshanTamboli + ## v5.15.10 @@ -2461,7 +2577,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som - ​[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 +- ​[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 @@ -7550,7 +7666,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som - ​[docs] Sync translations with Crowdin (#30067) @l10nbot - ​[docs] Fix link on "Custom variables" section in the Theming page #30100 @danilo-leal - ​[docs] Fix justifyContent option in the Grid interactive demo (#30117) @danilo-leal -- ​[docs] Add tip to help access the docs of a previous version when finding answers in Stack Overflow (#30101) @danilo-leal +- ​[docs] Add tip to help access the docs of a previous version when finding answers in Stack Overflow (#30101) @danilo-leal - ​[docs] Fix import example inside Unstyled Backdrop section (#30098) @TheodosiouTh - ​[website] Column pinning and Tree data are out (#30136) @oliviertassinari - ​[survey] Remove survey promotion items (#30122) @danilo-leal @@ -7631,7 +7747,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som - ​[docs] Update nextjs-typescript-example (#29974) @huydhoang - ​[docs] Add missing global state classes to API docs generator (#29945) @michaldudak - ​[docs] Fix benchmarks folder link (#29981) @fourjr -- ​[docs] Improve wording in Stack Overflow section of support page (#29956) @ronwarner +- ​[docs] Improve wording in Stack Overflow section of support page (#29956) @ronwarner - ​[docs] Remove Black Friday sale notification (#29936) @mbrookes - ​[examples] Fix typos in the Remix example (#30071) @MichaelDeBoey - ​[examples] Add Remix example (#29952) @mnajdova @@ -7644,7 +7760,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som ### Core - ​[core] Batch small changes (#30042) @oliviertassinari -- ​[core] Transition to a new Stack Overflow tag (#29967) @oliviertassinari +- ​[core] Transition to a new Stack Overflow tag (#29967) @oliviertassinari All contributors of this release in alphabetical order: @chao813, @daniel-sachs, @danilo-leal, @Domino987, @eduardomcv, @flaviendelangle, @fourjr, @genzyy, @hbjORbj, @huydhoang, @jayeclark, @jonathanrtuck, @kkorach, @l10nbot, @mbrookes, @MichaelDeBoey, @michaldudak, @mnajdova, @oliviertassinari, @ronwarner, @Semigradsky, @siriwatknp, @tasugi, @ThewBear, @ZeeshanTamboli @@ -8920,7 +9036,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som - ​[website] Add spicefactory as gold sponsor @oliviertassinari - ​[website] Homepage rebranding (#27488) @siriwatknp - ​[website] Add Flavien to team and about pages (#27575) @flaviendelangle -- ​[website] Add Ryan to Community contributors for Stack Overflow contributions (#27529) @ryancogswell +- ​[website] Add Ryan to Community contributors for Stack Overflow contributions (#27529) @ryancogswell - ​[website] Add references section to home (#27444) @siriwatknp ### Core @@ -11335,7 +11451,7 @@ A big thanks to the 30 contributors who made this release possible. Here are som #### Breaking changes - ​[types] Rename the exported `Omit` type in `@material-ui/types`. (#24795) @petyosi - The module is now called `DistributiveOmit`. The change removes the confusion with the built-in `Omit` helper introduced in TypeScript v3.5. The built-in `Omit`, while similar, is non-distributive. This leads to differences when applied to union types. [See this Stack Overflow answer for further details](https://stackoverflow.com/a/57103940/1009797). + The module is now called `DistributiveOmit`. The change removes the confusion with the built-in `Omit` helper introduced in TypeScript v3.5. The built-in `Omit`, while similar, is non-distributive. This leads to differences when applied to union types. [See this Stack Overflow answer for further details](https://stackoverflow.com/a/57103940/1009797). ```diff -import { Omit } from '@material-ui/types'; diff --git a/babel.config.js b/babel.config.js index f04e19b097f92f..41c75df442e2f2 100644 --- a/babel.config.js +++ b/babel.config.js @@ -22,7 +22,7 @@ module.exports = function getBabelConfig(api) { `./packages/mui-icons-material/lib${useESModules ? '/esm' : ''}`, ), '@mui/lab': resolveAliasPath('./packages/mui-lab/src'), - '@mui/markdown': resolveAliasPath('./packages/markdown'), + '@mui/internal-markdown': resolveAliasPath('./packages/markdown'), '@mui/styled-engine': resolveAliasPath('./packages/mui-styled-engine/src'), '@mui/styled-engine-sc': resolveAliasPath('./packages/mui-styled-engine-sc/src'), '@mui/styles': resolveAliasPath('./packages/mui-styles/src'), @@ -138,7 +138,6 @@ module.exports = function getBabelConfig(api) { alias: { ...defaultAlias, modules: './modules', - 'typescript-to-proptypes': './packages/typescript-to-proptypes/src', }, root: ['./'], }, diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js index 5baf2c8e1d29f0..588d75658c9695 100644 --- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js +++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js @@ -309,18 +309,18 @@ function Styles() { color: ${isDarkMode ? cyan[100] : cyan[900]}; } - &.base--focused, - &.base--focusVisible { + &.Mui-focused, + &.Mui-focusVisible { background-color: ${isDarkMode ? grey[800] : grey[100]}; color: ${isDarkMode ? grey[300] : grey[900]}; } - &.base--focusVisible { + &.Mui-focusVisible { box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]}; } - &[aria-selected=true].base--focused, - &[aria-selected=true].base--focusVisible { + &[aria-selected=true].Mui-focused, + &[aria-selected=true].Mui-focusVisible { background-color: ${isDarkMode ? cyan[900] : cyan[100]}; color: ${isDarkMode ? cyan[100] : cyan[900]}; } diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx index 76f41d578983b9..35183255be945e 100644 --- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx +++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx @@ -283,18 +283,18 @@ function Styles() { color: ${isDarkMode ? cyan[100] : cyan[900]}; } - &.base--focused, - &.base--focusVisible { + &.Mui-focused, + &.Mui-focusVisible { background-color: ${isDarkMode ? grey[800] : grey[100]}; color: ${isDarkMode ? grey[300] : grey[900]}; } - &.base--focusVisible { + &.Mui-focusVisible { box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]}; } - &[aria-selected=true].base--focused, - &[aria-selected=true].base--focusVisible { + &[aria-selected=true].Mui-focused, + &[aria-selected=true].Mui-focusVisible { background-color: ${isDarkMode ? cyan[900] : cyan[100]}; color: ${isDarkMode ? cyan[100] : cyan[900]}; } diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js index c38910d1fdaa7d..851e5555d194c3 100644 --- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js +++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js @@ -237,18 +237,18 @@ const StyledOption = styled('li')( color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } - &.base--focused, - &.base--focusVisible { + &.Mui-focused, + &.Mui-focusVisible { background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } - &.base--focusVisible { + &.Mui-focusVisible { box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } - &[aria-selected=true].base--focused, - &[aria-selected=true].base--focusVisible { + &[aria-selected=true].Mui-focused, + &[aria-selected=true].Mui-focusVisible { background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx index dcf69e4e056e30..31414d16949692 100644 --- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx +++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx @@ -220,18 +220,18 @@ const StyledOption = styled('li')( color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } - &.base--focused, - &.base--focusVisible { + &.Mui-focused, + &.Mui-focusVisible { background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } - &.base--focusVisible { + &.Mui-focusVisible { box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } - &[aria-selected=true].base--focused, - &[aria-selected=true].base--focusVisible { + &[aria-selected=true].Mui-focused, + &[aria-selected=true].Mui-focusVisible { background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } diff --git a/docs/data/base/components/autocomplete/ControlledStates.js b/docs/data/base/components/autocomplete/ControlledStates.js index 4df012ced60112..feaaf24ecc9d2c 100644 --- a/docs/data/base/components/autocomplete/ControlledStates.js +++ b/docs/data/base/components/autocomplete/ControlledStates.js @@ -171,18 +171,18 @@ const Option = styled('li')( color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } - &.base--focused, - &.base--focusVisible { + &.Mui-focused, + &.Mui-focusVisible { background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } - &.base--focusVisible { + &.Mui-focusVisible { box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } - &[aria-selected=true].base--focused, - &[aria-selected=true].base--focusVisible { + &[aria-selected=true].Mui-focused, + &[aria-selected=true].Mui-focusVisible { background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } diff --git a/docs/data/base/components/autocomplete/ControlledStates.tsx b/docs/data/base/components/autocomplete/ControlledStates.tsx index 7ff8f47074e93a..2e241a1142f73a 100644 --- a/docs/data/base/components/autocomplete/ControlledStates.tsx +++ b/docs/data/base/components/autocomplete/ControlledStates.tsx @@ -171,18 +171,18 @@ const Option = styled('li')( color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } - &.base--focused, - &.base--focusVisible { + &.Mui-focused, + &.Mui-focusVisible { background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } - &.base--focusVisible { + &.Mui-focusVisible { box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } - &[aria-selected=true].base--focused, - &[aria-selected=true].base--focusVisible { + &[aria-selected=true].Mui-focused, + &[aria-selected=true].Mui-focusVisible { background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } diff --git a/docs/data/base/components/autocomplete/UseAutocomplete.js b/docs/data/base/components/autocomplete/UseAutocomplete.js index a65f993e7ff87f..710c7ac50c3271 100644 --- a/docs/data/base/components/autocomplete/UseAutocomplete.js +++ b/docs/data/base/components/autocomplete/UseAutocomplete.js @@ -160,18 +160,18 @@ const Option = styled('li')( color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } - &.base--focused, - &.base--focusVisible { + &.Mui-focused, + &.Mui-focusVisible { background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } - &.base--focusVisible { + &.Mui-focusVisible { box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } - &[aria-selected=true].base--focused, - &[aria-selected=true].base--focusVisible { + &[aria-selected=true].Mui-focused, + &[aria-selected=true].Mui-focusVisible { background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } diff --git a/docs/data/base/components/autocomplete/UseAutocomplete.tsx b/docs/data/base/components/autocomplete/UseAutocomplete.tsx index 3c66fda3c3028c..6f038a7051c7b3 100644 --- a/docs/data/base/components/autocomplete/UseAutocomplete.tsx +++ b/docs/data/base/components/autocomplete/UseAutocomplete.tsx @@ -162,18 +162,18 @@ const Option = styled('li')( color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } - &.base--focused, - &.base--focusVisible { + &.Mui-focused, + &.Mui-focusVisible { background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } - &.base--focusVisible { + &.Mui-focusVisible { box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } - &[aria-selected=true].base--focused, - &[aria-selected=true].base--focusVisible { + &[aria-selected=true].Mui-focused, + &[aria-selected=true].Mui-focusVisible { background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper.js b/docs/data/base/components/autocomplete/UseAutocompletePopper.js index 9c7375bd47c9a8..12ebf73cc66855 100644 --- a/docs/data/base/components/autocomplete/UseAutocompletePopper.js +++ b/docs/data/base/components/autocomplete/UseAutocompletePopper.js @@ -184,18 +184,18 @@ const Option = styled('li')( color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } - &.base--focused, - &.base--focusVisible { + &.Mui-focused, + &.Mui-focusVisible { background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } - &.base--focusVisible { + &.Mui-focusVisible { box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } - &[aria-selected=true].base--focused, - &[aria-selected=true].base--focusVisible { + &[aria-selected=true].Mui-focused, + &[aria-selected=true].Mui-focusVisible { background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx b/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx index db8d4dfbe52884..74c6e775557fea 100644 --- a/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx +++ b/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx @@ -192,18 +192,18 @@ const Option = styled('li')( color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } - &.base--focused, - &.base--focusVisible { + &.Mui-focused, + &.Mui-focusVisible { background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]}; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]}; } - &.base--focusVisible { + &.Mui-focusVisible { box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]}; } - &[aria-selected=true].base--focused, - &[aria-selected=true].base--focusVisible { + &[aria-selected=true].Mui-focused, + &[aria-selected=true].Mui-focusVisible { background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]}; color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]}; } diff --git a/docs/data/base/getting-started/support/support.md b/docs/data/base/getting-started/support/support.md index 20ab84f10ce8fe..68e91bdf0a8683 100644 --- a/docs/data/base/getting-started/support/support.md +++ b/docs/data/base/getting-started/support/support.md @@ -39,9 +39,9 @@ You have a few possible options to provide it: - You can use a starter React template to build a reproduction case with [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts). -## Stack Overflow +## Stack Overflow -We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the Base UI community as well as Base UI maintainers. +We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the Base UI community as well as Base UI maintainers. You can search through existing questions and answers to see if someone has asked a similar question using the [base-ui tags](https://stackoverflow.com/questions/tagged/base-ui): @@ -84,7 +84,7 @@ Our tools are used by thousands of developers and teams all around the world, ma You can join Discord to engage in lively discussions, share your projects, and interact with developers just like you from all around the world. We'd love for you to join us! :::warning -How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow). +How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow). ::: ## Custom work diff --git a/docs/data/joy/components/accordion/accordion.md b/docs/data/joy/components/accordion/accordion.md index 0987a2c763a105..73b129676291ca 100644 --- a/docs/data/joy/components/accordion/accordion.md +++ b/docs/data/joy/components/accordion/accordion.md @@ -14,10 +14,10 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ Joy UI provides four accordion-related components: -- [`AccordionGroup`](#basic-usage): A container that groups multiple accordions. It **does not** control the state of each accordion. -- [`Accordion`](#basic-usage): A component that contains the expansion logic and send to AccordionSummary and AccordionDetails. -- [`AccordionSummary`](#basic-usage): A header of the accordion which contain a button that triggers the expansion. -- [`AccordionDetails`](#basic-usage): A wrapper for the accordion details. +- [Accordion Group](#basic-usage) - a container that groups multiple accordions. It **does not** control the state of each accordion. +- [Accordion](#basic-usage) - a component that contains the expansion logic and send to AccordionSummary and AccordionDetails. +- [Accordion Summary](#basic-usage) - a header of the accordion which contain a button that triggers the expansion. +- [Accordion Details](#basic-usage) - a wrapper for the accordion details. {{"demo": "AccordionUsage.js", "hideToolbar": true, "bg": "gradient"}} diff --git a/docs/data/joy/components/aspect-ratio/aspect-ratio.md b/docs/data/joy/components/aspect-ratio/aspect-ratio.md index 1f33d0043ae438..96e0eb8d7a0012 100644 --- a/docs/data/joy/components/aspect-ratio/aspect-ratio.md +++ b/docs/data/joy/components/aspect-ratio/aspect-ratio.md @@ -14,9 +14,7 @@ Aspect Ratio is a wrapper component for quickly resizing content to conform to y Media content like images can be stretched, resized, and cropped based on the CSS `object-fit` property. :::info -A [native CSS `aspect-ratio` property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) does exist, but we does not plan to implement it in Joy UI until browser compatibility increases to at least 94%. -As of Q4 2022, compatibility is at 90%. -Source: [Can I use…](https://caniuse.com/?search=aspect-ratio) +A [native CSS `aspect-ratio` property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) does exist, and we plan to implement it in Joy UI soon. ::: ## Basics @@ -116,9 +114,7 @@ The Aspect Ratio component can be a handy tool for creating a square container f ### Mobile carousel -:::warning -In designs like this, make sure to assign a `minWidth` value to prevent the Aspect Ratio component from shrinking. -::: +In designs like this, ensure to assign a `minWidth` value to prevent the Aspect Ratio component from shrinking. {{"demo": "CarouselRatio.js"}} diff --git a/docs/data/joy/components/box/BoxBasic.js b/docs/data/joy/components/box/BoxBasic.js new file mode 100644 index 00000000000000..e51c2b8df68ab3 --- /dev/null +++ b/docs/data/joy/components/box/BoxBasic.js @@ -0,0 +1,10 @@ +import * as React from 'react'; +import Box from '@mui/joy/Box'; + +export default function BoxBasic() { + return ( + + This Box renders as an HTML section element. + + ); +} diff --git a/docs/data/joy/components/box/BoxBasic.tsx b/docs/data/joy/components/box/BoxBasic.tsx new file mode 100644 index 00000000000000..e51c2b8df68ab3 --- /dev/null +++ b/docs/data/joy/components/box/BoxBasic.tsx @@ -0,0 +1,10 @@ +import * as React from 'react'; +import Box from '@mui/joy/Box'; + +export default function BoxBasic() { + return ( + + This Box renders as an HTML section element. + + ); +} diff --git a/docs/data/joy/components/box/BoxBasic.tsx.preview b/docs/data/joy/components/box/BoxBasic.tsx.preview new file mode 100644 index 00000000000000..d22b5b82187b80 --- /dev/null +++ b/docs/data/joy/components/box/BoxBasic.tsx.preview @@ -0,0 +1,2 @@ + + This Box renders as an HTML section element. diff --git a/docs/data/joy/components/box/BoxSx.js b/docs/data/joy/components/box/BoxSx.js new file mode 100644 index 00000000000000..cb9b66f14d6a7e --- /dev/null +++ b/docs/data/joy/components/box/BoxSx.js @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { Box, ThemeProvider } from '@mui/joy'; + +export default function BoxSx() { + return ( + + + + ); +} diff --git a/docs/data/joy/components/box/BoxSx.tsx b/docs/data/joy/components/box/BoxSx.tsx new file mode 100644 index 00000000000000..cb9b66f14d6a7e --- /dev/null +++ b/docs/data/joy/components/box/BoxSx.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { Box, ThemeProvider } from '@mui/joy'; + +export default function BoxSx() { + return ( + + + + ); +} diff --git a/docs/data/joy/components/box/BoxSystemProps.js b/docs/data/joy/components/box/BoxSystemProps.js new file mode 100644 index 00000000000000..df4076cc72d285 --- /dev/null +++ b/docs/data/joy/components/box/BoxSystemProps.js @@ -0,0 +1,19 @@ +import * as React from 'react'; +import Box from '@mui/joy/Box'; + +export default function BoxSystemProps() { + return ( + + This Box uses MUI System props for quick customization. + + ); +} diff --git a/docs/data/joy/components/box/BoxSystemProps.tsx b/docs/data/joy/components/box/BoxSystemProps.tsx new file mode 100644 index 00000000000000..df4076cc72d285 --- /dev/null +++ b/docs/data/joy/components/box/BoxSystemProps.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import Box from '@mui/joy/Box'; + +export default function BoxSystemProps() { + return ( + + This Box uses MUI System props for quick customization. + + ); +} diff --git a/docs/data/joy/components/box/BoxSystemProps.tsx.preview b/docs/data/joy/components/box/BoxSystemProps.tsx.preview new file mode 100644 index 00000000000000..b0decb0904b5a3 --- /dev/null +++ b/docs/data/joy/components/box/BoxSystemProps.tsx.preview @@ -0,0 +1,2 @@ + + This Box uses MUI System props for quick customization. diff --git a/docs/data/joy/components/box/box.md b/docs/data/joy/components/box/box.md index 599fb5832322ce..0194851a2698bf 100644 --- a/docs/data/joy/components/box/box.md +++ b/docs/data/joy/components/box/box.md @@ -5,13 +5,57 @@ components: Box githubLabel: 'component: Box' --- + + # Box

The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.

-:::warning -Please refer to the [Box](/system/react-box/) component page in the MUI System docs for demos and details on usage. +{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} + +## Introduction + +The Box component is a generic container for grouping other components. +It's a fundamental building block when working with Joy UI—you can think of it as a `
` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/). + +### Usage + +The Box component differs from other containers available in Joy UI in that its usage is intended to be multipurpose and open-ended, just like a `
`. +Components like [Stack](/joy-ui/react-stack/) and [Sheet](/joy-ui/react-sheet/), by contrast, feature usage-specific props that make them ideal for certain use cases: Stack for one-dimensional layouts, and Sheet for surfaces that need access to Joy UI's global variants. + +## Basics + +```jsx +import Box from '@mui/joy/Box'; +``` + +The Box component renders as a `
` by default, but you can swap in any other valid HTML tag or React component using the `component` prop. +The demo below replaces the `
` with a `
` element: + +{{"demo": "BoxBasic.js", "defaultCodeOpen": true }} + +## Customization + +### With MUI System props + +As a CSS utility component, the Box supports all [MUI System properties](/system/properties/). +You can use them as props directly on the component. + +{{"demo": "BoxSystemProps.js", "defaultCodeOpen": true }} + +### With the sx prop + +Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package. +The demo below shows how to apply colors from the theme using this prop: + +{{"demo": "BoxSx.js", "defaultCodeOpen": true }} + +## Anatomy + +The Box component is composed of a single root `
` element: -The Box component is a part of the standalone [MUI System](/system/getting-started/) utility library. -It is re-exported from `@mui/joy` for your convenience. -::: +```html +
+ +
+``` diff --git a/docs/data/joy/components/breadcrumbs/breadcrumbs.md b/docs/data/joy/components/breadcrumbs/breadcrumbs.md index fc0d593cac82d4..f1ed8756bd9cd8 100644 --- a/docs/data/joy/components/breadcrumbs/breadcrumbs.md +++ b/docs/data/joy/components/breadcrumbs/breadcrumbs.md @@ -93,11 +93,9 @@ As an alternative to the behavior of the condensed demo above, consider adding a ## Accessibility -(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) - Be sure to add an informative `aria-label` description to the Breadcrumbs component. -The following features are included to optimize the component's baseline accessibility: +The following features, which follows [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/), are included to optimize the component's baseline accessibility: - The set of links is structured using an ordered list (`
    `). - Visual separators between links are hidden with `aria-hidden` to prevent screen readers from announcing them. diff --git a/docs/data/joy/components/card/CardUsage.js b/docs/data/joy/components/card/CardUsage.js index e2876a32355570..15df5a0fc7c603 100644 --- a/docs/data/joy/components/card/CardUsage.js +++ b/docs/data/joy/components/card/CardUsage.js @@ -66,10 +66,12 @@ export default function CardUsage() { {"Yosemite National Park is in California's Sierra Nevada mountains."} - - + diff --git a/docs/data/joy/components/grid/grid.md b/docs/data/joy/components/grid/grid.md index c50d0f23af10d3..ff29fb560ae99f 100644 --- a/docs/data/joy/components/grid/grid.md +++ b/docs/data/joy/components/grid/grid.md @@ -14,7 +14,7 @@ githubLabel: 'component: Grid' The Grid component, based on a 12-column grid layout, creates visual consistency between layouts while allowing flexibility across a wide variety of designs. :::warning -The `Grid` component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to the [`DataGrid`](/x/react-data-grid/) component. +The `Grid` component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to the [MUI X Data Grid`](/x/react-data-grid/) component. ::: ## Basics diff --git a/docs/data/joy/components/input/DebouncedInput.js b/docs/data/joy/components/input/DebouncedInput.js index 0e754c0d7a67fb..7955a340238075 100644 --- a/docs/data/joy/components/input/DebouncedInput.js +++ b/docs/data/joy/components/input/DebouncedInput.js @@ -10,11 +10,8 @@ function DebounceInput(props) { const timerRef = React.useRef(); const handleChange = (event) => { - if (timerRef.current) { - clearTimeout(timerRef.current); - } - - timerRef.current = window.setTimeout(() => { + clearTimeout(timerRef.current); + timerRef.current = setTimeout(() => { handleDebounce(event.target.value); }, debounceTimeout); }; diff --git a/docs/data/joy/components/input/DebouncedInput.tsx b/docs/data/joy/components/input/DebouncedInput.tsx index ed4db9dc6a53ad..927d37954daedf 100644 --- a/docs/data/joy/components/input/DebouncedInput.tsx +++ b/docs/data/joy/components/input/DebouncedInput.tsx @@ -11,14 +11,11 @@ type DebounceProps = { function DebounceInput(props: InputProps & DebounceProps) { const { handleDebounce, debounceTimeout, ...rest } = props; - const timerRef = React.useRef(); + const timerRef = React.useRef>(); const handleChange = (event: React.ChangeEvent) => { - if (timerRef.current) { - clearTimeout(timerRef.current); - } - - timerRef.current = window.setTimeout(() => { + clearTimeout(timerRef.current); + timerRef.current = setTimeout(() => { handleDebounce(event.target.value); }, debounceTimeout); }; diff --git a/docs/data/joy/components/linear-progress/LinearProgressWithLabel.js b/docs/data/joy/components/linear-progress/LinearProgressWithLabel.js index 1ea4e6fb393cae..19cd19aadc50d9 100644 --- a/docs/data/joy/components/linear-progress/LinearProgressWithLabel.js +++ b/docs/data/joy/components/linear-progress/LinearProgressWithLabel.js @@ -1,6 +1,7 @@ import * as React from 'react'; import LinearProgress from '@mui/joy/LinearProgress'; import Typography from '@mui/joy/Typography'; +import Box from '@mui/joy/Box'; export default function LinearProgressWithLabel() { const [progress, setProgress] = React.useState(0); @@ -16,28 +17,35 @@ export default function LinearProgressWithLabel() { }, []); return ( - - - LOADING… {`${Math.round(progress)}%`} - - + + LOADING… {`${Math.round(progress)}%`} + + + ); } diff --git a/docs/data/joy/components/linear-progress/LinearProgressWithLabel.tsx b/docs/data/joy/components/linear-progress/LinearProgressWithLabel.tsx index 1ea4e6fb393cae..19cd19aadc50d9 100644 --- a/docs/data/joy/components/linear-progress/LinearProgressWithLabel.tsx +++ b/docs/data/joy/components/linear-progress/LinearProgressWithLabel.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import LinearProgress from '@mui/joy/LinearProgress'; import Typography from '@mui/joy/Typography'; +import Box from '@mui/joy/Box'; export default function LinearProgressWithLabel() { const [progress, setProgress] = React.useState(0); @@ -16,28 +17,35 @@ export default function LinearProgressWithLabel() { }, []); return ( - - - LOADING… {`${Math.round(progress)}%`} - - + + LOADING… {`${Math.round(progress)}%`} + + + ); } diff --git a/docs/data/joy/components/link/link.md b/docs/data/joy/components/link/link.md index d404662baab1b9..a8672826060777 100644 --- a/docs/data/joy/components/link/link.md +++ b/docs/data/joy/components/link/link.md @@ -149,7 +149,7 @@ When using `target="_blank"` with links to pages on another site, the [Google Ch ## Accessibility -Here are a few tips for ensuring an accessible link component, based on [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/link/). +Here are a few tips for ensuring an accessible link component, based on [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/link/). - **Copywriting:** Avoid generic words as calls to action, such as "click here" or "go to". Instead, use [descriptive text](https://developers.google.com/web/tools/lighthouse/audits/descriptive-link-text) to inform the user about what they'll find when they click the link. diff --git a/docs/data/joy/components/menu/menu.md b/docs/data/joy/components/menu/menu.md index 4b091c9202a29b..b44966169d7825 100644 --- a/docs/data/joy/components/menu/menu.md +++ b/docs/data/joy/components/menu/menu.md @@ -15,11 +15,11 @@ unstyled: /base-ui/react-menu/ Joy UI provides five menu-related components: -- `MenuButton`: A button that opens a menu. It reuses the styles from [`Button`](/joy-ui/react-button/). -- `Menu`: A listbox popup for wrapping the menu items which reuses the styles from [`List`](/joy-ui/react-list/). -- `MenuItem`: A menu item which reuses the styles from [`ListItemButton`](/joy-ui/react-list/). -- `MenuList`: A standalone listbox for composition usage. It also reuses the styles from [`List`](/joy-ui/react-list/). -- `Dropdown`: The outermost component that wires a button with a menu. It only provides a context and does not render anything. +- Menu Button - a button that opens a menu. It reuses the styles from [`Button`](/joy-ui/react-button/). +- Menu - a listbox popup for wrapping the menu items which reuses the styles from [`List`](/joy-ui/react-list/). +- Menu Item - a menu item which reuses the styles from [`ListItemButton`](/joy-ui/react-list/). +- Menu List - a standalone listbox for composition usage. It also reuses the styles from [`List`](/joy-ui/react-list/). +- Dropdown - the outermost component that wires a button with a menu. It only provides a context and does not render anything. {{"demo": "MenuUsage.js", "hideToolbar": true, "bg": "gradient"}} diff --git a/docs/data/joy/components/modal/modal.md b/docs/data/joy/components/modal/modal.md index 94560bf5c922d8..b145842ca90c1b 100644 --- a/docs/data/joy/components/modal/modal.md +++ b/docs/data/joy/components/modal/modal.md @@ -246,7 +246,7 @@ See the [WAI-ARIA guide on the Dialog (Modal) pattern](https://www.w3.org/WAI/AR ``` -- Follow the [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/) to help you set the initial focus on the most relevant element based on the content of the modal. +- Follow the [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/) to help you set the initial focus on the most relevant element based on the content of the modal. :::warning A modal window can sit on top of either the parent application, or another modal window. _All_ windows under the topmost modal are **inert**, meaning the user cannot interact with them. diff --git a/docs/data/joy/components/radio-button/radio-button.md b/docs/data/joy/components/radio-button/radio-button.md index 56ed05d6a188e8..d7972e23051c14 100644 --- a/docs/data/joy/components/radio-button/radio-button.md +++ b/docs/data/joy/components/radio-button/radio-button.md @@ -191,7 +191,7 @@ Here are a few tips to make sure you have an accessible Radio button component: /> ``` -Visit the [WAI-ARIA documentation](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) for more details. +Visit the [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) for more details. ## Anatomy diff --git a/docs/data/joy/components/tabs/tabs.md b/docs/data/joy/components/tabs/tabs.md index 9291094b3a32bc..9fee006ed211d1 100644 --- a/docs/data/joy/components/tabs/tabs.md +++ b/docs/data/joy/components/tabs/tabs.md @@ -161,7 +161,7 @@ In this example, each Tab is painted with a color from the theme when selected. ## Accessibility -To ensure proper accessibility, the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-aria-roles-states-and-properties-22) recommends associating a label with the Tabs component. +To ensure proper accessibility, the [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-aria-roles-states-and-properties-22) recommends associating a label with the Tabs component. There are two options to accomplish this: ### Using the id attribute diff --git a/docs/data/joy/components/tooltip/tooltip.md b/docs/data/joy/components/tooltip/tooltip.md index 35b1b2d9a428d5..4350e40a1523d3 100644 --- a/docs/data/joy/components/tooltip/tooltip.md +++ b/docs/data/joy/components/tooltip/tooltip.md @@ -70,7 +70,7 @@ The `title` prop can receive a custom React element. ## Accessibility -(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) +Here are a few tips for ensuring an accessible link component, based on [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/): By default, the tooltip only labels its child element. This is notably different from `title` which can either label **or** describe its child depending on whether the child already has a label. diff --git a/docs/data/joy/customization/approaches/approaches.md b/docs/data/joy/customization/approaches/approaches.md index 23777ad18198ff..3213f051c90ee5 100644 --- a/docs/data/joy/customization/approaches/approaches.md +++ b/docs/data/joy/customization/approaches/approaches.md @@ -2,11 +2,11 @@

    Learn which approach is recommended, depending on the situation, to customize Joy UI components.

    -- For customizing only a specific instance of a given component, [_use the `sx` prop_](#sx-prop). +- For customizing only a specific instance of a given component, [_use the `sx` prop_](#the-sx-prop). - To ensure every instance of a given component looks the same across you app, [_use theming_](#theming). - To create something that Joy UI doesn't support out of the box but still has design consistency, create a [_reusable component_](#reusable-component) that uses Joy UI's theme design tokens. -## `sx` prop +## The sx prop The `sx` prop provides a superset of CSS (contains all CSS properties/selectors, in addition to custom ones) that maps values directly from the theme, depending on the CSS property used. diff --git a/docs/data/joy/customization/theme-colors/theme-colors.md b/docs/data/joy/customization/theme-colors/theme-colors.md index 9d04307832c2dc..6c46b2fec74994 100644 --- a/docs/data/joy/customization/theme-colors/theme-colors.md +++ b/docs/data/joy/customization/theme-colors/theme-colors.md @@ -132,7 +132,7 @@ declare module '@mui/joy/styles' { Adding custom tokens increases your stylesheet's bundle size, and adds an extra set of maintenance costs to your app. These tradeoffs mean that adding new tokens is usually only worthwhile when you know that they'll be used by many components. -As an alternative, consider using [the `sx` prop](/joy-ui/customization/approaches/#sx-prop) for one-off customizations. +As an alternative, consider using [the `sx` prop](/joy-ui/customization/approaches/#the-sx-prop) for one-off customizations. ::: ### Adding new palettes @@ -254,26 +254,4 @@ This removes them from the `theme` object and prevents the corresponding CSS var For example, all default global variant color tokens comes with styles for the `:active` pseudo class. Here's how you'd remove it from the solid variant. -```jsx -// ⚠️ If the value is `undefined`, it should be `undefined` for all color schemes. -const theme = extendTheme({ - colorSchemes: { - light: { - palette: { - primary: { - solidActiveBg: undefined, - }, - }, - }, - dark: { - palette: { - primary: { - solidActiveBg: undefined, - }, - }, - }, - }, -}); -``` - -{{"demo": "RemoveActiveTokens.js"}} +{{"demo": "RemoveActiveTokens.js", "defaultCodeOpen": true}} diff --git a/docs/data/joy/getting-started/support/support.md b/docs/data/joy/getting-started/support/support.md index b8bb49deb475b5..09c5049750f2bc 100644 --- a/docs/data/joy/getting-started/support/support.md +++ b/docs/data/joy/getting-started/support/support.md @@ -27,21 +27,26 @@ We require bug reports to be accompanied by a **minimal reproduction**. It significantly increases the odds of fixing the problem. You have a few possible options to provide it: -- You can browse the documentation, find an example close to your use case, and then open it in a live editor: - - - Forking an example - - - Forking an example - - +#### Use the live editors -- You can use a starter React template to build a reproduction case with [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts). +You can browse the documentation, find an example close to your use case, and then open it in a live editor: -## Stack Overflow + + +Forking an example + + +Forking an example + + -We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the Joy UI community as well as Joy UI maintainers. +#### Use starter templates + +You can use a starter React template to build a reproduction case with [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts). + +## Stack Overflow + +We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the Joy UI community as well as Joy UI maintainers. You can search through existing questions and answers to see if someone has asked a similar question using the [joy-ui tags](https://stackoverflow.com/questions/tagged/joy-ui): @@ -84,7 +89,7 @@ Our tools are used by thousands of developers and teams all around the world, ma You can join Discord to engage in lively discussions, share your projects, and interact with developers just like you from all around the world. We'd love for you to join us! :::warning -How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow). +How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow). ::: ## Custom work diff --git a/docs/data/joy/integrations/material-ui/material-ui.md b/docs/data/joy/integrations/material-ui/material-ui.md index 432a599743f157..955424df5ea55a 100644 --- a/docs/data/joy/integrations/material-ui/material-ui.md +++ b/docs/data/joy/integrations/material-ui/material-ui.md @@ -18,7 +18,7 @@ Additionally, keep these in mind when using them together: - 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 +### Prerequisites - Have `@mui/material` and `@mui/joy` installed in your project. - The version of both libraries must be [v5.12.0](https://github.com/mui/material-ui/releases/tag/v5.12.0) or higher. diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts index d7b83a16585e6c..d18ded364dd1a6 100644 --- a/docs/data/joy/pages.ts +++ b/docs/data/joy/pages.ts @@ -47,7 +47,6 @@ const pages: readonly MuiPage[] = [ { pathname: '/joy-ui/react-toggle-button-group', title: 'Toggle Button Group', - newFeature: true, }, ], }, @@ -74,15 +73,15 @@ const pages: readonly MuiPage[] = [ { pathname: '/joy-ui/react-circular-progress', title: 'Circular Progress' }, { pathname: '/joy-ui/react-linear-progress', title: 'Linear Progress' }, { pathname: '/joy-ui/react-modal' }, - { pathname: '/joy-ui/react-skeleton', newFeature: true }, - { pathname: '/joy-ui/react-snackbar', newFeature: true }, + { pathname: '/joy-ui/react-skeleton' }, + { pathname: '/joy-ui/react-snackbar' }, ], }, { pathname: '/joy-ui/components/surfaces', subheader: 'surfaces', children: [ - { pathname: '/joy-ui/react-accordion', newFeature: true }, + { pathname: '/joy-ui/react-accordion' }, { pathname: '/joy-ui/react-card' }, { pathname: '/joy-ui/react-sheet' }, ], @@ -92,10 +91,10 @@ const pages: readonly MuiPage[] = [ subheader: 'navigation', children: [ { pathname: '/joy-ui/react-breadcrumbs' }, - { pathname: '/joy-ui/react-drawer', newFeature: true }, + { pathname: '/joy-ui/react-drawer' }, { pathname: '/joy-ui/react-link' }, { pathname: '/joy-ui/react-menu' }, - { pathname: '/joy-ui/react-stepper', newFeature: true }, + { pathname: '/joy-ui/react-stepper' }, { pathname: '/joy-ui/react-tabs' }, ], }, diff --git a/docs/data/material/components/box/BoxBasic.js b/docs/data/material/components/box/BoxBasic.js new file mode 100644 index 00000000000000..6f93223d92cd53 --- /dev/null +++ b/docs/data/material/components/box/BoxBasic.js @@ -0,0 +1,10 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; + +export default function BoxBasic() { + return ( + + This Box renders as an HTML section element. + + ); +} diff --git a/docs/data/material/components/box/BoxBasic.tsx b/docs/data/material/components/box/BoxBasic.tsx new file mode 100644 index 00000000000000..6f93223d92cd53 --- /dev/null +++ b/docs/data/material/components/box/BoxBasic.tsx @@ -0,0 +1,10 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; + +export default function BoxBasic() { + return ( + + This Box renders as an HTML section element. + + ); +} diff --git a/docs/data/material/components/box/BoxBasic.tsx.preview b/docs/data/material/components/box/BoxBasic.tsx.preview new file mode 100644 index 00000000000000..d22b5b82187b80 --- /dev/null +++ b/docs/data/material/components/box/BoxBasic.tsx.preview @@ -0,0 +1,2 @@ + + This Box renders as an HTML section element. diff --git a/docs/data/material/components/box/BoxComponent.js b/docs/data/material/components/box/BoxComponent.js deleted file mode 100644 index 5376e3c004a69a..00000000000000 --- a/docs/data/material/components/box/BoxComponent.js +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; - -export default function BoxComponent() { - return ( - - - - ); -} diff --git a/docs/data/material/components/box/BoxComponent.tsx b/docs/data/material/components/box/BoxComponent.tsx deleted file mode 100644 index 5376e3c004a69a..00000000000000 --- a/docs/data/material/components/box/BoxComponent.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; - -export default function BoxComponent() { - return ( - - - - ); -} diff --git a/docs/data/material/components/box/BoxComponent.tsx.preview b/docs/data/material/components/box/BoxComponent.tsx.preview deleted file mode 100644 index 43eef49d466ae8..00000000000000 --- a/docs/data/material/components/box/BoxComponent.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/box/BoxSx.js b/docs/data/material/components/box/BoxSx.js index 66080ed99ef7d9..490d11833351b8 100644 --- a/docs/data/material/components/box/BoxSx.js +++ b/docs/data/material/components/box/BoxSx.js @@ -1,18 +1,29 @@ import * as React from 'react'; -import Box from '@mui/material/Box'; +import { Box, ThemeProvider } from '@mui/material'; export default function BoxSx() { return ( - + > + + ); } diff --git a/docs/data/material/components/box/BoxSx.tsx b/docs/data/material/components/box/BoxSx.tsx index 66080ed99ef7d9..490d11833351b8 100644 --- a/docs/data/material/components/box/BoxSx.tsx +++ b/docs/data/material/components/box/BoxSx.tsx @@ -1,18 +1,29 @@ import * as React from 'react'; -import Box from '@mui/material/Box'; +import { Box, ThemeProvider } from '@mui/material'; export default function BoxSx() { return ( - + > + + ); } diff --git a/docs/data/material/components/box/BoxSx.tsx.preview b/docs/data/material/components/box/BoxSx.tsx.preview deleted file mode 100644 index 88ed3ecbb91e7d..00000000000000 --- a/docs/data/material/components/box/BoxSx.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/box/BoxSystemProps.js b/docs/data/material/components/box/BoxSystemProps.js new file mode 100644 index 00000000000000..73fcd2bcf4d596 --- /dev/null +++ b/docs/data/material/components/box/BoxSystemProps.js @@ -0,0 +1,19 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; + +export default function BoxSystemProps() { + return ( + + This Box uses MUI System props for quick customization. + + ); +} diff --git a/docs/data/material/components/box/BoxSystemProps.tsx b/docs/data/material/components/box/BoxSystemProps.tsx new file mode 100644 index 00000000000000..73fcd2bcf4d596 --- /dev/null +++ b/docs/data/material/components/box/BoxSystemProps.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; + +export default function BoxSystemProps() { + return ( + + This Box uses MUI System props for quick customization. + + ); +} diff --git a/docs/data/material/components/box/BoxSystemProps.tsx.preview b/docs/data/material/components/box/BoxSystemProps.tsx.preview new file mode 100644 index 00000000000000..b0decb0904b5a3 --- /dev/null +++ b/docs/data/material/components/box/BoxSystemProps.tsx.preview @@ -0,0 +1,2 @@ + + This Box uses MUI System props for quick customization. diff --git a/docs/data/material/components/box/box.md b/docs/data/material/components/box/box.md index 8a0d4906f7483a..144c14bee4a1d5 100644 --- a/docs/data/material/components/box/box.md +++ b/docs/data/material/components/box/box.md @@ -5,13 +5,57 @@ components: Box githubLabel: 'component: Box' --- + + # Box

    The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.

    -:::warning -Please refer to the [Box](/system/react-box/) component page in the MUI System docs for demos and details on usage. +{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} + +## Introduction + +The Box component is a generic container for grouping other components. +It's a fundamental building block when working with Material UI—you can think of it as a `
    ` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/). + +### Usage + +The Box component differs from other containers available in Material UI in that its usage is intended to be multipurpose and open-ended, just like a `
    `. +Components like [Container](/material-ui/react-container/), [Stack](/material-ui/react-stack/) and [Paper](/material-ui/react-paper/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for main layout orientation, Stack for one-dimensional layouts, and Paper for elevated surfaces. + +## Basics + +```jsx +import Box from '@mui/material/Box'; +``` + +The Box component renders as a `
    ` by default, but you can swap in any other valid HTML tag or React component using the `component` prop. +The demo below replaces the `
    ` with a `
    ` element: + +{{"demo": "BoxBasic.js", "defaultCodeOpen": true }} + +## Customization + +### With MUI System props + +As a CSS utility component, the Box supports all [MUI System properties](/system/properties/). +You can use them as props directly on the component. + +{{"demo": "BoxSystemProps.js", "defaultCodeOpen": true }} + +### With the sx prop + +Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package. +The demo below shows how to apply colors from the theme using this prop: + +{{"demo": "BoxSx.js", "defaultCodeOpen": true }} + +## Anatomy + +The Box component is composed of a single root `
    ` element: -The Box component is a part of the standalone [MUI System](/system/getting-started/) utility library. -It is re-exported from `@mui/material` for your convenience. -::: +```html +
    + +
    +``` diff --git a/docs/data/material/components/progress/CircularIntegration.js b/docs/data/material/components/progress/CircularIntegration.js index c077a18947a126..1c885b355996da 100644 --- a/docs/data/material/components/progress/CircularIntegration.js +++ b/docs/data/material/components/progress/CircularIntegration.js @@ -31,7 +31,7 @@ export default function CircularIntegration() { if (!loading) { setSuccess(false); setLoading(true); - timer.current = window.setTimeout(() => { + timer.current = setTimeout(() => { setSuccess(true); setLoading(false); }, 2000); diff --git a/docs/data/material/components/progress/CircularIntegration.tsx b/docs/data/material/components/progress/CircularIntegration.tsx index 0400d3a8066a20..c32a5957a42fb8 100644 --- a/docs/data/material/components/progress/CircularIntegration.tsx +++ b/docs/data/material/components/progress/CircularIntegration.tsx @@ -10,7 +10,7 @@ import SaveIcon from '@mui/icons-material/Save'; export default function CircularIntegration() { const [loading, setLoading] = React.useState(false); const [success, setSuccess] = React.useState(false); - const timer = React.useRef(); + const timer = React.useRef>(); const buttonSx = { ...(success && { @@ -31,7 +31,7 @@ export default function CircularIntegration() { if (!loading) { setSuccess(false); setLoading(true); - timer.current = window.setTimeout(() => { + timer.current = setTimeout(() => { setSuccess(true); setLoading(false); }, 2000); diff --git a/docs/data/material/components/progress/DelayingAppearance.js b/docs/data/material/components/progress/DelayingAppearance.js index feff1c6659b7e4..df2b050772e529 100644 --- a/docs/data/material/components/progress/DelayingAppearance.js +++ b/docs/data/material/components/progress/DelayingAppearance.js @@ -32,7 +32,7 @@ export default function DelayingAppearance() { } setQuery('progress'); - timerRef.current = window.setTimeout(() => { + timerRef.current = setTimeout(() => { setQuery('success'); }, 2000); }; diff --git a/docs/data/material/components/progress/DelayingAppearance.tsx b/docs/data/material/components/progress/DelayingAppearance.tsx index c7ef8f7f90feaa..a6784fd2d359d8 100644 --- a/docs/data/material/components/progress/DelayingAppearance.tsx +++ b/docs/data/material/components/progress/DelayingAppearance.tsx @@ -8,7 +8,7 @@ import Typography from '@mui/material/Typography'; export default function DelayingAppearance() { const [loading, setLoading] = React.useState(false); const [query, setQuery] = React.useState('idle'); - const timerRef = React.useRef(); + const timerRef = React.useRef>(); React.useEffect( () => () => { @@ -32,7 +32,7 @@ export default function DelayingAppearance() { } setQuery('progress'); - timerRef.current = window.setTimeout(() => { + timerRef.current = setTimeout(() => { setQuery('success'); }, 2000); }; diff --git a/docs/data/material/customization/color/color.md b/docs/data/material/customization/color/color.md index 31927855df38e3..43733e40fbac28 100644 --- a/docs/data/material/customization/color/color.md +++ b/docs/data/material/customization/color/color.md @@ -11,7 +11,7 @@ The Material Design [color system](https://m2.material.io/design/color/) can be The Material Design team has also built an awesome palette configuration tool: [material.io/resources/color/](https://m2.material.io/inline-tools/color/). This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination. - + Official color tool
    diff --git a/docs/data/material/discover-more/backers/backers.md b/docs/data/material/discover-more/backers/backers.md index 311c97d56f0715..fcbc9a4025059c 100644 --- a/docs/data/material/discover-more/backers/backers.md +++ b/docs/data/material/discover-more/backers/backers.md @@ -8,9 +8,9 @@ Sponsorship increases the rate of bug fixes, documentation improvements, and fea ## Diamond sponsors

    - octopus - doit - marblism + octopus + doit + marblism

    Diamond sponsors are those who've pledged \$1,500/month or more to the MUI organization. [Tier benefits](#diamond). @@ -20,14 +20,14 @@ Diamond sponsors are those who've pledged \$1,500/month or more to the MUI organ via [Open Collective](https://opencollective.com/mui-org) or via [the for-profit](https://www.patreon.com/oliviertassinari)

    - tidelift.com - Spotify - Icons8 - RxDB - text-em-all.com - megafamous.com - dialmycalls.com - goread.io + tidelift.com + Spotify + Icons8 + RxDB + text-em-all.com + megafamous.com + dialmycalls.com + goread.io

    Gold sponsors are those who've pledged \$500/month or more to the MUI organization. [Tier benefits](#gold). diff --git a/docs/data/material/getting-started/faq/faq.md b/docs/data/material/getting-started/faq/faq.md index 9a2ef51aa355f0..b756cafbf70a9b 100644 --- a/docs/data/material/getting-started/faq/faq.md +++ b/docs/data/material/getting-started/faq/faq.md @@ -12,7 +12,7 @@ There are many ways to support us: Follow us on [X](https://twitter.com/MUI_hq), like and retweet the important news. Or just talk about us with your friends. - **Give us feedback**. Tell us what is going well or where there is improvement opportunities. Please upvote (👍) the issues that you are the most interested in seeing solved. - **Help new users**. You can answer questions on - [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui). + [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui). - **Make changes happen**. - Edit the documentation. At the bottom of every page, you can find an "Edit this page" button. - Report bugs or missing features by [creating an issue](https://github.com/mui/material-ui/issues/new). diff --git a/docs/data/material/getting-started/overview/overview.md b/docs/data/material/getting-started/overview/overview.md index 7d9b74cde97f91..810cb82a8e5484 100644 --- a/docs/data/material/getting-started/overview/overview.md +++ b/docs/data/material/getting-started/overview/overview.md @@ -29,7 +29,7 @@ You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/293 The [design kits](https://mui.com/design-kits/) streamline your workflow and boost consistency between designers and developers. - **Trusted by thousands of organizations:** Material UI has the largest UI community in the React ecosystem. It's almost as old as React itself—its history stretches back to 2014—and we're in this for the long haul. - You can count on the community's support for years to come (e.g. [Stack Overflow](https://insights.stackoverflow.com/trends?tags=material-ui)). + You can count on the community's support for years to come (e.g. [Stack Overflow](https://insights.stackoverflow.com/trends?tags=material-ui)). ### Material UI vs. Base UI diff --git a/docs/data/material/getting-started/support/support.md b/docs/data/material/getting-started/support/support.md index 3f51f864f0dc35..6a9c7c672270d9 100644 --- a/docs/data/material/getting-started/support/support.md +++ b/docs/data/material/getting-started/support/support.md @@ -39,9 +39,9 @@ You have a few possible options to provide it: - You can use a starter React template to build a reproduction case with [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts). -## Stack Overflow +## Stack Overflow -We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the Material UI community as well as Material UI maintainers. +We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the Material UI community as well as Material UI maintainers. You can search through existing questions and answers to see if someone has asked a similar question using the [material-ui tags](https://stackoverflow.com/questions/tagged/material-ui): @@ -89,7 +89,7 @@ Our tools are used by thousands of developers and teams all around the world, ma You can join Discord to engage in lively discussions, share your projects, and interact with developers just like you from all around the world. We'd love for you to join us! :::warning -How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow). +How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow). ::: ## Custom work diff --git a/docs/data/material/getting-started/templates/dashboard/README.md b/docs/data/material/getting-started/templates/dashboard/README.md index 4c192830b381e6..3415051ae20be5 100644 --- a/docs/data/material/getting-started/templates/dashboard/README.md +++ b/docs/data/material/getting-started/templates/dashboard/README.md @@ -5,7 +5,7 @@ 1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples). -2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react, recharts. +2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react, @mui/x-charts. 3. Import and use the `Dashboard` component. ## Demo diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md index 329b68dccacd6e..044877d094ce95 100644 --- a/docs/data/material/integrations/nextjs/nextjs.md +++ b/docs/data/material/integrations/nextjs/nextjs.md @@ -48,6 +48,13 @@ Inside `app/layout.tsx`, import the `AppRouterCacheProvider` and wrap all elemen } ``` +:::info +The `AppRouterCacheProvider` component is responsible for collecting the CSS generated by MUI System on the server, as Next.js is streaming chunks of the .html page to the client. + +While it's not required to use the `AppRouterCacheProvider` component, it's recommended to use it to ensure that the styles are appended to the `` and not rendering in the ``. +See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's better. +::: + #### Custom cache (optional) Use the `options` prop to override the default [cache options](https://emotion.sh/docs/@emotion/cache#options)—for example, the code snippet below shows how to change the CSS key to `css` (the default is `mui`): @@ -218,6 +225,13 @@ Then, inside `pages/_app.tsx`, import the `AppCacheProvider` component and rende } ``` +:::info +The `AppCacheProvider` component is responsible for collecting the CSS generated by MUI System on the server, as Next.js is rendering the .html page to the client. + +While it's not required to use the `AppCacheProvider` component, it's recommended to use it to ensure that the styles are appended to the `` and not rendering in the ``. +See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's better. +::: + #### Custom cache (optional) To use a custom [Emotion cache](https://emotion.sh/docs/@emotion/cache), pass it to the `emotionCache` property in `_document.tsx`: diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md index 903eb619001eac..a6c761d92ddf4b 100644 --- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md +++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md @@ -92,10 +92,11 @@ Bear in mind that the `.MuiAccordionSummary-gutters` class is applied to the com ## Alert -Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#alert-props) below to migrate the code as described in the following sections: +Use the [alert-props](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#alert-props) and [alert-classes](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#alert-classes) codemods below to migrate the code as described in the following sections: ```bash npx @mui/codemod@latest deprecations/alert-props +npx @mui/codemod@latest deprecations/alert-classes ``` ### components @@ -120,6 +121,98 @@ The Alert's `componentsProps` was deprecated in favor of `slotProps`: /> ``` +### Composed CSS classes + +The CSS classes that composed the `severity` (or `variant`) and `color` prop values were removed. + +Here's how to migrate: + +```diff +-.MuiAlert-standardSuccess ++.MuiAlert-standard.MuiAlert-colorSuccess +-.MuiAlert-standardInfo ++.MuiAlert-standard.MuiAlert-colorInfo +-.MuiAlert-standardWarning ++.MuiAlert-standard.MuiAlert-colorWarning +-.MuiAlert-standardError ++.MuiAlert-standard.MuiAlert-colorError +-.MuiAlert-outlinedSuccess ++.MuiAlert-outlined.MuiAlert-colorSuccess +-.MuiAlert-outlinedInfo ++.MuiAlert-outlined.MuiAlert-colorInfo +-.MuiAlert-outlinedWarning ++.MuiAlert-outlined.MuiAlert-colorWarning +-.MuiAlert-outlinedError ++.MuiAlert-outlined.MuiAlert-colorError +-.MuiAlert-filledSuccess ++.MuiAlert-filled.MuiAlert-colorSuccess +-.MuiAlert-filledInfo ++.MuiAlert-filled.MuiAlert-colorInfo +-.MuiAlert-filledWarning ++.MuiAlert-filled.MuiAlert-colorWarning +-.MuiAlert-filledError ++.MuiAlert-filled.MuiAlert-colorError +``` + +```diff + import { alertClasses } from '@mui/material/PaginationItem'; + + MuiPaginationItem: { + styleOverrides: { + root: { +- [`&.${alertClasses.standardSuccess}`]: { ++ [`&.${alertClasses.standard}.${alertClasses.colorSuccess}`]: { + color: 'red', + }, +- [`&.${alertClasses.standardInfo}`]: { ++ [`&.${alertClasses.standard}.${alertClasses.colorInfo}`]: { + color: 'red', + }, +- [`&.${alertClasses.standardWarning}`]: { ++ [`&.${alertClasses.standard}.${alertClasses.colorWarning}`]: { + color: 'red', + }, +- [`&.${alertClasses.standardError}`]: { ++ [`&.${alertClasses.standard}.${alertClasses.colorError}`]: { + color: 'red', + }, +- [`&.${alertClasses.outlinedSuccess}`]: { ++ [`&.${alertClasses.outlined}.${alertClasses.colorSuccess}`]: { + color: 'red', + }, +- [`&.${alertClasses.outlinedInfo}`]: { ++ [`&.${alertClasses.outlined}.${alertClasses.colorInfo}`]: { + color: 'red', + }, +- [`&.${alertClasses.outlinedWarning}`]: { ++ [`&.${alertClasses.outlined}.${alertClasses.colorWarning}`]: { + color: 'red', + }, +- [`&.${alertClasses.outlinedError}`]: { ++ [`&.${alertClasses.outlined}.${alertClasses.colorError}`]: { + color: 'red', + }, +- [`&.${alertClasses.filledSuccess}`]: { ++ [`&.${alertClasses.filled}.${alertClasses.colorSuccess}`]: { + color: 'red', + }, +- [`&.${alertClasses.filledInfo}`]: { ++ [`&.${alertClasses.filled}.${alertClasses.colorInfo}`]: { + color: 'red', + }, +- [`&.${alertClasses.filledWarning}`]: { ++ [`&.${alertClasses.filled}.${alertClasses.colorWarning}`]: { + color: 'red', + }, +- [`&.${alertClasses.filledError}`]: { ++ [`&.${alertClasses.filled}.${alertClasses.colorError}`]: { + color: 'red', + }, + }, + }, + }, +``` + ## Avatar Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#avatar-props) below to migrate the code as described in the following sections: @@ -146,6 +239,424 @@ The Avatar's `imgProps` was deprecated in favor of `slotProps.img`: />; ``` +## Button + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#button-classes) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@latest deprecations/button-classes +``` + +### Composed CSS classes + +The CSS classes composing the `variant` and `color` prop values, as well as those composing the `variant` and `size` prop values, along with the `icon` size CSS classes, have been removed. + +Here's how to migrate: + +```diff +-.MuiButton-textInherit ++.MuiButton-text.MuiButton-colorInherit +-.MuiButton-textPrimary ++.MuiButton-text.MuiButton-colorPrimary +-.MuiButton-textSecondary ++.MuiButton-text.MuiButton-colorSecondary +-.MuiButton-textSuccess ++.MuiButton-text.MuiButton-colorSuccess +-.MuiButton-textError ++.MuiButton-text.MuiButton-colorError +-.MuiButton-textInfo ++.MuiButton-text.MuiButton-colorInfo +-.MuiButton-textWarning ++.MuiButton-text.MuiButton-colorWarning +-.MuiButton-outlinedInherit ++.MuiButton-outlined.MuiButton-colorInherit +-.MuiButton-outlinedPrimary ++.MuiButton-outlined.MuiButton-colorPrimary +-.MuiButton-outlinedSecondary ++.MuiButton-outlined.MuiButton-colorSecondary +-.MuiButton-outlinedSuccess ++.MuiButton-outlined.MuiButton-colorSuccess +-.MuiButton-outlinedError ++.MuiButton-outlined.MuiButton-colorError +-.MuiButton-outlinedInfo ++.MuiButton-outlined.MuiButton-colorInfo +-.MuiButton-outlinedWarning ++.MuiButton-outlined.MuiButton-colorWarning +-.MuiButton-containedInherit ++.MuiButton-contained.MuiButton-colorInherit +-.MuiButton-containedPrimary ++.MuiButton-contained.MuiButton-colorPrimary +-.MuiButton-containedSecondary ++.MuiButton-contained.MuiButton-colorSecondary +-.MuiButton-containedSuccess ++.MuiButton-contained.MuiButton-colorSuccess +-.MuiButton-containedError ++.MuiButton-contained.MuiButton-colorError +-.MuiButton-containedInfo ++.MuiButton-contained.MuiButton-colorInfo +-.MuiButton-containedWarning ++.MuiButton-contained.MuiButton-colorWarning +-.MuiButton-textSizeSmall ++.MuiButton-text.MuiButton-sizeSmall +-.MuiButton-textSizeMedium ++.MuiButton-text.MuiButton-sizeMedium +-.MuiButton-textSizeLarge ++.MuiButton-text.MuiButton-sizeLarge +-.MuiButton-outlinedSizeSmall ++.MuiButton-outlined.MuiButton-sizeSmall +-.MuiButton-outlinedSizeMedium ++.MuiButton-outlined.MuiButton-sizeMedium +-.MuiButton-outlinedSizeLarge ++.MuiButton-outlined.MuiButton-sizeLarge +-.MuiButton-containedSizeSmall ++.MuiButton-contained.MuiButton-sizeSmall +-.MuiButton-containedSizeMedium ++.MuiButton-contained.MuiButton-sizeMedium +-.MuiButton-containedSizeLarge ++.MuiButton-contained.MuiButton-sizeLarge +-.MuiButton-root .MuiButton-iconSizeSmall ++.MuiButton-root.MuiButton-sizeSmall > .MuiButton-icon +-.MuiButton-root .MuiButton-iconSizeMedium ++.MuiButton-root.MuiButton-sizeMedium > .MuiButton-icon +-.MuiButton-root .MuiButton-iconSizeLarge ++.MuiButton-root.MuiButton-sizeLarge > .MuiButton-icon +``` + +```diff + import { buttonClasses } from '@mui/material/Button'; + + MuiButton: { + styleOverrides: { + root: { +- [`&.${buttonClasses.textInherit}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorInherit}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textPrimary}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textSecondary}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textSuccess}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorSuccess}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textError}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorError}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textInfo}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorInfo}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textWarning}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorWarning}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedInherit}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorInherit}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedPrimary}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedSecondary}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedSuccess}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorSuccess}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedError}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorError}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedInfo}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorInfo}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedWarning}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorWarning}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedInherit}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorInherit}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedPrimary}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedSecondary}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedSuccess}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorSuccess}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedError}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorError}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedInfo}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorInfo}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedWarning}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorWarning}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedSizeSmall}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.sizeSmall}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedSizeMedium}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.sizeMedium}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedSizeLarge}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.sizeLarge}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textSizeSmall}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.sizeSmall}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textSizeMedium}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.sizeMedium}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textSizeLarge}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.sizeLarge}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedSizeSmall}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.sizeSmall}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedSizeMedium}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.sizeMedium}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedSizeLarge}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.sizeLarge}`]: { + color: 'red', + }, +- [`& .${buttonClasses.iconSizeSmall}`]: { ++ [`&.${buttonClasses.sizeSmall} > .${buttonClasses.icon}`]: { + color: 'red', + }, +- [`& .${buttonClasses.iconSizeMedium}`]: { ++ [`&.${buttonClasses.sizeMedium} > .${buttonClasses.icon}`]: { + color: 'red', + }, +- [`& .${buttonClasses.iconSizeLarge}`]: { ++ [`&.${buttonClasses.sizeLarge} > .${buttonClasses.icon}`]: { + color: 'red', + }, + }, + }, + }, +``` + +## Chip + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#chip-classes) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@latest deprecations/chip-classes +``` + +### Composed CSS classes + +The CSS classes that composed the following props were deprecated: + +- `variant` | `clickable` | `deletable` and `color` +- `avatar` and `color` | `size` +- `icon` and `color` | `size` +- `deleteIcon` and `color` | `size` +- `label` and `size` + +Here's how to migrate: + +```diff +-.MuiChip-clickableColorPrimary ++.MuiChip-clickable.MuiChip-colorPrimary +-.MuiChip-clickableColorSecondary ++.MuiChip-clickable.MuiChip-colorSecondary +-.MuiChip-deletableColorPrimary ++.MuiChip-deletable.MuiChip-colorPrimary +-.MuiChip-deletableColorSecondary ++.MuiChip-deletable.MuiChip-colorSecondary +-.MuiChip-outlinedPrimary ++.MuiChip-outlined.MuiChip-colorPrimary +-.MuiChip-outlinedSecondary ++.MuiChip-outlined.MuiChip-colorSecondary +-.MuiChip-filledPrimary ++.MuiChip-filled.MuiChip-colorPrimary +-.MuiChip-filledSecondary ++.MuiChip-filled.MuiChip-colorSecondary +-.MuiChip-root .MuiChip-avatarSmall ++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-avatar +-.MuiChip-root .MuiChip-avatarMedium ++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-avatar +-.MuiChip-root .MuiChip-avatarColorPrimary ++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-avatar +-.MuiChip-root .MuiChip-avatarColorSecondary ++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-avatar +-.MuiChip-root .MuiChip-iconSmall ++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-icon +-.MuiChip-root .MuiChip-iconMedium ++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-icon +-.MuiChip-root .MuiChip-iconColorPrimary ++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-icon +-.MuiChip-root .MuiChip-iconColorSecondary ++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-icon +-.MuiChip-root .MuiChip-labelSmall ++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-label +-.MuiChip-root .MuiChip-labelMedium ++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-label +-.MuiChip-root .MuiChip-deleteIconSmall ++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconMedium ++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconColorPrimary ++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconColorSecondary ++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconOutlinedColorPrimary ++.MuiChip-root.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconOutlinedColorSecondary ++.MuiChip-root.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconFilledColorPrimary ++.MuiChip-root.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconFilledColorSecondary ++.MuiChip-root.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon +``` + +```diff + + import { chipClasses } from '@mui/material/Chip'; + + MuiChip: { + styleOverrides: { + root: { +- [`&.${chipClasses.clickableColorPrimary}`]: { ++ [`&.${chipClasses.clickable}.${chipClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${chipClasses.clickableColorSecondary}`]: { ++ [`&.${chipClasses.clickable}.${chipClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${chipClasses.deletableColorPrimary}`]: { ++ [`&.${chipClasses.deletable}.${chipClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${chipClasses.deletableColorSecondary}`]: { ++ [`&.${chipClasses.deletable}.${chipClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${chipClasses.outlinedPrimary}`]: { ++ [`&.${chipClasses.outlined}.${chipClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${chipClasses.outlinedSecondary}`]: { ++ [`&.${chipClasses.outlined}.${chipClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${chipClasses.filledPrimary}`]: { ++ [`&.${chipClasses.filled}.${chipClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${chipClasses.filledSecondary}`]: { ++ [`&.${chipClasses.filled}.${chipClasses.colorSecondary}`]: { + color: 'red', + }, +- [`& .${chipClasses.avatarSmall}`]: { ++ [`&.${chipClasses.sizeSmall} > .${chipClasses.avatar}`]: { + color: 'red', + }, +- [`& .${chipClasses.avatarMedium}`]: { ++ [`&.${chipClasses.sizeMedium} > .${chipClasses.avatar}`]: { + color: 'red', + }, +- [`& .${chipClasses.avatarColorPrimary}`]: { ++ [`&.${chipClasses.colorPrimary} > .${chipClasses.avatar}`]: { + color: 'red', + }, +- [`& .${chipClasses.avatarColorSecondary}`]: { ++ [`&.${chipClasses.colorSecondary} > .${chipClasses.avatar}`]: { + color: 'red', + }, +- [`& .${chipClasses.iconSmall}`]: { ++ [`&.${chipClasses.sizeSmall} > .${chipClasses.icon}`]: { + color: 'red', + }, +- [`& .${chipClasses.iconMedium}`]: { ++ [`&.${chipClasses.sizeMedium} > .${chipClasses.icon}`]: { + color: 'red', + }, +- [`& .${chipClasses.iconColorPrimary}`]: { ++ [`&.${chipClasses.colorPrimary} > .${chipClasses.icon}`]: { + color: 'red', + }, +- [`& .${chipClasses.iconColorSecondary}`]: { ++ [`&.${chipClasses.colorSecondary} > .${chipClasses.icon}`]: { + color: 'red', + }, +- [`& .${chipClasses.labelSmall}`]: { ++ [`&.${chipClasses.sizeSmall} > .${chipClasses.label}`]: { + color: 'red', + }, +- [`& .${chipClasses.labelMedium}`]: { ++ [`&.${chipClasses.sizeMedium} > .${chipClasses.label}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconSmall}`]: { ++ [`&.${chipClasses.sizeSmall} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconMedium}`]: { ++ [`&.${chipClasses.sizeMedium} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconColorPrimary}`]: { ++ [`&.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconColorSecondary}`]: { ++ [`&.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconOutlinedColorPrimary}`]: { ++ [`&.${chipClasses.outlined}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconOutlinedColorSecondary}`]: { ++ [`&.${chipClasses.outlined}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconFilledColorPrimary}`]: { ++ [`&.${chipClasses.filled}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconFilledColorSecondary}`]: { ++ [`&.${chipClasses.filled}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, + }, + }, + }, + +``` + ## Divider Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#divider-props) below to migrate the code as described in the following sections: @@ -164,3 +675,85 @@ The Divider's `light` prop was deprecated, Use `sx={{ opacity : "0.6" }}` (or an + sx={{ opacity : "0.6" }} /> ``` + +## PaginationItem + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#pagination-item-classes) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@latest deprecations/pagination-item-classes +``` + +### Composed CSS classes + +The CSS classes that composed the `variant` and `color` prop values were removed. + +Here's how to migrate: + +```diff +-.MuiPaginationItem-textPrimary ++.MuiPaginationItem-text.MuiPaginationItem-colorPrimary +-.MuiPaginationItem-outlinedPrimary ++.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary +-.MuiPaginationItem-textSecondary ++.MuiPaginationItem-text.MuiPaginationItem-colorSecondary +-.MuiPaginationItem-outlinedSecondary ++.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary +``` + +```diff + import { paginationItemClasses } from '@mui/material/PaginationItem'; + + MuiPaginationItem: { + styleOverrides: { + root: { +- [`&.${paginationItemClasses.textPrimary}`]: { ++ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${paginationItemClasses.outlinedPrimary}`]: { ++ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${paginationItemClasses.textSecondary}`]: { ++ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${paginationItemClasses.outlinedSecondary}`]: { ++ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, + }, + }, + }, +``` + +## Slider + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#slider-props) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@latest deprecations/slider-props +``` + +### components + +The Slider's `components` was deprecated in favor of `slots`: + +```diff + +``` + +### componentsProps + +The Slider's `componentsProps` was deprecated in favor of `slotProps`: + +```diff + +``` diff --git a/docs/data/material/migration/migration-v4/v5-component-changes.md b/docs/data/material/migration/migration-v4/v5-component-changes.md index 97f46e29442aae..33267341076f13 100644 --- a/docs/data/material/migration/migration-v4/v5-component-changes.md +++ b/docs/data/material/migration/migration-v4/v5-component-changes.md @@ -2008,7 +2008,7 @@ This change removes the confusion with the built-in `Omit` helper introduced in The built-in `Omit`, while similar, is non-distributive. This leads to differences when applied to union types. -[See this Stack Overflow answer for further details](https://stackoverflow.com/questions/57103834/typescript-omit-a-property-from-all-interfaces-in-a-union-but-keep-the-union-s/57103940#57103940). +[See this Stack Overflow answer for further details](https://stackoverflow.com/questions/57103834/typescript-omit-a-property-from-all-interfaces-in-a-union-but-keep-the-union-s/57103940#57103940). ```diff -import { Omit } from '@mui/types'; diff --git a/docs/data/system/components/box/BoxBasic.js b/docs/data/system/components/box/BoxBasic.js index e05af05a8dce35..1ba8f5832c523b 100644 --- a/docs/data/system/components/box/BoxBasic.js +++ b/docs/data/system/components/box/BoxBasic.js @@ -4,7 +4,7 @@ import Box from '@mui/system/Box'; export default function BoxBasic() { return ( - This is a section container + This Box renders as an HTML section element. ); } diff --git a/docs/data/system/components/box/BoxBasic.tsx b/docs/data/system/components/box/BoxBasic.tsx index e05af05a8dce35..1ba8f5832c523b 100644 --- a/docs/data/system/components/box/BoxBasic.tsx +++ b/docs/data/system/components/box/BoxBasic.tsx @@ -4,7 +4,7 @@ import Box from '@mui/system/Box'; export default function BoxBasic() { return ( - This is a section container + This Box renders as an HTML section element. ); } diff --git a/docs/data/system/components/box/BoxBasic.tsx.preview b/docs/data/system/components/box/BoxBasic.tsx.preview index 3f47facef29add..d22b5b82187b80 100644 --- a/docs/data/system/components/box/BoxBasic.tsx.preview +++ b/docs/data/system/components/box/BoxBasic.tsx.preview @@ -1,2 +1,2 @@ - This is a section container + This Box renders as an HTML section element. diff --git a/docs/data/system/components/box/BoxComponent.js b/docs/data/system/components/box/BoxComponent.js deleted file mode 100644 index 28a050a35091af..00000000000000 --- a/docs/data/system/components/box/BoxComponent.js +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { Box } from '@mui/system'; -import Button from '@mui/material/Button'; - -export default function BoxComponent() { - return ( - - - - ); -} diff --git a/docs/data/system/components/box/BoxComponent.tsx b/docs/data/system/components/box/BoxComponent.tsx deleted file mode 100644 index 28a050a35091af..00000000000000 --- a/docs/data/system/components/box/BoxComponent.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { Box } from '@mui/system'; -import Button from '@mui/material/Button'; - -export default function BoxComponent() { - return ( - - - - ); -} diff --git a/docs/data/system/components/box/BoxComponent.tsx.preview b/docs/data/system/components/box/BoxComponent.tsx.preview deleted file mode 100644 index 43eef49d466ae8..00000000000000 --- a/docs/data/system/components/box/BoxComponent.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/system/components/box/BoxSystemProps.js b/docs/data/system/components/box/BoxSystemProps.js new file mode 100644 index 00000000000000..966f9739d26db8 --- /dev/null +++ b/docs/data/system/components/box/BoxSystemProps.js @@ -0,0 +1,19 @@ +import * as React from 'react'; +import Box from '@mui/system/Box'; + +export default function BoxSystemProps() { + return ( + + This Box uses MUI System props for quick customization. + + ); +} diff --git a/docs/data/system/components/box/BoxSystemProps.tsx b/docs/data/system/components/box/BoxSystemProps.tsx new file mode 100644 index 00000000000000..966f9739d26db8 --- /dev/null +++ b/docs/data/system/components/box/BoxSystemProps.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import Box from '@mui/system/Box'; + +export default function BoxSystemProps() { + return ( + + This Box uses MUI System props for quick customization. + + ); +} diff --git a/docs/data/system/components/box/BoxSystemProps.tsx.preview b/docs/data/system/components/box/BoxSystemProps.tsx.preview new file mode 100644 index 00000000000000..b0decb0904b5a3 --- /dev/null +++ b/docs/data/system/components/box/BoxSystemProps.tsx.preview @@ -0,0 +1,2 @@ + + This Box uses MUI System props for quick customization. diff --git a/docs/data/system/components/box/box.md b/docs/data/system/components/box/box.md index 80524e44cb81c9..f68753b0f644dc 100644 --- a/docs/data/system/components/box/box.md +++ b/docs/data/system/components/box/box.md @@ -5,6 +5,8 @@ components: Box githubLabel: 'component: Box' --- + + # Box

    The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.

    @@ -14,7 +16,12 @@ githubLabel: 'component: Box' ## Introduction The Box component is a generic container for grouping other components. -It's a fundamental building block—you can think of it as a `
    ` with special features (like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/)). +It's a fundamental building block when working with MUI System—you can think of it as a `
    ` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/). + +### Usage + +The Box component differs from other containers available in MUI System in that its usage is intended to be multipurpose and open-ended, just like a `
    `. +Components like [Container](/system/react-container/) and [Stack](/system/react-stack/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for main layout orientation, and Stack for one-dimensional layouts. ## Basics @@ -27,28 +34,23 @@ The demo below replaces the `
    ` with a `
    ` element: {{"demo": "BoxBasic.js", "defaultCodeOpen": true }} -:::info -The Box component differs from other containers available in Material UI and Joy UI because it's intended to be multipurpose—components like [Stack](/material-ui/react-stack/) and [Paper](/material-ui/react-paper/), by contrast, feature usage-specific props that make them ideal for certain use cases. -::: +## Customization -## Component +### With MUI System props -### Using the sx prop +As a CSS utility component, the Box supports all [MUI System properties](/system/properties/). +You can use them as props directly on the component. -Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS with access to all the style functions and theme-aware properties exposed in the MUI System package. +{{"demo": "BoxSystemProps.js", "defaultCodeOpen": true }} -{{"demo": "BoxSx.js", "defaultCodeOpen": true }} - -### System props +### With the sx prop -As a CSS utility component, the Box supports all [MUI System properties](/system/properties/). -You can use them as prop directly on the component. +Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package. +The demo below shows how to apply colors from the theme using this prop: -```jsx - -``` +{{"demo": "BoxSx.js", "defaultCodeOpen": true }} -## Create your own Box component +### Create your own Box Use the `createBox()` utility to create your version of the Box component. This is useful if you need to expose your container to a theme that's different from the default theme of the library you're working with: @@ -64,3 +66,13 @@ const Box = createBox({ defaultTheme }); export default Box; ``` + +## Anatomy + +The Box component is composed of a single root `
    ` element: + +```html +
    + +
    +``` diff --git a/docs/data/system/getting-started/support/support.md b/docs/data/system/getting-started/support/support.md index a44a0cee1b98e8..34c5cf75dd4268 100644 --- a/docs/data/system/getting-started/support/support.md +++ b/docs/data/system/getting-started/support/support.md @@ -39,9 +39,9 @@ You have a few possible options to provide it: - You can use a starter React template to build a reproduction case with [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts). -## Stack Overflow +## Stack Overflow -We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the MUI System community as well as MUI System maintainers. +We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the MUI System community as well as MUI System maintainers. You can search through existing questions and answers to see if someone has asked a similar question using the [mui-system tags](https://stackoverflow.com/questions/tagged/material-ui): @@ -84,7 +84,7 @@ Our tools are used by thousands of developers and teams all around the world, ma You can join Discord to engage in lively discussions, share your projects, and interact with developers just like you from all around the world. We'd love for you to join us! :::warning -How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow). +How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow). ::: ## Custom work diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts index bfc99888323a0d..3c3678f9810ea4 100644 --- a/docs/lib/sourcing.ts +++ b/docs/lib/sourcing.ts @@ -1,6 +1,6 @@ import fs from 'fs'; import path from 'path'; -import { getHeaders } from '@mui/markdown'; +import { getHeaders } from '@mui/internal-markdown'; const blogDir = path.join(process.cwd(), 'pages/blog'); @@ -33,13 +33,16 @@ export function getBlogPost(filePath: string): BlogPost { // Avoid typos in the blog markdown pages. // https://www.notion.so/mui-org/Blog-247ec2bff5fa46e799ef06a693c94917 const ALLOWED_TAGS = [ - 'MUI Core', - 'MUI X', - 'News', 'Company', 'Developer Survey', + 'Guide', 'Product', + // Product tags + 'Material UI', 'Base UI', + 'Joy UI', + 'MUI X', + 'MUI System', ]; export const getAllBlogPosts = () => { diff --git a/docs/next.config.mjs b/docs/next.config.mjs index 87531b1a2cf1c8..a0ec4b89d6df8c 100644 --- a/docs/next.config.mjs +++ b/docs/next.config.mjs @@ -129,14 +129,33 @@ export default withDocsInfra({ test: /\.md$/, oneOf: [ { - resourceQuery: /@mui\/markdown/, + resourceQuery: /muiMarkdown/, use: [ options.defaultLoaders.babel, { - loader: require.resolve('@mui/markdown/loader'), + loader: require.resolve('@mui/internal-markdown/loader'), options: { + workspaceRoot, ignoreLanguagePages: LANGUAGES_IGNORE_PAGES, languagesInProgress: LANGUAGES_IN_PROGRESS, + packages: [ + { + productId: 'material-ui', + paths: [ + path.join(workspaceRoot, 'packages/mui-base/src'), + path.join(workspaceRoot, 'packages/mui-lab/src'), + path.join(workspaceRoot, 'packages/mui-material/src'), + ], + }, + { + productId: 'base-ui', + paths: [path.join(workspaceRoot, 'packages/mui-base/src')], + }, + { + productId: 'joy-ui', + paths: [path.join(workspaceRoot, 'packages/mui-joy/src')], + }, + ], env: { SOURCE_CODE_REPO: options.config.env.SOURCE_CODE_REPO, LIB_VERSION: options.config.env.LIB_VERSION, diff --git a/docs/package.json b/docs/package.json index afb328227c1b4c..e74f4b0ea4ba69 100644 --- a/docs/package.json +++ b/docs/package.json @@ -36,7 +36,7 @@ "@mui/icons-material": "workspace:^", "@mui/joy": "workspace:*", "@mui/lab": "workspace:*", - "@mui/markdown": "workspace:^", + "@mui/internal-markdown": "workspace:^", "@mui/material": "workspace:^", "@mui/material-next": "workspace:*", "@mui/styled-engine": "workspace:^", @@ -116,9 +116,9 @@ "devDependencies": { "@babel/plugin-transform-react-constant-elements": "^7.23.3", "@babel/preset-typescript": "^7.23.3", + "@mui/internal-scripts": "workspace:^", "@mui-internal/docs-utils": "workspace:^", "@mui-internal/test-utils": "workspace:^", - "@mui-internal/typescript-to-proptypes": "workspace:^", "@types/autosuggest-highlight": "^3.2.3", "@types/chai": "^4.3.11", "@types/css-mediaquery": "^0.1.4", diff --git a/docs/pages/base-ui/all-components/index.js b/docs/pages/base-ui/all-components/index.js index eb5cdf8793bdeb..3501384eead7ca 100644 --- a/docs/pages/base-ui/all-components/index.js +++ b/docs/pages/base-ui/all-components/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/all-components/all-components.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/all-components/all-components.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/base-ui/getting-started/accessibility.js b/docs/pages/base-ui/getting-started/accessibility.js index 0a2db71b65440b..7138755efc7808 100644 --- a/docs/pages/base-ui/getting-started/accessibility.js +++ b/docs/pages/base-ui/getting-started/accessibility.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/getting-started/accessibility/accessibility.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/getting-started/accessibility/accessibility.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/base-ui/getting-started/customization.js b/docs/pages/base-ui/getting-started/customization.js index e957153883b78c..6451d0899daf37 100644 --- a/docs/pages/base-ui/getting-started/customization.js +++ b/docs/pages/base-ui/getting-started/customization.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/getting-started/customization/customization.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/getting-started/customization/customization.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/base-ui/getting-started/index.js b/docs/pages/base-ui/getting-started/index.js index b58ce6dc8e7d57..c5a42645269d1d 100644 --- a/docs/pages/base-ui/getting-started/index.js +++ b/docs/pages/base-ui/getting-started/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/getting-started/overview/overview.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/getting-started/overview/overview.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/base-ui/getting-started/quickstart.js b/docs/pages/base-ui/getting-started/quickstart.js index 29e78f295ddea7..e4a25f73c3244d 100644 --- a/docs/pages/base-ui/getting-started/quickstart.js +++ b/docs/pages/base-ui/getting-started/quickstart.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/getting-started/quickstart/quickstart.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/getting-started/quickstart/quickstart.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/base-ui/getting-started/support.js b/docs/pages/base-ui/getting-started/support.js index 3189b282ae4013..dbcfa1cb3f0bf7 100644 --- a/docs/pages/base-ui/getting-started/support.js +++ b/docs/pages/base-ui/getting-started/support.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/base/getting-started/support/support.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/getting-started/support/support.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/base-ui/getting-started/usage.js b/docs/pages/base-ui/getting-started/usage.js index 0d69b588149af9..3fc034304a3417 100644 --- a/docs/pages/base-ui/getting-started/usage.js +++ b/docs/pages/base-ui/getting-started/usage.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/getting-started/usage/usage.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/getting-started/usage/usage.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/base-ui/guides/next-js-app-router.js b/docs/pages/base-ui/guides/next-js-app-router.js index f014e355697f53..72307b47e5d7ae 100644 --- a/docs/pages/base-ui/guides/next-js-app-router.js +++ b/docs/pages/base-ui/guides/next-js-app-router.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/base/guides/next-js-app-router/next-js-app-router.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/guides/next-js-app-router/next-js-app-router.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/base-ui/guides/overriding-component-structure.js b/docs/pages/base-ui/guides/overriding-component-structure.js index 5a1ea2d8c934f1..766aeb9de1994e 100644 --- a/docs/pages/base-ui/guides/overriding-component-structure.js +++ b/docs/pages/base-ui/guides/overriding-component-structure.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/base/guides/overriding-component-structure/overriding-component-structure.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/guides/overriding-component-structure/overriding-component-structure.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/base-ui/guides/working-with-tailwind-css.js b/docs/pages/base-ui/guides/working-with-tailwind-css.js index 3ba1ff812fc256..3d5bdaa5774359 100644 --- a/docs/pages/base-ui/guides/working-with-tailwind-css.js +++ b/docs/pages/base-ui/guides/working-with-tailwind-css.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/base-ui/react-accordion/index.js b/docs/pages/base-ui/react-accordion/index.js index 44817b268be5a8..1e772125a466a2 100644 --- a/docs/pages/base-ui/react-accordion/index.js +++ b/docs/pages/base-ui/react-accordion/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/accordion/accordion.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/accordion/accordion.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-autocomplete/[docsTab]/index.js b/docs/pages/base-ui/react-autocomplete/[docsTab]/index.js index 5d72f2cf4dbb19..d3e8626fa47a26 100644 --- a/docs/pages/base-ui/react-autocomplete/[docsTab]/index.js +++ b/docs/pages/base-ui/react-autocomplete/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/autocomplete/autocomplete.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/autocomplete/autocomplete.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import useAutocompleteApiJsonPageContent from '../../api/use-autocomplete.json'; diff --git a/docs/pages/base-ui/react-autocomplete/index.js b/docs/pages/base-ui/react-autocomplete/index.js index aa57822e6fb34f..5e36d082f953f3 100644 --- a/docs/pages/base-ui/react-autocomplete/index.js +++ b/docs/pages/base-ui/react-autocomplete/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/autocomplete/autocomplete.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/autocomplete/autocomplete.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-badge/[docsTab]/index.js b/docs/pages/base-ui/react-badge/[docsTab]/index.js index 188233bdcb5e14..df9fd7343aa9b5 100644 --- a/docs/pages/base-ui/react-badge/[docsTab]/index.js +++ b/docs/pages/base-ui/react-badge/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/badge/badge.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/badge/badge.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import BadgeApiJsonPageContent from '../../api/badge.json'; import useBadgeApiJsonPageContent from '../../api/use-badge.json'; diff --git a/docs/pages/base-ui/react-badge/index.js b/docs/pages/base-ui/react-badge/index.js index 86e8818d3f63cd..f070a8d7d4a7a8 100644 --- a/docs/pages/base-ui/react-badge/index.js +++ b/docs/pages/base-ui/react-badge/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/badge/badge.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/badge/badge.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-button/[docsTab]/index.js b/docs/pages/base-ui/react-button/[docsTab]/index.js index 9c7643f592dbd5..5cbf74aa5b341b 100644 --- a/docs/pages/base-ui/react-button/[docsTab]/index.js +++ b/docs/pages/base-ui/react-button/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/button/button.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/button/button.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import ButtonApiJsonPageContent from '../../api/button.json'; import useButtonApiJsonPageContent from '../../api/use-button.json'; diff --git a/docs/pages/base-ui/react-button/index.js b/docs/pages/base-ui/react-button/index.js index f2c13c1dcdd1a8..7560897ad96c06 100644 --- a/docs/pages/base-ui/react-button/index.js +++ b/docs/pages/base-ui/react-button/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/button/button.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/button/button.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-checkbox/index.js b/docs/pages/base-ui/react-checkbox/index.js index a1743d1ff0d64d..d6a46c6d45793c 100644 --- a/docs/pages/base-ui/react-checkbox/index.js +++ b/docs/pages/base-ui/react-checkbox/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/checkbox/checkbox.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/checkbox/checkbox.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-click-away-listener/[docsTab]/index.js b/docs/pages/base-ui/react-click-away-listener/[docsTab]/index.js index d46d140e106527..88af6003c2b282 100644 --- a/docs/pages/base-ui/react-click-away-listener/[docsTab]/index.js +++ b/docs/pages/base-ui/react-click-away-listener/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/click-away-listener/click-away-listener.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/click-away-listener/click-away-listener.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import ClickAwayListenerApiJsonPageContent from '../../api/click-away-listener.json'; diff --git a/docs/pages/base-ui/react-click-away-listener/index.js b/docs/pages/base-ui/react-click-away-listener/index.js index 6162e98c7289ef..8d12adea2775a4 100644 --- a/docs/pages/base-ui/react-click-away-listener/index.js +++ b/docs/pages/base-ui/react-click-away-listener/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/click-away-listener/click-away-listener.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/click-away-listener/click-away-listener.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-drawer/index.js b/docs/pages/base-ui/react-drawer/index.js index 6fb9242afc0d76..4cc332594d6d2c 100644 --- a/docs/pages/base-ui/react-drawer/index.js +++ b/docs/pages/base-ui/react-drawer/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/drawer/drawer.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/drawer/drawer.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-focus-trap/[docsTab]/index.js b/docs/pages/base-ui/react-focus-trap/[docsTab]/index.js index 03927e42da7038..2d0060ce723be8 100644 --- a/docs/pages/base-ui/react-focus-trap/[docsTab]/index.js +++ b/docs/pages/base-ui/react-focus-trap/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/focus-trap/focus-trap.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/focus-trap/focus-trap.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import FocusTrapApiJsonPageContent from '../../api/focus-trap.json'; diff --git a/docs/pages/base-ui/react-focus-trap/index.js b/docs/pages/base-ui/react-focus-trap/index.js index 3ba028dd0d3c95..1181c1aa97d16f 100644 --- a/docs/pages/base-ui/react-focus-trap/index.js +++ b/docs/pages/base-ui/react-focus-trap/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/focus-trap/focus-trap.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/focus-trap/focus-trap.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-form-control/[docsTab]/index.js b/docs/pages/base-ui/react-form-control/[docsTab]/index.js index 8dd14863c6129f..f48d57b151b636 100644 --- a/docs/pages/base-ui/react-form-control/[docsTab]/index.js +++ b/docs/pages/base-ui/react-form-control/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/form-control/form-control.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/form-control/form-control.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import FormControlApiJsonPageContent from '../../api/form-control.json'; import useFormControlContextApiJsonPageContent from '../../api/use-form-control-context.json'; diff --git a/docs/pages/base-ui/react-form-control/index.js b/docs/pages/base-ui/react-form-control/index.js index 399bf6b0e75211..0a228949f2cd17 100644 --- a/docs/pages/base-ui/react-form-control/index.js +++ b/docs/pages/base-ui/react-form-control/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/form-control/form-control.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/form-control/form-control.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-input/[docsTab]/index.js b/docs/pages/base-ui/react-input/[docsTab]/index.js index 2e3080620db1ee..58c194b16044a6 100644 --- a/docs/pages/base-ui/react-input/[docsTab]/index.js +++ b/docs/pages/base-ui/react-input/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/input/input.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/input/input.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import InputApiJsonPageContent from '../../api/input.json'; import useInputApiJsonPageContent from '../../api/use-input.json'; diff --git a/docs/pages/base-ui/react-input/index.js b/docs/pages/base-ui/react-input/index.js index dac996ce0bc1b4..b854b1989512d2 100644 --- a/docs/pages/base-ui/react-input/index.js +++ b/docs/pages/base-ui/react-input/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/input/input.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/input/input.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-menu/[docsTab]/index.js b/docs/pages/base-ui/react-menu/[docsTab]/index.js index 113726f945b35e..8acbf119aa346d 100644 --- a/docs/pages/base-ui/react-menu/[docsTab]/index.js +++ b/docs/pages/base-ui/react-menu/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/menu/menu.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/menu/menu.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import DropdownApiJsonPageContent from '../../api/dropdown.json'; import MenuApiJsonPageContent from '../../api/menu.json'; diff --git a/docs/pages/base-ui/react-menu/index.js b/docs/pages/base-ui/react-menu/index.js index 812223cec6e5f2..965a415cf25182 100644 --- a/docs/pages/base-ui/react-menu/index.js +++ b/docs/pages/base-ui/react-menu/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/menu/menu.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/menu/menu.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-modal/[docsTab]/index.js b/docs/pages/base-ui/react-modal/[docsTab]/index.js index ca7f56b6b4c6c4..c85815b52de2b5 100644 --- a/docs/pages/base-ui/react-modal/[docsTab]/index.js +++ b/docs/pages/base-ui/react-modal/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/modal/modal.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/modal/modal.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import ModalApiJsonPageContent from '../../api/modal.json'; import useModalApiJsonPageContent from '../../api/use-modal.json'; diff --git a/docs/pages/base-ui/react-modal/index.js b/docs/pages/base-ui/react-modal/index.js index 96cc897997dcdb..646520b7a50fff 100644 --- a/docs/pages/base-ui/react-modal/index.js +++ b/docs/pages/base-ui/react-modal/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/modal/modal.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/modal/modal.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-no-ssr/[docsTab]/index.js b/docs/pages/base-ui/react-no-ssr/[docsTab]/index.js index a629d120ee401b..ec5d0195d03752 100644 --- a/docs/pages/base-ui/react-no-ssr/[docsTab]/index.js +++ b/docs/pages/base-ui/react-no-ssr/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/no-ssr/no-ssr.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/no-ssr/no-ssr.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import NoSsrApiJsonPageContent from '../../api/no-ssr.json'; diff --git a/docs/pages/base-ui/react-no-ssr/index.js b/docs/pages/base-ui/react-no-ssr/index.js index 2302a384230566..69dfc8432a4d4b 100644 --- a/docs/pages/base-ui/react-no-ssr/index.js +++ b/docs/pages/base-ui/react-no-ssr/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/no-ssr/no-ssr.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/no-ssr/no-ssr.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-number-input/[docsTab]/index.js b/docs/pages/base-ui/react-number-input/[docsTab]/index.js index 389fe3c553f5fb..97e7a38d94d7a5 100644 --- a/docs/pages/base-ui/react-number-input/[docsTab]/index.js +++ b/docs/pages/base-ui/react-number-input/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/number-input/number-input.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/number-input/number-input.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import NumberInputApiJsonPageContent from '../../api/number-input.json'; import useNumberInputApiJsonPageContent from '../../api/use-number-input.json'; diff --git a/docs/pages/base-ui/react-number-input/index.js b/docs/pages/base-ui/react-number-input/index.js index 124fb94411844c..3956d8ffcc5a94 100644 --- a/docs/pages/base-ui/react-number-input/index.js +++ b/docs/pages/base-ui/react-number-input/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/number-input/number-input.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/number-input/number-input.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-pagination/index.js b/docs/pages/base-ui/react-pagination/index.js index 6802aa65bdba1c..a11ac346a60676 100644 --- a/docs/pages/base-ui/react-pagination/index.js +++ b/docs/pages/base-ui/react-pagination/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/pagination/pagination.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/pagination/pagination.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-popper/[docsTab]/index.js b/docs/pages/base-ui/react-popper/[docsTab]/index.js index 6148a95ea187ee..2e3c0be4d8a848 100644 --- a/docs/pages/base-ui/react-popper/[docsTab]/index.js +++ b/docs/pages/base-ui/react-popper/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/popper/popper.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/popper/popper.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import PopperApiJsonPageContent from '../../api/popper.json'; diff --git a/docs/pages/base-ui/react-popper/index.js b/docs/pages/base-ui/react-popper/index.js index 8a8319d9ecc240..7e95fbe91b5d70 100644 --- a/docs/pages/base-ui/react-popper/index.js +++ b/docs/pages/base-ui/react-popper/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/popper/popper.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/popper/popper.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-popup/[docsTab]/index.js b/docs/pages/base-ui/react-popup/[docsTab]/index.js index ca1a4dd034f095..c3d91d7429cf8f 100644 --- a/docs/pages/base-ui/react-popup/[docsTab]/index.js +++ b/docs/pages/base-ui/react-popup/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/popup/popup.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/popup/popup.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import PopupApiJsonPageContent from '../../api/popup.json'; diff --git a/docs/pages/base-ui/react-popup/index.js b/docs/pages/base-ui/react-popup/index.js index 28af2fb75d4437..f55b122641b0a9 100644 --- a/docs/pages/base-ui/react-popup/index.js +++ b/docs/pages/base-ui/react-popup/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/popup/popup.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/popup/popup.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-portal/[docsTab]/index.js b/docs/pages/base-ui/react-portal/[docsTab]/index.js index aa838d01a0c8ae..d63609efe83c00 100644 --- a/docs/pages/base-ui/react-portal/[docsTab]/index.js +++ b/docs/pages/base-ui/react-portal/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/portal/portal.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/portal/portal.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import PortalApiJsonPageContent from '../../api/portal.json'; diff --git a/docs/pages/base-ui/react-portal/index.js b/docs/pages/base-ui/react-portal/index.js index c8e566aa79b891..92d17f5ba595a4 100644 --- a/docs/pages/base-ui/react-portal/index.js +++ b/docs/pages/base-ui/react-portal/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/portal/portal.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/portal/portal.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-radio-group/index.js b/docs/pages/base-ui/react-radio-group/index.js index 79f977b2ab7f4f..fb0cece6ec17ac 100644 --- a/docs/pages/base-ui/react-radio-group/index.js +++ b/docs/pages/base-ui/react-radio-group/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/radio-group/radio-group.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/radio-group/radio-group.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-rating/index.js b/docs/pages/base-ui/react-rating/index.js index fe97e0880eeb74..79060a31ff4199 100644 --- a/docs/pages/base-ui/react-rating/index.js +++ b/docs/pages/base-ui/react-rating/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/rating/rating.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/rating/rating.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-select/[docsTab]/index.js b/docs/pages/base-ui/react-select/[docsTab]/index.js index 6d76c73f1b194d..c5ed80442efb96 100644 --- a/docs/pages/base-ui/react-select/[docsTab]/index.js +++ b/docs/pages/base-ui/react-select/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/select/select.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/select/select.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import OptionApiJsonPageContent from '../../api/option.json'; import OptionGroupApiJsonPageContent from '../../api/option-group.json'; diff --git a/docs/pages/base-ui/react-select/index.js b/docs/pages/base-ui/react-select/index.js index 4dfc1a86b53cbc..84cbbea62d3af3 100644 --- a/docs/pages/base-ui/react-select/index.js +++ b/docs/pages/base-ui/react-select/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/select/select.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/select/select.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-slider/[docsTab]/index.js b/docs/pages/base-ui/react-slider/[docsTab]/index.js index 0eec7cf1c76f36..dc0b6028f3dae0 100644 --- a/docs/pages/base-ui/react-slider/[docsTab]/index.js +++ b/docs/pages/base-ui/react-slider/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/slider/slider.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/slider/slider.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import SliderApiJsonPageContent from '../../api/slider.json'; import useSliderApiJsonPageContent from '../../api/use-slider.json'; diff --git a/docs/pages/base-ui/react-slider/index.js b/docs/pages/base-ui/react-slider/index.js index 317fe79096011a..9a6b5613580a07 100644 --- a/docs/pages/base-ui/react-slider/index.js +++ b/docs/pages/base-ui/react-slider/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/slider/slider.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/slider/slider.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-snackbar/[docsTab]/index.js b/docs/pages/base-ui/react-snackbar/[docsTab]/index.js index c776c5e051136e..736bc1e0f05b57 100644 --- a/docs/pages/base-ui/react-snackbar/[docsTab]/index.js +++ b/docs/pages/base-ui/react-snackbar/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/snackbar/snackbar.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/snackbar/snackbar.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import SnackbarApiJsonPageContent from '../../api/snackbar.json'; import useSnackbarApiJsonPageContent from '../../api/use-snackbar.json'; diff --git a/docs/pages/base-ui/react-snackbar/index.js b/docs/pages/base-ui/react-snackbar/index.js index f5273de09bf459..f943880033e3d5 100644 --- a/docs/pages/base-ui/react-snackbar/index.js +++ b/docs/pages/base-ui/react-snackbar/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/snackbar/snackbar.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/snackbar/snackbar.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-switch/[docsTab]/index.js b/docs/pages/base-ui/react-switch/[docsTab]/index.js index 8756fb8249b3d4..d420993cb30449 100644 --- a/docs/pages/base-ui/react-switch/[docsTab]/index.js +++ b/docs/pages/base-ui/react-switch/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/switch/switch.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/switch/switch.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import SwitchApiJsonPageContent from '../../api/switch.json'; import useSwitchApiJsonPageContent from '../../api/use-switch.json'; diff --git a/docs/pages/base-ui/react-switch/index.js b/docs/pages/base-ui/react-switch/index.js index 5d2ec1bbeabe68..0c1441bca1c6c7 100644 --- a/docs/pages/base-ui/react-switch/index.js +++ b/docs/pages/base-ui/react-switch/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/switch/switch.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/switch/switch.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-table-pagination/[docsTab]/index.js b/docs/pages/base-ui/react-table-pagination/[docsTab]/index.js index 00032832e78fa6..4598c06a89ccad 100644 --- a/docs/pages/base-ui/react-table-pagination/[docsTab]/index.js +++ b/docs/pages/base-ui/react-table-pagination/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/table-pagination/table-pagination.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/table-pagination/table-pagination.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import TablePaginationApiJsonPageContent from '../../api/table-pagination.json'; diff --git a/docs/pages/base-ui/react-table-pagination/index.js b/docs/pages/base-ui/react-table-pagination/index.js index 228317b3fb96f4..550c368f88dfae 100644 --- a/docs/pages/base-ui/react-table-pagination/index.js +++ b/docs/pages/base-ui/react-table-pagination/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/table-pagination/table-pagination.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/table-pagination/table-pagination.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-tabs/[docsTab]/index.js b/docs/pages/base-ui/react-tabs/[docsTab]/index.js index 6f7020450b338f..6d6713e668c05b 100644 --- a/docs/pages/base-ui/react-tabs/[docsTab]/index.js +++ b/docs/pages/base-ui/react-tabs/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/tabs/tabs.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/tabs/tabs.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import TabApiJsonPageContent from '../../api/tab.json'; import TabPanelApiJsonPageContent from '../../api/tab-panel.json'; diff --git a/docs/pages/base-ui/react-tabs/index.js b/docs/pages/base-ui/react-tabs/index.js index 4ba36d6200aa94..09f551b94827ec 100644 --- a/docs/pages/base-ui/react-tabs/index.js +++ b/docs/pages/base-ui/react-tabs/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/tabs/tabs.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/tabs/tabs.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-textarea-autosize/[docsTab]/index.js b/docs/pages/base-ui/react-textarea-autosize/[docsTab]/index.js index 1bfce7a176e5b6..97ca211815fee6 100644 --- a/docs/pages/base-ui/react-textarea-autosize/[docsTab]/index.js +++ b/docs/pages/base-ui/react-textarea-autosize/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/textarea-autosize/textarea-autosize.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/textarea-autosize/textarea-autosize.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import TextareaAutosizeApiJsonPageContent from '../../api/textarea-autosize.json'; diff --git a/docs/pages/base-ui/react-textarea-autosize/index.js b/docs/pages/base-ui/react-textarea-autosize/index.js index 27cc912d0c6290..92ae1710f5649a 100644 --- a/docs/pages/base-ui/react-textarea-autosize/index.js +++ b/docs/pages/base-ui/react-textarea-autosize/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/textarea-autosize/textarea-autosize.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/textarea-autosize/textarea-autosize.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-toggle-button-group/index.js b/docs/pages/base-ui/react-toggle-button-group/index.js index 76f96fe04395aa..80735eb90bf9d3 100644 --- a/docs/pages/base-ui/react-toggle-button-group/index.js +++ b/docs/pages/base-ui/react-toggle-button-group/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/toggle-button-group/toggle-button-group.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/toggle-button-group/toggle-button-group.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-tooltip/index.js b/docs/pages/base-ui/react-tooltip/index.js index 16217c806fdbde..7cba12f175194b 100644 --- a/docs/pages/base-ui/react-tooltip/index.js +++ b/docs/pages/base-ui/react-tooltip/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/tooltip/tooltip.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/tooltip/tooltip.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/base-ui/react-transitions/[docsTab]/index.js b/docs/pages/base-ui/react-transitions/[docsTab]/index.js index e4221081c824d6..e3b33ceafd3ef9 100644 --- a/docs/pages/base-ui/react-transitions/[docsTab]/index.js +++ b/docs/pages/base-ui/react-transitions/[docsTab]/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/transitions/transitions.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/transitions/transitions.md?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; import CssAnimationApiJsonPageContent from '../../api/css-animation.json'; import CssTransitionApiJsonPageContent from '../../api/css-transition.json'; diff --git a/docs/pages/base-ui/react-transitions/index.js b/docs/pages/base-ui/react-transitions/index.js index e54e35fedb79c8..5d10b66d6e70a5 100644 --- a/docs/pages/base-ui/react-transitions/index.js +++ b/docs/pages/base-ui/react-transitions/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/base/components/transitions/transitions.md?@mui/markdown'; +import * as pageProps from 'docs/data/base/components/transitions/transitions.md?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 43cb1ccd3ca02d..9c60ca4e74421c 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -28,6 +28,7 @@ import HeroEnd from 'docs/src/components/home/HeroEnd'; import { Link } from '@mui/docs/Link'; import generateRssFeed from 'docs/scripts/generateRSSFeed'; import Section from 'docs/src/layouts/Section'; +import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; import { getAllBlogPosts, BlogPost } from 'docs/lib/sourcing'; export const getStaticProps = () => { @@ -41,7 +42,7 @@ export const getStaticProps = () => { function PostPreview(props: BlogPost) { return ( - + {props.tags.map((tag) => ( ({ + height: 22, fontWeight: 'medium', - fontSize: theme.typography.pxToRem(12), + fontSize: theme.typography.pxToRem(13), + '& .MuiChip-label': { + px: '6px', + }, ...theme.applyDarkStyles({ color: (theme.vars || theme).palette.grey[200], }), @@ -254,91 +259,71 @@ export default function Blog(props: InferGetStaticPropsType
    - ({ - background: `linear-gradient(180deg, #FFF 50%, - ${(theme.vars || theme).palette.primary[50]} 100%) - `, - ...theme.applyDarkStyles({ - background: `linear-gradient(180deg, ${ - (theme.vars || theme).palette.primaryDark[900] - } 50%, - ${alpha(theme.palette.primary[800], 0.2)} 100%) - `, - }), - })} - > -
    - - Blog - - - The latest about MUI - - - {[firstPost, secondPost].map((post) => ( - + + Stay in the loop with +
    the latest about MUI's products + + } + /> + + {[firstPost, secondPost].map((post) => ( + - theme.applyDarkStyles({ - boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.4)', - }), - ]} - > - {post.image && ( - - )} - - - ))} - -
    -
    + }, + (theme) => + theme.applyDarkStyles({ + boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.4)', + }), + ]} + > + {post.image && ( + + )} + + + ))} + +
    @@ -430,12 +415,12 @@ export default function Blog(props: InferGetStaticPropsType - - + + Want to hear more from us? - Stay on the loop about everything MUI-related through our social media: + Get up to date with everything MUI-related through our social media: svg': { mr: 1 } }}> diff --git a/docs/pages/blog/2019-developer-survey-results.js b/docs/pages/blog/2019-developer-survey-results.js index 88dd0965500096..fe5d623ad6bd09 100644 --- a/docs/pages/blog/2019-developer-survey-results.js +++ b/docs/pages/blog/2019-developer-survey-results.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2019-developer-survey-results.md?@mui/markdown'; +import { docs } from './2019-developer-survey-results.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/2019.js b/docs/pages/blog/2019.js index ddd78b798bc2ea..58c78f54c1b2b3 100644 --- a/docs/pages/blog/2019.js +++ b/docs/pages/blog/2019.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2019.md?@mui/markdown'; +import { docs } from './2019.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/2020-developer-survey-results.js b/docs/pages/blog/2020-developer-survey-results.js index 61dbe4b6c18f9f..89972c75572f87 100644 --- a/docs/pages/blog/2020-developer-survey-results.js +++ b/docs/pages/blog/2020-developer-survey-results.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2020-developer-survey-results.md?@mui/markdown'; +import { docs } from './2020-developer-survey-results.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/2020-introducing-sketch.js b/docs/pages/blog/2020-introducing-sketch.js index 0980c84524e3c9..58871495a8eebb 100644 --- a/docs/pages/blog/2020-introducing-sketch.js +++ b/docs/pages/blog/2020-introducing-sketch.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2020-introducing-sketch.md?@mui/markdown'; +import { docs } from './2020-introducing-sketch.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/2020-introducing-sketch.md b/docs/pages/blog/2020-introducing-sketch.md index 943274d5c8b8e9..731b1ee9549a67 100644 --- a/docs/pages/blog/2020-introducing-sketch.md +++ b/docs/pages/blog/2020-introducing-sketch.md @@ -3,7 +3,7 @@ title: Introducing Material UI for Sketch description: Today, we're excited to announce the introduction of official Sketch symbols for Material UI. date: 2020-03-30T00:00:00.000Z authors: ['oliviertassinari'] -tags: ['News'] +tags: ['Material UI', 'Product'] card: true --- @@ -23,7 +23,7 @@ This new product brings you one step closer to this long term goal. It enables d ### Frequent requests Over the last few months, we have seen a growing number of designers asking for these Sketch symbols. -For instance, there is a [Stack Overflow question](https://stackoverflow.com/questions/38834629/material-ui-sketch-files) with over 4,000 views. It has been a common request on X: [one](https://twitter.com/TimoMajerski/status/1144503789619224578), [two](https://twitter.com/jonminori/status/1141121330156310528), [three](https://twitter.com/ProfessorXavior/status/1196522875706056705), [etc](https://twitter.com/JeffreyKaine/status/1133435042259120132). +For instance, there is a [Stack Overflow question](https://stackoverflow.com/questions/38834629/material-ui-sketch-files) with over 4,000 views. It has been a common request on X: [one](https://twitter.com/TimoMajerski/status/1144503789619224578), [two](https://twitter.com/jonminori/status/1141121330156310528), [three](https://twitter.com/ProfessorXavior/status/1196522875706056705), [etc](https://twitter.com/JeffreyKaine/status/1133435042259120132). ### No great alternatives diff --git a/docs/pages/blog/2020-q1-update.js b/docs/pages/blog/2020-q1-update.js index ea5bc3b3327823..c6407621e44167 100644 --- a/docs/pages/blog/2020-q1-update.js +++ b/docs/pages/blog/2020-q1-update.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2020-q1-update.md?@mui/markdown'; +import { docs } from './2020-q1-update.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/2020-q2-update.js b/docs/pages/blog/2020-q2-update.js index a80a723f738af9..2b9fe04380eed4 100644 --- a/docs/pages/blog/2020-q2-update.js +++ b/docs/pages/blog/2020-q2-update.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2020-q2-update.md?@mui/markdown'; +import { docs } from './2020-q2-update.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/2020-q3-update.js b/docs/pages/blog/2020-q3-update.js index 7ef626f91188e4..82012ab3d8ff1e 100644 --- a/docs/pages/blog/2020-q3-update.js +++ b/docs/pages/blog/2020-q3-update.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2020-q3-update.md?@mui/markdown'; +import { docs } from './2020-q3-update.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/2020.js b/docs/pages/blog/2020.js index d44b4904e98c31..efdb2d101ef289 100644 --- a/docs/pages/blog/2020.js +++ b/docs/pages/blog/2020.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2020.md?@mui/markdown'; +import { docs } from './2020.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/2021-developer-survey-results.js b/docs/pages/blog/2021-developer-survey-results.js index 85d9faf93cc0b2..6f87b24b67acfe 100644 --- a/docs/pages/blog/2021-developer-survey-results.js +++ b/docs/pages/blog/2021-developer-survey-results.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2021-developer-survey-results.md?@mui/markdown'; +import { docs } from './2021-developer-survey-results.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/2021-developer-survey-results.md b/docs/pages/blog/2021-developer-survey-results.md index 99ee1c1eb3fa6c..d7c6bf180b33ba 100644 --- a/docs/pages/blog/2021-developer-survey-results.md +++ b/docs/pages/blog/2021-developer-survey-results.md @@ -151,7 +151,7 @@ And what has decreased: ### Please rate how much you agree or disagree with the following statements -I can find most of the components I need (Strongly agree: 45.5%, Agree: 45.9%, Neutral: 6.2%, Disagree: 1.5%, Strongly Disagree 0.8%); I can easily customize the components to match the desired design (Strongly agree: 23.4%, Agree: 46.1%, Neutral: 18.6%, Disagree: 9%, Strongly Disagree 2.9%); I can find the answers to most of my questions in the documentation (Strongly agree: 24.1%, Agree: 50.1%, Neutral: 16.3%, Disagree: 7.6%, Strongly Disagree 1.9%); I find the library's performance to be great (Strongly agree: 26.4%, Agree: 44.3%, Neutral: 22.6%, Disagree: 4.7%, Strongly Disagree 2%); Whenever I needed to get help, I received helpful responses, Stack Overflow or GitHub (Strongly agree: 20.9%, Agree: 36.7%, Neutral: 36%, Disagree: 4.6%, Strongly Disagree 1.8%) +I can find most of the components I need (Strongly agree: 45.5%, Agree: 45.9%, Neutral: 6.2%, Disagree: 1.5%, Strongly Disagree 0.8%); I can easily customize the components to match the desired design (Strongly agree: 23.4%, Agree: 46.1%, Neutral: 18.6%, Disagree: 9%, Strongly Disagree 2.9%); I can find the answers to most of my questions in the documentation (Strongly agree: 24.1%, Agree: 50.1%, Neutral: 16.3%, Disagree: 7.6%, Strongly Disagree 1.9%); I find the library's performance to be great (Strongly agree: 26.4%, Agree: 44.3%, Neutral: 22.6%, Disagree: 4.7%, Strongly Disagree 2%); Whenever I needed to get help, I received helpful responses, Stack Overflow or GitHub (Strongly agree: 20.9%, Agree: 36.7%, Neutral: 36%, Disagree: 4.6%, Strongly Disagree 1.8%)

    1534 out of 1589 answered.

    diff --git a/docs/pages/blog/2021-q1-update.js b/docs/pages/blog/2021-q1-update.js index 6ed19c06da619c..fd97f7e345842b 100644 --- a/docs/pages/blog/2021-q1-update.js +++ b/docs/pages/blog/2021-q1-update.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2021-q1-update.md?@mui/markdown'; +import { docs } from './2021-q1-update.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/2021-q1-update.md b/docs/pages/blog/2021-q1-update.md index 9e3a5458d2ab30..299b77649072b3 100644 --- a/docs/pages/blog/2021-q1-update.md +++ b/docs/pages/blog/2021-q1-update.md @@ -176,7 +176,7 @@ This Handbook is the single **source of truth**. It's meant to be updated by any - 📦 From 6.4M to 8.6M downloads per month on npm.
    It seems that React keeps taking market share in the frontend ecosystem; it's growing faster than Vue or Angular. - Most indicators point to it: [Stack Overflow questions](https://insights.stackoverflow.com/trends?tags=vue.js%2Creactjs%2Cangular), [stars](https://bestofjs.org/projects?sort=monthly), [downloads](https://npm-stat.com/charts.html?package=react-dom,@angular/core,vue), [Traffic on the documentation](https://www.similarweb.com/website/reactjs.org/?competitors=vuejs.org). + Most indicators point to it: [Stack Overflow questions](https://insights.stackoverflow.com/trends?tags=vue.js%2Creactjs%2Cangular), [stars](https://bestofjs.org/projects?sort=monthly), [downloads](https://npm-stat.com/charts.html?package=react-dom,@angular/core,vue), [Traffic on the documentation](https://www.similarweb.com/website/reactjs.org/?competitors=vuejs.org). Our strategy to focus on React only seems to be paying off. - ⭐️ From 63.8k to 67.2k stars, leave us yours [🌟](https://github.com/mui/material-ui). diff --git a/docs/pages/blog/2021-q2-update.js b/docs/pages/blog/2021-q2-update.js index 5afab0a64d20c5..7c5e2751324c90 100644 --- a/docs/pages/blog/2021-q2-update.js +++ b/docs/pages/blog/2021-q2-update.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2021-q2-update.md?@mui/markdown'; +import { docs } from './2021-q2-update.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/2021-q3-update.js b/docs/pages/blog/2021-q3-update.js index bda0af306eb624..b54079b7438b71 100644 --- a/docs/pages/blog/2021-q3-update.js +++ b/docs/pages/blog/2021-q3-update.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2021-q3-update.md?@mui/markdown'; +import { docs } from './2021-q3-update.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/2021.js b/docs/pages/blog/2021.js index 34fc37df30f5dc..35caa8a6fe512b 100644 --- a/docs/pages/blog/2021.js +++ b/docs/pages/blog/2021.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2021.md?@mui/markdown'; +import { docs } from './2021.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/2022-tenerife-retreat.js b/docs/pages/blog/2022-tenerife-retreat.js index 7e62d9f4a56c1c..225fc8d1a13a3b 100644 --- a/docs/pages/blog/2022-tenerife-retreat.js +++ b/docs/pages/blog/2022-tenerife-retreat.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2022-tenerife-retreat.md?@mui/markdown'; +import { docs } from './2022-tenerife-retreat.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/2023-chamonix-retreat.js b/docs/pages/blog/2023-chamonix-retreat.js index 3df94dcef3360e..0b5bcb5b121ffd 100644 --- a/docs/pages/blog/2023-chamonix-retreat.js +++ b/docs/pages/blog/2023-chamonix-retreat.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2023-chamonix-retreat.md?@mui/markdown'; +import { docs } from './2023-chamonix-retreat.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/2023-material-ui-v6-and-beyond.js b/docs/pages/blog/2023-material-ui-v6-and-beyond.js index 0aedcf6775cd75..aa35778d73eba0 100644 --- a/docs/pages/blog/2023-material-ui-v6-and-beyond.js +++ b/docs/pages/blog/2023-material-ui-v6-and-beyond.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2023-material-ui-v6-and-beyond.md?@mui/markdown'; +import { docs } from './2023-material-ui-v6-and-beyond.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/2023-material-ui-v6-and-beyond.md b/docs/pages/blog/2023-material-ui-v6-and-beyond.md index 4b2c5ef484c2b1..f4af0f6cc4dff4 100644 --- a/docs/pages/blog/2023-material-ui-v6-and-beyond.md +++ b/docs/pages/blog/2023-material-ui-v6-and-beyond.md @@ -4,7 +4,7 @@ description: We're tightening up the Material UI release schedule and shipping date: 2023-12-23T00:00:00.000Z authors: ['mnajdova'] card: true -tags: ['MUI Core', 'News'] +tags: ['Material UI', 'Product'] --- As we approach the end of 2023, we've had our heads down working on some very exciting projects for the future of Material UI in the next year. diff --git a/docs/pages/blog/2023-mui-values.js b/docs/pages/blog/2023-mui-values.js index f3ac9c68dd4704..02817124960530 100644 --- a/docs/pages/blog/2023-mui-values.js +++ b/docs/pages/blog/2023-mui-values.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2023-mui-values.md?@mui/markdown'; +import { docs } from './2023-mui-values.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/2023-phuket-retreat.js b/docs/pages/blog/2023-phuket-retreat.js index c99f660d27e825..8e88918fd41ec6 100644 --- a/docs/pages/blog/2023-phuket-retreat.js +++ b/docs/pages/blog/2023-phuket-retreat.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2023-phuket-retreat.md?@mui/markdown'; +import { docs } from './2023-phuket-retreat.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/2023-toolpad-beta-announcement.js b/docs/pages/blog/2023-toolpad-beta-announcement.js index fd6293009b9733..7d899c220088a4 100644 --- a/docs/pages/blog/2023-toolpad-beta-announcement.js +++ b/docs/pages/blog/2023-toolpad-beta-announcement.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2023-toolpad-beta-announcement.md?@mui/markdown'; +import { docs } from './2023-toolpad-beta-announcement.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/2023-toolpad-beta-announcement.md b/docs/pages/blog/2023-toolpad-beta-announcement.md index d515838d9c2103..cb0522038237f4 100644 --- a/docs/pages/blog/2023-toolpad-beta-announcement.md +++ b/docs/pages/blog/2023-toolpad-beta-announcement.md @@ -4,7 +4,7 @@ description: Assemble admin panels and internal tools faster than ever before wi date: 2023-07-24T00:00:00.000Z authors: ['prakhargupta'] card: true -tags: ['Product', 'News'] +tags: ['Product'] --- It's been over a year since we released the first version of Toolpad. Today, we're excited to take the next step on that journey with the release of Toolpad Beta. If you aren't familiar with Toolpad yet, it's an admin panel builder catering to the internal tooling needs of an organization, designed for developers who want to build a functional application quickly. It harnesses the speed of a UI builder for the front-end and closely integrates into your back-end. If this excites you, then read on! diff --git a/docs/pages/blog/aggregation-functions.js b/docs/pages/blog/aggregation-functions.js index 886992bcf5794c..19a980a76d5158 100644 --- a/docs/pages/blog/aggregation-functions.js +++ b/docs/pages/blog/aggregation-functions.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './aggregation-functions.md?@mui/markdown'; +import { docs } from './aggregation-functions.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/aggregation-functions.md b/docs/pages/blog/aggregation-functions.md index 54d8bd1a552425..68ddfb0d169974 100644 --- a/docs/pages/blog/aggregation-functions.md +++ b/docs/pages/blog/aggregation-functions.md @@ -3,7 +3,7 @@ title: Aggregate data like in Excel, but easier! description: Aggregation functions and summary rows are now available in the MUI X Premium Data Grid. date: 2022-08-01T00:00:00.000Z authors: ['josefreitas', 'flaviendelangle', 'cherniavskii'] -tags: ['MUI X', 'News'] +tags: ['MUI X', 'Product'] card: true --- diff --git a/docs/pages/blog/april-2019-update.js b/docs/pages/blog/april-2019-update.js index 1b86516fcc54aa..6e8ae8aad46a19 100644 --- a/docs/pages/blog/april-2019-update.js +++ b/docs/pages/blog/april-2019-update.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './april-2019-update.md?@mui/markdown'; +import { docs } from './april-2019-update.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/august-2019-update.js b/docs/pages/blog/august-2019-update.js index 6d4dfb53bc182b..75fec6715a09f6 100644 --- a/docs/pages/blog/august-2019-update.js +++ b/docs/pages/blog/august-2019-update.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './august-2019-update.md?@mui/markdown'; +import { docs } from './august-2019-update.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/base-ui-2024-plans.js b/docs/pages/blog/base-ui-2024-plans.js index 8308c06b8f3ca3..14608375caddc6 100644 --- a/docs/pages/blog/base-ui-2024-plans.js +++ b/docs/pages/blog/base-ui-2024-plans.js @@ -1,7 +1,7 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import * as pageProps from './base-ui-2024-plans.md?@mui/markdown'; +import { docs } from './base-ui-2024-plans.md?muiMarkdown'; export default function Page() { - return ; + return ; } diff --git a/docs/pages/blog/benny-joo-joining.js b/docs/pages/blog/benny-joo-joining.js index 46fad4ac41562a..626624151c94c9 100644 --- a/docs/pages/blog/benny-joo-joining.js +++ b/docs/pages/blog/benny-joo-joining.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './benny-joo-joining.md?@mui/markdown'; +import { docs } from './benny-joo-joining.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/build-layouts-faster-with-grid-v2.js b/docs/pages/blog/build-layouts-faster-with-grid-v2.js index 7c328724ac0226..64caa18325bdeb 100644 --- a/docs/pages/blog/build-layouts-faster-with-grid-v2.js +++ b/docs/pages/blog/build-layouts-faster-with-grid-v2.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './build-layouts-faster-with-grid-v2.md?@mui/markdown'; +import { docs } from './build-layouts-faster-with-grid-v2.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/build-layouts-faster-with-grid-v2.md b/docs/pages/blog/build-layouts-faster-with-grid-v2.md index f0054aacf1180c..b40ad11e25f25f 100644 --- a/docs/pages/blog/build-layouts-faster-with-grid-v2.md +++ b/docs/pages/blog/build-layouts-faster-with-grid-v2.md @@ -3,7 +3,7 @@ title: Build layouts faster with the new Grid component description: The new Grid v2 features simplified logic, support for offsetting and nested grids, and more. date: 2022-08-20T00:00:00.000Z authors: ['siriwatknp'] -tags: ['MUI Core', 'News'] +tags: ['Material UI', 'Guide'] card: true --- diff --git a/docs/pages/blog/callback-support-in-style-overrides.js b/docs/pages/blog/callback-support-in-style-overrides.js index d4410a841d3bd7..2a9ef7273c5f21 100644 --- a/docs/pages/blog/callback-support-in-style-overrides.js +++ b/docs/pages/blog/callback-support-in-style-overrides.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './callback-support-in-style-overrides.md?@mui/markdown'; +import { docs } from './callback-support-in-style-overrides.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/callback-support-in-style-overrides.md b/docs/pages/blog/callback-support-in-style-overrides.md index 98517a55ce5e69..1af851aff3e328 100644 --- a/docs/pages/blog/callback-support-in-style-overrides.md +++ b/docs/pages/blog/callback-support-in-style-overrides.md @@ -3,7 +3,7 @@ title: Introducing callback support in style overrides description: We're excited to introduce callback support for global theme overrides in this minor version update! date: 2022-01-31T00:00:00.000Z authors: ['siriwatknp'] -tags: ['MUI Core', 'News'] +tags: ['Material UI', 'Product'] card: true --- diff --git a/docs/pages/blog/danail-hadjiatanasov-joining.js b/docs/pages/blog/danail-hadjiatanasov-joining.js index 44e90d7f2a7c86..d4cbeaa405a4bf 100644 --- a/docs/pages/blog/danail-hadjiatanasov-joining.js +++ b/docs/pages/blog/danail-hadjiatanasov-joining.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './danail-hadjiatanasov-joining.md?@mui/markdown'; +import { docs } from './danail-hadjiatanasov-joining.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/danilo-leal-joining.js b/docs/pages/blog/danilo-leal-joining.js index 8fefd0aed3b45e..54ae20ca78a2a4 100644 --- a/docs/pages/blog/danilo-leal-joining.js +++ b/docs/pages/blog/danilo-leal-joining.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './danilo-leal-joining.md?@mui/markdown'; +import { docs } from './danilo-leal-joining.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/date-pickers-stable-v5.js b/docs/pages/blog/date-pickers-stable-v5.js index 746baf511a3a4d..8affdff1600c59 100644 --- a/docs/pages/blog/date-pickers-stable-v5.js +++ b/docs/pages/blog/date-pickers-stable-v5.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './date-pickers-stable-v5.md?@mui/markdown'; +import { docs } from './date-pickers-stable-v5.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/date-pickers-stable-v5.md b/docs/pages/blog/date-pickers-stable-v5.md index 3babfd4056920c..306637c250c28c 100644 --- a/docs/pages/blog/date-pickers-stable-v5.md +++ b/docs/pages/blog/date-pickers-stable-v5.md @@ -3,7 +3,7 @@ title: The MUI X Date and Time Pickers get a stable v5 release description: Migrate to the latest version for improved DX, customizability, and API consistency. date: 2022-09-19T00:00:00.000Z authors: ['alexfauquette', 'josefreitas'] -tags: ['MUI X', 'News'] +tags: ['MUI X', 'Product'] card: true --- diff --git a/docs/pages/blog/december-2019-update.js b/docs/pages/blog/december-2019-update.js index eeabf8c1c29dba..44a488d9723052 100644 --- a/docs/pages/blog/december-2019-update.js +++ b/docs/pages/blog/december-2019-update.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './december-2019-update.md?@mui/markdown'; +import { docs } from './december-2019-update.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/discord-announcement.js b/docs/pages/blog/discord-announcement.js index ed8f5cf7669435..1fe7197fa91278 100644 --- a/docs/pages/blog/discord-announcement.js +++ b/docs/pages/blog/discord-announcement.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './discord-announcement.md?@mui/markdown'; +import { docs } from './discord-announcement.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/discord-announcement.md b/docs/pages/blog/discord-announcement.md index 018f60303e5748..4a58bb279a84c7 100644 --- a/docs/pages/blog/discord-announcement.md +++ b/docs/pages/blog/discord-announcement.md @@ -3,14 +3,14 @@ title: 'MUI is now on Discord!' description: Come join our community to engage in lively discussions, share your projects, and interact with the MUI team. date: 2023-08-02T00:00:00.000Z authors: ['richbustos'] -tags: ['News'] +tags: ['Company'] card: true --- Discord banner with link This year, one of our highest priorities has been to create a central hub for the MUI community. -Up until now, our community has been scattered across discussions and interactions on [X](https://twitter.com/MUI_hq), [LinkedIn](https://linkedin.com/company/mui), [GitHub](https://github.com/mui), and [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui). +Up until now, our community has been scattered across discussions and interactions on [X](https://twitter.com/MUI_hq), [LinkedIn](https://linkedin.com/company/mui), [GitHub](https://github.com/mui), and [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui). That's why we've officially launched our [Discord Server](https://mui.com/r/discord/)—and we'd love for you to be a part of our community! diff --git a/docs/pages/blog/docs-restructure-2022.js b/docs/pages/blog/docs-restructure-2022.js index 75b4dad5bb69db..33c0378c424688 100644 --- a/docs/pages/blog/docs-restructure-2022.js +++ b/docs/pages/blog/docs-restructure-2022.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './docs-restructure-2022.md?@mui/markdown'; +import { docs } from './docs-restructure-2022.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/docs-restructure-2022.md b/docs/pages/blog/docs-restructure-2022.md index f474381253b029..6fe7e34853094e 100644 --- a/docs/pages/blog/docs-restructure-2022.md +++ b/docs/pages/blog/docs-restructure-2022.md @@ -3,7 +3,7 @@ title: 'Our docs just got a major upgrade—here's what that means for you' description: Each of MUI's products now has its own dedicated documentation, making it easier than ever to find exactly what you need. date: 2022-04-06T00:00:00.000Z authors: ['danilo-leal'] -tags: ['News', 'Product'] +tags: ['Product'] card: true --- diff --git a/docs/pages/blog/first-look-at-joy.js b/docs/pages/blog/first-look-at-joy.js index b1553d8435498d..d3bc5d214612d7 100644 --- a/docs/pages/blog/first-look-at-joy.js +++ b/docs/pages/blog/first-look-at-joy.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './first-look-at-joy.md?@mui/markdown'; +import { docs } from './first-look-at-joy.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/first-look-at-joy.md b/docs/pages/blog/first-look-at-joy.md index 51c1d589da195f..9063380116df5a 100644 --- a/docs/pages/blog/first-look-at-joy.md +++ b/docs/pages/blog/first-look-at-joy.md @@ -3,7 +3,7 @@ title: First look at Joy UI 🥳 description: A sneak peek at MUI's new starting point for your design system. date: 2022-06-08T00:00:00.000Z authors: ['danilo-leal', 'siriwatknp'] -tags: ['News', 'MUI Core'] +tags: ['Joy UI', 'Product'] card: true --- diff --git a/docs/pages/blog/introducing-base-ui.js b/docs/pages/blog/introducing-base-ui.js index 005707bbb8846d..2bea4c618dea0b 100644 --- a/docs/pages/blog/introducing-base-ui.js +++ b/docs/pages/blog/introducing-base-ui.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './introducing-base-ui.md?@mui/markdown'; +import { docs } from './introducing-base-ui.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/introducing-the-row-grouping-feature.js b/docs/pages/blog/introducing-the-row-grouping-feature.js index 614562b92470a5..74301e65aef8e1 100644 --- a/docs/pages/blog/introducing-the-row-grouping-feature.js +++ b/docs/pages/blog/introducing-the-row-grouping-feature.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './introducing-the-row-grouping-feature.md?@mui/markdown'; +import { docs } from './introducing-the-row-grouping-feature.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/introducing-the-row-grouping-feature.md b/docs/pages/blog/introducing-the-row-grouping-feature.md index 007074f02fe547..817909ca6361e9 100644 --- a/docs/pages/blog/introducing-the-row-grouping-feature.md +++ b/docs/pages/blog/introducing-the-row-grouping-feature.md @@ -3,7 +3,7 @@ title: Give your users more freedom with Data Grid row grouping description: The new row grouping feature gives your users more customization options for organizing their data. date: 2022-01-20T00:00:00.000Z authors: ['alexfauquette'] -tags: ['MUI X', 'News'] +tags: ['MUI X', 'Product'] card: true --- diff --git a/docs/pages/blog/july-2019-update.js b/docs/pages/blog/july-2019-update.js index b56bd585f39884..cc01f9c65562d8 100644 --- a/docs/pages/blog/july-2019-update.js +++ b/docs/pages/blog/july-2019-update.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './july-2019-update.md?@mui/markdown'; +import { docs } from './july-2019-update.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/june-2019-update.js b/docs/pages/blog/june-2019-update.js index ee4b1e1cd76a12..890f7e8e08a6fb 100644 --- a/docs/pages/blog/june-2019-update.js +++ b/docs/pages/blog/june-2019-update.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './june-2019-update.md?@mui/markdown'; +import { docs } from './june-2019-update.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/lab-date-pickers-to-mui-x.js b/docs/pages/blog/lab-date-pickers-to-mui-x.js index 835f0e6084c499..f98f7805b66102 100644 --- a/docs/pages/blog/lab-date-pickers-to-mui-x.js +++ b/docs/pages/blog/lab-date-pickers-to-mui-x.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './lab-date-pickers-to-mui-x.md?@mui/markdown'; +import { docs } from './lab-date-pickers-to-mui-x.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/lab-date-pickers-to-mui-x.md b/docs/pages/blog/lab-date-pickers-to-mui-x.md index dee347748cea3d..9d7ddc8dfacb24 100644 --- a/docs/pages/blog/lab-date-pickers-to-mui-x.md +++ b/docs/pages/blog/lab-date-pickers-to-mui-x.md @@ -3,7 +3,7 @@ title: Date and Time Pickers are moving to MUI X description: Migrate to the new package to start building with our powerful Date and Time Pickers, now part of MUI X. Previously released MIT components will stay MIT. date: 2022-04-03T00:00:00.000Z authors: ['flaviendelangle'] -tags: ['MUI X', 'News'] +tags: ['MUI X', 'Product'] card: true --- diff --git a/docs/pages/blog/lab-tree-view-to-mui-x.js b/docs/pages/blog/lab-tree-view-to-mui-x.js index a2caf6fad2b240..e4117847ac23c3 100644 --- a/docs/pages/blog/lab-tree-view-to-mui-x.js +++ b/docs/pages/blog/lab-tree-view-to-mui-x.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './lab-tree-view-to-mui-x.md?@mui/markdown'; +import { docs } from './lab-tree-view-to-mui-x.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/lab-tree-view-to-mui-x.md b/docs/pages/blog/lab-tree-view-to-mui-x.md index 010768c3a6afaf..7a35a33f599044 100644 --- a/docs/pages/blog/lab-tree-view-to-mui-x.md +++ b/docs/pages/blog/lab-tree-view-to-mui-x.md @@ -3,7 +3,7 @@ title: The Tree View is moving to MUI X description: Migrate to the new package to start building with our powerful Tree View, now part of MUI X. Previously released MIT components will stay MIT. date: 2023-08-21T00:00:00.000Z authors: ['flaviendelangle'] -tags: ['MUI X', 'News'] +tags: ['MUI X', 'Product'] card: true --- diff --git a/docs/pages/blog/making-customizable-components.js b/docs/pages/blog/making-customizable-components.js index afb3a0ddaaf6ac..0f85c1055cf425 100644 --- a/docs/pages/blog/making-customizable-components.js +++ b/docs/pages/blog/making-customizable-components.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './making-customizable-components.md?@mui/markdown'; +import { docs } from './making-customizable-components.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/making-customizable-components.md b/docs/pages/blog/making-customizable-components.md index c29fb1e9ff92fa..da4c429a93a9d3 100644 --- a/docs/pages/blog/making-customizable-components.md +++ b/docs/pages/blog/making-customizable-components.md @@ -3,11 +3,11 @@ title: Strategies for building customizable components description: Explore the tradeoffs between different customization techniques, and how we landed on our strategy at MUI. date: 2022-08-22T00:00:00.000Z authors: ['alexfauquette'] -tags: ['MUI X', 'MUI Core'] +tags: ['MUI X', 'Material UI', 'Guide'] card: true --- -MUI's components are used by hundreds of thousands of developers worldwide, encompassing the full range of implementation from minor side projects to massive company websites. +Material UI's components are used by hundreds of thousands of developers worldwide, encompassing the full range of implementation from minor side projects to massive company websites. This variety of users presents a dilemma for us as maintainers: hobbyists working on side projects want fully built components that work right out of the box, so they can focus on the application logic; many larger companies, by contrast, want to be able to fully customize components to respect their brand design. @@ -64,7 +64,7 @@ you can play around with it in [CodeSandbox](https://codesandbox.io/p/sandbox/fa Maybe you don't want to spend your time switching between CSS and JavaScript files, or writing long, cluttered stylesheets. To avoid these problems you can integrate styles directly into your JS code. 🎉 -Because the level of customization varies across projects, MUI's components can be customized in several different ways. +Because the level of customization varies across projects, Material UI's components can be customized in several different ways. For more information on this topic, check out the [Material UI customization documentation](https://mui.com/material-ui/customization/how-to-customize/). ## Logic modification @@ -136,7 +136,7 @@ If your main priority is to get up and running quickly, then this may not be a v #### Subdivide your components Another approach I like is to provide subcomponents. -This is what we do for MUI Core components such as the [Menu](https://mui.com/material-ui/react-menu/). +This is what we do for Material UI components such as the [Menu](https://mui.com/material-ui/react-menu/). This is also the approach used by [react-admin](https://marmelab.com/react-admin/) to provide a customizable administration interface. Here is their quick start example: @@ -303,7 +303,7 @@ For example, a grid can exist without its filter panel, or without its toolbar. In our last two annual [Developer Surveys](/blog/2021-developer-survey-results/), our users made it clear that customization is always a top priority when choosing a UI library. -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. +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 Material UI's components to suit your specific needs. [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. diff --git a/docs/pages/blog/march-2019-update.js b/docs/pages/blog/march-2019-update.js index ff1debb02ddcca..febbc11c9f18bd 100644 --- a/docs/pages/blog/march-2019-update.js +++ b/docs/pages/blog/march-2019-update.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './march-2019-update.md?@mui/markdown'; +import { docs } from './march-2019-update.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/marija-najdova-joining.js b/docs/pages/blog/marija-najdova-joining.js index ca5212a5f736d6..6c5df493795835 100644 --- a/docs/pages/blog/marija-najdova-joining.js +++ b/docs/pages/blog/marija-najdova-joining.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './marija-najdova-joining.md?@mui/markdown'; +import { docs } from './marija-najdova-joining.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/material-ui-is-now-mui.js b/docs/pages/blog/material-ui-is-now-mui.js index da631003aabc92..30e85aea2267f7 100644 --- a/docs/pages/blog/material-ui-is-now-mui.js +++ b/docs/pages/blog/material-ui-is-now-mui.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './material-ui-is-now-mui.md?@mui/markdown'; +import { docs } from './material-ui-is-now-mui.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/material-ui-is-now-mui.md b/docs/pages/blog/material-ui-is-now-mui.md index 2f563799c5e52d..b956024eae46cd 100644 --- a/docs/pages/blog/material-ui-is-now-mui.md +++ b/docs/pages/blog/material-ui-is-now-mui.md @@ -3,7 +3,7 @@ title: Material-UI is now Material UI! description: Starting today, we are evolving our brand identity. We are clarifying the difference between our company and our products. date: 2021-09-16T00:00:00.000Z authors: ['oliviertassinari', 'danilo-leal', 'mbrookes'] -tags: ['Company'] +tags: ['Material UI'] card: true --- diff --git a/docs/pages/blog/material-ui-v1-is-out.js b/docs/pages/blog/material-ui-v1-is-out.js index 2068df7f6d27d1..3e0ea9db643fa6 100644 --- a/docs/pages/blog/material-ui-v1-is-out.js +++ b/docs/pages/blog/material-ui-v1-is-out.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './material-ui-v1-is-out.md?@mui/markdown'; +import { docs } from './material-ui-v1-is-out.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/material-ui-v1-is-out.md b/docs/pages/blog/material-ui-v1-is-out.md index 4b02fc81e6d97a..d88daf681f8ec3 100644 --- a/docs/pages/blog/material-ui-v1-is-out.md +++ b/docs/pages/blog/material-ui-v1-is-out.md @@ -3,7 +3,7 @@ title: Material UI v1 is out 🎉 description: It has taken us two years to do it, but Material UI v1 has finally arrived! date: 2018-05-18T00:00:00.000Z authors: ['oliviertassinari', 'mbrookes'] -tags: ['Company'] +tags: ['Material UI', 'Product'] card: true --- diff --git a/docs/pages/blog/material-ui-v4-is-out.js b/docs/pages/blog/material-ui-v4-is-out.js index 52b149946fe9c5..fb74874a1c1002 100644 --- a/docs/pages/blog/material-ui-v4-is-out.js +++ b/docs/pages/blog/material-ui-v4-is-out.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './material-ui-v4-is-out.md?@mui/markdown'; +import { docs } from './material-ui-v4-is-out.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/material-ui-v4-is-out.md b/docs/pages/blog/material-ui-v4-is-out.md index 808270d53f911a..db433c50987ad0 100644 --- a/docs/pages/blog/material-ui-v4-is-out.md +++ b/docs/pages/blog/material-ui-v4-is-out.md @@ -3,7 +3,7 @@ title: Material UI v4 is out 🎉 description: Material UI v4 has finally arrived. We are so excited about this release, as it defines better foundations for the UI components. date: 2019-05-23T00:00:00.000Z authors: ['oliviertassinari', 'mbrookes', 'eps1lon'] -tags: ['Company'] +tags: ['Material UI', 'Product'] card: true --- diff --git a/docs/pages/blog/matheus-wichman-joining.js b/docs/pages/blog/matheus-wichman-joining.js index 3d178dfcb74bef..1160b94db4245d 100644 --- a/docs/pages/blog/matheus-wichman-joining.js +++ b/docs/pages/blog/matheus-wichman-joining.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './matheus-wichman-joining.md?@mui/markdown'; +import { docs } from './matheus-wichman-joining.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/may-2019-update.js b/docs/pages/blog/may-2019-update.js index 77adc649c6c225..23f45318cbfc40 100644 --- a/docs/pages/blog/may-2019-update.js +++ b/docs/pages/blog/may-2019-update.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './may-2019-update.md?@mui/markdown'; +import { docs } from './may-2019-update.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/michal-dudak-joining.js b/docs/pages/blog/michal-dudak-joining.js index a747343a2ee5fb..9a3f9481da9001 100644 --- a/docs/pages/blog/michal-dudak-joining.js +++ b/docs/pages/blog/michal-dudak-joining.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './michal-dudak-joining.md?@mui/markdown'; +import { docs } from './michal-dudak-joining.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/mui-core-v5-migration-update.js b/docs/pages/blog/mui-core-v5-migration-update.js index 1fccf9b5f55d52..57730cb0a21a3e 100644 --- a/docs/pages/blog/mui-core-v5-migration-update.js +++ b/docs/pages/blog/mui-core-v5-migration-update.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './mui-core-v5-migration-update.md?@mui/markdown'; +import { docs } from './mui-core-v5-migration-update.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/mui-core-v5-migration-update.md b/docs/pages/blog/mui-core-v5-migration-update.md index bf3601b7ff7c1c..04a9be054133ad 100644 --- a/docs/pages/blog/mui-core-v5-migration-update.md +++ b/docs/pages/blog/mui-core-v5-migration-update.md @@ -4,7 +4,7 @@ description: We have completely revamped our Migration guide to reduce friction date: 2022-06-20T00:00:00.000Z authors: ['samuelsycamore'] card: true -tags: ['MUI Core'] +tags: ['Material UI'] --- Are you still using Material UI v4 in 2022? diff --git a/docs/pages/blog/mui-core-v5.js b/docs/pages/blog/mui-core-v5.js index 58964ba574b46e..25b650d512607d 100644 --- a/docs/pages/blog/mui-core-v5.js +++ b/docs/pages/blog/mui-core-v5.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './mui-core-v5.md?@mui/markdown'; +import { docs } from './mui-core-v5.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/mui-core-v5.md b/docs/pages/blog/mui-core-v5.md index fb7ce664886981..0a03f8293c3f1f 100644 --- a/docs/pages/blog/mui-core-v5.md +++ b/docs/pages/blog/mui-core-v5.md @@ -13,7 +13,7 @@ authors: 'mbrookes', ] card: true -tags: ['News'] +tags: ['Product', 'Material UI'] --- After over 400 days of development and over 40 canary releases, we are excited to introduce [MUI Core v5.0.0](https://github.com/mui/material-ui/releases/tag/v5.0.0)! diff --git a/docs/pages/blog/mui-next-js-app-router.js b/docs/pages/blog/mui-next-js-app-router.js index 9770faddcd6876..3abb16c25c80e6 100644 --- a/docs/pages/blog/mui-next-js-app-router.js +++ b/docs/pages/blog/mui-next-js-app-router.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './mui-next-js-app-router.md?@mui/markdown'; +import { docs } from './mui-next-js-app-router.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/mui-next-js-app-router.md b/docs/pages/blog/mui-next-js-app-router.md index d3ad4e7178dbcb..1268561ad33d1f 100644 --- a/docs/pages/blog/mui-next-js-app-router.md +++ b/docs/pages/blog/mui-next-js-app-router.md @@ -4,7 +4,7 @@ description: Material UI, Base UI, and Joy UI are now compatible with the App date: 2023-07-18T00:00:00.000Z authors: ['samuelsycamore'] card: true -tags: ['News'] +tags: ['Product'] --- With [v5.14.0](https://github.com/mui/material-ui/releases/tag/v5.14.0), MUI's Core component libraries—Material UI, Base UI, and Joy UI—are now compatible with the Next.js App Router. 🚀 diff --git a/docs/pages/blog/mui-product-comparison.js b/docs/pages/blog/mui-product-comparison.js index 3a66bc758c35c3..08fbe6e500ae75 100644 --- a/docs/pages/blog/mui-product-comparison.js +++ b/docs/pages/blog/mui-product-comparison.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './mui-product-comparison.md?@mui/markdown'; +import { docs } from './mui-product-comparison.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/mui-x-end-v6-features.js b/docs/pages/blog/mui-x-end-v6-features.js index d66835102eeb45..c33ca544f5ad16 100644 --- a/docs/pages/blog/mui-x-end-v6-features.js +++ b/docs/pages/blog/mui-x-end-v6-features.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './mui-x-end-v6-features.md?@mui/markdown'; +import { docs } from './mui-x-end-v6-features.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/mui-x-end-v6-features.md b/docs/pages/blog/mui-x-end-v6-features.md index 7579e0b6595ee2..29c3acd6ad8d57 100644 --- a/docs/pages/blog/mui-x-end-v6-features.md +++ b/docs/pages/blog/mui-x-end-v6-features.md @@ -4,7 +4,7 @@ description: New components, polished features, better performance and more. date: 2023-11-13T00:00:00.000Z authors: ['josefreitas'] card: true -tags: ['MUI X', 'News'] +tags: ['MUI X', 'Product'] ---
    diff --git a/docs/pages/blog/mui-x-mid-v6-features.js b/docs/pages/blog/mui-x-mid-v6-features.js index a3699209869d3b..bd77cd4f676607 100644 --- a/docs/pages/blog/mui-x-mid-v6-features.js +++ b/docs/pages/blog/mui-x-mid-v6-features.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './mui-x-mid-v6-features.md?@mui/markdown'; +import { docs } from './mui-x-mid-v6-features.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/mui-x-mid-v6-features.md b/docs/pages/blog/mui-x-mid-v6-features.md index 9f8dda9d9fd453..07f8a1c8f6f7a1 100644 --- a/docs/pages/blog/mui-x-mid-v6-features.md +++ b/docs/pages/blog/mui-x-mid-v6-features.md @@ -4,7 +4,7 @@ description: Support for time zones, Charts in alpha, Data Grid filtering, and m date: 2023-08-14T00:00:00.000Z authors: ['richbustos', 'josefreitas'] card: true -tags: ['MUI X', 'News'] +tags: ['MUI X', 'Product'] --- diff --git a/docs/pages/blog/mui-x-v5.js b/docs/pages/blog/mui-x-v5.js index aa4e5ab95eb1e7..62efce3b5af09c 100644 --- a/docs/pages/blog/mui-x-v5.js +++ b/docs/pages/blog/mui-x-v5.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './mui-x-v5.md?@mui/markdown'; +import { docs } from './mui-x-v5.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/mui-x-v5.md b/docs/pages/blog/mui-x-v5.md index b10187e54373bf..f77faf8a26e622 100644 --- a/docs/pages/blog/mui-x-v5.md +++ b/docs/pages/blog/mui-x-v5.md @@ -5,7 +5,7 @@ date: 2021-11-22T00:00:00.000Z authors: ['oliviertassinari', 'm4theushw', 'flaviendelangle', 'DanailH', 'alexfauquette'] card: true -tags: ['News'] +tags: ['MUI X', 'Product'] --- We are excited to introduce [MUI X v5.0.0](https://github.com/mui/mui-x/releases/tag/v5.0.0)! diff --git a/docs/pages/blog/mui-x-v6-alpha-zero.js b/docs/pages/blog/mui-x-v6-alpha-zero.js index 7a208e0a4370ca..4a0856f0d359a9 100644 --- a/docs/pages/blog/mui-x-v6-alpha-zero.js +++ b/docs/pages/blog/mui-x-v6-alpha-zero.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './mui-x-v6-alpha-zero.md?@mui/markdown'; +import { docs } from './mui-x-v6-alpha-zero.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/mui-x-v6-alpha-zero.md b/docs/pages/blog/mui-x-v6-alpha-zero.md index 530120e57b6f14..eefcf84e50348f 100644 --- a/docs/pages/blog/mui-x-v6-alpha-zero.md +++ b/docs/pages/blog/mui-x-v6-alpha-zero.md @@ -3,7 +3,7 @@ title: A major update is coming for MUI X—and you can get involved description: Let us know what you want to see in MUI X v6 as we begin the alpha phase of development. date: 2022-09-30T00:00:00.000Z authors: ['josefreitas'] -tags: ['MUI X', 'News'] +tags: ['MUI X', 'Product'] card: true --- diff --git a/docs/pages/blog/mui-x-v6.js b/docs/pages/blog/mui-x-v6.js index 1958d4bd99f1ca..2d2567dcf79141 100644 --- a/docs/pages/blog/mui-x-v6.js +++ b/docs/pages/blog/mui-x-v6.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './mui-x-v6.md?@mui/markdown'; +import { docs } from './mui-x-v6.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/mui-x-v6.md b/docs/pages/blog/mui-x-v6.md index a7aea9c6ebc72a..c6922f8d26d2fe 100644 --- a/docs/pages/blog/mui-x-v6.md +++ b/docs/pages/blog/mui-x-v6.md @@ -4,7 +4,7 @@ description: Introducing the new major version of the advanced components. date: 2023-03-06T00:00:00.000Z authors: ['josefreitas'] card: true -tags: ['MUI X', 'News'] +tags: ['MUI X', 'Product'] --- diff --git a/docs/pages/blog/mui-x-v7-beta.js b/docs/pages/blog/mui-x-v7-beta.js index ee481a9a734d6b..5488cb32483e28 100644 --- a/docs/pages/blog/mui-x-v7-beta.js +++ b/docs/pages/blog/mui-x-v7-beta.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './mui-x-v7-beta.md?@mui/markdown'; +import { docs } from './mui-x-v7-beta.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/mui-x-v7-beta.md b/docs/pages/blog/mui-x-v7-beta.md index d869ce256b33e7..7d785326c1b22e 100644 --- a/docs/pages/blog/mui-x-v7-beta.md +++ b/docs/pages/blog/mui-x-v7-beta.md @@ -3,7 +3,7 @@ title: MUI X v7 is now in beta description: Check out what's new and what's next for v7 stable. date: 2024-01-29T00:00:00.000Z authors: ['josefreitas'] -tags: ['MUI X', 'Product', 'News'] +tags: ['MUI X', 'Product'] card: true --- diff --git a/docs/pages/blog/november-2019-update.js b/docs/pages/blog/november-2019-update.js index 79fa820f2453d0..58997a4d713bcc 100644 --- a/docs/pages/blog/november-2019-update.js +++ b/docs/pages/blog/november-2019-update.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './november-2019-update.md?@mui/markdown'; +import { docs } from './november-2019-update.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/october-2019-update.js b/docs/pages/blog/october-2019-update.js index 61d071e8ee7a4e..1c10855b0ead69 100644 --- a/docs/pages/blog/october-2019-update.js +++ b/docs/pages/blog/october-2019-update.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './october-2019-update.md?@mui/markdown'; +import { docs } from './october-2019-update.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/premium-plan-release.js b/docs/pages/blog/premium-plan-release.js index 8ab4e78e9edf07..05ff6b0dfeb50f 100644 --- a/docs/pages/blog/premium-plan-release.js +++ b/docs/pages/blog/premium-plan-release.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './premium-plan-release.md?@mui/markdown'; +import { docs } from './premium-plan-release.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/premium-plan-release.md b/docs/pages/blog/premium-plan-release.md index 463811f4252133..4d5166c36c263f 100644 --- a/docs/pages/blog/premium-plan-release.md +++ b/docs/pages/blog/premium-plan-release.md @@ -3,7 +3,7 @@ title: Premium passengers, please proceed to the boarding gate 🚀 description: Introducing the MUI X Premium plan, and a new licensing model. date: 2022-05-12T00:00:00.000Z authors: ['josefreitas', 'alexfauquette'] -tags: ['MUI X', 'News'] +tags: ['MUI X', 'Product'] card: true --- diff --git a/docs/pages/blog/september-2019-update.js b/docs/pages/blog/september-2019-update.js index 3a2b10f46cb314..83431bf23bc444 100644 --- a/docs/pages/blog/september-2019-update.js +++ b/docs/pages/blog/september-2019-update.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './september-2019-update.md?@mui/markdown'; +import { docs } from './september-2019-update.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/siriwat-kunaporn-joining.js b/docs/pages/blog/siriwat-kunaporn-joining.js index 4383fe768676a8..235c3ee1d02dbd 100644 --- a/docs/pages/blog/siriwat-kunaporn-joining.js +++ b/docs/pages/blog/siriwat-kunaporn-joining.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './siriwat-kunaporn-joining.md?@mui/markdown'; +import { docs } from './siriwat-kunaporn-joining.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/spotlight-damien-tassone.js b/docs/pages/blog/spotlight-damien-tassone.js index 9a04c3e10962ca..a3d8cafe8ebf18 100644 --- a/docs/pages/blog/spotlight-damien-tassone.js +++ b/docs/pages/blog/spotlight-damien-tassone.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './spotlight-damien-tassone.md?@mui/markdown'; +import { docs } from './spotlight-damien-tassone.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/v6-beta-pickers.js b/docs/pages/blog/v6-beta-pickers.js index 71a077ecc16810..43d12dd40a2f63 100644 --- a/docs/pages/blog/v6-beta-pickers.js +++ b/docs/pages/blog/v6-beta-pickers.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './v6-beta-pickers.md?@mui/markdown'; +import { docs } from './v6-beta-pickers.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/blog/v6-beta-pickers.md b/docs/pages/blog/v6-beta-pickers.md index fc7655e8c47286..8ceeca29aa63cf 100644 --- a/docs/pages/blog/v6-beta-pickers.md +++ b/docs/pages/blog/v6-beta-pickers.md @@ -3,7 +3,7 @@ title: Date and Time Pickers revamped description: Check out the new features coming in v6 beta. date: 2023-01-22T00:00:00.000Z authors: ['josefreitas'] -tags: ['MUI X', 'News'] +tags: ['MUI X', 'Product'] card: true --- diff --git a/docs/pages/careers/accessibility-engineer.js b/docs/pages/careers/accessibility-engineer.js index db74ff196346d9..f3833cb139f972 100644 --- a/docs/pages/careers/accessibility-engineer.js +++ b/docs/pages/careers/accessibility-engineer.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers'; -import * as pageProps from 'docs/pages/careers/accessibility-engineer.md?@mui/markdown'; +import * as pageProps from 'docs/pages/careers/accessibility-engineer.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/careers/design-engineer-x-grid.js b/docs/pages/careers/design-engineer-x-grid.js index 6712cb840f83c5..6a16aa286ab36d 100644 --- a/docs/pages/careers/design-engineer-x-grid.js +++ b/docs/pages/careers/design-engineer-x-grid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers'; -import * as pageProps from 'docs/pages/careers/design-engineer-x-grid.md?@mui/markdown'; +import * as pageProps from 'docs/pages/careers/design-engineer-x-grid.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/careers/design-engineer.js b/docs/pages/careers/design-engineer.js index 647ef01f12b217..bde4ff97075192 100644 --- a/docs/pages/careers/design-engineer.js +++ b/docs/pages/careers/design-engineer.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers'; -import * as pageProps from 'docs/pages/careers/design-engineer.md?@mui/markdown'; +import * as pageProps from 'docs/pages/careers/design-engineer.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/careers/developer-advocate.js b/docs/pages/careers/developer-advocate.js index 76f1c3ad00d815..0a89874a60727e 100644 --- a/docs/pages/careers/developer-advocate.js +++ b/docs/pages/careers/developer-advocate.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers'; -import * as pageProps from 'docs/pages/careers/developer-advocate.md?@mui/markdown'; +import * as pageProps from 'docs/pages/careers/developer-advocate.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/careers/fullstack-engineer.js b/docs/pages/careers/fullstack-engineer.js index 793263bda19e71..eb99c21523c7e1 100644 --- a/docs/pages/careers/fullstack-engineer.js +++ b/docs/pages/careers/fullstack-engineer.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers'; -import * as pageProps from 'docs/pages/careers/full-stack-engineer.md?@mui/markdown'; +import * as pageProps from 'docs/pages/careers/full-stack-engineer.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/careers/product-marketing-manager.js b/docs/pages/careers/product-marketing-manager.js index 86bb53bcfd3d39..9449a4b0d6af7c 100644 --- a/docs/pages/careers/product-marketing-manager.js +++ b/docs/pages/careers/product-marketing-manager.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers'; -import * as pageProps from 'docs/pages/careers/product-marketing-manager.md?@mui/markdown'; +import * as pageProps from 'docs/pages/careers/product-marketing-manager.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/careers/react-community-engineer.js b/docs/pages/careers/react-community-engineer.js index 32c0c8bf319d22..71b35214e7c34b 100644 --- a/docs/pages/careers/react-community-engineer.js +++ b/docs/pages/careers/react-community-engineer.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers'; -import * as pageProps from 'docs/pages/careers/react-community-engineer.md?@mui/markdown'; +import * as pageProps from 'docs/pages/careers/react-community-engineer.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/careers/react-engineer-core.js b/docs/pages/careers/react-engineer-core.js index 1ad934fb3299b6..5a416da5d8eff0 100644 --- a/docs/pages/careers/react-engineer-core.js +++ b/docs/pages/careers/react-engineer-core.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers'; -import * as pageProps from 'docs/pages/careers/react-engineer-core.md?@mui/markdown'; +import * as pageProps from 'docs/pages/careers/react-engineer-core.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/careers/react-engineer-x-charts.js b/docs/pages/careers/react-engineer-x-charts.js index da64dfa7a85cfe..e0051912291d77 100644 --- a/docs/pages/careers/react-engineer-x-charts.js +++ b/docs/pages/careers/react-engineer-x-charts.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers'; -import * as pageProps from 'docs/pages/careers/react-engineer-x-charts.md?@mui/markdown'; +import * as pageProps from 'docs/pages/careers/react-engineer-x-charts.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/careers/react-engineer-x.js b/docs/pages/careers/react-engineer-x.js index 758d5f492c7499..7d39c1a91ef570 100644 --- a/docs/pages/careers/react-engineer-x.js +++ b/docs/pages/careers/react-engineer-x.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers'; -import * as pageProps from 'docs/pages/careers/react-engineer-x.md?@mui/markdown'; +import * as pageProps from 'docs/pages/careers/react-engineer-x.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/careers/react-tech-lead-core.js b/docs/pages/careers/react-tech-lead-core.js index e943ef768f802e..b4aa1e82c8517a 100644 --- a/docs/pages/careers/react-tech-lead-core.js +++ b/docs/pages/careers/react-tech-lead-core.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers'; -import * as pageProps from 'docs/pages/careers/react-tech-lead-core.md?@mui/markdown'; +import * as pageProps from 'docs/pages/careers/react-tech-lead-core.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/careers/react-tech-lead-x-grid.js b/docs/pages/careers/react-tech-lead-x-grid.js index e12c05097670fe..626e66c5e02cf3 100644 --- a/docs/pages/careers/react-tech-lead-x-grid.js +++ b/docs/pages/careers/react-tech-lead-x-grid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers'; -import * as pageProps from 'docs/pages/careers/react-tech-lead-x-grid.md?@mui/markdown'; +import * as pageProps from 'docs/pages/careers/react-tech-lead-x-grid.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/careers/staff-ui-engineer-base-ui.js b/docs/pages/careers/staff-ui-engineer-base-ui.js index 8442642075b668..2e2cb7f7e6789a 100644 --- a/docs/pages/careers/staff-ui-engineer-base-ui.js +++ b/docs/pages/careers/staff-ui-engineer-base-ui.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers'; -import * as pageProps from 'docs/pages/careers/staff-ui-engineer-base-ui.md?@mui/markdown'; +import * as pageProps from 'docs/pages/careers/staff-ui-engineer-base-ui.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/careers/support-agent.js b/docs/pages/careers/support-agent.js index 6eade6b4005051..c5372798f40bc1 100644 --- a/docs/pages/careers/support-agent.js +++ b/docs/pages/careers/support-agent.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers'; -import * as pageProps from 'docs/pages/careers/support-agent.md?@mui/markdown'; +import * as pageProps from 'docs/pages/careers/support-agent.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/careers/technical-recruiter.js b/docs/pages/careers/technical-recruiter.js index cbe084390ba073..b4a6874cce3b25 100644 --- a/docs/pages/careers/technical-recruiter.js +++ b/docs/pages/careers/technical-recruiter.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers'; -import * as pageProps from 'docs/pages/careers/technical-recruiter.md?@mui/markdown'; +import * as pageProps from 'docs/pages/careers/technical-recruiter.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/company/contact.js b/docs/pages/company/contact.js index 7d96b583402fc5..6589c449d39e2e 100644 --- a/docs/pages/company/contact.js +++ b/docs/pages/company/contact.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers'; -import * as pageProps from 'docs/src/pages/company/contact/contact.md?@mui/markdown'; +import * as pageProps from 'docs/src/pages/company/contact/contact.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/experiments/blog/blog.js b/docs/pages/experiments/blog/blog.js index c1b7a2c8df2ef5..65d6c6c10a3dee 100644 --- a/docs/pages/experiments/blog/blog.js +++ b/docs/pages/experiments/blog/blog.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './blog.md?@mui/markdown'; +import { docs } from './blog.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/experiments/docs/callouts.js b/docs/pages/experiments/docs/callouts.js index 55dc0c4e7dd9da..3542c0b073b06a 100644 --- a/docs/pages/experiments/docs/callouts.js +++ b/docs/pages/experiments/docs/callouts.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './callouts.md?@mui/markdown'; +import * as pageProps from './callouts.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/experiments/docs/codeblock.js b/docs/pages/experiments/docs/codeblock.js index e46dd9bd20b591..6310805f4c4f3d 100644 --- a/docs/pages/experiments/docs/codeblock.js +++ b/docs/pages/experiments/docs/codeblock.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './codeblock.md?@mui/markdown'; +import * as pageProps from './codeblock.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/experiments/docs/demos.js b/docs/pages/experiments/docs/demos.js index 1f9fa6d0b9c033..5f926a861900e3 100644 --- a/docs/pages/experiments/docs/demos.js +++ b/docs/pages/experiments/docs/demos.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './demos.md?@mui/markdown'; +import * as pageProps from './demos.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/experiments/docs/headers.js b/docs/pages/experiments/docs/headers.js index 7664219ba77a22..ee0a623c52bd96 100644 --- a/docs/pages/experiments/docs/headers.js +++ b/docs/pages/experiments/docs/headers.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './headers.md?@mui/markdown'; +import * as pageProps from './headers.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/experiments/docs/markdown.js b/docs/pages/experiments/docs/markdown.js index ec4775d7f5a6d4..d0eca02da070a6 100644 --- a/docs/pages/experiments/docs/markdown.js +++ b/docs/pages/experiments/docs/markdown.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from './markdown.md?@mui/markdown'; +import * as pageProps from './markdown.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/experiments/website/branding-theme-test.tsx b/docs/pages/experiments/website/branding-theme-test.tsx new file mode 100644 index 00000000000000..eb6ce1645af27b --- /dev/null +++ b/docs/pages/experiments/website/branding-theme-test.tsx @@ -0,0 +1,54 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import Chip from '@mui/material/Chip'; +import Button from '@mui/material/Button'; +import Divider from '@mui/material/Divider'; +import Head from 'docs/src/modules/components/Head'; +import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider'; +import AppHeader from 'docs/src/layouts/AppHeader'; +import Section from 'docs/src/layouts/Section'; +import AppFooter from 'docs/src/layouts/AppFooter'; + +export default function BrandingThemeTest() { + return ( + + + +
    +
    + + + + + + + + + + + + + + + + + + + +
    + +
    + +
    + ); +} diff --git a/docs/pages/joy-ui/customization/approaches.js b/docs/pages/joy-ui/customization/approaches.js index 351bfbcd7f71f1..f66a215519abb4 100644 --- a/docs/pages/joy-ui/customization/approaches.js +++ b/docs/pages/joy-ui/customization/approaches.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/customization/approaches/approaches.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/customization/approaches/approaches.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/customization/creating-themed-components.js b/docs/pages/joy-ui/customization/creating-themed-components.js index 1f5816738dccc9..edf008f6ed6388 100644 --- a/docs/pages/joy-ui/customization/creating-themed-components.js +++ b/docs/pages/joy-ui/customization/creating-themed-components.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/customization/creating-themed-components/creating-themed-components.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/customization/creating-themed-components/creating-themed-components.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/customization/dark-mode.js b/docs/pages/joy-ui/customization/dark-mode.js index 46c39c6e183a65..cc5bd33c042656 100644 --- a/docs/pages/joy-ui/customization/dark-mode.js +++ b/docs/pages/joy-ui/customization/dark-mode.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/customization/dark-mode/dark-mode.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/customization/dark-mode/dark-mode.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/customization/default-theme-viewer.js b/docs/pages/joy-ui/customization/default-theme-viewer.js index 363dcad36672f4..bb189170cf20d9 100644 --- a/docs/pages/joy-ui/customization/default-theme-viewer.js +++ b/docs/pages/joy-ui/customization/default-theme-viewer.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/customization/overriding-component-structure.js b/docs/pages/joy-ui/customization/overriding-component-structure.js index 257f527563c19c..4bc4c0a21fd7c9 100644 --- a/docs/pages/joy-ui/customization/overriding-component-structure.js +++ b/docs/pages/joy-ui/customization/overriding-component-structure.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/customization/overriding-component-structure/overriding-component-structure.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/customization/overriding-component-structure/overriding-component-structure.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/customization/right-to-left.js b/docs/pages/joy-ui/customization/right-to-left.js index 6c1b329afd8482..db32113ff5d639 100644 --- a/docs/pages/joy-ui/customization/right-to-left.js +++ b/docs/pages/joy-ui/customization/right-to-left.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/customization/right-to-left/right-to-left.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/customization/right-to-left/right-to-left.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/customization/theme-builder.js b/docs/pages/joy-ui/customization/theme-builder.js index 6ee8a9097a3018..718a804fa9a525 100644 --- a/docs/pages/joy-ui/customization/theme-builder.js +++ b/docs/pages/joy-ui/customization/theme-builder.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/customization/theme-builder/theme-builder.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/customization/theme-builder/theme-builder.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/customization/theme-colors.js b/docs/pages/joy-ui/customization/theme-colors.js index 3e42d92c980c2c..ae13f04bc1b17e 100644 --- a/docs/pages/joy-ui/customization/theme-colors.js +++ b/docs/pages/joy-ui/customization/theme-colors.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/customization/theme-colors/theme-colors.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/customization/theme-colors/theme-colors.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/customization/theme-shadow.js b/docs/pages/joy-ui/customization/theme-shadow.js index d7a1c16b7c5481..8ab82ae5700205 100644 --- a/docs/pages/joy-ui/customization/theme-shadow.js +++ b/docs/pages/joy-ui/customization/theme-shadow.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/customization/theme-shadow/theme-shadow.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/customization/theme-shadow/theme-shadow.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/customization/theme-typography.js b/docs/pages/joy-ui/customization/theme-typography.js index 78659441ef5187..ac67fdcced3a31 100644 --- a/docs/pages/joy-ui/customization/theme-typography.js +++ b/docs/pages/joy-ui/customization/theme-typography.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/customization/theme-typography/theme-typography.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/customization/theme-typography/theme-typography.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/customization/themed-components.js b/docs/pages/joy-ui/customization/themed-components.js index 615c4ead85ab0f..7895fb12f9b71c 100644 --- a/docs/pages/joy-ui/customization/themed-components.js +++ b/docs/pages/joy-ui/customization/themed-components.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/customization/themed-components/themed-components.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/customization/themed-components/themed-components.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/customization/using-css-variables.js b/docs/pages/joy-ui/customization/using-css-variables.js index 776cd58bf56c90..78cf71ee416bd8 100644 --- a/docs/pages/joy-ui/customization/using-css-variables.js +++ b/docs/pages/joy-ui/customization/using-css-variables.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/customization/using-css-variables/using-css-variables.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/customization/using-css-variables/using-css-variables.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/getting-started/index.js b/docs/pages/joy-ui/getting-started/index.js index 27b598bf7a1757..fd7b8dd3ebf643 100644 --- a/docs/pages/joy-ui/getting-started/index.js +++ b/docs/pages/joy-ui/getting-started/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/getting-started/overview/overview.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/getting-started/overview/overview.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/getting-started/installation.js b/docs/pages/joy-ui/getting-started/installation.js index b5c1f141cc5f6a..c9e618ea1bfd24 100644 --- a/docs/pages/joy-ui/getting-started/installation.js +++ b/docs/pages/joy-ui/getting-started/installation.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/getting-started/installation/installation.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/getting-started/installation/installation.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/getting-started/roadmap.js b/docs/pages/joy-ui/getting-started/roadmap.js index f9b3bec81e8cb4..c2269e74225f71 100644 --- a/docs/pages/joy-ui/getting-started/roadmap.js +++ b/docs/pages/joy-ui/getting-started/roadmap.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/getting-started/roadmap/roadmap.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/getting-started/roadmap/roadmap.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/getting-started/support.js b/docs/pages/joy-ui/getting-started/support.js index 2f8a8b24472025..12de9a763e83b5 100644 --- a/docs/pages/joy-ui/getting-started/support.js +++ b/docs/pages/joy-ui/getting-started/support.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/getting-started/support/support.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/getting-started/support/support.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/getting-started/templates/index.js b/docs/pages/joy-ui/getting-started/templates/index.js index faf1730d616b05..944ed9535530b2 100644 --- a/docs/pages/joy-ui/getting-started/templates/index.js +++ b/docs/pages/joy-ui/getting-started/templates/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/getting-started/templates/index.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/getting-started/templates/index.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/getting-started/tutorial.js b/docs/pages/joy-ui/getting-started/tutorial.js index 41d84d92ab1951..11970c78a0e5dd 100644 --- a/docs/pages/joy-ui/getting-started/tutorial.js +++ b/docs/pages/joy-ui/getting-started/tutorial.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/getting-started/tutorial/tutorial.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/getting-started/tutorial/tutorial.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/getting-started/usage.js b/docs/pages/joy-ui/getting-started/usage.js index ebb39005016eb0..6deb23e104db30 100644 --- a/docs/pages/joy-ui/getting-started/usage.js +++ b/docs/pages/joy-ui/getting-started/usage.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/getting-started/usage/usage.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/getting-started/usage/usage.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/integrations/icon-libraries.js b/docs/pages/joy-ui/integrations/icon-libraries.js index 4d88d02da88a11..60d6b22858d39c 100644 --- a/docs/pages/joy-ui/integrations/icon-libraries.js +++ b/docs/pages/joy-ui/integrations/icon-libraries.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/integrations/icon-libraries/icon-libraries.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/integrations/icon-libraries/icon-libraries.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/integrations/material-ui.js b/docs/pages/joy-ui/integrations/material-ui.js index 65bda95851667f..512891d3310f4b 100644 --- a/docs/pages/joy-ui/integrations/material-ui.js +++ b/docs/pages/joy-ui/integrations/material-ui.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/integrations/material-ui/material-ui.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/integrations/material-ui/material-ui.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/integrations/next-js-app-router.js b/docs/pages/joy-ui/integrations/next-js-app-router.js index 0bc5766da2aa32..9012ce54347e98 100644 --- a/docs/pages/joy-ui/integrations/next-js-app-router.js +++ b/docs/pages/joy-ui/integrations/next-js-app-router.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/integrations/next-js-app-router/next-js-app-router.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/integrations/next-js-app-router/next-js-app-router.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/main-features/automatic-adjustment.js b/docs/pages/joy-ui/main-features/automatic-adjustment.js index 5baa55371539e5..6357d425147099 100644 --- a/docs/pages/joy-ui/main-features/automatic-adjustment.js +++ b/docs/pages/joy-ui/main-features/automatic-adjustment.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/main-features/automatic-adjustment/automatic-adjustment.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/main-features/automatic-adjustment/automatic-adjustment.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/main-features/color-inversion.js b/docs/pages/joy-ui/main-features/color-inversion.js index bd3ed4e7015ff5..f3ab5121e61582 100644 --- a/docs/pages/joy-ui/main-features/color-inversion.js +++ b/docs/pages/joy-ui/main-features/color-inversion.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/main-features/color-inversion/color-inversion.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/main-features/color-inversion/color-inversion.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/main-features/dark-mode-optimization.js b/docs/pages/joy-ui/main-features/dark-mode-optimization.js index f6e44f6dae4368..db96cf2586ffc3 100644 --- a/docs/pages/joy-ui/main-features/dark-mode-optimization.js +++ b/docs/pages/joy-ui/main-features/dark-mode-optimization.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/main-features/dark-mode-optimization/dark-mode-optimization.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/main-features/dark-mode-optimization/dark-mode-optimization.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/main-features/global-variants.js b/docs/pages/joy-ui/main-features/global-variants.js index 5bc7bec91b0fc2..be5b39e39c4d23 100644 --- a/docs/pages/joy-ui/main-features/global-variants.js +++ b/docs/pages/joy-ui/main-features/global-variants.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/main-features/global-variants/global-variants.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/main-features/global-variants/global-variants.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/migration/migrating-default-theme.js b/docs/pages/joy-ui/migration/migrating-default-theme.js index 6e8f9e71a68bc1..7c6b9d8530ae43 100644 --- a/docs/pages/joy-ui/migration/migrating-default-theme.js +++ b/docs/pages/joy-ui/migration/migrating-default-theme.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/migration/migrating-default-theme.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/migration/migrating-default-theme.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-accordion.js b/docs/pages/joy-ui/react-accordion.js index 74fbdab76931d2..2df96fbb90bd62 100644 --- a/docs/pages/joy-ui/react-accordion.js +++ b/docs/pages/joy-ui/react-accordion.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/accordion/accordion.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/accordion/accordion.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-alert.js b/docs/pages/joy-ui/react-alert.js index 7fd1c6909e0425..6e7875d5d8bd6f 100644 --- a/docs/pages/joy-ui/react-alert.js +++ b/docs/pages/joy-ui/react-alert.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/alert/alert.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/alert/alert.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-aspect-ratio.js b/docs/pages/joy-ui/react-aspect-ratio.js index 4da3dc63f4d369..1e9ae69f434850 100644 --- a/docs/pages/joy-ui/react-aspect-ratio.js +++ b/docs/pages/joy-ui/react-aspect-ratio.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/aspect-ratio/aspect-ratio.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/aspect-ratio/aspect-ratio.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-autocomplete.js b/docs/pages/joy-ui/react-autocomplete.js index a9488b6e929e5d..6c6049e58c3f81 100644 --- a/docs/pages/joy-ui/react-autocomplete.js +++ b/docs/pages/joy-ui/react-autocomplete.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/autocomplete/autocomplete.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/autocomplete/autocomplete.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-avatar.js b/docs/pages/joy-ui/react-avatar.js index 1923179b09b50d..0655104c5e2b34 100644 --- a/docs/pages/joy-ui/react-avatar.js +++ b/docs/pages/joy-ui/react-avatar.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/avatar/avatar.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/avatar/avatar.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-badge.js b/docs/pages/joy-ui/react-badge.js index ca22af990cbd2d..1232ab05133437 100644 --- a/docs/pages/joy-ui/react-badge.js +++ b/docs/pages/joy-ui/react-badge.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/badge/badge.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/badge/badge.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-box.js b/docs/pages/joy-ui/react-box.js index 0846b5df5ca244..463df17e34d518 100644 --- a/docs/pages/joy-ui/react-box.js +++ b/docs/pages/joy-ui/react-box.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/box/box.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/box/box.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-breadcrumbs.js b/docs/pages/joy-ui/react-breadcrumbs.js index 849ee7cb6fa8c3..f0861f7f76366a 100644 --- a/docs/pages/joy-ui/react-breadcrumbs.js +++ b/docs/pages/joy-ui/react-breadcrumbs.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/breadcrumbs/breadcrumbs.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/breadcrumbs/breadcrumbs.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-button-group.js b/docs/pages/joy-ui/react-button-group.js index 30a928e38ff2bc..07d73001da1e3e 100644 --- a/docs/pages/joy-ui/react-button-group.js +++ b/docs/pages/joy-ui/react-button-group.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/joy/components/button-group/button-group.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/button-group/button-group.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-button.js b/docs/pages/joy-ui/react-button.js index a06a27671459a0..72bffbb4336d87 100644 --- a/docs/pages/joy-ui/react-button.js +++ b/docs/pages/joy-ui/react-button.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/joy/components/button/button.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/button/button.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-card.js b/docs/pages/joy-ui/react-card.js index 66489d44f906b5..74499b5ea16574 100644 --- a/docs/pages/joy-ui/react-card.js +++ b/docs/pages/joy-ui/react-card.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/card/card.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/card/card.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-checkbox.js b/docs/pages/joy-ui/react-checkbox.js index e480541e25aa9f..d84258e39b3093 100644 --- a/docs/pages/joy-ui/react-checkbox.js +++ b/docs/pages/joy-ui/react-checkbox.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/checkbox/checkbox.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/checkbox/checkbox.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-chip.js b/docs/pages/joy-ui/react-chip.js index 8d28d9a18ceb7e..e55c53f69992ed 100644 --- a/docs/pages/joy-ui/react-chip.js +++ b/docs/pages/joy-ui/react-chip.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/chip/chip.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/chip/chip.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-circular-progress.js b/docs/pages/joy-ui/react-circular-progress.js index 044b48d9c14eb9..79607e9bccf003 100644 --- a/docs/pages/joy-ui/react-circular-progress.js +++ b/docs/pages/joy-ui/react-circular-progress.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/circular-progress/circular-progress.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/circular-progress/circular-progress.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-css-baseline.js b/docs/pages/joy-ui/react-css-baseline.js index f96abbeef5e398..77390426efe40a 100644 --- a/docs/pages/joy-ui/react-css-baseline.js +++ b/docs/pages/joy-ui/react-css-baseline.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/css-baseline/css-baseline.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/css-baseline/css-baseline.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-divider.js b/docs/pages/joy-ui/react-divider.js index 43cce603edd8cc..9e25ac4044774f 100644 --- a/docs/pages/joy-ui/react-divider.js +++ b/docs/pages/joy-ui/react-divider.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/divider/divider.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/divider/divider.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-drawer.js b/docs/pages/joy-ui/react-drawer.js index f6ba9703d7513c..7535a363f1c178 100644 --- a/docs/pages/joy-ui/react-drawer.js +++ b/docs/pages/joy-ui/react-drawer.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/drawer/drawer.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/drawer/drawer.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-grid.js b/docs/pages/joy-ui/react-grid.js index 333783b738a992..5cf55f7bcc56c2 100644 --- a/docs/pages/joy-ui/react-grid.js +++ b/docs/pages/joy-ui/react-grid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/grid/grid.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/grid/grid.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-input.js b/docs/pages/joy-ui/react-input.js index 1f66aa6c7b33a7..972141e57657db 100644 --- a/docs/pages/joy-ui/react-input.js +++ b/docs/pages/joy-ui/react-input.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/input/input.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/input/input.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-linear-progress.js b/docs/pages/joy-ui/react-linear-progress.js index 06fd75c48446ff..a8025a355a594a 100644 --- a/docs/pages/joy-ui/react-linear-progress.js +++ b/docs/pages/joy-ui/react-linear-progress.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/linear-progress/linear-progress.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/linear-progress/linear-progress.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-link.js b/docs/pages/joy-ui/react-link.js index 972e375bb2e3ff..5cf4acdc850529 100644 --- a/docs/pages/joy-ui/react-link.js +++ b/docs/pages/joy-ui/react-link.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/link/link.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/link/link.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-list.js b/docs/pages/joy-ui/react-list.js index f267c7c3a49b27..c45f5f337a43bc 100644 --- a/docs/pages/joy-ui/react-list.js +++ b/docs/pages/joy-ui/react-list.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/list/list.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/list/list.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-menu.js b/docs/pages/joy-ui/react-menu.js index 9d50b739fbe738..ab4a6ca51eae7f 100644 --- a/docs/pages/joy-ui/react-menu.js +++ b/docs/pages/joy-ui/react-menu.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/menu/menu.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/menu/menu.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-modal.js b/docs/pages/joy-ui/react-modal.js index 6a978e48fec528..2de888921ce1eb 100644 --- a/docs/pages/joy-ui/react-modal.js +++ b/docs/pages/joy-ui/react-modal.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/modal/modal.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/modal/modal.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-radio-button.js b/docs/pages/joy-ui/react-radio-button.js index 016b2d62b4382c..c34a0289b6a9bf 100644 --- a/docs/pages/joy-ui/react-radio-button.js +++ b/docs/pages/joy-ui/react-radio-button.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/radio-button/radio-button.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/radio-button/radio-button.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-select.js b/docs/pages/joy-ui/react-select.js index 2deb4b443c5995..a09791b0d0b19c 100644 --- a/docs/pages/joy-ui/react-select.js +++ b/docs/pages/joy-ui/react-select.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/select/select.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/select/select.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-sheet.js b/docs/pages/joy-ui/react-sheet.js index 21dc16b0880f07..4f31b08e49e2bc 100644 --- a/docs/pages/joy-ui/react-sheet.js +++ b/docs/pages/joy-ui/react-sheet.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/sheet/sheet.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/sheet/sheet.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-skeleton.js b/docs/pages/joy-ui/react-skeleton.js index e83bee6a5d9ebe..46f2f813b41621 100644 --- a/docs/pages/joy-ui/react-skeleton.js +++ b/docs/pages/joy-ui/react-skeleton.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/skeleton/skeleton.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/skeleton/skeleton.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-slider.js b/docs/pages/joy-ui/react-slider.js index 32a5f0282bc428..cc0ccc6b971974 100644 --- a/docs/pages/joy-ui/react-slider.js +++ b/docs/pages/joy-ui/react-slider.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/slider/slider.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/slider/slider.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-snackbar.js b/docs/pages/joy-ui/react-snackbar.js index b35cb0721bc1a8..98688beb6216c6 100644 --- a/docs/pages/joy-ui/react-snackbar.js +++ b/docs/pages/joy-ui/react-snackbar.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/snackbar/snackbar.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/snackbar/snackbar.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-stack.js b/docs/pages/joy-ui/react-stack.js index 910d6262b397c4..e4c911dc35c519 100644 --- a/docs/pages/joy-ui/react-stack.js +++ b/docs/pages/joy-ui/react-stack.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/stack/stack.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/stack/stack.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-stepper.js b/docs/pages/joy-ui/react-stepper.js index c90999a595c48b..21902bef691ce7 100644 --- a/docs/pages/joy-ui/react-stepper.js +++ b/docs/pages/joy-ui/react-stepper.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/stepper/stepper.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/stepper/stepper.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-switch.js b/docs/pages/joy-ui/react-switch.js index 17d21b9eb53b60..e9d7432a1c4296 100644 --- a/docs/pages/joy-ui/react-switch.js +++ b/docs/pages/joy-ui/react-switch.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/switch/switch.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/switch/switch.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-table.js b/docs/pages/joy-ui/react-table.js index 77bc93dc767fbe..127756a3e5962c 100644 --- a/docs/pages/joy-ui/react-table.js +++ b/docs/pages/joy-ui/react-table.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/table/table.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/table/table.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-tabs.js b/docs/pages/joy-ui/react-tabs.js index e374da73a0647b..2e0b53d0dcfd08 100644 --- a/docs/pages/joy-ui/react-tabs.js +++ b/docs/pages/joy-ui/react-tabs.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/tabs/tabs.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/tabs/tabs.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-text-field.js b/docs/pages/joy-ui/react-text-field.js index 165116fb127c28..56399acfc639e7 100644 --- a/docs/pages/joy-ui/react-text-field.js +++ b/docs/pages/joy-ui/react-text-field.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/text-field/text-field.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/text-field/text-field.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-textarea.js b/docs/pages/joy-ui/react-textarea.js index 707490f2b5bd6a..ff14e72a046abc 100644 --- a/docs/pages/joy-ui/react-textarea.js +++ b/docs/pages/joy-ui/react-textarea.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/textarea/textarea.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/textarea/textarea.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-toggle-button-group.js b/docs/pages/joy-ui/react-toggle-button-group.js index 77838e16c93b31..5e8871b80b2cc4 100644 --- a/docs/pages/joy-ui/react-toggle-button-group.js +++ b/docs/pages/joy-ui/react-toggle-button-group.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/toggle-button-group/toggle-button-group.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/toggle-button-group/toggle-button-group.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-tooltip.js b/docs/pages/joy-ui/react-tooltip.js index 64f6b1a1e58af0..400ae4304b2242 100644 --- a/docs/pages/joy-ui/react-tooltip.js +++ b/docs/pages/joy-ui/react-tooltip.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/tooltip/tooltip.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/tooltip/tooltip.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/joy-ui/react-typography.js b/docs/pages/joy-ui/react-typography.js index d491aeaeb67cee..533d87ddd95783 100644 --- a/docs/pages/joy-ui/react-typography.js +++ b/docs/pages/joy-ui/react-typography.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/joy/components/typography/typography.md?@mui/markdown'; +import * as pageProps from 'docs/data/joy/components/typography/typography.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/about-the-lab.js b/docs/pages/material-ui/about-the-lab.js index 1fb4018fadb245..c0961474d0a02f 100644 --- a/docs/pages/material-ui/about-the-lab.js +++ b/docs/pages/material-ui/about-the-lab.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/about-the-lab/about-the-lab.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/about-the-lab/about-the-lab.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/all-components/index.js b/docs/pages/material-ui/all-components/index.js index a446209afbef55..202a1f5028b36c 100644 --- a/docs/pages/material-ui/all-components/index.js +++ b/docs/pages/material-ui/all-components/index.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/material/all-components/all-components.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/all-components/all-components.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/api/alert.json b/docs/pages/material-ui/api/alert.json index 6fea5908c00a95..24de72ee0b8fdf 100644 --- a/docs/pages/material-ui/api/alert.json +++ b/docs/pages/material-ui/api/alert.json @@ -99,6 +99,30 @@ "description": "Styles applied to the action wrapper element if `action` is provided.", "isGlobal": false }, + { + "key": "colorError", + "className": "MuiAlert-colorError", + "description": "Styles applied to the root element if `color=\"error\"`.", + "isGlobal": false + }, + { + "key": "colorInfo", + "className": "MuiAlert-colorInfo", + "description": "Styles applied to the root element if `color=\"info\"`.", + "isGlobal": false + }, + { + "key": "colorSuccess", + "className": "MuiAlert-colorSuccess", + "description": "Styles applied to the root element if `color=\"success\"`.", + "isGlobal": false + }, + { + "key": "colorWarning", + "className": "MuiAlert-colorWarning", + "description": "Styles applied to the root element if `color=\"warning\"`.", + "isGlobal": false + }, { "key": "filled", "className": "MuiAlert-filled", @@ -109,25 +133,29 @@ "key": "filledError", "className": "MuiAlert-filledError", "description": "Styles applied to the root element if `variant=\"filled\"` and `color=\"error\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "filledInfo", "className": "MuiAlert-filledInfo", "description": "Styles applied to the root element if `variant=\"filled\"` and `color=\"info\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "filledSuccess", "className": "MuiAlert-filledSuccess", "description": "Styles applied to the root element if `variant=\"filled\"` and `color=\"success\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "filledWarning", "className": "MuiAlert-filledWarning", - "description": "Styles applied to the root element if `variant=\"filled\"` and `color=\"warning\"`.", - "isGlobal": false + "description": "Styles applied to the root element if `variant=\"filled\"` and `color=\"warning\"`", + "isGlobal": false, + "isDeprecated": true }, { "key": "icon", @@ -151,25 +179,29 @@ "key": "outlinedError", "className": "MuiAlert-outlinedError", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"error\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedInfo", "className": "MuiAlert-outlinedInfo", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"info\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSuccess", "className": "MuiAlert-outlinedSuccess", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"success\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedWarning", "className": "MuiAlert-outlinedWarning", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"warning\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "root", @@ -187,25 +219,29 @@ "key": "standardError", "className": "MuiAlert-standardError", "description": "Styles applied to the root element if `variant=\"standard\"` and `color=\"error\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "standardInfo", "className": "MuiAlert-standardInfo", "description": "Styles applied to the root element if `variant=\"standard\"` and `color=\"info\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "standardSuccess", "className": "MuiAlert-standardSuccess", "description": "Styles applied to the root element if `variant=\"standard\"` and `color=\"success\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "standardWarning", "className": "MuiAlert-standardWarning", "description": "Styles applied to the root element if `variant=\"standard\"` and `color=\"warning\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true } ], "spread": true, diff --git a/docs/pages/material-ui/api/button.json b/docs/pages/material-ui/api/button.json index 24f3c460048143..04a03e76d983d5 100644 --- a/docs/pages/material-ui/api/button.json +++ b/docs/pages/material-ui/api/button.json @@ -46,12 +46,48 @@ "import { Button } from '@mui/material';" ], "classes": [ + { + "key": "colorError", + "className": "MuiButton-colorError", + "description": "Styles applied to the root element if `color=\"error\"`.", + "isGlobal": false + }, + { + "key": "colorInfo", + "className": "MuiButton-colorInfo", + "description": "Styles applied to the root element if `color=\"info\"`.", + "isGlobal": false + }, { "key": "colorInherit", "className": "MuiButton-colorInherit", "description": "Styles applied to the root element if `color=\"inherit\"`.", "isGlobal": false }, + { + "key": "colorPrimary", + "className": "MuiButton-colorPrimary", + "description": "Styles applied to the root element if `color=\"primary\"`.", + "isGlobal": false + }, + { + "key": "colorSecondary", + "className": "MuiButton-colorSecondary", + "description": "Styles applied to the root element if `color=\"secondary\"`.", + "isGlobal": false + }, + { + "key": "colorSuccess", + "className": "MuiButton-colorSuccess", + "description": "Styles applied to the root element if `color=\"success\"`.", + "isGlobal": false + }, + { + "key": "colorWarning", + "className": "MuiButton-colorWarning", + "description": "Styles applied to the root element if `color=\"warning\"`.", + "isGlobal": false + }, { "key": "contained", "className": "MuiButton-contained", @@ -62,61 +98,71 @@ "key": "containedError", "className": "MuiButton-containedError", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"error\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedInfo", "className": "MuiButton-containedInfo", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"info\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedInherit", "className": "MuiButton-containedInherit", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"inherit\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedPrimary", "className": "MuiButton-containedPrimary", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedSecondary", "className": "MuiButton-containedSecondary", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedSizeLarge", "className": "MuiButton-containedSizeLarge", "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"contained\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedSizeMedium", "className": "MuiButton-containedSizeMedium", "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"contained\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedSizeSmall", "className": "MuiButton-containedSizeSmall", "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"contained\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedSuccess", "className": "MuiButton-containedSuccess", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"success\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedWarning", "className": "MuiButton-containedWarning", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"warning\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "disabled", @@ -148,23 +194,32 @@ "description": "Styles applied to the root element if `fullWidth={true}`.", "isGlobal": false }, + { + "key": "icon", + "className": "MuiButton-icon", + "description": "Styles applied to the icon element if supplied", + "isGlobal": false + }, { "key": "iconSizeLarge", "className": "MuiButton-iconSizeLarge", "description": "Styles applied to the icon element if supplied and `size=\"large\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "iconSizeMedium", "className": "MuiButton-iconSizeMedium", "description": "Styles applied to the icon element if supplied and `size=\"medium\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "iconSizeSmall", "className": "MuiButton-iconSizeSmall", "description": "Styles applied to the icon element if supplied and `size=\"small\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlined", @@ -176,61 +231,71 @@ "key": "outlinedError", "className": "MuiButton-outlinedError", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"error\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedInfo", "className": "MuiButton-outlinedInfo", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"info\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedInherit", "className": "MuiButton-outlinedInherit", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"inherit\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedPrimary", "className": "MuiButton-outlinedPrimary", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSecondary", "className": "MuiButton-outlinedSecondary", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSizeLarge", "className": "MuiButton-outlinedSizeLarge", "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"outlined\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSizeMedium", "className": "MuiButton-outlinedSizeMedium", "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"outlined\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSizeSmall", "className": "MuiButton-outlinedSizeSmall", "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"outlined\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSuccess", "className": "MuiButton-outlinedSuccess", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"success\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedWarning", "className": "MuiButton-outlinedWarning", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"warning\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "root", @@ -272,61 +337,71 @@ "key": "textError", "className": "MuiButton-textError", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"error\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textInfo", "className": "MuiButton-textInfo", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"info\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textInherit", "className": "MuiButton-textInherit", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"inherit\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textPrimary", "className": "MuiButton-textPrimary", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSecondary", "className": "MuiButton-textSecondary", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSizeLarge", "className": "MuiButton-textSizeLarge", "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"text\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSizeMedium", "className": "MuiButton-textSizeMedium", "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"text\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSizeSmall", "className": "MuiButton-textSizeSmall", "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"text\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSuccess", "className": "MuiButton-textSuccess", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"success\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textWarning", "className": "MuiButton-textWarning", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"warning\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true } ], "spread": true, diff --git a/docs/pages/material-ui/api/chip.json b/docs/pages/material-ui/api/chip.json index a094e87167319b..1d3b02d127913a 100644 --- a/docs/pages/material-ui/api/chip.json +++ b/docs/pages/material-ui/api/chip.json @@ -53,25 +53,29 @@ "key": "avatarColorPrimary", "className": "MuiChip-avatarColorPrimary", "description": "Styles applied to the avatar element if `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "avatarColorSecondary", "className": "MuiChip-avatarColorSecondary", "description": "Styles applied to the avatar element if `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "avatarMedium", "className": "MuiChip-avatarMedium", "description": "Styles applied to the avatar element if `size=\"medium\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "avatarSmall", "className": "MuiChip-avatarSmall", "description": "Styles applied to the avatar element if `size=\"small\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "clickable", @@ -83,13 +87,15 @@ "key": "clickableColorPrimary", "className": "MuiChip-clickableColorPrimary", "description": "Styles applied to the root element if `onClick` and `color=\"primary\"` is defined or `clickable={true}`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "clickableColorSecondary", "className": "MuiChip-clickableColorSecondary", "description": "Styles applied to the root element if `onClick` and `color=\"secondary\"` is defined or `clickable={true}`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "colorError", @@ -137,13 +143,15 @@ "key": "deletableColorPrimary", "className": "MuiChip-deletableColorPrimary", "description": "Styles applied to the root element if `onDelete` and `color=\"primary\"` is defined.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "deletableColorSecondary", "className": "MuiChip-deletableColorSecondary", "description": "Styles applied to the root element if `onDelete` and `color=\"secondary\"` is defined.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "deleteIcon", @@ -154,50 +162,58 @@ { "key": "deleteIconColorPrimary", "className": "MuiChip-deleteIconColorPrimary", - "description": "Styles applied to the deleteIcon element if `color=\"primary\"` and `variant=\"filled\"`.", - "isGlobal": false + "description": "Styles applied to the deleteIcon element if `color=\"primary\"`.", + "isGlobal": false, + "isDeprecated": true }, { "key": "deleteIconColorSecondary", "className": "MuiChip-deleteIconColorSecondary", - "description": "Styles applied to the deleteIcon element if `color=\"secondary\"` and `variant=\"filled\"`.", - "isGlobal": false + "description": "Styles applied to the deleteIcon element if `color=\"secondary\"`.", + "isGlobal": false, + "isDeprecated": true }, { "key": "deleteIconFilledColorPrimary", "className": "MuiChip-deleteIconFilledColorPrimary", "description": "Styles applied to the deleteIcon element if `color=\"primary\"` and `variant=\"filled\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "deleteIconFilledColorSecondary", "className": "MuiChip-deleteIconFilledColorSecondary", "description": "Styles applied to the deleteIcon element if `color=\"secondary\"` and `variant=\"filled\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "deleteIconMedium", "className": "MuiChip-deleteIconMedium", "description": "Styles applied to the deleteIcon element if `size=\"medium\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "deleteIconOutlinedColorPrimary", "className": "MuiChip-deleteIconOutlinedColorPrimary", "description": "Styles applied to the deleteIcon element if `color=\"primary\"` and `variant=\"outlined\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "deleteIconOutlinedColorSecondary", "className": "MuiChip-deleteIconOutlinedColorSecondary", "description": "Styles applied to the deleteIcon element if `color=\"secondary\"` and `variant=\"outlined\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "deleteIconSmall", "className": "MuiChip-deleteIconSmall", "description": "Styles applied to the deleteIcon element if `size=\"small\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "disabled", @@ -215,13 +231,15 @@ "key": "filledPrimary", "className": "MuiChip-filledPrimary", "description": "Styles applied to the root element if `variant=\"filled\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "filledSecondary", "className": "MuiChip-filledSecondary", "description": "Styles applied to the root element if `variant=\"filled\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "focusVisible", @@ -239,25 +257,29 @@ "key": "iconColorPrimary", "className": "MuiChip-iconColorPrimary", "description": "Styles applied to the icon element if `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "iconColorSecondary", "className": "MuiChip-iconColorSecondary", "description": "Styles applied to the icon element if `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "iconMedium", "className": "MuiChip-iconMedium", "description": "Styles applied to the icon element if `size=\"medium\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "iconSmall", "className": "MuiChip-iconSmall", "description": "Styles applied to the icon element if `size=\"small\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "label", @@ -269,13 +291,15 @@ "key": "labelMedium", "className": "MuiChip-labelMedium", "description": "Styles applied to the label `span` element if `size=\"medium\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "labelSmall", "className": "MuiChip-labelSmall", "description": "Styles applied to the label `span` element if `size=\"small\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlined", @@ -287,13 +311,15 @@ "key": "outlinedPrimary", "className": "MuiChip-outlinedPrimary", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSecondary", "className": "MuiChip-outlinedSecondary", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "root", diff --git a/docs/pages/material-ui/api/collapse.json b/docs/pages/material-ui/api/collapse.json index 0dfe4e14b03505..88adc7e4f91873 100644 --- a/docs/pages/material-ui/api/collapse.json +++ b/docs/pages/material-ui/api/collapse.json @@ -84,7 +84,7 @@ "filename": "/packages/mui-material/src/Collapse/Collapse.js", "inheritance": { "component": "Transition", - "pathname": "http://reactcommunity.org/react-transition-group/transition/#Transition-props" + "pathname": "https://reactcommunity.org/react-transition-group/transition/#Transition-props" }, "demos": "
    ", "cssComponent": false diff --git a/docs/pages/material-ui/api/fade.json b/docs/pages/material-ui/api/fade.json index eed92160ada701..4485d3d1354503 100644 --- a/docs/pages/material-ui/api/fade.json +++ b/docs/pages/material-ui/api/fade.json @@ -28,7 +28,7 @@ "filename": "/packages/mui-material/src/Fade/Fade.js", "inheritance": { "component": "Transition", - "pathname": "http://reactcommunity.org/react-transition-group/transition/#Transition-props" + "pathname": "https://reactcommunity.org/react-transition-group/transition/#Transition-props" }, "demos": "", "cssComponent": false diff --git a/docs/pages/material-ui/api/grow.json b/docs/pages/material-ui/api/grow.json index 4e002c77f347ca..ec743654c137c1 100644 --- a/docs/pages/material-ui/api/grow.json +++ b/docs/pages/material-ui/api/grow.json @@ -28,7 +28,7 @@ "filename": "/packages/mui-material/src/Grow/Grow.js", "inheritance": { "component": "Transition", - "pathname": "http://reactcommunity.org/react-transition-group/transition/#Transition-props" + "pathname": "https://reactcommunity.org/react-transition-group/transition/#Transition-props" }, "demos": "", "cssComponent": false diff --git a/docs/pages/material-ui/api/loading-button.json b/docs/pages/material-ui/api/loading-button.json index cd04eeaa8bd641..555074c1ad71b8 100644 --- a/docs/pages/material-ui/api/loading-button.json +++ b/docs/pages/material-ui/api/loading-button.json @@ -36,12 +36,48 @@ "import { LoadingButton } from '@mui/lab';" ], "classes": [ + { + "key": "colorError", + "className": "MuiLoadingButton-colorError", + "description": "Styles applied to the root element if `color=\"error\"`.", + "isGlobal": false + }, + { + "key": "colorInfo", + "className": "MuiLoadingButton-colorInfo", + "description": "Styles applied to the root element if `color=\"info\"`.", + "isGlobal": false + }, { "key": "colorInherit", "className": "MuiLoadingButton-colorInherit", "description": "Styles applied to the root element if `color=\"inherit\"`.", "isGlobal": false }, + { + "key": "colorPrimary", + "className": "MuiLoadingButton-colorPrimary", + "description": "Styles applied to the root element if `color=\"primary\"`.", + "isGlobal": false + }, + { + "key": "colorSecondary", + "className": "MuiLoadingButton-colorSecondary", + "description": "Styles applied to the root element if `color=\"secondary\"`.", + "isGlobal": false + }, + { + "key": "colorSuccess", + "className": "MuiLoadingButton-colorSuccess", + "description": "Styles applied to the root element if `color=\"success\"`.", + "isGlobal": false + }, + { + "key": "colorWarning", + "className": "MuiLoadingButton-colorWarning", + "description": "Styles applied to the root element if `color=\"warning\"`.", + "isGlobal": false + }, { "key": "contained", "className": "MuiLoadingButton-contained", @@ -52,61 +88,71 @@ "key": "containedError", "className": "MuiLoadingButton-containedError", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"error\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedInfo", "className": "MuiLoadingButton-containedInfo", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"info\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedInherit", "className": "MuiLoadingButton-containedInherit", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"inherit\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedPrimary", "className": "MuiLoadingButton-containedPrimary", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedSecondary", "className": "MuiLoadingButton-containedSecondary", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedSizeLarge", "className": "MuiLoadingButton-containedSizeLarge", "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"contained\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedSizeMedium", "className": "MuiLoadingButton-containedSizeMedium", "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"contained\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedSizeSmall", "className": "MuiLoadingButton-containedSizeSmall", "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"contained\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedSuccess", "className": "MuiLoadingButton-containedSuccess", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"success\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "containedWarning", "className": "MuiLoadingButton-containedWarning", "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"warning\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "disabled", @@ -144,23 +190,32 @@ "description": "Styles applied to the root element if `fullWidth={true}`.", "isGlobal": false }, + { + "key": "icon", + "className": "MuiLoadingButton-icon", + "description": "Styles applied to the icon element if supplied", + "isGlobal": false + }, { "key": "iconSizeLarge", "className": "MuiLoadingButton-iconSizeLarge", "description": "Styles applied to the icon element if supplied and `size=\"large\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "iconSizeMedium", "className": "MuiLoadingButton-iconSizeMedium", "description": "Styles applied to the icon element if supplied and `size=\"medium\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "iconSizeSmall", "className": "MuiLoadingButton-iconSizeSmall", "description": "Styles applied to the icon element if supplied and `size=\"small\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "loading", @@ -202,61 +257,71 @@ "key": "outlinedError", "className": "MuiLoadingButton-outlinedError", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"error\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedInfo", "className": "MuiLoadingButton-outlinedInfo", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"info\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedInherit", "className": "MuiLoadingButton-outlinedInherit", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"inherit\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedPrimary", "className": "MuiLoadingButton-outlinedPrimary", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSecondary", "className": "MuiLoadingButton-outlinedSecondary", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSizeLarge", "className": "MuiLoadingButton-outlinedSizeLarge", "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"outlined\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSizeMedium", "className": "MuiLoadingButton-outlinedSizeMedium", "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"outlined\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSizeSmall", "className": "MuiLoadingButton-outlinedSizeSmall", "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"outlined\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSuccess", "className": "MuiLoadingButton-outlinedSuccess", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"success\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedWarning", "className": "MuiLoadingButton-outlinedWarning", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"warning\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "root", @@ -304,61 +369,71 @@ "key": "textError", "className": "MuiLoadingButton-textError", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"error\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textInfo", "className": "MuiLoadingButton-textInfo", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"info\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textInherit", "className": "MuiLoadingButton-textInherit", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"inherit\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textPrimary", "className": "MuiLoadingButton-textPrimary", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSecondary", "className": "MuiLoadingButton-textSecondary", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSizeLarge", "className": "MuiLoadingButton-textSizeLarge", "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"text\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSizeMedium", "className": "MuiLoadingButton-textSizeMedium", "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"text\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSizeSmall", "className": "MuiLoadingButton-textSizeSmall", "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"text\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSuccess", "className": "MuiLoadingButton-textSuccess", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"success\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textWarning", "className": "MuiLoadingButton-textWarning", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"warning\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true } ], "spread": true, diff --git a/docs/pages/material-ui/api/slide.json b/docs/pages/material-ui/api/slide.json index 41cf3f9da579ea..49757c12dba115 100644 --- a/docs/pages/material-ui/api/slide.json +++ b/docs/pages/material-ui/api/slide.json @@ -39,7 +39,7 @@ "filename": "/packages/mui-material/src/Slide/Slide.js", "inheritance": { "component": "Transition", - "pathname": "http://reactcommunity.org/react-transition-group/transition/#Transition-props" + "pathname": "https://reactcommunity.org/react-transition-group/transition/#Transition-props" }, "demos": "", "cssComponent": false diff --git a/docs/pages/material-ui/api/slider.json b/docs/pages/material-ui/api/slider.json index e3dc8abbd37c96..8ff7c7438a13e0 100644 --- a/docs/pages/material-ui/api/slider.json +++ b/docs/pages/material-ui/api/slider.json @@ -16,14 +16,18 @@ "name": "shape", "description": "{ Input?: elementType, Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType }" }, - "default": "{}" + "default": "{}", + "deprecated": true, + "deprecationInfo": "use the slots prop instead. This prop will be removed in v7. How to migrate." }, "componentsProps": { "type": { "name": "shape", "description": "{ input?: func
    | object, mark?: func
    | object, markLabel?: func
    | object, rail?: func
    | object, root?: func
    | object, thumb?: func
    | object, track?: func
    | object, valueLabel?: func
    | { children?: element, className?: string, open?: bool, style?: object, value?: number, valueLabelDisplay?: 'auto'
    | 'off'
    | 'on' } }" }, - "default": "{}" + "default": "{}", + "deprecated": true, + "deprecationInfo": "use the slotProps prop instead. This prop will be removed in v7. How to migrate." }, "defaultValue": { "type": { "name": "union", "description": "Array<number>
    | number" } diff --git a/docs/pages/material-ui/api/zoom.json b/docs/pages/material-ui/api/zoom.json index 4754d9ec603341..37f5fe026fd183 100644 --- a/docs/pages/material-ui/api/zoom.json +++ b/docs/pages/material-ui/api/zoom.json @@ -28,7 +28,7 @@ "filename": "/packages/mui-material/src/Zoom/Zoom.js", "inheritance": { "component": "Transition", - "pathname": "http://reactcommunity.org/react-transition-group/transition/#Transition-props" + "pathname": "https://reactcommunity.org/react-transition-group/transition/#Transition-props" }, "demos": "", "cssComponent": false diff --git a/docs/pages/material-ui/customization/breakpoints.js b/docs/pages/material-ui/customization/breakpoints.js index 3775eba2144f64..32016c39448d4a 100644 --- a/docs/pages/material-ui/customization/breakpoints.js +++ b/docs/pages/material-ui/customization/breakpoints.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/customization/breakpoints/breakpoints.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/customization/breakpoints/breakpoints.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/customization/color.js b/docs/pages/material-ui/customization/color.js index 00e22ea909277d..4380640e48fcaf 100644 --- a/docs/pages/material-ui/customization/color.js +++ b/docs/pages/material-ui/customization/color.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/customization/color/color.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/customization/color/color.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/customization/creating-themed-components.js b/docs/pages/material-ui/customization/creating-themed-components.js index 39cd4846d471fa..48c2bbdefeea2d 100644 --- a/docs/pages/material-ui/customization/creating-themed-components.js +++ b/docs/pages/material-ui/customization/creating-themed-components.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/customization/creating-themed-components/creating-themed-components.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/customization/creating-themed-components/creating-themed-components.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/customization/dark-mode.js b/docs/pages/material-ui/customization/dark-mode.js index 3d064c6b5e91c2..fe44c8c352ddd1 100644 --- a/docs/pages/material-ui/customization/dark-mode.js +++ b/docs/pages/material-ui/customization/dark-mode.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/customization/dark-mode/dark-mode.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/customization/dark-mode/dark-mode.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/customization/default-theme.js b/docs/pages/material-ui/customization/default-theme.js index de6a628f17fe7c..34828889b9da26 100644 --- a/docs/pages/material-ui/customization/default-theme.js +++ b/docs/pages/material-ui/customization/default-theme.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/customization/default-theme/default-theme.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/customization/default-theme/default-theme.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/customization/density.js b/docs/pages/material-ui/customization/density.js index 486bb3f32f5eb1..e54fceb5f618e2 100644 --- a/docs/pages/material-ui/customization/density.js +++ b/docs/pages/material-ui/customization/density.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/customization/density/density.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/customization/density/density.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/customization/how-to-customize.js b/docs/pages/material-ui/customization/how-to-customize.js index 18fac496c1b4ad..dd9518fb88606c 100644 --- a/docs/pages/material-ui/customization/how-to-customize.js +++ b/docs/pages/material-ui/customization/how-to-customize.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/customization/how-to-customize/how-to-customize.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/customization/how-to-customize/how-to-customize.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/customization/palette.js b/docs/pages/material-ui/customization/palette.js index 224200988eae1d..72b98c32b4c3d9 100644 --- a/docs/pages/material-ui/customization/palette.js +++ b/docs/pages/material-ui/customization/palette.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/customization/palette/palette.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/customization/palette/palette.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/customization/right-to-left.js b/docs/pages/material-ui/customization/right-to-left.js index 36b48f19d38dca..e1fc6599994074 100644 --- a/docs/pages/material-ui/customization/right-to-left.js +++ b/docs/pages/material-ui/customization/right-to-left.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/customization/right-to-left/right-to-left.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/customization/right-to-left/right-to-left.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/customization/shadow-dom.js b/docs/pages/material-ui/customization/shadow-dom.js index 09e0eaa5b9bb6c..a8d939a13a7069 100644 --- a/docs/pages/material-ui/customization/shadow-dom.js +++ b/docs/pages/material-ui/customization/shadow-dom.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/customization/shadow-dom/shadow-dom.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/customization/shadow-dom/shadow-dom.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/customization/spacing.js b/docs/pages/material-ui/customization/spacing.js index 962894fa7087f5..c9f5971b86cd3c 100644 --- a/docs/pages/material-ui/customization/spacing.js +++ b/docs/pages/material-ui/customization/spacing.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/customization/spacing/spacing.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/customization/spacing/spacing.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/customization/theme-components.js b/docs/pages/material-ui/customization/theme-components.js index 606b9b075c971d..6200a9b00427f4 100644 --- a/docs/pages/material-ui/customization/theme-components.js +++ b/docs/pages/material-ui/customization/theme-components.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/customization/theme-components/theme-components.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/customization/theme-components/theme-components.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/customization/theming.js b/docs/pages/material-ui/customization/theming.js index 2feb3aa4f50143..35d36d6a3d2290 100644 --- a/docs/pages/material-ui/customization/theming.js +++ b/docs/pages/material-ui/customization/theming.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/customization/theming/theming.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/customization/theming/theming.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/customization/transitions.js b/docs/pages/material-ui/customization/transitions.js index 9ecfd14c9a8655..d7055f65ea2f39 100644 --- a/docs/pages/material-ui/customization/transitions.js +++ b/docs/pages/material-ui/customization/transitions.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/customization/transitions/transitions.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/customization/transitions/transitions.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/customization/typography.js b/docs/pages/material-ui/customization/typography.js index c5f04c016f03ee..1d0dd17196c7c8 100644 --- a/docs/pages/material-ui/customization/typography.js +++ b/docs/pages/material-ui/customization/typography.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/customization/typography/typography.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/customization/typography/typography.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/customization/z-index.js b/docs/pages/material-ui/customization/z-index.js index d97ddb72e5bbba..9510471b06f32f 100644 --- a/docs/pages/material-ui/customization/z-index.js +++ b/docs/pages/material-ui/customization/z-index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/customization/z-index/z-index.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/customization/z-index/z-index.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/discover-more/backers.js b/docs/pages/material-ui/discover-more/backers.js index 97d3c07b211523..41b72e7f4658fc 100644 --- a/docs/pages/material-ui/discover-more/backers.js +++ b/docs/pages/material-ui/discover-more/backers.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/discover-more/backers/backers.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/discover-more/backers/backers.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/discover-more/changelog.js b/docs/pages/material-ui/discover-more/changelog.js index d746b5f9ef88bd..b95dd814039022 100644 --- a/docs/pages/material-ui/discover-more/changelog.js +++ b/docs/pages/material-ui/discover-more/changelog.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/discover-more/changelog/changelog.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/discover-more/changelog/changelog.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/discover-more/design-kits.js b/docs/pages/material-ui/discover-more/design-kits.js index 5146d890385bdc..61f8faebcc7007 100644 --- a/docs/pages/material-ui/discover-more/design-kits.js +++ b/docs/pages/material-ui/discover-more/design-kits.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/discover-more/design-kits/design-kits.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/discover-more/design-kits/design-kits.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/discover-more/related-projects.js b/docs/pages/material-ui/discover-more/related-projects.js index 4d0ee1ecd4891c..27309f18134528 100644 --- a/docs/pages/material-ui/discover-more/related-projects.js +++ b/docs/pages/material-ui/discover-more/related-projects.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/discover-more/related-projects/related-projects.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/discover-more/related-projects/related-projects.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/discover-more/roadmap.js b/docs/pages/material-ui/discover-more/roadmap.js index dcad958f7791e7..d0f18c55aa0e3c 100644 --- a/docs/pages/material-ui/discover-more/roadmap.js +++ b/docs/pages/material-ui/discover-more/roadmap.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/discover-more/roadmap/roadmap.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/discover-more/roadmap/roadmap.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/discover-more/showcase.js b/docs/pages/material-ui/discover-more/showcase.js index 9ee393aa705b47..b2822ae551ffa4 100644 --- a/docs/pages/material-ui/discover-more/showcase.js +++ b/docs/pages/material-ui/discover-more/showcase.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/discover-more/showcase/showcase.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/discover-more/showcase/showcase.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/discover-more/vision.js b/docs/pages/material-ui/discover-more/vision.js index fc6b9446976ed5..f19f6448f20261 100644 --- a/docs/pages/material-ui/discover-more/vision.js +++ b/docs/pages/material-ui/discover-more/vision.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/discover-more/vision/vision.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/discover-more/vision/vision.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/experimental-api/classname-generator.js b/docs/pages/material-ui/experimental-api/classname-generator.js index 7eb0297d7684e5..0c77126257a0a2 100644 --- a/docs/pages/material-ui/experimental-api/classname-generator.js +++ b/docs/pages/material-ui/experimental-api/classname-generator.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/experimental-api/classname-generator/classname-generator.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/experimental-api/classname-generator/classname-generator.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/experimental-api/css-theme-variables/customization.js b/docs/pages/material-ui/experimental-api/css-theme-variables/customization.js index 1f511eadea3bb8..53d9eec8396886 100644 --- a/docs/pages/material-ui/experimental-api/css-theme-variables/customization.js +++ b/docs/pages/material-ui/experimental-api/css-theme-variables/customization.js @@ -4,7 +4,7 @@ import { demos, docs, demoComponents, -} from 'docs/data/material/experimental-api/css-theme-variables/customization.md?@mui/markdown'; +} from 'docs/data/material/experimental-api/css-theme-variables/customization.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/experimental-api/css-theme-variables/migration.js b/docs/pages/material-ui/experimental-api/css-theme-variables/migration.js index c4687ee11483c2..a196acdc43008c 100644 --- a/docs/pages/material-ui/experimental-api/css-theme-variables/migration.js +++ b/docs/pages/material-ui/experimental-api/css-theme-variables/migration.js @@ -4,7 +4,7 @@ import { demos, docs, demoComponents, -} from 'docs/data/material/experimental-api/css-theme-variables/migration.md?@mui/markdown'; +} from 'docs/data/material/experimental-api/css-theme-variables/migration.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/experimental-api/css-theme-variables/overview.js b/docs/pages/material-ui/experimental-api/css-theme-variables/overview.js index f7081a3b941604..4eeebce4de29b6 100644 --- a/docs/pages/material-ui/experimental-api/css-theme-variables/overview.js +++ b/docs/pages/material-ui/experimental-api/css-theme-variables/overview.js @@ -4,7 +4,7 @@ import { demos, docs, demoComponents, -} from 'docs/data/material/experimental-api/css-theme-variables/overview.md?@mui/markdown'; +} from 'docs/data/material/experimental-api/css-theme-variables/overview.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/experimental-api/css-theme-variables/usage.js b/docs/pages/material-ui/experimental-api/css-theme-variables/usage.js index 50811f2f187adf..497c44f45569f2 100644 --- a/docs/pages/material-ui/experimental-api/css-theme-variables/usage.js +++ b/docs/pages/material-ui/experimental-api/css-theme-variables/usage.js @@ -4,7 +4,7 @@ import { demos, docs, demoComponents, -} from 'docs/data/material/experimental-api/css-theme-variables/usage/usage.md?@mui/markdown'; +} from 'docs/data/material/experimental-api/css-theme-variables/usage/usage.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/getting-started/design-resources.js b/docs/pages/material-ui/getting-started/design-resources.js index e48de1c3e2c1c0..4df5b129ae956d 100644 --- a/docs/pages/material-ui/getting-started/design-resources.js +++ b/docs/pages/material-ui/getting-started/design-resources.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/getting-started/design-resources/design-resources.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/getting-started/design-resources/design-resources.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/getting-started/example-projects.js b/docs/pages/material-ui/getting-started/example-projects.js index 3abd1ff2e6bf0c..8380b61398e9d1 100644 --- a/docs/pages/material-ui/getting-started/example-projects.js +++ b/docs/pages/material-ui/getting-started/example-projects.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/getting-started/example-projects/example-projects.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/getting-started/example-projects/example-projects.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/getting-started/faq.js b/docs/pages/material-ui/getting-started/faq.js index f98090f5b2967a..0d7f2e1a29e3ee 100644 --- a/docs/pages/material-ui/getting-started/faq.js +++ b/docs/pages/material-ui/getting-started/faq.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/getting-started/faq/faq.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/getting-started/faq/faq.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/getting-started/index.js b/docs/pages/material-ui/getting-started/index.js index 7bffc773ae0a09..17bc425d6e0d75 100644 --- a/docs/pages/material-ui/getting-started/index.js +++ b/docs/pages/material-ui/getting-started/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/getting-started/overview/overview.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/getting-started/overview/overview.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/getting-started/installation.js b/docs/pages/material-ui/getting-started/installation.js index bce5b8577ecc9e..55da0437bf56e0 100644 --- a/docs/pages/material-ui/getting-started/installation.js +++ b/docs/pages/material-ui/getting-started/installation.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/getting-started/installation/installation.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/getting-started/installation/installation.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/getting-started/learn.js b/docs/pages/material-ui/getting-started/learn.js index b21862aabd310f..5d647ce0cda871 100644 --- a/docs/pages/material-ui/getting-started/learn.js +++ b/docs/pages/material-ui/getting-started/learn.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/getting-started/learn/learn.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/getting-started/learn/learn.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/getting-started/support.js b/docs/pages/material-ui/getting-started/support.js index 46bdfbcccce930..f5e7780fb15c6f 100644 --- a/docs/pages/material-ui/getting-started/support.js +++ b/docs/pages/material-ui/getting-started/support.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/getting-started/support/support.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/getting-started/support/support.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/getting-started/supported-components.js b/docs/pages/material-ui/getting-started/supported-components.js index a0505464fef9f7..132ec6792093ff 100644 --- a/docs/pages/material-ui/getting-started/supported-components.js +++ b/docs/pages/material-ui/getting-started/supported-components.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/getting-started/supported-components/supported-components.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/getting-started/supported-components/supported-components.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/getting-started/supported-platforms.js b/docs/pages/material-ui/getting-started/supported-platforms.js index 90e09db8d80897..224b83d66959ef 100644 --- a/docs/pages/material-ui/getting-started/supported-platforms.js +++ b/docs/pages/material-ui/getting-started/supported-platforms.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/getting-started/supported-platforms/supported-platforms.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/getting-started/supported-platforms/supported-platforms.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/getting-started/templates.js b/docs/pages/material-ui/getting-started/templates.js index f8b46d78daebbf..13df4a1a427f21 100644 --- a/docs/pages/material-ui/getting-started/templates.js +++ b/docs/pages/material-ui/getting-started/templates.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/getting-started/templates/templates.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/getting-started/templates/templates.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/getting-started/usage.js b/docs/pages/material-ui/getting-started/usage.js index 0a928ca0c7401e..38def8026bb461 100644 --- a/docs/pages/material-ui/getting-started/usage.js +++ b/docs/pages/material-ui/getting-started/usage.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/getting-started/usage/usage.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/getting-started/usage/usage.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/guides/api.js b/docs/pages/material-ui/guides/api.js index 7571826ad0bd51..ed731dc2fe4579 100644 --- a/docs/pages/material-ui/guides/api.js +++ b/docs/pages/material-ui/guides/api.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/guides/api/api.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/guides/api/api.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/guides/composition.js b/docs/pages/material-ui/guides/composition.js index 6e34ef9dce3ae8..47b341ba69f996 100644 --- a/docs/pages/material-ui/guides/composition.js +++ b/docs/pages/material-ui/guides/composition.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/guides/composition/composition.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/guides/composition/composition.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/guides/content-security-policy.js b/docs/pages/material-ui/guides/content-security-policy.js index 5ee82f7ccfeee4..76c0629479ba16 100644 --- a/docs/pages/material-ui/guides/content-security-policy.js +++ b/docs/pages/material-ui/guides/content-security-policy.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/guides/content-security-policy/content-security-policy.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/guides/content-security-policy/content-security-policy.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/guides/localization.js b/docs/pages/material-ui/guides/localization.js index d8b4164db63edd..efd949808392e4 100644 --- a/docs/pages/material-ui/guides/localization.js +++ b/docs/pages/material-ui/guides/localization.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/guides/localization/localization.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/guides/localization/localization.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/guides/material-3-components.js b/docs/pages/material-ui/guides/material-3-components.js index 7e673377a54685..656ad19c0f7a11 100644 --- a/docs/pages/material-ui/guides/material-3-components.js +++ b/docs/pages/material-ui/guides/material-3-components.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/guides/material-3-components/material-3-components.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/guides/material-3-components/material-3-components.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/guides/minimizing-bundle-size.js b/docs/pages/material-ui/guides/minimizing-bundle-size.js index 7830d71603a29e..e9599495f5208f 100644 --- a/docs/pages/material-ui/guides/minimizing-bundle-size.js +++ b/docs/pages/material-ui/guides/minimizing-bundle-size.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/guides/responsive-ui.js b/docs/pages/material-ui/guides/responsive-ui.js index b7089c39c11e36..2efed429fe8598 100644 --- a/docs/pages/material-ui/guides/responsive-ui.js +++ b/docs/pages/material-ui/guides/responsive-ui.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/guides/responsive-ui/responsive-ui.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/guides/responsive-ui/responsive-ui.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/guides/server-rendering.js b/docs/pages/material-ui/guides/server-rendering.js index 036b9d343b1b2c..c80ee2da7234ab 100644 --- a/docs/pages/material-ui/guides/server-rendering.js +++ b/docs/pages/material-ui/guides/server-rendering.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/guides/server-rendering/server-rendering.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/guides/server-rendering/server-rendering.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/guides/testing.js b/docs/pages/material-ui/guides/testing.js index 8e0daf7afc8630..dc32b12a9180a5 100644 --- a/docs/pages/material-ui/guides/testing.js +++ b/docs/pages/material-ui/guides/testing.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/guides/testing/testing.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/guides/testing/testing.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/guides/typescript.js b/docs/pages/material-ui/guides/typescript.js index 1485a3509aa7f7..232291530cb117 100644 --- a/docs/pages/material-ui/guides/typescript.js +++ b/docs/pages/material-ui/guides/typescript.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/guides/typescript/typescript.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/guides/typescript/typescript.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/icons.js b/docs/pages/material-ui/icons.js index a352677ec0bdbc..567b92d1ef1e9c 100644 --- a/docs/pages/material-ui/icons.js +++ b/docs/pages/material-ui/icons.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/icons/icons.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/icons/icons.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/integrations/interoperability.js b/docs/pages/material-ui/integrations/interoperability.js index dd2823147f01b2..05973dd932fc8d 100644 --- a/docs/pages/material-ui/integrations/interoperability.js +++ b/docs/pages/material-ui/integrations/interoperability.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/integrations/interoperability/interoperability.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/integrations/interoperability/interoperability.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/integrations/nextjs.js b/docs/pages/material-ui/integrations/nextjs.js index 621122de6fbcea..55b628e3587b36 100644 --- a/docs/pages/material-ui/integrations/nextjs.js +++ b/docs/pages/material-ui/integrations/nextjs.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/integrations/nextjs/nextjs.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/integrations/nextjs/nextjs.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/integrations/routing.js b/docs/pages/material-ui/integrations/routing.js index 8391d52782cff2..9da65f0fc0d4cd 100644 --- a/docs/pages/material-ui/integrations/routing.js +++ b/docs/pages/material-ui/integrations/routing.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/integrations/routing/routing.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/integrations/routing/routing.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/integrations/styled-components.js b/docs/pages/material-ui/integrations/styled-components.js index 5e0b85f89d0f10..a5f033720b744b 100644 --- a/docs/pages/material-ui/integrations/styled-components.js +++ b/docs/pages/material-ui/integrations/styled-components.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/integrations/styled-components/styled-components.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/integrations/styled-components/styled-components.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/integrations/theme-scoping.js b/docs/pages/material-ui/integrations/theme-scoping.js index 0039e3db6ae368..f77bc5a019e0a1 100644 --- a/docs/pages/material-ui/integrations/theme-scoping.js +++ b/docs/pages/material-ui/integrations/theme-scoping.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/integrations/theme-scoping/theme-scoping.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/integrations/theme-scoping/theme-scoping.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/material-icons.js b/docs/pages/material-ui/material-icons.js index d408a15f74d935..8bdbc9d6729753 100644 --- a/docs/pages/material-ui/material-icons.js +++ b/docs/pages/material-ui/material-icons.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/material-icons/material-icons.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/material-icons/material-icons.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/migration/migrating-from-deprecated-apis.js b/docs/pages/material-ui/migration/migrating-from-deprecated-apis.js index dfba929b2b1aff..c81d9d8ca4b56f 100644 --- a/docs/pages/material-ui/migration/migrating-from-deprecated-apis.js +++ b/docs/pages/material-ui/migration/migrating-from-deprecated-apis.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/migration/migrating-from-jss.js b/docs/pages/material-ui/migration/migrating-from-jss.js index 898f1052f1f4ff..59c7e953f164f6 100644 --- a/docs/pages/material-ui/migration/migrating-from-jss.js +++ b/docs/pages/material-ui/migration/migrating-from-jss.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/migration/migration-v4/migrating-from-jss.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/migration/migration-v4/migrating-from-jss.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/migration/migration-grid-v2.js b/docs/pages/material-ui/migration/migration-grid-v2.js index 892375f77fb8bd..c318519acb837e 100644 --- a/docs/pages/material-ui/migration/migration-grid-v2.js +++ b/docs/pages/material-ui/migration/migration-grid-v2.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/migration/migration-grid-v2/migration-grid-v2.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/migration/migration-grid-v2/migration-grid-v2.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/migration/migration-v0x.js b/docs/pages/material-ui/migration/migration-v0x.js index 786bdfde9c0950..091c721df1ea9c 100644 --- a/docs/pages/material-ui/migration/migration-v0x.js +++ b/docs/pages/material-ui/migration/migration-v0x.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/migration/migration-v0x/migration-v0x.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/migration/migration-v0x/migration-v0x.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/migration/migration-v3.js b/docs/pages/material-ui/migration/migration-v3.js index 2bbfd72d720a95..03bb49dd0b71a9 100644 --- a/docs/pages/material-ui/migration/migration-v3.js +++ b/docs/pages/material-ui/migration/migration-v3.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/migration/migration-v3/migration-v3.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/migration/migration-v3/migration-v3.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/migration/migration-v4.js b/docs/pages/material-ui/migration/migration-v4.js index 4ddf3259b8b371..b6a99a5585f928 100644 --- a/docs/pages/material-ui/migration/migration-v4.js +++ b/docs/pages/material-ui/migration/migration-v4.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/migration/migration-v4/migration-v4.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/migration/migration-v4/migration-v4.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/migration/pickers-migration.js b/docs/pages/material-ui/migration/pickers-migration.js index 3feafabb9a2021..492ab82c347442 100644 --- a/docs/pages/material-ui/migration/pickers-migration.js +++ b/docs/pages/material-ui/migration/pickers-migration.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/migration/pickers-migration/pickers-migration.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/migration/pickers-migration/pickers-migration.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/migration/troubleshooting.js b/docs/pages/material-ui/migration/troubleshooting.js index ff5fad560cd923..16a2bc71f51ab2 100644 --- a/docs/pages/material-ui/migration/troubleshooting.js +++ b/docs/pages/material-ui/migration/troubleshooting.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/migration/migration-v4/troubleshooting.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/migration/migration-v4/troubleshooting.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/migration/v5-component-changes.js b/docs/pages/material-ui/migration/v5-component-changes.js index 952b2f7868ab05..d0a7a8d954b2be 100644 --- a/docs/pages/material-ui/migration/v5-component-changes.js +++ b/docs/pages/material-ui/migration/v5-component-changes.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/migration/migration-v4/v5-component-changes.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/migration/migration-v4/v5-component-changes.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/migration/v5-style-changes.js b/docs/pages/material-ui/migration/v5-style-changes.js index f3931f25342d07..d1682ab2a521ea 100644 --- a/docs/pages/material-ui/migration/v5-style-changes.js +++ b/docs/pages/material-ui/migration/v5-style-changes.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/migration/migration-v4/v5-style-changes.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/migration/migration-v4/v5-style-changes.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-accordion.js b/docs/pages/material-ui/react-accordion.js index 1735af20f6173a..26291b13befe10 100644 --- a/docs/pages/material-ui/react-accordion.js +++ b/docs/pages/material-ui/react-accordion.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/accordion/accordion.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/accordion/accordion.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-alert.js b/docs/pages/material-ui/react-alert.js index 9485efd6e31c0c..84552123aacd05 100644 --- a/docs/pages/material-ui/react-alert.js +++ b/docs/pages/material-ui/react-alert.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/alert/alert.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/alert/alert.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-app-bar.js b/docs/pages/material-ui/react-app-bar.js index 6bbde872c3792d..2a58a66711a75c 100644 --- a/docs/pages/material-ui/react-app-bar.js +++ b/docs/pages/material-ui/react-app-bar.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/app-bar/app-bar.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/app-bar/app-bar.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-autocomplete.js b/docs/pages/material-ui/react-autocomplete.js index 01c4736311e72b..1ec006a4f20a34 100644 --- a/docs/pages/material-ui/react-autocomplete.js +++ b/docs/pages/material-ui/react-autocomplete.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/autocomplete/autocomplete.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/autocomplete/autocomplete.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-avatar.js b/docs/pages/material-ui/react-avatar.js index e8c3f4a63420a3..0c74ca45a6b3d7 100644 --- a/docs/pages/material-ui/react-avatar.js +++ b/docs/pages/material-ui/react-avatar.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/avatars/avatars.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/avatars/avatars.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-backdrop.js b/docs/pages/material-ui/react-backdrop.js index 2b0632cb58c837..cac8c8788807d3 100644 --- a/docs/pages/material-ui/react-backdrop.js +++ b/docs/pages/material-ui/react-backdrop.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/backdrop/backdrop.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/backdrop/backdrop.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-badge.js b/docs/pages/material-ui/react-badge.js index 4290095f4cc233..096d87c87f47f8 100644 --- a/docs/pages/material-ui/react-badge.js +++ b/docs/pages/material-ui/react-badge.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/badges/badges.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/badges/badges.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-bottom-navigation.js b/docs/pages/material-ui/react-bottom-navigation.js index 36ed617cad5561..edefefdea6dbce 100644 --- a/docs/pages/material-ui/react-bottom-navigation.js +++ b/docs/pages/material-ui/react-bottom-navigation.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/bottom-navigation/bottom-navigation.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/bottom-navigation/bottom-navigation.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-box.js b/docs/pages/material-ui/react-box.js index 9ac1c08bb1475d..e9439033fd229e 100644 --- a/docs/pages/material-ui/react-box.js +++ b/docs/pages/material-ui/react-box.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/box/box.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/box/box.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-breadcrumbs.js b/docs/pages/material-ui/react-breadcrumbs.js index fc0dca07bdb455..0cd1f21647d87d 100644 --- a/docs/pages/material-ui/react-breadcrumbs.js +++ b/docs/pages/material-ui/react-breadcrumbs.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/breadcrumbs/breadcrumbs.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/breadcrumbs/breadcrumbs.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-button-group.js b/docs/pages/material-ui/react-button-group.js index cf9f01e173b02a..e80f999ccf2062 100644 --- a/docs/pages/material-ui/react-button-group.js +++ b/docs/pages/material-ui/react-button-group.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/material/components/button-group/button-group.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/button-group/button-group.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-button.js b/docs/pages/material-ui/react-button.js index 411efdc50dde0e..586ee3f38098a6 100644 --- a/docs/pages/material-ui/react-button.js +++ b/docs/pages/material-ui/react-button.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/material/components/buttons/buttons.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/buttons/buttons.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-card.js b/docs/pages/material-ui/react-card.js index d994a1ab32d2c6..67fa766a02990f 100644 --- a/docs/pages/material-ui/react-card.js +++ b/docs/pages/material-ui/react-card.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/cards/cards.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/cards/cards.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-checkbox.js b/docs/pages/material-ui/react-checkbox.js index 07f95a886d84a4..16ebde8c0e0a9a 100644 --- a/docs/pages/material-ui/react-checkbox.js +++ b/docs/pages/material-ui/react-checkbox.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/checkboxes/checkboxes.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/checkboxes/checkboxes.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-chip.js b/docs/pages/material-ui/react-chip.js index fe8b055330bd13..548d240e966a38 100644 --- a/docs/pages/material-ui/react-chip.js +++ b/docs/pages/material-ui/react-chip.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/chips/chips.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/chips/chips.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-click-away-listener.js b/docs/pages/material-ui/react-click-away-listener.js index e3796cff26aa69..8b51c04a6b1cf2 100644 --- a/docs/pages/material-ui/react-click-away-listener.js +++ b/docs/pages/material-ui/react-click-away-listener.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/click-away-listener/click-away-listener.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/click-away-listener/click-away-listener.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-container.js b/docs/pages/material-ui/react-container.js index 9c97060ef6309b..d5d647dc828dfa 100644 --- a/docs/pages/material-ui/react-container.js +++ b/docs/pages/material-ui/react-container.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/container/container.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/container/container.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-css-baseline.js b/docs/pages/material-ui/react-css-baseline.js index 378c57e9d63f48..68d27f2b41af7c 100644 --- a/docs/pages/material-ui/react-css-baseline.js +++ b/docs/pages/material-ui/react-css-baseline.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/css-baseline/css-baseline.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/css-baseline/css-baseline.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-dialog.js b/docs/pages/material-ui/react-dialog.js index 8cfd71a5a4174f..537a476553a2eb 100644 --- a/docs/pages/material-ui/react-dialog.js +++ b/docs/pages/material-ui/react-dialog.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/dialogs/dialogs.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/dialogs/dialogs.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-divider.js b/docs/pages/material-ui/react-divider.js index 71daf6ff7abde4..7c32aa1c784f47 100644 --- a/docs/pages/material-ui/react-divider.js +++ b/docs/pages/material-ui/react-divider.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/dividers/dividers.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/dividers/dividers.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-drawer.js b/docs/pages/material-ui/react-drawer.js index f83c79e91575de..6d8905e8275778 100644 --- a/docs/pages/material-ui/react-drawer.js +++ b/docs/pages/material-ui/react-drawer.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/drawers/drawers.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/drawers/drawers.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-floating-action-button.js b/docs/pages/material-ui/react-floating-action-button.js index fe684d1a72bb5b..681bebda025a79 100644 --- a/docs/pages/material-ui/react-floating-action-button.js +++ b/docs/pages/material-ui/react-floating-action-button.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/floating-action-button/floating-action-button.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/floating-action-button/floating-action-button.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-grid.js b/docs/pages/material-ui/react-grid.js index 7d27856234d783..78ddcb6ee321ee 100644 --- a/docs/pages/material-ui/react-grid.js +++ b/docs/pages/material-ui/react-grid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/grid/grid.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/grid/grid.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-grid2.js b/docs/pages/material-ui/react-grid2.js index c54cc22dc246c4..b4dbffc77707c3 100644 --- a/docs/pages/material-ui/react-grid2.js +++ b/docs/pages/material-ui/react-grid2.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/grid2/grid2.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/grid2/grid2.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-hidden.js b/docs/pages/material-ui/react-hidden.js index ad2f293376ba01..51cccdd38378a2 100644 --- a/docs/pages/material-ui/react-hidden.js +++ b/docs/pages/material-ui/react-hidden.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/hidden/hidden.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/hidden/hidden.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-image-list.js b/docs/pages/material-ui/react-image-list.js index 180743e7514cf5..f0f150afe7277e 100644 --- a/docs/pages/material-ui/react-image-list.js +++ b/docs/pages/material-ui/react-image-list.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/image-list/image-list.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/image-list/image-list.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-link.js b/docs/pages/material-ui/react-link.js index ced27132997ae2..c288ac87affe2b 100644 --- a/docs/pages/material-ui/react-link.js +++ b/docs/pages/material-ui/react-link.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/links/links.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/links/links.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-list.js b/docs/pages/material-ui/react-list.js index 726bc33e37fd5f..c78ea0de33ba26 100644 --- a/docs/pages/material-ui/react-list.js +++ b/docs/pages/material-ui/react-list.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/lists/lists.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/lists/lists.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-masonry.js b/docs/pages/material-ui/react-masonry.js index 068b26221cd1cf..56633ff2e8d6d0 100644 --- a/docs/pages/material-ui/react-masonry.js +++ b/docs/pages/material-ui/react-masonry.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/masonry/masonry.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/masonry/masonry.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-menu.js b/docs/pages/material-ui/react-menu.js index 1c3a1e7e4a5d28..33113e15a78f28 100644 --- a/docs/pages/material-ui/react-menu.js +++ b/docs/pages/material-ui/react-menu.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/menus/menus.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/menus/menus.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-modal.js b/docs/pages/material-ui/react-modal.js index 7c255bbbf6204b..46d8fc442d7d0d 100644 --- a/docs/pages/material-ui/react-modal.js +++ b/docs/pages/material-ui/react-modal.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/modal/modal.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/modal/modal.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-no-ssr.js b/docs/pages/material-ui/react-no-ssr.js index 7e90aa978c9859..ee83206a71178d 100644 --- a/docs/pages/material-ui/react-no-ssr.js +++ b/docs/pages/material-ui/react-no-ssr.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/no-ssr/no-ssr.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/no-ssr/no-ssr.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-pagination.js b/docs/pages/material-ui/react-pagination.js index 071ce6e193fc2d..9a48a0ed86d11b 100644 --- a/docs/pages/material-ui/react-pagination.js +++ b/docs/pages/material-ui/react-pagination.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/pagination/pagination.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/pagination/pagination.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-paper.js b/docs/pages/material-ui/react-paper.js index 940aaf80a1cd68..41ece6824d65db 100644 --- a/docs/pages/material-ui/react-paper.js +++ b/docs/pages/material-ui/react-paper.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/paper/paper.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/paper/paper.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-popover.js b/docs/pages/material-ui/react-popover.js index 702acfdf279948..48cba31980a1c7 100644 --- a/docs/pages/material-ui/react-popover.js +++ b/docs/pages/material-ui/react-popover.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/popover/popover.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/popover/popover.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-popper.js b/docs/pages/material-ui/react-popper.js index c9ba100ad5cb50..6ab2616c48f0af 100644 --- a/docs/pages/material-ui/react-popper.js +++ b/docs/pages/material-ui/react-popper.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/popper/popper.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/popper/popper.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-portal.js b/docs/pages/material-ui/react-portal.js index e22828e345442a..07a891e7658072 100644 --- a/docs/pages/material-ui/react-portal.js +++ b/docs/pages/material-ui/react-portal.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/portal/portal.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/portal/portal.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-progress.js b/docs/pages/material-ui/react-progress.js index e16d1054259264..85e37159117a78 100644 --- a/docs/pages/material-ui/react-progress.js +++ b/docs/pages/material-ui/react-progress.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/progress/progress.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/progress/progress.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-radio-button.js b/docs/pages/material-ui/react-radio-button.js index 3391f1d9b7ad39..b881c8a18b6f80 100644 --- a/docs/pages/material-ui/react-radio-button.js +++ b/docs/pages/material-ui/react-radio-button.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/radio-buttons/radio-buttons.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/radio-buttons/radio-buttons.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-rating.js b/docs/pages/material-ui/react-rating.js index 3f9a073092a454..ece9b071bf2aaa 100644 --- a/docs/pages/material-ui/react-rating.js +++ b/docs/pages/material-ui/react-rating.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/rating/rating.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/rating/rating.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-select.js b/docs/pages/material-ui/react-select.js index b7193c97ada5d7..d5d9459ff95307 100644 --- a/docs/pages/material-ui/react-select.js +++ b/docs/pages/material-ui/react-select.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/selects/selects.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/selects/selects.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-skeleton.js b/docs/pages/material-ui/react-skeleton.js index 6cb7decf729d7d..40aeb2ea2b2bbe 100644 --- a/docs/pages/material-ui/react-skeleton.js +++ b/docs/pages/material-ui/react-skeleton.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/skeleton/skeleton.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/skeleton/skeleton.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-slider.js b/docs/pages/material-ui/react-slider.js index 700e440f91b877..2762b71458c831 100644 --- a/docs/pages/material-ui/react-slider.js +++ b/docs/pages/material-ui/react-slider.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/slider/slider.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/slider/slider.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-snackbar.js b/docs/pages/material-ui/react-snackbar.js index 36dc0fa2e66b27..ef9cd9110e75e7 100644 --- a/docs/pages/material-ui/react-snackbar.js +++ b/docs/pages/material-ui/react-snackbar.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/snackbars/snackbars.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/snackbars/snackbars.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-speed-dial.js b/docs/pages/material-ui/react-speed-dial.js index a943d8975ce7f6..b51a5eece1a78d 100644 --- a/docs/pages/material-ui/react-speed-dial.js +++ b/docs/pages/material-ui/react-speed-dial.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/speed-dial/speed-dial.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/speed-dial/speed-dial.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-stack.js b/docs/pages/material-ui/react-stack.js index d7f68f4b59295d..44e36ffc1eeff3 100644 --- a/docs/pages/material-ui/react-stack.js +++ b/docs/pages/material-ui/react-stack.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/stack/stack.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/stack/stack.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-stepper.js b/docs/pages/material-ui/react-stepper.js index 19cf4bc04c2aa5..f56275b1654708 100644 --- a/docs/pages/material-ui/react-stepper.js +++ b/docs/pages/material-ui/react-stepper.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/steppers/steppers.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/steppers/steppers.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-switch.js b/docs/pages/material-ui/react-switch.js index 39f43bb71630f5..d8d850f538c943 100644 --- a/docs/pages/material-ui/react-switch.js +++ b/docs/pages/material-ui/react-switch.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/switches/switches.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/switches/switches.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-table.js b/docs/pages/material-ui/react-table.js index 3ab02c35609b47..10b6203c6b830b 100644 --- a/docs/pages/material-ui/react-table.js +++ b/docs/pages/material-ui/react-table.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/table/table.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/table/table.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-tabs.js b/docs/pages/material-ui/react-tabs.js index b26e47504d98bb..51e69d3a7630ae 100644 --- a/docs/pages/material-ui/react-tabs.js +++ b/docs/pages/material-ui/react-tabs.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/tabs/tabs.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/tabs/tabs.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-text-field.js b/docs/pages/material-ui/react-text-field.js index 7230c8be868240..f7756ce29ddd50 100644 --- a/docs/pages/material-ui/react-text-field.js +++ b/docs/pages/material-ui/react-text-field.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/text-fields/text-fields.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/text-fields/text-fields.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-textarea-autosize.js b/docs/pages/material-ui/react-textarea-autosize.js index 2eaee65bf2da0d..7d1def906c2aec 100644 --- a/docs/pages/material-ui/react-textarea-autosize.js +++ b/docs/pages/material-ui/react-textarea-autosize.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/textarea-autosize/textarea-autosize.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/textarea-autosize/textarea-autosize.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-timeline.js b/docs/pages/material-ui/react-timeline.js index 6ff6b235875ae5..83869d3365841c 100644 --- a/docs/pages/material-ui/react-timeline.js +++ b/docs/pages/material-ui/react-timeline.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/timeline/timeline.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/timeline/timeline.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-toggle-button.js b/docs/pages/material-ui/react-toggle-button.js index e521d502c76378..822839b3fad4a8 100644 --- a/docs/pages/material-ui/react-toggle-button.js +++ b/docs/pages/material-ui/react-toggle-button.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/toggle-button/toggle-button.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/toggle-button/toggle-button.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-tooltip.js b/docs/pages/material-ui/react-tooltip.js index 65922e0483293b..4cd5c404f860db 100644 --- a/docs/pages/material-ui/react-tooltip.js +++ b/docs/pages/material-ui/react-tooltip.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/tooltips/tooltips.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/tooltips/tooltips.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-transfer-list.js b/docs/pages/material-ui/react-transfer-list.js index f8545b86ff0fa3..952f286ac40fc6 100644 --- a/docs/pages/material-ui/react-transfer-list.js +++ b/docs/pages/material-ui/react-transfer-list.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/transfer-list/transfer-list.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/transfer-list/transfer-list.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-typography.js b/docs/pages/material-ui/react-typography.js index 2a74055c9b467e..f5014b469b0416 100644 --- a/docs/pages/material-ui/react-typography.js +++ b/docs/pages/material-ui/react-typography.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/typography/typography.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/typography/typography.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/react-use-media-query.js b/docs/pages/material-ui/react-use-media-query.js index 9014b4fd73fa2f..44e229472b0685 100644 --- a/docs/pages/material-ui/react-use-media-query.js +++ b/docs/pages/material-ui/react-use-media-query.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/use-media-query/use-media-query.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/use-media-query/use-media-query.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/material-ui/transitions.js b/docs/pages/material-ui/transitions.js index 2bbd3c89b59813..c60770e5e2c518 100644 --- a/docs/pages/material-ui/transitions.js +++ b/docs/pages/material-ui/transitions.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/components/transitions/transitions.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/components/transitions/transitions.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/production-error.js b/docs/pages/production-error.js index d426a26b05162f..252bce6fd7a876 100644 --- a/docs/pages/production-error.js +++ b/docs/pages/production-error.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/src/pages/production-error/index.md?@mui/markdown'; +import * as pageProps from 'docs/src/pages/production-error/index.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/borders.js b/docs/pages/system/borders.js index d97158c09f4223..eacccd02e560f1 100644 --- a/docs/pages/system/borders.js +++ b/docs/pages/system/borders.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/borders/borders.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/borders/borders.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/display.js b/docs/pages/system/display.js index 5d9c892df5940e..bb5e3c38502640 100644 --- a/docs/pages/system/display.js +++ b/docs/pages/system/display.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/display/display.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/display/display.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/experimental-api/configure-the-sx-prop.js b/docs/pages/system/experimental-api/configure-the-sx-prop.js index 45c27611cde73e..483ec361c38222 100644 --- a/docs/pages/system/experimental-api/configure-the-sx-prop.js +++ b/docs/pages/system/experimental-api/configure-the-sx-prop.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/experimental-api/configure-the-sx-prop/configure-the-sx-prop.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/experimental-api/css-theme-variables.js b/docs/pages/system/experimental-api/css-theme-variables.js index 11eb1acb123d19..dc3800c74f2ffc 100644 --- a/docs/pages/system/experimental-api/css-theme-variables.js +++ b/docs/pages/system/experimental-api/css-theme-variables.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/experimental-api/css-theme-variables/css-theme-variables.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/experimental-api/css-theme-variables/css-theme-variables.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/flexbox.js b/docs/pages/system/flexbox.js index 7c4a4699cbbffd..c8c7fcf3a9ea63 100644 --- a/docs/pages/system/flexbox.js +++ b/docs/pages/system/flexbox.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/flexbox/flexbox.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/flexbox/flexbox.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/getting-started/custom-components.js b/docs/pages/system/getting-started/custom-components.js index bc87801ff6c799..62e88e5a2f8a51 100644 --- a/docs/pages/system/getting-started/custom-components.js +++ b/docs/pages/system/getting-started/custom-components.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/getting-started/custom-components/custom-components.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/getting-started/custom-components/custom-components.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/getting-started/index.js b/docs/pages/system/getting-started/index.js index e9edca84e92352..0622da4c5994aa 100644 --- a/docs/pages/system/getting-started/index.js +++ b/docs/pages/system/getting-started/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/getting-started/overview/overview.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/getting-started/overview/overview.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/getting-started/installation.js b/docs/pages/system/getting-started/installation.js index a5f8f2e7623fdf..f12ec16fd8679c 100644 --- a/docs/pages/system/getting-started/installation.js +++ b/docs/pages/system/getting-started/installation.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/getting-started/installation/installation.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/getting-started/installation/installation.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/getting-started/support.js b/docs/pages/system/getting-started/support.js index fbfc5949c0fb04..45f7873034dfe8 100644 --- a/docs/pages/system/getting-started/support.js +++ b/docs/pages/system/getting-started/support.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/getting-started/support/support.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/getting-started/support/support.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/getting-started/the-sx-prop.js b/docs/pages/system/getting-started/the-sx-prop.js index aacbdbf57bc11e..54c5ee9127eda3 100644 --- a/docs/pages/system/getting-started/the-sx-prop.js +++ b/docs/pages/system/getting-started/the-sx-prop.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/getting-started/the-sx-prop/the-sx-prop.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/getting-started/the-sx-prop/the-sx-prop.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/getting-started/usage.js b/docs/pages/system/getting-started/usage.js index efc7b97cca1d4e..79939296259485 100644 --- a/docs/pages/system/getting-started/usage.js +++ b/docs/pages/system/getting-started/usage.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/getting-started/usage/usage.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/getting-started/usage/usage.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/grid.js b/docs/pages/system/grid.js index f69770a4dfd23b..57a3a8cb20183e 100644 --- a/docs/pages/system/grid.js +++ b/docs/pages/system/grid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/grid/grid.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/grid/grid.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/palette.js b/docs/pages/system/palette.js index 68b9cc71b0c53c..8ee9d7b41af7d4 100644 --- a/docs/pages/system/palette.js +++ b/docs/pages/system/palette.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/palette/palette.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/palette/palette.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/positions.js b/docs/pages/system/positions.js index c4b446c677a7c9..4e434d27c4f311 100644 --- a/docs/pages/system/positions.js +++ b/docs/pages/system/positions.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/positions/positions.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/positions/positions.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/properties.js b/docs/pages/system/properties.js index eb3e02ba943311..fe2b4d44783ee6 100644 --- a/docs/pages/system/properties.js +++ b/docs/pages/system/properties.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/properties/properties.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/properties/properties.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/react-box.js b/docs/pages/system/react-box.js index 77a18f9691eca0..403c64ee505ac5 100644 --- a/docs/pages/system/react-box.js +++ b/docs/pages/system/react-box.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/components/box/box.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/components/box/box.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/react-container.js b/docs/pages/system/react-container.js index c0f3516ec5090a..eb5cf62c9ccdd3 100644 --- a/docs/pages/system/react-container.js +++ b/docs/pages/system/react-container.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/components/container/container.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/components/container/container.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/react-grid.js b/docs/pages/system/react-grid.js index 67c5ad62bc03fa..8c07f1e9b829f7 100644 --- a/docs/pages/system/react-grid.js +++ b/docs/pages/system/react-grid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/components/grid/grid.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/components/grid/grid.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/react-stack.js b/docs/pages/system/react-stack.js index 360921e5c4dec8..04c6c5ff6d3eee 100644 --- a/docs/pages/system/react-stack.js +++ b/docs/pages/system/react-stack.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/components/stack/stack.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/components/stack/stack.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/screen-readers.js b/docs/pages/system/screen-readers.js index 405ea5e96db266..750123d53c6bcd 100644 --- a/docs/pages/system/screen-readers.js +++ b/docs/pages/system/screen-readers.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/screen-readers/screen-readers.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/screen-readers/screen-readers.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/shadows.js b/docs/pages/system/shadows.js index 1ab37003c97664..bb439b74e2f282 100644 --- a/docs/pages/system/shadows.js +++ b/docs/pages/system/shadows.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/shadows/shadows.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/shadows/shadows.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/sizing.js b/docs/pages/system/sizing.js index de7420a4a196be..e44820afaf046b 100644 --- a/docs/pages/system/sizing.js +++ b/docs/pages/system/sizing.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/sizing/sizing.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/sizing/sizing.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/spacing.js b/docs/pages/system/spacing.js index b0979022dcc020..4b3487b9b55f77 100644 --- a/docs/pages/system/spacing.js +++ b/docs/pages/system/spacing.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/spacing/spacing.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/spacing/spacing.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/styled.js b/docs/pages/system/styled.js index 2353b84ed4ec1f..58f018a20bcabe 100644 --- a/docs/pages/system/styled.js +++ b/docs/pages/system/styled.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/styled/styled.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/styled/styled.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/styles/advanced.js b/docs/pages/system/styles/advanced.js index 81def470d18f49..ff680a651985d7 100644 --- a/docs/pages/system/styles/advanced.js +++ b/docs/pages/system/styles/advanced.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/styles/advanced/advanced.md?@mui/markdown'; +import * as pageProps from 'docs/data/styles/advanced/advanced.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/styles/api.js b/docs/pages/system/styles/api.js index 4cab1a7b5ac9ea..7ad94b2e7d6d7b 100644 --- a/docs/pages/system/styles/api.js +++ b/docs/pages/system/styles/api.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/styles/api/api.md?@mui/markdown'; +import * as pageProps from 'docs/data/styles/api/api.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/styles/basics.js b/docs/pages/system/styles/basics.js index 3ab1f355e5ef13..711b29c60422a7 100644 --- a/docs/pages/system/styles/basics.js +++ b/docs/pages/system/styles/basics.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/styles/basics/basics.md?@mui/markdown'; +import * as pageProps from 'docs/data/styles/basics/basics.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/typography.js b/docs/pages/system/typography.js index 2b0fc3e44944ac..0aeb4e36e09620 100644 --- a/docs/pages/system/typography.js +++ b/docs/pages/system/typography.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/system/typography/typography.md?@mui/markdown'; +import * as pageProps from 'docs/data/system/typography/typography.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/versions.js b/docs/pages/versions.js index b29a1f5af484a9..b0c0cc3555be6b 100644 --- a/docs/pages/versions.js +++ b/docs/pages/versions.js @@ -2,7 +2,7 @@ import * as React from 'react'; import sortedUniqBy from 'lodash/sortedUniqBy'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; import VersionsContext from 'docs/src/pages/versions/VersionsContext'; -import * as pageProps from 'docs/src/pages/versions/versions.md?@mui/markdown'; +import * as pageProps from 'docs/src/pages/versions/versions.md?muiMarkdown'; export default function Page(props) { const { versions } = props; diff --git a/docs/public/static/docs-infra/forking-an-example-dark.png b/docs/public/static/docs-infra/forking-an-example-dark.png index 1e388c6ec76032..43495985d2b12f 100644 Binary files a/docs/public/static/docs-infra/forking-an-example-dark.png and b/docs/public/static/docs-infra/forking-an-example-dark.png differ diff --git a/docs/public/static/docs-infra/forking-an-example.png b/docs/public/static/docs-infra/forking-an-example.png index d1a46bb379590b..b94e367bd6d962 100644 Binary files a/docs/public/static/docs-infra/forking-an-example.png and b/docs/public/static/docs-infra/forking-an-example.png differ diff --git a/docs/scripts/formattedTSDemos.js b/docs/scripts/formattedTSDemos.js index f4b3ea1d036199..f1a4a46b9f4dbd 100644 --- a/docs/scripts/formattedTSDemos.js +++ b/docs/scripts/formattedTSDemos.js @@ -18,7 +18,7 @@ const prettier = require('prettier'); const { getPropTypesFromFile, injectPropTypesInFile, -} = require('@mui-internal/typescript-to-proptypes'); +} = require('@mui/internal-scripts/typescript-to-proptypes'); const { createTypeScriptProjectBuilder, } = require('@mui-internal/api-docs-builder/utils/createTypeScriptProject'); diff --git a/docs/scripts/reportBrokenLinks.js b/docs/scripts/reportBrokenLinks.js index ff817970f2c3d2..ae3943a72061a9 100644 --- a/docs/scripts/reportBrokenLinks.js +++ b/docs/scripts/reportBrokenLinks.js @@ -1,7 +1,7 @@ /* eslint-disable no-console */ const path = require('path'); const fse = require('fs-extra'); -const { createRender } = require('@mui/markdown'); +const { createRender } = require('@mui/internal-markdown'); const { marked } = require('marked'); const { LANGUAGES_IGNORE_PAGES } = require('../config'); @@ -95,17 +95,17 @@ const getMdFilesImported = (jsPageFile) => { const fileContent = fse.readFileSync(jsPageFile, 'utf8'); /** * Content files can be represented by either: - * - 'docsx/data/advanced-components/overview.md?@mui/markdown'; (for mui-x) - * - 'docs/data/advanced-components/overview.md?@mui/markdown'; - * - './index.md?@mui/markdown'; + * - 'docsx/data/advanced-components/overview.md?muiMarkdown'; (for mui-x) + * - 'docs/data/advanced-components/overview.md?muiMarkdown'; + * - './index.md?muiMarkdown'; */ - const importPaths = fileContent.match(/'.*\?@mui\/markdown'/g); + const importPaths = fileContent.match(/'.*\?muiMarkdown'/g); if (importPaths === null) { return []; } return importPaths.map((importPath) => { - let cleanImportPath = importPath.slice(1, importPath.length - "?@mui/markdown'".length); + let cleanImportPath = importPath.slice(1, importPath.length - "?muiMarkdown'".length); if (cleanImportPath.startsWith('.')) { cleanImportPath = path.join(path.dirname(jsPageFile), cleanImportPath); } else if (cleanImportPath.startsWith('docs/')) { diff --git a/docs/src/components/about/HowToSupport.tsx b/docs/src/components/about/HowToSupport.tsx index 9dd95dab85874d..3c01595592fe34 100644 --- a/docs/src/components/about/HowToSupport.tsx +++ b/docs/src/components/about/HowToSupport.tsx @@ -139,7 +139,7 @@ export default function HowToSupport() {
  1. Answer questions on{' '} - Stack Overflow + Stack Overflow .
  2. diff --git a/docs/src/components/about/Team.tsx b/docs/src/components/about/Team.tsx index 05464dd093739e..805d10b79cf065 100644 --- a/docs/src/components/about/Team.tsx +++ b/docs/src/components/about/Team.tsx @@ -206,7 +206,7 @@ const contributors = [ { name: 'Ryan Cogswell', github: 'ryancogswell', - title: 'Stack Overflow top contributor', + title: 'Stack Overflow top contributor', location: 'Minnesota, United States', locationCountry: 'us', src: 'https://avatars.githubusercontent.com/u/287804', diff --git a/docs/src/components/home/UserFeedbacks.tsx b/docs/src/components/home/UserFeedbacks.tsx index be47f7b85add18..bd04831748ecbe 100644 --- a/docs/src/components/home/UserFeedbacks.tsx +++ b/docs/src/components/home/UserFeedbacks.tsx @@ -28,7 +28,7 @@ const TESTIMONIALS = [ }, { quote: - '"Material UI looks great and lets us deliver fast, thanks to their solid API design and documentation - it\'s refreshing to use a component library where you get everything you need from their site rather than Stack Overflow. We think the upcoming version, with extra themes and customizability, will make Material UI even more of a game changer. We\'re extremely grateful to the team for the time and effort spent maintaining the project."', + '"Material UI looks great and lets us deliver fast, thanks to their solid API design and documentation - it\'s refreshing to use a component library where you get everything you need from their site rather than Stack Overflow. We think the upcoming version, with extra themes and customizability, will make Material UI even more of a game changer. We\'re extremely grateful to the team for the time and effort spent maintaining the project."', profile: { avatarSrc: 'https://avatars.githubusercontent.com/u/197016?s=58', avatarSrcSet: 'https://avatars.githubusercontent.com/u/197016?s=116 2x', diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx index 00dcffd7011fc5..029683fbcc79fc 100644 --- a/docs/src/components/pricing/PricingTable.tsx +++ b/docs/src/components/pricing/PricingTable.tsx @@ -755,7 +755,7 @@ const communityData: Record = { 'charts/sparkline': yes, 'charts/gauge': pending, 'charts/treemap': pending, - 'charts/heatmap': pending, + 'charts/heatmap': no, 'charts/radar': pending, 'charts/funnel': no, 'charts/sankey': no, @@ -1534,10 +1534,10 @@ export default function PricingTable({ {divider} {renderNestedRow('charts/treemap')} {divider} - {renderNestedRow('charts/heatmap')} - {divider} {renderNestedRow('charts/radar')} {divider} + {renderNestedRow('charts/heatmap')} + {divider} {renderNestedRow('charts/funnel')} {divider} {renderNestedRow('charts/sankey')} diff --git a/docs/src/featureToggle.js b/docs/src/featureToggle.js index c5458fa9f371e9..53f6d955cabc18 100644 --- a/docs/src/featureToggle.js +++ b/docs/src/featureToggle.js @@ -1,4 +1,4 @@ -// need to use commonjs export so that @mui/markdown can use +// need to use commonjs export so that @mui/internal-markdown can use module.exports = { enable_website_banner: true, enable_toc_banner: true, diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx index 7f7393871a6ab3..6ca7ef50d6a7bd 100644 --- a/docs/src/layouts/AppFooter.tsx +++ b/docs/src/layouts/AppFooter.tsx @@ -5,12 +5,12 @@ import Divider from '@mui/material/Divider'; import Typography from '@mui/material/Typography'; import IconButton from '@mui/material/IconButton'; import Stack from '@mui/material/Stack'; +import Chip from '@mui/material/Chip'; import XIcon from '@mui/icons-material/X'; import GitHubIcon from '@mui/icons-material/GitHub'; import LinkedInIcon from '@mui/icons-material/LinkedIn'; import YouTubeIcon from '@mui/icons-material/YouTube'; import RssFeedIcon from '@mui/icons-material/RssFeed'; -import { alpha } from '@mui/material/styles'; import SvgMuiLogotype from 'docs/src/icons/SvgMuiLogotype'; import EmailSubscribe from 'docs/src/components/footer/EmailSubscribe'; import ROUTES from 'docs/src/route'; @@ -142,36 +142,26 @@ export default function AppFooter(props: AppFooterProps) { Vision - + Careers{' '} - ({ - px: 0.5, - py: 0.1, - ml: 1, - mb: '1px', - position: 'relative', - top: theme.spacing(-0.5), - fontSize: theme.typography.pxToRem(10), - fontWeight: 'Bold', - textTransform: 'uppercase', - letterSpacing: '.04rem', - borderRadius: 8, - border: 1, - borderColor: 'success.300', - bgcolor: alpha(theme.palette.success[100], 0.4), - color: 'success.700', - ...theme.applyDarkStyles({ - borderColor: alpha(theme.palette.success[800], 0.5), - bgcolor: alpha(theme.palette.success[800], 0.2), - color: 'success.200', - }), + height: 18, + '& .MuiChip-label': { + px: '4px', + fontSize: theme.typography.pxToRem(10), + fontWeight: 'bold', + textTransform: 'uppercase', + letterSpacing: '.04rem', + }, })} - > - Hiring - + /> Support @@ -262,8 +252,8 @@ export default function AppFooter(props: AppFooterProps) { target="_blank" rel="noopener" href={stackOverflowUrl} - aria-label="Stack Overflow" - title="Stack Overflow" + aria-label="Stack Overflow" + title="Stack Overflow" size="small" > diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index 7f610f1ce4abf9..cf203cb9a3529d 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -902,9 +902,9 @@ export function getThemedComponents(): ThemeOptions { color: (theme.vars || theme).palette.grey[900], borderColor: (theme.vars || theme).palette.grey[200], ...theme.applyDarkStyles({ - backgroundColor: alpha(theme.palette.primaryDark[700], 0.4), color: (theme.vars || theme).palette.grey[300], - borderColor: alpha(theme.palette.primaryDark[500], 0.5), + backgroundColor: alpha(theme.palette.primaryDark[700], 0.5), + borderColor: (theme.vars || theme).palette.primaryDark[600], }), }), ...(variant === 'outlined' && @@ -921,10 +921,11 @@ export function getThemedComponents(): ThemeOptions { color === 'success' && { borderColor: (theme.vars || theme).palette.success[100], backgroundColor: (theme.vars || theme).palette.success[50], + color: (theme.vars || theme).palette.success[900], ...theme.applyDarkStyles({ color: (theme.vars || theme).palette.success[300], - borderColor: alpha(theme.palette.success[300], 0.3), - background: alpha(theme.palette.success[800], 0.3), + borderColor: alpha(theme.palette.success[300], 0.2), + background: alpha(theme.palette.success[800], 0.2), }), }), ...(variant === 'filled' && { @@ -951,6 +952,9 @@ export function getThemedComponents(): ThemeOptions { }, '& .MuiChip-deleteIcon': { color: (theme.vars || theme).palette.primary[600], + '&:hover': { + color: (theme.vars || theme).palette.primary[700], + }, }, ...theme.applyDarkStyles({ color: (theme.vars || theme).palette.primary[100], @@ -960,6 +964,9 @@ export function getThemedComponents(): ThemeOptions { }, '& .MuiChip-deleteIcon': { color: (theme.vars || theme).palette.primary[100], + '&:hover': { + color: (theme.vars || theme).palette.primary[50], + }, }, }), }), diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js index eddd42bb79bfcf..0e910aa6614d4d 100644 --- a/docs/src/modules/components/Ad.js +++ b/docs/src/modules/components/Ad.js @@ -238,6 +238,7 @@ export default function Ad() { data-ga-event-category="ad" data-ga-event-action="click" data-ga-event-label={eventLabel} + className="Ad-root" > {children} diff --git a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx index 18d5cd5487fda0..3433812fe361ee 100644 --- a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx +++ b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx @@ -155,7 +155,7 @@ type ExpandableApiItemProps = { isExtendable?: boolean; note?: string; sx?: SxProps; - title: string; + title: string | React.ReactNode; type?: DescriptionType; }; diff --git a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx index 2ecd1b3703ab1a..4077916de8a6b9 100644 --- a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx +++ b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx @@ -139,6 +139,8 @@ export interface Properties { isDeprecated?: boolean; isOptional?: boolean; isRequired?: boolean; + isProPlan?: boolean; + isPremiumPlan?: boolean; propDefault?: string; propName: string; requiresRef?: string; @@ -169,6 +171,8 @@ export default function PropertiesList(props: PropertiesListProps) { isOptional, isRequired, isDeprecated, + isProPlan, + isPremiumPlan, hooksParameters, hooksReturnValue, deprecationInfo, @@ -191,7 +195,21 @@ export default function PropertiesList(props: PropertiesListProps) { + {propName} + {isProPlan && ( + + + + )} + {isPremiumPlan && ( + + + + )} + + } note={note} type="props" displayOption={displayOption} diff --git a/docs/src/modules/components/ApiPage/sections/PropertiesSection.js b/docs/src/modules/components/ApiPage/sections/PropertiesSection.js index bd049f334ecb3c..282cfe28c128ed 100644 --- a/docs/src/modules/components/ApiPage/sections/PropertiesSection.js +++ b/docs/src/modules/components/ApiPage/sections/PropertiesSection.js @@ -103,6 +103,8 @@ export default function PropertiesSection(props) { requiresRef: propDescription?.requiresRef, isOptional, isRequired, + isProPlan: propData.isProPlan, + isPremiumPlan: propData.isPremiumPlan, isDeprecated, hooksParameters, hooksReturnValue, diff --git a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx index 40622f2b29499a..88e86df5826cbb 100644 --- a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx +++ b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx @@ -122,6 +122,9 @@ interface PropertiesTableProps { export default function PropertiesTable(props: PropertiesTableProps) { const { properties } = props; + + const hasDefaultColumn = properties.some((item) => item.propDefault !== undefined); + const t = useTranslate(); return ( @@ -130,7 +133,7 @@ export default function PropertiesTable(props: PropertiesTableProps) { Name Type - Default + {hasDefaultColumn && Default} Description @@ -144,6 +147,8 @@ export default function PropertiesTable(props: PropertiesTableProps) { requiresRef, isOptional, isRequired, + isProPlan, + isPremiumPlan, isDeprecated, hooksParameters, hooksReturnValue, @@ -165,6 +170,16 @@ export default function PropertiesTable(props: PropertiesTableProps) { {propName} {isRequired ? '*' : ''} {isOptional ? '?' : ''} + {isProPlan && ( + + + + )} + {isPremiumPlan && ( + + + + )} { @@ -176,13 +191,15 @@ export default function PropertiesTable(props: PropertiesTableProps) { /> } - - {propDefault ? ( - {propDefault} - ) : ( - '-' - )} - + {hasDefaultColumn && ( + + {propDefault ? ( + {propDefault} + ) : ( + '-' + )} + + )} {description && } {seeMoreDescription && ( diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index 32ad7954cee8ff..ee69507bacff67 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -46,6 +46,7 @@ const savedScrollTop = {}; function ProductDrawerButton(props) { const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); const handleClick = (event) => { setAnchorEl(event.currentTarget); @@ -54,6 +55,15 @@ function ProductDrawerButton(props) { setAnchorEl(null); }; + const handleEventDelegation = (event) => { + // Assert whether an 'a' tag resides in the parent of the clicked element through which the event bubbles out. + const isLinkInParentTree = Boolean(event.target.closest('a')); + // If the element clicked is link or just inside of a link element then close the menu. + if (isLinkInParentTree) { + handleClose(); + } + }; + return ( - - - - theme.applyDarkStyles({ - content: `url(/static/sponsors/octopus-dark.svg)`, - }) - } - /> - - - - theme.applyDarkStyles({ - content: `url(/static/sponsors/doit-dark.svg)`, - }) - } - /> - - - - theme.applyDarkStyles({ - content: `url(/static/sponsors/marblism-dark.svg)`, - }) - } - /> - - ({ - width: '100%', - p: 1, - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - borderRadius: 1, - border: '1px dashed', - transition: theme.transitions.create(['color', 'border-color', 'background-color']), - backgroundColor: alpha(theme.palette.primary[50], 0.5), - borderColor: (theme.vars || theme).palette.primary[200], + + theme.applyDarkStyles({ + content: `url(/static/sponsors/doit-dark.svg)`, + }) + } + /> + + + + theme.applyDarkStyles({ + content: `url(/static/sponsors/marblism-dark.svg)`, + }) + } + /> + + ({ + p: 1.5, + width: '100%', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 1, + border: '1px dashed', + transition: theme.transitions.create(['color', 'border-color', 'background-color']), + backgroundColor: alpha(theme.palette.primary[50], 0.5), + borderColor: (theme.vars || theme).palette.grey[200], + boxShadow: `inset 0 1px 1px ${ + (theme.vars || theme).palette.grey[50] + }, 0 1px 2px ${alpha(theme.palette.grey[100], 0.5)}`, + '&:hover': { + backgroundColor: alpha(theme.palette.primary[100], 0.5), + borderColor: (theme.vars || theme).palette.primary[300], + }, + ...theme.applyDarkStyles({ + backgroundColor: alpha(theme.palette.primary[700], 0.1), + borderColor: alpha(theme.palette.primary[400], 0.2), boxShadow: `inset 0 1px 1px ${ - (theme.vars || theme).palette.grey[50] - }, 0 1px 2px ${alpha(theme.palette.primary[100], 0.8)}`, + (theme.vars || theme).palette.primaryDark[800] + }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`, '&:hover': { - backgroundColor: alpha(theme.palette.primary[100], 0.5), - borderColor: (theme.vars || theme).palette.primary[300], + backgroundColor: alpha(theme.palette.primary[700], 0.2), + borderColor: (theme.vars || theme).palette.primary[400], }, - ...theme.applyDarkStyles({ - backgroundColor: alpha(theme.palette.primary[400], 0.05), - borderColor: alpha(theme.palette.primary[300], 0.3), - boxShadow: `inset 0 1px 1px ${ - (theme.vars || theme).palette.primaryDark[800] - }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`, - '&:hover': { - backgroundColor: alpha(theme.palette.primary[400], 0.1), - borderColor: (theme.vars || theme).palette.primary[400], - }, - }), - })} - > - - {t('becomeADiamondSponsor')} - - {/* - {t('diamondSponsorVacancies')} - */} - - + }), + })} + > + + {t('becomeADiamondSponsor')} + + {/* + {t('diamondSponsorVacancies')} + */} + ); } diff --git a/docs/src/modules/components/HighlightedCode.js b/docs/src/modules/components/HighlightedCode.js index e613533f1a7283..ca7a8458fa1034 100644 --- a/docs/src/modules/components/HighlightedCode.js +++ b/docs/src/modules/components/HighlightedCode.js @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import prism from '@mui/markdown/prism'; +import prism from '@mui/internal-markdown/prism'; import { NoSsr } from '@mui/base/NoSsr'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; import CodeCopyButton from 'docs/src/modules/components/CodeCopyButton'; diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index a1d8128508fba1..bb9a42b4d40ac5 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -12,6 +12,10 @@ const Root = styled('div')( ...lightTheme.typography.body1, lineHeight: 1.6, // Increased compared to the 1.5 default to make the docs easier to read. color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, + '& :focus-visible': { + outline: `3px solid ${alpha(lightTheme.palette.primary[500], 0.5)}`, + outlineOffset: 2, + }, '& strong': { color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, }, @@ -152,7 +156,7 @@ const Root = styled('div')( marginLeft: 4, height: 26, width: 26, - backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, + backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.grey[50]})`, color: `var(--muidocs-palette-grey-600, ${lightTheme.palette.grey[600]})`, border: '1px solid', borderColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`, @@ -403,6 +407,14 @@ const Root = styled('div')( opacity: 1, transform: 'translate(1px, 0)', }, + '& a.remove-link-arrow::after': { + // Allows to remove link arrows for images + display: 'none', + }, + '& .Ad-root a::after': { + // Remove link arrow for ads + display: 'none', + }, '& a, & a code': { // Style taken from the Link component color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`, @@ -538,11 +550,6 @@ const Root = styled('div')( display: 'block', }, }, - '&:focus-visible': { - outline: '2px solid', - outlineOffset: 2, - outlineColor: lightTheme.palette.primaryDark[500], - }, }, '& .MuiCode-copyKeypress': { pointerEvents: 'none', @@ -601,7 +608,7 @@ const Root = styled('div')( '&:hover .anchor-link, & .comment-link': { color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primaryDark[300]})`, borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`, - backgroundColor: alpha(darkTheme.palette.primary[900], 0.3), + backgroundColor: alpha(darkTheme.palette.primaryDark[700], 0.5), '&:hover': { borderColor: `var(--muidocs-palette-primary-900, ${darkTheme.palette.primary[900]})`, backgroundColor: alpha(darkTheme.palette.primary[900], 0.6), @@ -644,13 +651,13 @@ const Root = styled('div')( borderColor: `var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`, '& > code': { height: 'fit-content', - backgroundColor: `var(--muidocs-palette-primaryDark-600, ${lightTheme.palette.primaryDark[600]})`, - borderColor: `var(--muidocs-palette-primaryDark-500, ${lightTheme.palette.primaryDark[500]})`, + backgroundColor: `var(--muidocs-palette-primaryDark-600, ${darkTheme.palette.primaryDark[600]})`, + borderColor: `var(--muidocs-palette-primaryDark-500, ${darkTheme.palette.primaryDark[500]})`, }, '&.MuiCallout-error': { color: `var(--muidocs-palette-error-50, ${darkTheme.palette.error[50]})`, backgroundColor: alpha(darkTheme.palette.error[700], 0.2), - borderColor: alpha(lightTheme.palette.error[600], 0.3), + borderColor: alpha(darkTheme.palette.error[600], 0.3), '& strong': { color: `var(--muidocs-palette-error-300, ${darkTheme.palette.error[300]})`, }, diff --git a/docs/src/modules/utils/CodeCopy.tsx b/docs/src/modules/utils/CodeCopy.tsx index de5f21450ef5cd..68bd9de869c65a 100644 --- a/docs/src/modules/utils/CodeCopy.tsx +++ b/docs/src/modules/utils/CodeCopy.tsx @@ -160,24 +160,28 @@ export function CodeCopyProvider({ children }: CodeCopyProviderProps) { const rootNode = React.useRef(null); React.useEffect(() => { document.addEventListener('keydown', (event) => { - if (hasNativeSelection(event.target as HTMLTextAreaElement)) { - // Skip if user is highlighting a text. - return; - } - // event.key === 'c' is not enough as alt+c can lead to ©, ç, or other characters on macOS. - // event.code === 'KeyC' is not enough as event.code assume a QWERTY keyboard layout which would - // be wrong with a Dvorak keyboard (as if pressing J). - const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey; - if (String.fromCharCode(event.keyCode) !== 'C' || !isModifierKeyPressed) { + if (!rootNode.current) { return; } - if (!rootNode.current) { + + // Skip if user is highlighting a text. + if (hasNativeSelection(event.target as HTMLTextAreaElement)) { return; } - const copyBtn = rootNode.current.querySelector('.MuiCode-copy') as HTMLButtonElement | null; - if (!copyBtn) { + + // Skip if it's not a copy keyboard event + if ( + !( + (event.ctrlKey || event.metaKey) && + event.key.toLowerCase() === 'c' && + !event.shiftKey && + !event.altKey + ) + ) { return; } + + const copyBtn = rootNode.current.querySelector('.MuiCode-copy') as HTMLButtonElement; const initialEventAction = copyBtn.getAttribute('data-ga-event-action'); // update the 'data-ga-event-action' on the button to track keyboard interaction copyBtn.dataset.gaEventAction = diff --git a/docs/src/modules/utils/mapApiPageTranslations.js b/docs/src/modules/utils/mapApiPageTranslations.js index d2ab8b302650b3..321b74a3d5f456 100644 --- a/docs/src/modules/utils/mapApiPageTranslations.js +++ b/docs/src/modules/utils/mapApiPageTranslations.js @@ -1,4 +1,4 @@ -import { createRender } from '@mui/markdown'; +import { createRender } from '@mui/internal-markdown'; import { LANGUAGES_IGNORE_PAGES } from '../../../config'; const notEnglishJsonRegExp = /-([a-z]{2})\.json$/; diff --git a/docs/src/modules/utils/useClipboardCopy.ts b/docs/src/modules/utils/useClipboardCopy.ts index 590da7febb671b..dd0b3b618b8e3e 100644 --- a/docs/src/modules/utils/useClipboardCopy.ts +++ b/docs/src/modules/utils/useClipboardCopy.ts @@ -3,7 +3,7 @@ import clipboardCopy from 'clipboard-copy'; export default function useClipboardCopy() { const [isCopied, setIsCopied] = React.useState(false); - const timeout = React.useRef | undefined>(); + const timeout = React.useRef>(); const mounted = React.useRef(false); React.useEffect(() => { diff --git a/docs/src/pages/production-error/ErrorDecoder.js b/docs/src/pages/production-error/ErrorDecoder.js index 8231ebe61074dc..59c85abb9a6cc7 100644 --- a/docs/src/pages/production-error/ErrorDecoder.js +++ b/docs/src/pages/production-error/ErrorDecoder.js @@ -3,7 +3,7 @@ import { useRouter } from 'next/router'; import Link from '@mui/material/Link'; import Typography from '@mui/material/Typography'; import { styled } from '@mui/material/styles'; -import { renderMarkdown } from '@mui/markdown'; +import { renderMarkdown } from '@mui/internal-markdown'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; const ErrorMessageSection = styled('div')({ diff --git a/docs/translations/api-docs/accordion/accordion.json b/docs/translations/api-docs/accordion/accordion.json index 051403c5756afb..a5f88b5260eb03 100644 --- a/docs/translations/api-docs/accordion/accordion.json +++ b/docs/translations/api-docs/accordion/accordion.json @@ -28,7 +28,7 @@ "description": "The component used for the transition. Follow this guide to learn more about the requirements for this component." }, "TransitionProps": { - "description": "Props applied to the transition element. By default, the element is based on this Transition component." + "description": "Props applied to the transition element. By default, the element is based on this Transition component." } }, "classDescriptions": { diff --git a/docs/translations/api-docs/alert/alert.json b/docs/translations/api-docs/alert/alert.json index a1e17498e79a4b..981d938a884279 100644 --- a/docs/translations/api-docs/alert/alert.json +++ b/docs/translations/api-docs/alert/alert.json @@ -43,6 +43,26 @@ "nodeName": "the action wrapper element", "conditions": "action is provided" }, + "colorError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"error\"" + }, + "colorInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"info\"" + }, + "colorSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"success\"" + }, + "colorWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"warning\"" + }, "filled": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -51,22 +71,24 @@ "filledError": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"filled\" and color=\"error\"" + "conditions": "variant=\"filled\" and color=\"error\"", + "deprecationInfo": "Combine the .MuiAlert-filled and .MuiAlert-colorError classes instead. How to migrate." }, "filledInfo": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"filled\" and color=\"info\"" + "conditions": "variant=\"filled\" and color=\"info\"", + "deprecationInfo": "Combine the .MuiAlert-filled and .MuiAlert-colorInfo classes instead. How to migrate." }, "filledSuccess": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"filled\" and color=\"success\"" + "conditions": "variant=\"filled\" and color=\"success\"", + "deprecationInfo": "Combine the .MuiAlert-filled and .MuiAlert-colorSuccess classes instead. How to migrate." }, "filledWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"filled\" and color=\"warning\"" + "description": "Styles applied to the root element if variant="filled" and color="warning"", + "deprecationInfo": "Combine the .MuiAlert-filled and .MuiAlert-colorWarning classes instead. How to migrate." }, "icon": { "description": "Styles applied to {{nodeName}}.", @@ -84,22 +106,26 @@ "outlinedError": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"error\"" + "conditions": "variant=\"outlined\" and color=\"error\"", + "deprecationInfo": "Combine the .MuiAlert-outlined and .MuiAlert-colorError classes instead. How to migrate." }, "outlinedInfo": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"info\"" + "conditions": "variant=\"outlined\" and color=\"info\"", + "deprecationInfo": "Combine the .MuiAlert-outlined and .MuiAlert-colorInfo classes instead. How to migrate." }, "outlinedSuccess": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"success\"" + "conditions": "variant=\"outlined\" and color=\"success\"", + "deprecationInfo": "Combine the .MuiAlert-outlined and .MuiAlert-colorSuccess classes instead. How to migrate." }, "outlinedWarning": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"warning\"" + "conditions": "variant=\"outlined\" and color=\"warning\"", + "deprecationInfo": "Combine the .MuiAlert-outlined and .MuiAlert-colorWarning classes instead. How to migrate." }, "root": { "description": "Styles applied to the root element." }, "standard": { @@ -110,22 +136,26 @@ "standardError": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"standard\" and color=\"error\"" + "conditions": "variant=\"standard\" and color=\"error\"", + "deprecationInfo": "Combine the .MuiAlert-standard and .MuiAlert-colorError classes instead. How to migrate." }, "standardInfo": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"standard\" and color=\"info\"" + "conditions": "variant=\"standard\" and color=\"info\"", + "deprecationInfo": "Combine the .MuiAlert-standard and .MuiAlert-colorInfo classes instead. How to migrate." }, "standardSuccess": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"standard\" and color=\"success\"" + "conditions": "variant=\"standard\" and color=\"success\"", + "deprecationInfo": "Combine the .MuiAlert-standard and .MuiAlert-colorSuccess classes instead. How to migrate." }, "standardWarning": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"standard\" and color=\"warning\"" + "conditions": "variant=\"standard\" and color=\"warning\"", + "deprecationInfo": "Combine the .MuiAlert-standard and .MuiAlert-colorWarning classes instead. How to migrate." } }, "slotDescriptions": { diff --git a/docs/translations/api-docs/button/button.json b/docs/translations/api-docs/button/button.json index 9f40cac1d4db52..a5d8a0a8da8375 100644 --- a/docs/translations/api-docs/button/button.json +++ b/docs/translations/api-docs/button/button.json @@ -34,11 +34,41 @@ "variant": { "description": "The variant to use." } }, "classDescriptions": { + "colorError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"error\"" + }, + "colorInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"info\"" + }, "colorInherit": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "color=\"inherit\"" }, + "colorPrimary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"primary\"" + }, + "colorSecondary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"secondary\"" + }, + "colorSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"success\"" + }, + "colorWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"warning\"" + }, "contained": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -47,52 +77,62 @@ "containedError": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"error\"" + "conditions": "variant=\"contained\" and color=\"error\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorError classes instead. How to migrate" }, "containedInfo": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"info\"" + "conditions": "variant=\"contained\" and color=\"info\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInfo classes instead. How to migrate" }, "containedInherit": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"inherit\"" + "conditions": "variant=\"contained\" and color=\"inherit\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInherit classes instead. How to migrate" }, "containedPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"primary\"" + "conditions": "variant=\"contained\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorPrimary classes instead. How to migrate" }, "containedSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"secondary\"" + "conditions": "variant=\"contained\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSecondary classes instead. How to migrate" }, "containedSizeLarge": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"large\" and variant=\"contained\"" + "conditions": "size=\"large\" and variant=\"contained\"", + "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-contained classes instead. How to migrate" }, "containedSizeMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"medium\" and variant=\"contained\"" + "conditions": "size=\"medium\" and variant=\"contained\"", + "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-contained classes instead. How to migrate" }, "containedSizeSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"small\" and variant=\"contained\"" + "conditions": "size=\"small\" and variant=\"contained\"", + "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-contained classes instead. How to migrate" }, "containedSuccess": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"success\"" + "conditions": "variant=\"contained\" and color=\"success\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSuccess classes instead. How to migrate" }, "containedWarning": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"warning\"" + "conditions": "variant=\"contained\" and color=\"warning\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorWarning classes instead. How to migrate" }, "disabled": { "description": "State class applied to {{nodeName}} if {{conditions}}.", @@ -119,20 +159,24 @@ "nodeName": "the root element", "conditions": "fullWidth={true}" }, + "icon": { "description": "Styles applied to the icon element if supplied" }, "iconSizeLarge": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", - "conditions": "supplied and size=\"large\"" + "conditions": "supplied and size=\"large\"", + "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeLarge classes instead. How to migrate" }, "iconSizeMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", - "conditions": "supplied and size=\"medium\"" + "conditions": "supplied and size=\"medium\"", + "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeMedium classes instead. How to migrate" }, "iconSizeSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", - "conditions": "supplied and size=\"small\"" + "conditions": "supplied and size=\"small\"", + "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeSmall classes instead. How to migrate" }, "outlined": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -142,52 +186,62 @@ "outlinedError": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"error\"" + "conditions": "variant=\"outlined\" and color=\"error\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorError classes instead. How to migrate" }, "outlinedInfo": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"info\"" + "conditions": "variant=\"outlined\" and color=\"info\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInfo classes instead. How to migrate" }, "outlinedInherit": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"inherit\"" + "conditions": "variant=\"outlined\" and color=\"inherit\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInherit classes instead. How to migrate" }, "outlinedPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"primary\"" + "conditions": "variant=\"outlined\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorPrimary classes instead. How to migrate" }, "outlinedSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"secondary\"" + "conditions": "variant=\"outlined\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSecondary classes instead. How to migrate" }, "outlinedSizeLarge": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"large\" and variant=\"outlined\"" + "conditions": "size=\"large\" and variant=\"outlined\"", + "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-outlined classes instead. How to migrate" }, "outlinedSizeMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"medium\" and variant=\"outlined\"" + "conditions": "size=\"medium\" and variant=\"outlined\"", + "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-outlined classes instead. How to migrate" }, "outlinedSizeSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"small\" and variant=\"outlined\"" + "conditions": "size=\"small\" and variant=\"outlined\"", + "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-outlined classes instead. How to migrate" }, "outlinedSuccess": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"success\"" + "conditions": "variant=\"outlined\" and color=\"success\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSuccess classes instead. How to migrate" }, "outlinedWarning": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"warning\"" + "conditions": "variant=\"outlined\" and color=\"warning\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorWarning classes instead. How to migrate" }, "root": { "description": "Styles applied to the root element." }, "sizeLarge": { @@ -218,52 +272,62 @@ "textError": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"error\"" + "conditions": "variant=\"text\" and color=\"error\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorError classes instead. How to migrate" }, "textInfo": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"info\"" + "conditions": "variant=\"text\" and color=\"info\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInfo classes instead. How to migrate" }, "textInherit": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"inherit\"" + "conditions": "variant=\"text\" and color=\"inherit\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInherit classes instead. How to migrate" }, "textPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"primary\"" + "conditions": "variant=\"text\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorPrimary classes instead. How to migrate" }, "textSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"secondary\"" + "conditions": "variant=\"text\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSecondary classes instead. How to migrate" }, "textSizeLarge": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"large\" and variant=\"text\"" + "conditions": "size=\"large\" and variant=\"text\"", + "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-text classes instead. How to migrate" }, "textSizeMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"medium\" and variant=\"text\"" + "conditions": "size=\"medium\" and variant=\"text\"", + "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-text classes instead. How to migrate" }, "textSizeSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"small\" and variant=\"text\"" + "conditions": "size=\"small\" and variant=\"text\"", + "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-text classes instead. How to migrate" }, "textSuccess": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"success\"" + "conditions": "variant=\"text\" and color=\"success\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSuccess classes instead. How to migrate" }, "textWarning": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"warning\"" + "conditions": "variant=\"text\" and color=\"warning\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorWarning classes instead. How to migrate" } } } diff --git a/docs/translations/api-docs/chip/chip.json b/docs/translations/api-docs/chip/chip.json index 3cbbc11437a3bc..fddc50bdb23a05 100644 --- a/docs/translations/api-docs/chip/chip.json +++ b/docs/translations/api-docs/chip/chip.json @@ -41,22 +41,26 @@ "avatarColorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the avatar element", - "conditions": "color=\"primary\"" + "conditions": "color=\"primary\"", + "deprecationInfo": "Combine the .MuiChip-avatar and .MuiChip-colorPrimary classes instead. How to migrate" }, "avatarColorSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the avatar element", - "conditions": "color=\"secondary\"" + "conditions": "color=\"secondary\"", + "deprecationInfo": "Combine the .MuiChip-avatar and .MuiChip-colorSecondary classes instead. How to migrate" }, "avatarMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the avatar element", - "conditions": "size=\"medium\"" + "conditions": "size=\"medium\"", + "deprecationInfo": "Combine the .MuiChip-avatar and .MuiChip-sizeMedium classes instead. How to migrate" }, "avatarSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the avatar element", - "conditions": "size=\"small\"" + "conditions": "size=\"small\"", + "deprecationInfo": "Combine the .MuiChip-avatar and .MuiChip-sizeSmall classes instead. How to migrate" }, "clickable": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -66,12 +70,14 @@ "clickableColorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "onClick and color=\"primary\" is defined or clickable={true}" + "conditions": "onClick and color=\"primary\" is defined or clickable={true}", + "deprecationInfo": "Combine the .MuiChip-clickable and .MuiChip-colorPrimary classes instead. How to migrate" }, "clickableColorSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "onClick and color=\"secondary\" is defined or clickable={true}" + "conditions": "onClick and color=\"secondary\" is defined or clickable={true}", + "deprecationInfo": "Combine the .MuiChip-clickable and .MuiChip-colorSecondary classes instead. How to migrate" }, "colorError": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -111,12 +117,14 @@ "deletableColorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "onDelete and color=\"primary\" is defined" + "conditions": "onDelete and color=\"primary\" is defined", + "deprecationInfo": "Combine the .MuiChip-deletable and .MuiChip-colorPrimary classes instead. How to migrate" }, "deletableColorSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "onDelete and color=\"secondary\" is defined" + "conditions": "onDelete and color=\"secondary\" is defined", + "deprecationInfo": "Combine the .MuiChip-deletable and .MuiChip-colorSecondary classes instead. How to migrate" }, "deleteIcon": { "description": "Styles applied to {{nodeName}}.", @@ -125,42 +133,50 @@ "deleteIconColorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the deleteIcon element", - "conditions": "color=\"primary\" and variant=\"filled\"" + "conditions": "color=\"primary\"", + "deprecationInfo": "Combine the .MuiChip-deleteIcon and .MuiChip-colorPrimary classes instead. How to migrate" }, "deleteIconColorSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the deleteIcon element", - "conditions": "color=\"secondary\" and variant=\"filled\"" + "conditions": "color=\"secondary\"", + "deprecationInfo": "Combine the .MuiChip-deleteIcon and .MuiChip-colorSecondary classes instead. How to migrate" }, "deleteIconFilledColorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the deleteIcon element", - "conditions": "color=\"primary\" and variant=\"filled\"" + "conditions": "color=\"primary\" and variant=\"filled\"", + "deprecationInfo": "Combine the .MuiChip-deleteIcon , .MuiChip-filled and .MuiChip-colorPrimary classes instead. How to migrate" }, "deleteIconFilledColorSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the deleteIcon element", - "conditions": "color=\"secondary\" and variant=\"filled\"" + "conditions": "color=\"secondary\" and variant=\"filled\"", + "deprecationInfo": "Combine the .MuiChip-deleteIcon , .MuiChip-filled and .MuiChip-colorSecondary classes instead. How to migrate" }, "deleteIconMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the deleteIcon element", - "conditions": "size=\"medium\"" + "conditions": "size=\"medium\"", + "deprecationInfo": "Combine the .MuiChip-deleteIcon and .MuiChip-sizeMedium classes instead. How to migrate" }, "deleteIconOutlinedColorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the deleteIcon element", - "conditions": "color=\"primary\" and variant=\"outlined\"" + "conditions": "color=\"primary\" and variant=\"outlined\"", + "deprecationInfo": "Combine the .MuiChip-deleteIcon , .MuiChip-outlined and .MuiChip-colorPrimary classes instead. How to migrate" }, "deleteIconOutlinedColorSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the deleteIcon element", - "conditions": "color=\"secondary\" and variant=\"outlined\"" + "conditions": "color=\"secondary\" and variant=\"outlined\"", + "deprecationInfo": "Combine the .MuiChip-deleteIcon , .MuiChip-outlined and .MuiChip-colorSecondary classes instead. How to migrate" }, "deleteIconSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the deleteIcon element", - "conditions": "size=\"small\"" + "conditions": "size=\"small\"", + "deprecationInfo": "Combine the .MuiChip-deleteIcon and .MuiChip-sizeSmall classes instead. How to migrate" }, "disabled": { "description": "State class applied to {{nodeName}} if {{conditions}}.", @@ -175,12 +191,14 @@ "filledPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"filled\" and color=\"primary\"" + "conditions": "variant=\"filled\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiChip-filled and .MuiChip-colorPrimary classes instead. How to migrate" }, "filledSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"filled\" and color=\"secondary\"" + "conditions": "variant=\"filled\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiChip-filled and .MuiChip-colorSecondary classes instead. How to migrate" }, "focusVisible": { "description": "State class applied to {{nodeName}} if {{conditions}}.", @@ -191,22 +209,26 @@ "iconColorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", - "conditions": "color=\"primary\"" + "conditions": "color=\"primary\"", + "deprecationInfo": "Combine the .MuiChip-icon and .MuiChip-colorPrimary classes instead. How to migrate" }, "iconColorSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", - "conditions": "color=\"secondary\"" + "conditions": "color=\"secondary\"", + "deprecationInfo": "Combine the .MuiChip-icon and .MuiChip-colorSecondary classes instead. How to migrate" }, "iconMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", - "conditions": "size=\"medium\"" + "conditions": "size=\"medium\"", + "deprecationInfo": "Combine the .MuiChip-icon and .MuiChip-sizeMedium classes instead. How to migrate" }, "iconSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", - "conditions": "size=\"small\"" + "conditions": "size=\"small\"", + "deprecationInfo": "Combine the .MuiChip-icon and .MuiChip-sizeSmall classes instead. How to migrate" }, "label": { "description": "Styles applied to {{nodeName}}.", @@ -215,12 +237,14 @@ "labelMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the label span element", - "conditions": "size=\"medium\"" + "conditions": "size=\"medium\"", + "deprecationInfo": "Combine the .MuiChip-label and .MuiChip-sizeMedium classes instead. How to migrate" }, "labelSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the label span element", - "conditions": "size=\"small\"" + "conditions": "size=\"small\"", + "deprecationInfo": "Combine the .MuiChip-label and .MuiChip-sizeSmall classes instead. How to migrate" }, "outlined": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -230,12 +254,14 @@ "outlinedPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"primary\"" + "conditions": "variant=\"outlined\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiChip-outlined and .MuiChip-colorPrimary classes instead. How to migrate" }, "outlinedSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"secondary\"" + "conditions": "variant=\"outlined\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiChip-outlined and .MuiChip-colorSecondary classes instead. How to migrate" }, "root": { "description": "Styles applied to the root element." }, "sizeMedium": { diff --git a/docs/translations/api-docs/dialog/dialog.json b/docs/translations/api-docs/dialog/dialog.json index 29cff3fa7174a1..6b38d43a40179c 100644 --- a/docs/translations/api-docs/dialog/dialog.json +++ b/docs/translations/api-docs/dialog/dialog.json @@ -42,7 +42,7 @@ "description": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object." }, "TransitionProps": { - "description": "Props applied to the transition element. By default, the element is based on this Transition component." + "description": "Props applied to the transition element. By default, the element is based on this Transition component." } }, "classDescriptions": { diff --git a/docs/translations/api-docs/loading-button/loading-button.json b/docs/translations/api-docs/loading-button/loading-button.json index 754eada8502299..dfa09c1686c1b8 100644 --- a/docs/translations/api-docs/loading-button/loading-button.json +++ b/docs/translations/api-docs/loading-button/loading-button.json @@ -19,11 +19,41 @@ "variant": { "description": "The variant to use." } }, "classDescriptions": { + "colorError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"error\"" + }, + "colorInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"info\"" + }, "colorInherit": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "color=\"inherit\"" }, + "colorPrimary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"primary\"" + }, + "colorSecondary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"secondary\"" + }, + "colorSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"success\"" + }, + "colorWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"warning\"" + }, "contained": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -32,52 +62,62 @@ "containedError": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"error\"" + "conditions": "variant=\"contained\" and color=\"error\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorError classes instead. How to migrate" }, "containedInfo": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"info\"" + "conditions": "variant=\"contained\" and color=\"info\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInfo classes instead. How to migrate" }, "containedInherit": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"inherit\"" + "conditions": "variant=\"contained\" and color=\"inherit\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInherit classes instead. How to migrate" }, "containedPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"primary\"" + "conditions": "variant=\"contained\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorPrimary classes instead. How to migrate" }, "containedSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"secondary\"" + "conditions": "variant=\"contained\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSecondary classes instead. How to migrate" }, "containedSizeLarge": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"large\" and variant=\"contained\"" + "conditions": "size=\"large\" and variant=\"contained\"", + "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-contained classes instead. How to migrate" }, "containedSizeMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"medium\" and variant=\"contained\"" + "conditions": "size=\"medium\" and variant=\"contained\"", + "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-contained classes instead. How to migrate" }, "containedSizeSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"small\" and variant=\"contained\"" + "conditions": "size=\"small\" and variant=\"contained\"", + "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-contained classes instead. How to migrate" }, "containedSuccess": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"success\"" + "conditions": "variant=\"contained\" and color=\"success\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSuccess classes instead. How to migrate" }, "containedWarning": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"warning\"" + "conditions": "variant=\"contained\" and color=\"warning\"", + "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorWarning classes instead. How to migrate" }, "disabled": { "description": "State class applied to {{nodeName}} if {{conditions}}.", @@ -109,20 +149,24 @@ "nodeName": "the root element", "conditions": "fullWidth={true}" }, + "icon": { "description": "Styles applied to the icon element if supplied" }, "iconSizeLarge": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", - "conditions": "supplied and size=\"large\"" + "conditions": "supplied and size=\"large\"", + "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeLarge classes instead. How to migrate" }, "iconSizeMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", - "conditions": "supplied and size=\"medium\"" + "conditions": "supplied and size=\"medium\"", + "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeMedium classes instead. How to migrate" }, "iconSizeSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", - "conditions": "supplied and size=\"small\"" + "conditions": "supplied and size=\"small\"", + "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeSmall classes instead. How to migrate" }, "loading": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -156,52 +200,62 @@ "outlinedError": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"error\"" + "conditions": "variant=\"outlined\" and color=\"error\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorError classes instead. How to migrate" }, "outlinedInfo": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"info\"" + "conditions": "variant=\"outlined\" and color=\"info\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInfo classes instead. How to migrate" }, "outlinedInherit": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"inherit\"" + "conditions": "variant=\"outlined\" and color=\"inherit\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInherit classes instead. How to migrate" }, "outlinedPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"primary\"" + "conditions": "variant=\"outlined\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorPrimary classes instead. How to migrate" }, "outlinedSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"secondary\"" + "conditions": "variant=\"outlined\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSecondary classes instead. How to migrate" }, "outlinedSizeLarge": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"large\" and variant=\"outlined\"" + "conditions": "size=\"large\" and variant=\"outlined\"", + "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-outlined classes instead. How to migrate" }, "outlinedSizeMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"medium\" and variant=\"outlined\"" + "conditions": "size=\"medium\" and variant=\"outlined\"", + "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-outlined classes instead. How to migrate" }, "outlinedSizeSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"small\" and variant=\"outlined\"" + "conditions": "size=\"small\" and variant=\"outlined\"", + "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-outlined classes instead. How to migrate" }, "outlinedSuccess": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"success\"" + "conditions": "variant=\"outlined\" and color=\"success\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSuccess classes instead. How to migrate" }, "outlinedWarning": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"warning\"" + "conditions": "variant=\"outlined\" and color=\"warning\"", + "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorWarning classes instead. How to migrate" }, "root": { "description": "Styles applied to the root element." }, "sizeLarge": { @@ -237,52 +291,62 @@ "textError": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"error\"" + "conditions": "variant=\"text\" and color=\"error\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorError classes instead. How to migrate" }, "textInfo": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"info\"" + "conditions": "variant=\"text\" and color=\"info\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInfo classes instead. How to migrate" }, "textInherit": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"inherit\"" + "conditions": "variant=\"text\" and color=\"inherit\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInherit classes instead. How to migrate" }, "textPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"primary\"" + "conditions": "variant=\"text\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorPrimary classes instead. How to migrate" }, "textSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"secondary\"" + "conditions": "variant=\"text\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSecondary classes instead. How to migrate" }, "textSizeLarge": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"large\" and variant=\"text\"" + "conditions": "size=\"large\" and variant=\"text\"", + "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-text classes instead. How to migrate" }, "textSizeMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"medium\" and variant=\"text\"" + "conditions": "size=\"medium\" and variant=\"text\"", + "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-text classes instead. How to migrate" }, "textSizeSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "size=\"small\" and variant=\"text\"" + "conditions": "size=\"small\" and variant=\"text\"", + "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-text classes instead. How to migrate" }, "textSuccess": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"success\"" + "conditions": "variant=\"text\" and color=\"success\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSuccess classes instead. How to migrate" }, "textWarning": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"warning\"" + "conditions": "variant=\"text\" and color=\"warning\"", + "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorWarning classes instead. How to migrate" } } } diff --git a/docs/translations/api-docs/menu/menu.json b/docs/translations/api-docs/menu/menu.json index a19c18051221c0..44fdf2c56de693 100644 --- a/docs/translations/api-docs/menu/menu.json +++ b/docs/translations/api-docs/menu/menu.json @@ -37,7 +37,7 @@ "description": "The length of the transition in ms, or 'auto'" }, "TransitionProps": { - "description": "Props applied to the transition element. By default, the element is based on this Transition component." + "description": "Props applied to the transition element. By default, the element is based on this Transition component." }, "variant": { "description": "The variant to use. Use menu to prevent selected items from impacting the initial focus." diff --git a/docs/translations/api-docs/pagination-item/pagination-item.json b/docs/translations/api-docs/pagination-item/pagination-item.json index 4184e90ba4d8e1..de26e46725f5d8 100644 --- a/docs/translations/api-docs/pagination-item/pagination-item.json +++ b/docs/translations/api-docs/pagination-item/pagination-item.json @@ -66,13 +66,13 @@ "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "variant=\"outlined\" and color=\"primary\"", - "deprecationInfo": "Combine the .MuiPaginationItem-outlined and .MuiPaginationItem-colorPrimary classes instead." + "deprecationInfo": "Combine the .MuiPaginationItem-outlined and .MuiPaginationItem-colorPrimary classes instead. How to migrate." }, "outlinedSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "variant=\"outlined\" and color=\"secondary\"", - "deprecationInfo": "Combine the .MuiPaginationItem-outlined and .MuiPaginationItem-colorSecondary classes instead." + "deprecationInfo": "Combine the .MuiPaginationItem-outlined and .MuiPaginationItem-colorSecondary classes instead. How to migrate." }, "page": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -114,13 +114,13 @@ "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "variant=\"text\" and color=\"primary\"", - "deprecationInfo": "Combine the .MuiPaginationItem-text and .MuiPaginationItem-colorPrimary classes instead." + "deprecationInfo": "Combine the .MuiPaginationItem-text and .MuiPaginationItem-colorPrimary classes instead. How to migrate." }, "textSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "variant=\"text\" and color=\"secondary\"", - "deprecationInfo": "Combine the .MuiPaginationItem-text and .MuiPaginationItem-colorSecondary classes instead." + "deprecationInfo": "Combine the .MuiPaginationItem-text and .MuiPaginationItem-colorSecondary classes instead. How to migrate." } } } diff --git a/docs/translations/api-docs/popover/popover.json b/docs/translations/api-docs/popover/popover.json index c7807e80430662..081a32941cb56f 100644 --- a/docs/translations/api-docs/popover/popover.json +++ b/docs/translations/api-docs/popover/popover.json @@ -50,7 +50,7 @@ "description": "Set to 'auto' to automatically calculate transition time based on height." }, "TransitionProps": { - "description": "Props applied to the transition element. By default, the element is based on this Transition component." + "description": "Props applied to the transition element. By default, the element is based on this Transition component." } }, "classDescriptions": { diff --git a/docs/translations/api-docs/slider/slider.json b/docs/translations/api-docs/slider/slider.json index 12e4419e1cdec1..71c3e069bd729b 100644 --- a/docs/translations/api-docs/slider/slider.json +++ b/docs/translations/api-docs/slider/slider.json @@ -12,11 +12,9 @@ "color": { "description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide." }, - "components": { - "description": "The components used for each slot inside.
    This prop is an alias for the slots prop. It's recommended to use the slots prop instead." - }, + "components": { "description": "The components used for each slot inside." }, "componentsProps": { - "description": "The extra props for the slot components. You can override the existing props or add new ones.
    This prop is an alias for the slotProps prop. It's recommended to use the slotProps prop instead, as componentsProps will be deprecated in the future." + "description": "The extra props for the slot components. You can override the existing props or add new ones." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." diff --git a/docs/translations/api-docs/snackbar/snackbar.json b/docs/translations/api-docs/snackbar/snackbar.json index a4d51e16bc00f9..1c36673de3ba27 100644 --- a/docs/translations/api-docs/snackbar/snackbar.json +++ b/docs/translations/api-docs/snackbar/snackbar.json @@ -46,7 +46,7 @@ "description": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object." }, "TransitionProps": { - "description": "Props applied to the transition element. By default, the element is based on this Transition component." + "description": "Props applied to the transition element. By default, the element is based on this Transition component." } }, "classDescriptions": { diff --git a/docs/translations/api-docs/speed-dial/speed-dial.json b/docs/translations/api-docs/speed-dial/speed-dial.json index 92844ed1f38132..878f9981ebe621 100644 --- a/docs/translations/api-docs/speed-dial/speed-dial.json +++ b/docs/translations/api-docs/speed-dial/speed-dial.json @@ -46,7 +46,7 @@ "description": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object." }, "TransitionProps": { - "description": "Props applied to the transition element. By default, the element is based on this Transition component." + "description": "Props applied to the transition element. By default, the element is based on this Transition component." } }, "classDescriptions": { diff --git a/docs/translations/api-docs/step-content/step-content.json b/docs/translations/api-docs/step-content/step-content.json index 20f4f92a7eb345..e3f3391e657ed8 100644 --- a/docs/translations/api-docs/step-content/step-content.json +++ b/docs/translations/api-docs/step-content/step-content.json @@ -13,7 +13,7 @@ "description": "Adjust the duration of the content expand transition. Passed as a prop to the transition component.
    Set to 'auto' to automatically calculate transition time based on height." }, "TransitionProps": { - "description": "Props applied to the transition element. By default, the element is based on this Transition component." + "description": "Props applied to the transition element. By default, the element is based on this Transition component." } }, "classDescriptions": { diff --git a/docs/translations/api-docs/tooltip/tooltip.json b/docs/translations/api-docs/tooltip/tooltip.json index dfaf2c810047c3..dbebeb920dcfd5 100644 --- a/docs/translations/api-docs/tooltip/tooltip.json +++ b/docs/translations/api-docs/tooltip/tooltip.json @@ -70,7 +70,7 @@ "description": "The component used for the transition. Follow this guide to learn more about the requirements for this component." }, "TransitionProps": { - "description": "Props applied to the transition element. By default, the element is based on this Transition component." + "description": "Props applied to the transition element. By default, the element is based on this Transition component." } }, "classDescriptions": { diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 0e9306ea05b4ee..3c6360c5851317 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -35,6 +35,7 @@ "overrideStylesStyledComponent": "", "pageDescription": "API reference docs for the React {{name}} component. Learn about the props, CSS, and other APIs of this exported module.", "props": "Props", + "properties": "Properties", "parameters": "Parameters", "requires-ref": "This needs to be able to hold a ref.", "returns": "Returns: ", @@ -53,7 +54,7 @@ "required": "Required", "optional": "Optional", "additional-info": { - "cssApi": "See CSS API below for more details.", + "cssApi": "See CSS classes API below for more details.", "sx": "See the `sx` page for more details.", "slotsApi": "See Slots API below for more details.", "joy-size": "To learn how to add custom sizes to the component, check out Themed components—Extend sizes.", diff --git a/docs/types/docs.d.ts b/docs/types/docs.d.ts index 99dc918d166794..ccfe104621b766 100644 --- a/docs/types/docs.d.ts +++ b/docs/types/docs.d.ts @@ -13,7 +13,7 @@ declare module 'docs/src/modules/components/HighlightedCode' { copyButtonProps?: JSX.IntrinsicElements['button']; /** * short identifier of the code language - * see @mui/markdown/prism for possible languages + * see @mui/internal-markdown/prism for possible languages */ language: string; /** diff --git a/docs/writing-rules.zip b/docs/writing-rules.zip new file mode 100644 index 00000000000000..a1decff750c500 Binary files /dev/null and b/docs/writing-rules.zip differ diff --git a/.github/styles/Blog/BrandName.yml b/docs/writing-rules/BrandName.yml similarity index 51% rename from .github/styles/Blog/BrandName.yml rename to docs/writing-rules/BrandName.yml index b95387c58510b3..bfdb8da88c2725 100644 --- a/.github/styles/Blog/BrandName.yml +++ b/docs/writing-rules/BrandName.yml @@ -1,4 +1,7 @@ -# Without a non-breaking space, brand names can be split in the middle, with the start and end on two different lines. +# Without a non-breaking space, brand names can be split in the middle +# with the start and end on two different lines. +# For example, Apple does this meticulously with their brand name: https://www.apple.com/macbook-air/. +# Also read https://www.chrisdpeters.com/blog/using-non-breaking-spaces-to-help-with-branding/ for why. extends: substitution message: Use a non-breaking space for brand name ('%s' instead of '%s') level: error @@ -14,3 +17,8 @@ swap: MUI Core: MUI Core MUI Toolpad: MUI Toolpad MUI Connect: MUI Connect + Stack Overflow: Stack Overflow +# Don't forget to run the following command to generate the package writing-rules.zip file +# Vale uses that ZIP file and not the YAML files. +# +# pnpm docs:zipRules diff --git a/docs/writing-rules/ComponentNameConventions.yml b/docs/writing-rules/ComponentNameConventions.yml new file mode 100644 index 00000000000000..df3c31e4984702 --- /dev/null +++ b/docs/writing-rules/ComponentNameConventions.yml @@ -0,0 +1,16 @@ +extends: substitution +message: To be consistent with component name, consider using '%s' instead of '%s'. +level: error +ignorecase: true +# swap maps tokens in form of bad: good +# for more information: https://vale.sh/docs/topics/styles/#substitution +swap: + 'Heat map': Heatmap + 'Tree map': Treemap + 'Sparkline Chart': Sparkline + 'Gauge Chart': Gauge + 'Treemap Chart': Treemap +# Don't forget to run the following command to generate the package writing-rules.zip file +# Vale uses that ZIP file and not the YAML files. +# +# pnpm docs:zipRules diff --git a/.github/styles/Blog/ComposedWords.yml b/docs/writing-rules/ComposedWords.yml similarity index 66% rename from .github/styles/Blog/ComposedWords.yml rename to docs/writing-rules/ComposedWords.yml index 149dc0bd6ab30f..0821b0025a92a3 100644 --- a/.github/styles/Blog/ComposedWords.yml +++ b/docs/writing-rules/ComposedWords.yml @@ -11,3 +11,9 @@ swap: 'sub components': subcomponents 'use-case': 'use case' 'usecase': 'use case' + 'client side': 'client-side' + 'server side': 'server-side' +# Don't forget to run the following command to generate the package writing-rules.zip file +# Vale uses that ZIP file and not the YAML files. +# +# pnpm docs:zipRules diff --git a/.github/styles/Blog/NamingConventions.yml b/docs/writing-rules/NamingConventions.yml similarity index 72% rename from .github/styles/Blog/NamingConventions.yml rename to docs/writing-rules/NamingConventions.yml index ac0e3668f9fc45..6fc6645f1862f4 100644 --- a/.github/styles/Blog/NamingConventions.yml +++ b/docs/writing-rules/NamingConventions.yml @@ -17,3 +17,8 @@ swap: Css: CSS NPM: npm # https://css-tricks.com/start-sentence-npm/ Github: GitHub + StackOverflow: Stack Overflow +# Don't forget to run the following command to generate the package writing-rules.zip file +# Vale uses that ZIP file and not the YAML files. +# +# pnpm docs:zipRules diff --git a/.github/styles/Blog/NoCompanyName.yml b/docs/writing-rules/NoCompanyName.yml similarity index 67% rename from .github/styles/Blog/NoCompanyName.yml rename to docs/writing-rules/NoCompanyName.yml index a60b3c3bc2d78f..19e4d50efe0a1a 100644 --- a/.github/styles/Blog/NoCompanyName.yml +++ b/docs/writing-rules/NoCompanyName.yml @@ -12,3 +12,8 @@ exceptions: - 'MUI Toolpad' - 'MUI Connect' - 'MUI organization' # valid use of a regular space + +# Don't forget to run the following command to generate the package writing-rules.zip file +# Vale uses that ZIP file and not the YAML files. +# +# pnpm docs:zipRules diff --git a/.github/styles/Blog/Typos.yml b/docs/writing-rules/Typos.yml similarity index 62% rename from .github/styles/Blog/Typos.yml rename to docs/writing-rules/Typos.yml index 9397f615325054..c0f85dc4bacf4a 100644 --- a/.github/styles/Blog/Typos.yml +++ b/docs/writing-rules/Typos.yml @@ -9,3 +9,7 @@ swap: eg: e.g. eg.: e.g. 'e.g ': 'e.g. ' +# Don't forget to run the following command to generate the package writing-rules.zip file +# Vale uses that ZIP file and not the YAML files. +# +# pnpm docs:zipRules diff --git a/examples/material-ui-remix-ts/app/entry.client.tsx b/examples/material-ui-remix-ts/app/entry.client.tsx index 69e61993f3dd7e..97286fb8e10286 100644 --- a/examples/material-ui-remix-ts/app/entry.client.tsx +++ b/examples/material-ui-remix-ts/app/entry.client.tsx @@ -50,5 +50,5 @@ if (window.requestIdleCallback) { } else { // Safari doesn't support requestIdleCallback // https://caniuse.com/requestidlecallback - window.setTimeout(hydrate, 1); + setTimeout(hydrate, 1); } diff --git a/nx.json b/nx.json index cf46819b1157a9..89b57c7c1b8295 100644 --- a/nx.json +++ b/nx.json @@ -2,9 +2,14 @@ "$schema": "./node_modules/nx/schemas/nx-schema.json", "extends": "nx/presets/npm.json", "targetDefaults": { + "copy-license": { + "cache": true, + "outputs": ["{projectRoot}/LICENSE"] + }, "build": { "cache": true, - "dependsOn": ["^build"] + "dependsOn": ["copy-license", "^build"], + "outputs": ["{projectRoot}/build"] } } } diff --git a/package.json b/package.json index 21587fee30f237..fdbeeb5c4bb7ed 100644 --- a/package.json +++ b/package.json @@ -1,18 +1,20 @@ { "name": "@mui/monorepo", - "version": "5.15.10", + "version": "5.15.11", "private": true, "scripts": { "preinstall": "npx only-allow pnpm", "proptypes": "tsx ./scripts/generateProptypes.ts", "deduplicate": "pnpm dedupe", "benchmark:browser": "pnpm --filter benchmark browser", - "build": "lerna run --scope \"@mui/*\" build", + "build": "lerna run build --ignore docs", + "build:public": "lerna run --no-private build", + "build:ci": "lerna run build --ignore docs --concurrency 8 --skip-nx-cache", "build:zero": "lerna run --scope \"@mui/zero-*\" build", "clean:zero": "pnpm --filter \"@mui/zero-*\" clean", "build:codesandbox": "NODE_OPTIONS=\"--max_old_space_size=4096\" lerna run --concurrency 8 --scope \"@mui/*\" --scope \"@mui-internal/*\" --no-private build", "release:version": "lerna version --no-changelog --no-push --no-git-tag-version --no-private --force-publish=@mui/core-downloads-tracker", - "release:build": "lerna run --concurrency 8 --scope \"@mui/*\" build --skip-nx-cache", + "release:build": "lerna run --concurrency 8 --no-private build --skip-nx-cache", "release:changelog": "node scripts/releaseChangelog.mjs", "release:publish": "pnpm publish --recursive --tag latest", "release:publish:dry-run": "pnpm publish --recursive --tag latest --registry=\"http://localhost:4873/\"", @@ -34,6 +36,7 @@ "docs:typescript:check": "pnpm --filter docs typescript", "docs:typescript:formatted": "tsx ./docs/scripts/formattedTSDemos", "docs:mdicons:synonyms": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js,.mjs\" ./docs/scripts/updateIconSynonyms && pnpm prettier", + "docs:zipRules": "cd docs && rm writing-rules.zip && zip -r writing-rules.zip writing-rules", "extract-error-codes": "cross-env MUI_EXTRACT_ERROR_CODES=true lerna run --concurrency 8 build:modern", "rsc:build": "tsx ./packages/rsc-builder/buildRsc.ts", "template:screenshot": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/generateTemplateScreenshots", @@ -101,11 +104,11 @@ "@babel/preset-typescript": "^7.23.3", "@babel/register": "^7.23.7", "@mnajdova/enzyme-adapter-react-18": "^0.2.0", + "@mui/internal-scripts": "workspace:^", "@mui-internal/api-docs-builder": "workspace:^", "@mui-internal/api-docs-builder-core": "workspace:^", "@mui-internal/docs-utils": "workspace:^", "@mui-internal/test-utils": "workspace:^", - "@mui-internal/typescript-to-proptypes": "workspace:^", "@mui/joy": "workspace:*", "@mui/material": "workspace:^", "@mui/utils": "workspace:^", diff --git a/packages/typescript-to-proptypes/.npmignore b/packages-internal/scripts/.npmignore similarity index 100% rename from packages/typescript-to-proptypes/.npmignore rename to packages-internal/scripts/.npmignore diff --git a/packages-internal/scripts/CHANGELOG.md b/packages-internal/scripts/CHANGELOG.md new file mode 100644 index 00000000000000..dd86612b025856 --- /dev/null +++ b/packages-internal/scripts/CHANGELOG.md @@ -0,0 +1,11 @@ +# Changelog + +## 1.0.1 + +- Unpinned version of the @mui-internal/docs-utils dependency. +- Corrected the README file. + +## 1.0.0 + +Initial release as an npm package. +The package contains the typescript-to-proptypes module. diff --git a/packages-internal/scripts/README.md b/packages-internal/scripts/README.md new file mode 100644 index 00000000000000..7d0ed6c75648a4 --- /dev/null +++ b/packages-internal/scripts/README.md @@ -0,0 +1,12 @@ +# @mui/internal-scripts + +Code infra scripts for MUI repositories +It is not meant for general use. + +## Scripts + +- `build` - transpiles TS files into the build directory. +- `release:publish` - builds the project and publishes it in the npm registry. +- `release:publish:dry-run` - builds the project and publishes it in a local registry accessible on port 4873 (this is the default port of Verdaccio private npm server). +- `test` - runs all the tests. +- `typescript` - checks validity of types. diff --git a/packages/typescript-to-proptypes/package.json b/packages-internal/scripts/package.json similarity index 56% rename from packages/typescript-to-proptypes/package.json rename to packages-internal/scripts/package.json index e7626422b9a64a..755c1b94c8305e 100644 --- a/packages/typescript-to-proptypes/package.json +++ b/packages-internal/scripts/package.json @@ -1,26 +1,28 @@ { - "name": "@mui-internal/typescript-to-proptypes", - "version": "1.0.3", + "name": "@mui/internal-scripts", + "version": "1.0.1", "author": "MUI Team", - "description": "Generate proptypes from TypeScript declarations. This is a fork of the typescript-to-proptypes package adapted for MUI needs. This is an internal package not meant for general use.", + "description": "Utilities supporting MUI libraries build and docs generation. This is an internal package not meant for general use.", "main": "build/index.js", "exports": { - ".": "./build/index.js" + "./typescript-to-proptypes": { + "default": "./build/typescript-to-proptypes/index.js", + "types": "./build/typescript-to-proptypes/index.d.ts" + } }, - "types": "./build/index.d.ts", "repository": { "type": "git", "url": "https://github.com/mui/material-ui.git", - "directory": "packages/typescript-to-proptypes" + "directory": "packages-internal/scripts" }, "license": "MIT", "scripts": { "prebuild": "rimraf ./build", - "build": "tsc -b tsconfig.build.json", - "release:publish": "pnpm publish --tag latest", - "release:publish:dry-run": "pnpm publish --tag latest --registry=\"http://localhost:4873/\"", - "test": "cd ../../ && cross-env NODE_ENV=test mocha --config packages/typescript-to-proptypes/.mocharc.js 'packages/typescript-to-proptypes/**/*.test.ts'", - "typescript": "tsc -b tsconfig.json" + "build": "tsc --build tsconfig.json", + "release:publish": "pnpm build && pnpm publish --tag latest", + "release:publish:dry-run": "pnpm build && pnpm publish --tag latest --registry=\"http://localhost:4873/\"", + "test": "cd ../../ && cross-env NODE_ENV=test mocha --config packages-internal/scripts/typescript-to-proptypes/test/.mocharc.js 'packages-internal/scripts/typescript-to-proptypes/**/*.test.ts'", + "typescript": "tsc --build tsconfig.typecheck.json" }, "dependencies": { "@babel/core": "^7.23.9", @@ -28,7 +30,7 @@ "@babel/plugin-syntax-jsx": "^7.23.3", "@babel/plugin-syntax-typescript": "^7.23.3", "@babel/types": "^7.23.9", - "@mui-internal/docs-utils": "workspace:*", + "@mui-internal/docs-utils": "workspace:^", "doctrine": "^3.0.0", "lodash": "^4.17.21", "typescript": "^5.3.3", diff --git a/packages-internal/scripts/tsconfig.base.json b/packages-internal/scripts/tsconfig.base.json new file mode 100644 index 00000000000000..07b81b7552e0a4 --- /dev/null +++ b/packages-internal/scripts/tsconfig.base.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "target": "ES2020", + "moduleResolution": "node", + "module": "commonjs", + "types": ["node"], + + "strict": true, + "declaration": true, + "declarationMap": true, + "sourceMap": true, + "composite": true, + + "esModuleInterop": true, + "isolatedModules": true + } +} diff --git a/packages-internal/scripts/tsconfig.json b/packages-internal/scripts/tsconfig.json new file mode 100644 index 00000000000000..beb8da4f93e065 --- /dev/null +++ b/packages-internal/scripts/tsconfig.json @@ -0,0 +1,5 @@ +{ + "files": [], + "include": [], + "references": [{ "path": "./typescript-to-proptypes" }] +} diff --git a/packages-internal/scripts/tsconfig.typecheck.json b/packages-internal/scripts/tsconfig.typecheck.json new file mode 100644 index 00000000000000..ae133d71c10945 --- /dev/null +++ b/packages-internal/scripts/tsconfig.typecheck.json @@ -0,0 +1,11 @@ +{ + "extends": "./tsconfig.base.json", + "compilerOptions": { + "rootDir": "../..", + "types": ["node", "mocha"], + "noEmit": true + }, + "include": ["./**/*.ts"], + "exclude": ["./build", "./node_modules"], + "references": [{ "path": "../../packages/docs-utils/tsconfig.build.json" }] +} diff --git a/packages/typescript-to-proptypes/CHANGELOG.old.md b/packages-internal/scripts/typescript-to-proptypes/CHANGELOG.old.md similarity index 100% rename from packages/typescript-to-proptypes/CHANGELOG.old.md rename to packages-internal/scripts/typescript-to-proptypes/CHANGELOG.old.md diff --git a/packages/typescript-to-proptypes/src/createType.ts b/packages-internal/scripts/typescript-to-proptypes/src/createType.ts similarity index 100% rename from packages/typescript-to-proptypes/src/createType.ts rename to packages-internal/scripts/typescript-to-proptypes/src/createType.ts diff --git a/packages/typescript-to-proptypes/src/generatePropTypes.ts b/packages-internal/scripts/typescript-to-proptypes/src/generatePropTypes.ts similarity index 100% rename from packages/typescript-to-proptypes/src/generatePropTypes.ts rename to packages-internal/scripts/typescript-to-proptypes/src/generatePropTypes.ts diff --git a/packages/typescript-to-proptypes/src/getPropTypesFromFile.ts b/packages-internal/scripts/typescript-to-proptypes/src/getPropTypesFromFile.ts similarity index 100% rename from packages/typescript-to-proptypes/src/getPropTypesFromFile.ts rename to packages-internal/scripts/typescript-to-proptypes/src/getPropTypesFromFile.ts diff --git a/packages/typescript-to-proptypes/src/getTypeHash.ts b/packages-internal/scripts/typescript-to-proptypes/src/getTypeHash.ts similarity index 100% rename from packages/typescript-to-proptypes/src/getTypeHash.ts rename to packages-internal/scripts/typescript-to-proptypes/src/getTypeHash.ts diff --git a/packages/typescript-to-proptypes/src/index.ts b/packages-internal/scripts/typescript-to-proptypes/src/index.ts similarity index 100% rename from packages/typescript-to-proptypes/src/index.ts rename to packages-internal/scripts/typescript-to-proptypes/src/index.ts diff --git a/packages/typescript-to-proptypes/src/injectPropTypesInFile.ts b/packages-internal/scripts/typescript-to-proptypes/src/injectPropTypesInFile.ts similarity index 100% rename from packages/typescript-to-proptypes/src/injectPropTypesInFile.ts rename to packages-internal/scripts/typescript-to-proptypes/src/injectPropTypesInFile.ts diff --git a/packages/typescript-to-proptypes/src/models.ts b/packages-internal/scripts/typescript-to-proptypes/src/models.ts similarity index 100% rename from packages/typescript-to-proptypes/src/models.ts rename to packages-internal/scripts/typescript-to-proptypes/src/models.ts diff --git a/packages/typescript-to-proptypes/.mocharc.js b/packages-internal/scripts/typescript-to-proptypes/test/.mocharc.js similarity index 64% rename from packages/typescript-to-proptypes/.mocharc.js rename to packages-internal/scripts/typescript-to-proptypes/test/.mocharc.js index 2093a87b1241b3..5a60ddd0c6b908 100644 --- a/packages/typescript-to-proptypes/.mocharc.js +++ b/packages-internal/scripts/typescript-to-proptypes/test/.mocharc.js @@ -1,5 +1,5 @@ module.exports = { extension: ['js', 'ts', 'tsx'], ignore: ['**/node_modules/**'], - require: [require.resolve('./test/testSetup')], + require: [require.resolve('./testSetup')], }; diff --git a/packages/typescript-to-proptypes/test/boolean-values/optional/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/boolean-values/optional/input.d.ts similarity index 100% rename from packages/typescript-to-proptypes/test/boolean-values/optional/input.d.ts rename to packages-internal/scripts/typescript-to-proptypes/test/boolean-values/optional/input.d.ts diff --git a/packages/typescript-to-proptypes/test/boolean-values/optional/output.js b/packages-internal/scripts/typescript-to-proptypes/test/boolean-values/optional/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/boolean-values/optional/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/boolean-values/optional/output.js diff --git a/packages/typescript-to-proptypes/test/boolean-values/required/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/boolean-values/required/input.d.ts similarity index 100% rename from packages/typescript-to-proptypes/test/boolean-values/required/input.d.ts rename to packages-internal/scripts/typescript-to-proptypes/test/boolean-values/required/input.d.ts diff --git a/packages/typescript-to-proptypes/test/boolean-values/required/output.js b/packages-internal/scripts/typescript-to-proptypes/test/boolean-values/required/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/boolean-values/required/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/boolean-values/required/output.js diff --git a/packages/typescript-to-proptypes/test/code-order/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/code-order/input.d.ts similarity index 100% rename from packages/typescript-to-proptypes/test/code-order/input.d.ts rename to packages-internal/scripts/typescript-to-proptypes/test/code-order/input.d.ts diff --git a/packages/typescript-to-proptypes/test/code-order/input.js b/packages-internal/scripts/typescript-to-proptypes/test/code-order/input.js similarity index 100% rename from packages/typescript-to-proptypes/test/code-order/input.js rename to packages-internal/scripts/typescript-to-proptypes/test/code-order/input.js diff --git a/packages/typescript-to-proptypes/test/code-order/output.js b/packages-internal/scripts/typescript-to-proptypes/test/code-order/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/code-order/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/code-order/output.js diff --git a/packages/typescript-to-proptypes/test/default-value/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/default-value/input.d.ts similarity index 100% rename from packages/typescript-to-proptypes/test/default-value/input.d.ts rename to packages-internal/scripts/typescript-to-proptypes/test/default-value/input.d.ts diff --git a/packages/typescript-to-proptypes/test/default-value/output.js b/packages-internal/scripts/typescript-to-proptypes/test/default-value/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/default-value/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/default-value/output.js diff --git a/packages/typescript-to-proptypes/test/generator/html-elements/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/generator/html-elements/input.d.ts similarity index 100% rename from packages/typescript-to-proptypes/test/generator/html-elements/input.d.ts rename to packages-internal/scripts/typescript-to-proptypes/test/generator/html-elements/input.d.ts diff --git a/packages/typescript-to-proptypes/test/generator/html-elements/output.js b/packages-internal/scripts/typescript-to-proptypes/test/generator/html-elements/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/generator/html-elements/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/generator/html-elements/output.js diff --git a/packages/typescript-to-proptypes/test/generic/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/generic/input.d.ts similarity index 100% rename from packages/typescript-to-proptypes/test/generic/input.d.ts rename to packages-internal/scripts/typescript-to-proptypes/test/generic/input.d.ts diff --git a/packages/typescript-to-proptypes/test/generic/output.js b/packages-internal/scripts/typescript-to-proptypes/test/generic/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/generic/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/generic/output.js diff --git a/packages/typescript-to-proptypes/test/genericUnion/input.tsx b/packages-internal/scripts/typescript-to-proptypes/test/genericUnion/input.tsx similarity index 100% rename from packages/typescript-to-proptypes/test/genericUnion/input.tsx rename to packages-internal/scripts/typescript-to-proptypes/test/genericUnion/input.tsx diff --git a/packages/typescript-to-proptypes/test/genericUnion/output.js b/packages-internal/scripts/typescript-to-proptypes/test/genericUnion/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/genericUnion/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/genericUnion/output.js diff --git a/packages/typescript-to-proptypes/test/getThemeProps/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/getThemeProps/input.d.ts similarity index 100% rename from packages/typescript-to-proptypes/test/getThemeProps/input.d.ts rename to packages-internal/scripts/typescript-to-proptypes/test/getThemeProps/input.d.ts diff --git a/packages/typescript-to-proptypes/test/getThemeProps/input.js b/packages-internal/scripts/typescript-to-proptypes/test/getThemeProps/input.js similarity index 100% rename from packages/typescript-to-proptypes/test/getThemeProps/input.js rename to packages-internal/scripts/typescript-to-proptypes/test/getThemeProps/input.js diff --git a/packages/typescript-to-proptypes/test/getThemeProps/output.js b/packages-internal/scripts/typescript-to-proptypes/test/getThemeProps/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/getThemeProps/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/getThemeProps/output.js diff --git a/packages/typescript-to-proptypes/test/injector/all-props-ignored/input.tsx b/packages-internal/scripts/typescript-to-proptypes/test/injector/all-props-ignored/input.tsx similarity index 100% rename from packages/typescript-to-proptypes/test/injector/all-props-ignored/input.tsx rename to packages-internal/scripts/typescript-to-proptypes/test/injector/all-props-ignored/input.tsx diff --git a/packages/typescript-to-proptypes/test/injector/all-props-ignored/options.ts b/packages-internal/scripts/typescript-to-proptypes/test/injector/all-props-ignored/options.ts similarity index 100% rename from packages/typescript-to-proptypes/test/injector/all-props-ignored/options.ts rename to packages-internal/scripts/typescript-to-proptypes/test/injector/all-props-ignored/options.ts diff --git a/packages/typescript-to-proptypes/test/injector/all-props-ignored/output.js b/packages-internal/scripts/typescript-to-proptypes/test/injector/all-props-ignored/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/injector/all-props-ignored/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/injector/all-props-ignored/output.js diff --git a/packages/typescript-to-proptypes/test/injector/should-include-component-based/input.tsx b/packages-internal/scripts/typescript-to-proptypes/test/injector/should-include-component-based/input.tsx similarity index 100% rename from packages/typescript-to-proptypes/test/injector/should-include-component-based/input.tsx rename to packages-internal/scripts/typescript-to-proptypes/test/injector/should-include-component-based/input.tsx diff --git a/packages/typescript-to-proptypes/test/injector/should-include-component-based/options.ts b/packages-internal/scripts/typescript-to-proptypes/test/injector/should-include-component-based/options.ts similarity index 100% rename from packages/typescript-to-proptypes/test/injector/should-include-component-based/options.ts rename to packages-internal/scripts/typescript-to-proptypes/test/injector/should-include-component-based/options.ts diff --git a/packages/typescript-to-proptypes/test/injector/should-include-component-based/output.js b/packages-internal/scripts/typescript-to-proptypes/test/injector/should-include-component-based/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/injector/should-include-component-based/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/injector/should-include-component-based/output.js diff --git a/packages/typescript-to-proptypes/test/injector/should-include-filename-based/input.tsx b/packages-internal/scripts/typescript-to-proptypes/test/injector/should-include-filename-based/input.tsx similarity index 100% rename from packages/typescript-to-proptypes/test/injector/should-include-filename-based/input.tsx rename to packages-internal/scripts/typescript-to-proptypes/test/injector/should-include-filename-based/input.tsx diff --git a/packages/typescript-to-proptypes/test/injector/should-include-filename-based/options.ts b/packages-internal/scripts/typescript-to-proptypes/test/injector/should-include-filename-based/options.ts similarity index 100% rename from packages/typescript-to-proptypes/test/injector/should-include-filename-based/options.ts rename to packages-internal/scripts/typescript-to-proptypes/test/injector/should-include-filename-based/options.ts diff --git a/packages/typescript-to-proptypes/test/injector/should-include-filename-based/output.js b/packages-internal/scripts/typescript-to-proptypes/test/injector/should-include-filename-based/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/injector/should-include-filename-based/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/injector/should-include-filename-based/output.js diff --git a/packages/typescript-to-proptypes/test/injector/string-props/input.tsx b/packages-internal/scripts/typescript-to-proptypes/test/injector/string-props/input.tsx similarity index 100% rename from packages/typescript-to-proptypes/test/injector/string-props/input.tsx rename to packages-internal/scripts/typescript-to-proptypes/test/injector/string-props/input.tsx diff --git a/packages/typescript-to-proptypes/test/injector/string-props/output.js b/packages-internal/scripts/typescript-to-proptypes/test/injector/string-props/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/injector/string-props/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/injector/string-props/output.js diff --git a/packages/typescript-to-proptypes/test/injector/whitelisted-props/input.tsx b/packages-internal/scripts/typescript-to-proptypes/test/injector/whitelisted-props/input.tsx similarity index 100% rename from packages/typescript-to-proptypes/test/injector/whitelisted-props/input.tsx rename to packages-internal/scripts/typescript-to-proptypes/test/injector/whitelisted-props/input.tsx diff --git a/packages/typescript-to-proptypes/test/injector/whitelisted-props/options.ts b/packages-internal/scripts/typescript-to-proptypes/test/injector/whitelisted-props/options.ts similarity index 100% rename from packages/typescript-to-proptypes/test/injector/whitelisted-props/options.ts rename to packages-internal/scripts/typescript-to-proptypes/test/injector/whitelisted-props/options.ts diff --git a/packages/typescript-to-proptypes/test/injector/whitelisted-props/output.js b/packages-internal/scripts/typescript-to-proptypes/test/injector/whitelisted-props/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/injector/whitelisted-props/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/injector/whitelisted-props/output.js diff --git a/packages/typescript-to-proptypes/test/interfaceUnion/input.tsx b/packages-internal/scripts/typescript-to-proptypes/test/interfaceUnion/input.tsx similarity index 100% rename from packages/typescript-to-proptypes/test/interfaceUnion/input.tsx rename to packages-internal/scripts/typescript-to-proptypes/test/interfaceUnion/input.tsx diff --git a/packages/typescript-to-proptypes/test/interfaceUnion/output.js b/packages-internal/scripts/typescript-to-proptypes/test/interfaceUnion/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/interfaceUnion/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/interfaceUnion/output.js diff --git a/packages/typescript-to-proptypes/test/jsdoc-interface/classes.ts b/packages-internal/scripts/typescript-to-proptypes/test/jsdoc-interface/classes.ts similarity index 100% rename from packages/typescript-to-proptypes/test/jsdoc-interface/classes.ts rename to packages-internal/scripts/typescript-to-proptypes/test/jsdoc-interface/classes.ts diff --git a/packages/typescript-to-proptypes/test/jsdoc-interface/input.tsx b/packages-internal/scripts/typescript-to-proptypes/test/jsdoc-interface/input.tsx similarity index 100% rename from packages/typescript-to-proptypes/test/jsdoc-interface/input.tsx rename to packages-internal/scripts/typescript-to-proptypes/test/jsdoc-interface/input.tsx diff --git a/packages/typescript-to-proptypes/test/jsdoc-interface/output.js b/packages-internal/scripts/typescript-to-proptypes/test/jsdoc-interface/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/jsdoc-interface/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/jsdoc-interface/output.js diff --git a/packages/typescript-to-proptypes/test/mixed-literals/input.tsx b/packages-internal/scripts/typescript-to-proptypes/test/mixed-literals/input.tsx similarity index 100% rename from packages/typescript-to-proptypes/test/mixed-literals/input.tsx rename to packages-internal/scripts/typescript-to-proptypes/test/mixed-literals/input.tsx diff --git a/packages/typescript-to-proptypes/test/mixed-literals/output.js b/packages-internal/scripts/typescript-to-proptypes/test/mixed-literals/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/mixed-literals/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/mixed-literals/output.js diff --git a/packages/typescript-to-proptypes/test/omit-conditional/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/omit-conditional/input.d.ts similarity index 100% rename from packages/typescript-to-proptypes/test/omit-conditional/input.d.ts rename to packages-internal/scripts/typescript-to-proptypes/test/omit-conditional/input.d.ts diff --git a/packages/typescript-to-proptypes/test/omit-conditional/output.js b/packages-internal/scripts/typescript-to-proptypes/test/omit-conditional/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/omit-conditional/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/omit-conditional/output.js diff --git a/packages/typescript-to-proptypes/test/options-test/input.tsx b/packages-internal/scripts/typescript-to-proptypes/test/options-test/input.tsx similarity index 100% rename from packages/typescript-to-proptypes/test/options-test/input.tsx rename to packages-internal/scripts/typescript-to-proptypes/test/options-test/input.tsx diff --git a/packages/typescript-to-proptypes/test/options-test/options.ts b/packages-internal/scripts/typescript-to-proptypes/test/options-test/options.ts similarity index 91% rename from packages/typescript-to-proptypes/test/options-test/options.ts rename to packages-internal/scripts/typescript-to-proptypes/test/options-test/options.ts index 0d76f3064bb9b8..254f96b7b7d4be 100644 --- a/packages/typescript-to-proptypes/test/options-test/options.ts +++ b/packages-internal/scripts/typescript-to-proptypes/test/options-test/options.ts @@ -8,7 +8,7 @@ const options: TestOptions = { } return true; }, - }, + } as TestOptions['parser'], injector: { includeJSDoc: false, comment: 'Proptypes generated automatically', diff --git a/packages/typescript-to-proptypes/test/options-test/output.js b/packages-internal/scripts/typescript-to-proptypes/test/options-test/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/options-test/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/options-test/output.js diff --git a/packages/typescript-to-proptypes/test/overloaded-function-component/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/overloaded-function-component/input.d.ts similarity index 100% rename from packages/typescript-to-proptypes/test/overloaded-function-component/input.d.ts rename to packages-internal/scripts/typescript-to-proptypes/test/overloaded-function-component/input.d.ts diff --git a/packages/typescript-to-proptypes/test/overloaded-function-component/options.ts b/packages-internal/scripts/typescript-to-proptypes/test/overloaded-function-component/options.ts similarity index 82% rename from packages/typescript-to-proptypes/test/overloaded-function-component/options.ts rename to packages-internal/scripts/typescript-to-proptypes/test/overloaded-function-component/options.ts index 2fa9ca8cddac8b..7bb82591a8b820 100644 --- a/packages/typescript-to-proptypes/test/overloaded-function-component/options.ts +++ b/packages-internal/scripts/typescript-to-proptypes/test/overloaded-function-component/options.ts @@ -3,7 +3,7 @@ import { TestOptions } from '../types'; const options: TestOptions = { parser: { checkDeclarations: true, - }, + } as TestOptions['parser'], }; export default options; diff --git a/packages/typescript-to-proptypes/test/overloaded-function-component/output.js b/packages-internal/scripts/typescript-to-proptypes/test/overloaded-function-component/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/overloaded-function-component/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/overloaded-function-component/output.js diff --git a/packages/typescript-to-proptypes/test/partial-any-props/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/partial-any-props/input.d.ts similarity index 100% rename from packages/typescript-to-proptypes/test/partial-any-props/input.d.ts rename to packages-internal/scripts/typescript-to-proptypes/test/partial-any-props/input.d.ts diff --git a/packages/typescript-to-proptypes/test/partial-any-props/output.js b/packages-internal/scripts/typescript-to-proptypes/test/partial-any-props/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/partial-any-props/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/partial-any-props/output.js diff --git a/packages/typescript-to-proptypes/test/propTypes-casting/input.tsx b/packages-internal/scripts/typescript-to-proptypes/test/propTypes-casting/input.tsx similarity index 100% rename from packages/typescript-to-proptypes/test/propTypes-casting/input.tsx rename to packages-internal/scripts/typescript-to-proptypes/test/propTypes-casting/input.tsx diff --git a/packages/typescript-to-proptypes/test/propTypes-casting/output.js b/packages-internal/scripts/typescript-to-proptypes/test/propTypes-casting/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/propTypes-casting/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/propTypes-casting/output.js diff --git a/packages/typescript-to-proptypes/test/reconcile-prop-types/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/reconcile-prop-types/input.d.ts similarity index 100% rename from packages/typescript-to-proptypes/test/reconcile-prop-types/input.d.ts rename to packages-internal/scripts/typescript-to-proptypes/test/reconcile-prop-types/input.d.ts diff --git a/packages/typescript-to-proptypes/test/reconcile-prop-types/input.js b/packages-internal/scripts/typescript-to-proptypes/test/reconcile-prop-types/input.js similarity index 100% rename from packages/typescript-to-proptypes/test/reconcile-prop-types/input.js rename to packages-internal/scripts/typescript-to-proptypes/test/reconcile-prop-types/input.js diff --git a/packages/typescript-to-proptypes/test/reconcile-prop-types/options.ts b/packages-internal/scripts/typescript-to-proptypes/test/reconcile-prop-types/options.ts similarity index 100% rename from packages/typescript-to-proptypes/test/reconcile-prop-types/options.ts rename to packages-internal/scripts/typescript-to-proptypes/test/reconcile-prop-types/options.ts diff --git a/packages/typescript-to-proptypes/test/reconcile-prop-types/output.js b/packages-internal/scripts/typescript-to-proptypes/test/reconcile-prop-types/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/reconcile-prop-types/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/reconcile-prop-types/output.js diff --git a/packages/typescript-to-proptypes/test/remove-proptypes/input.tsx b/packages-internal/scripts/typescript-to-proptypes/test/remove-proptypes/input.tsx similarity index 100% rename from packages/typescript-to-proptypes/test/remove-proptypes/input.tsx rename to packages-internal/scripts/typescript-to-proptypes/test/remove-proptypes/input.tsx diff --git a/packages/typescript-to-proptypes/test/remove-proptypes/options.ts b/packages-internal/scripts/typescript-to-proptypes/test/remove-proptypes/options.ts similarity index 89% rename from packages/typescript-to-proptypes/test/remove-proptypes/options.ts rename to packages-internal/scripts/typescript-to-proptypes/test/remove-proptypes/options.ts index ed232575d39da3..3fa1538b62dc2b 100644 --- a/packages/typescript-to-proptypes/test/remove-proptypes/options.ts +++ b/packages-internal/scripts/typescript-to-proptypes/test/remove-proptypes/options.ts @@ -7,7 +7,7 @@ const options: TestOptions = { }, parser: { checkDeclarations: true, - }, + } as TestOptions['parser'], }; export default options; diff --git a/packages/typescript-to-proptypes/test/remove-proptypes/output.js b/packages-internal/scripts/typescript-to-proptypes/test/remove-proptypes/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/remove-proptypes/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/remove-proptypes/output.js diff --git a/packages/typescript-to-proptypes/test/sort-unions/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/sort-unions/input.d.ts similarity index 100% rename from packages/typescript-to-proptypes/test/sort-unions/input.d.ts rename to packages-internal/scripts/typescript-to-proptypes/test/sort-unions/input.d.ts diff --git a/packages/typescript-to-proptypes/test/sort-unions/input.js b/packages-internal/scripts/typescript-to-proptypes/test/sort-unions/input.js similarity index 100% rename from packages/typescript-to-proptypes/test/sort-unions/input.js rename to packages-internal/scripts/typescript-to-proptypes/test/sort-unions/input.js diff --git a/packages/typescript-to-proptypes/test/sort-unions/options.ts b/packages-internal/scripts/typescript-to-proptypes/test/sort-unions/options.ts similarity index 100% rename from packages/typescript-to-proptypes/test/sort-unions/options.ts rename to packages-internal/scripts/typescript-to-proptypes/test/sort-unions/options.ts diff --git a/packages/typescript-to-proptypes/test/sort-unions/output.js b/packages-internal/scripts/typescript-to-proptypes/test/sort-unions/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/sort-unions/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/sort-unions/output.js diff --git a/packages/typescript-to-proptypes/test/testSetup.js b/packages-internal/scripts/typescript-to-proptypes/test/testSetup.js similarity index 100% rename from packages/typescript-to-proptypes/test/testSetup.js rename to packages-internal/scripts/typescript-to-proptypes/test/testSetup.js diff --git a/packages/typescript-to-proptypes/test/type-unknown/input.tsx b/packages-internal/scripts/typescript-to-proptypes/test/type-unknown/input.tsx similarity index 100% rename from packages/typescript-to-proptypes/test/type-unknown/input.tsx rename to packages-internal/scripts/typescript-to-proptypes/test/type-unknown/input.tsx diff --git a/packages/typescript-to-proptypes/test/type-unknown/output.js b/packages-internal/scripts/typescript-to-proptypes/test/type-unknown/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/type-unknown/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/type-unknown/output.js diff --git a/packages/typescript-to-proptypes/test/types.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/types.d.ts similarity index 100% rename from packages/typescript-to-proptypes/test/types.d.ts rename to packages-internal/scripts/typescript-to-proptypes/test/types.d.ts diff --git a/packages/typescript-to-proptypes/test/typescript-to-proptypes.test.ts b/packages-internal/scripts/typescript-to-proptypes/test/typescript-to-proptypes.test.ts similarity index 94% rename from packages/typescript-to-proptypes/test/typescript-to-proptypes.test.ts rename to packages-internal/scripts/typescript-to-proptypes/test/typescript-to-proptypes.test.ts index afeca522b5d596..769925840e26b8 100644 --- a/packages/typescript-to-proptypes/test/typescript-to-proptypes.test.ts +++ b/packages-internal/scripts/typescript-to-proptypes/test/typescript-to-proptypes.test.ts @@ -4,10 +4,7 @@ import * as ts from 'typescript'; import { expect } from 'chai'; import glob from 'fast-glob'; import prettier from 'prettier'; -import { - TypeScriptProject, - createTypeScriptProjectBuilder, -} from '@mui-internal/api-docs-builder/utils/createTypeScriptProject'; +import { TypeScriptProject, createTypeScriptProjectBuilder } from '@mui-internal/docs-utils'; import { generatePropTypes } from '../src/generatePropTypes'; import { injectPropTypesInFile } from '../src/injectPropTypesInFile'; import { getPropTypesFromFile } from '../src/getPropTypesFromFile'; @@ -42,7 +39,7 @@ describe('typescript-to-proptypes', () => { const buildProject = createTypeScriptProjectBuilder({ test: { rootPath: path.join(__dirname, '..'), - tsConfigPath: 'tsconfig.json', + tsConfigPath: 'tsconfig.test.json', }, }); @@ -72,7 +69,7 @@ describe('typescript-to-proptypes', () => { const components = getPropTypesFromFile({ filePath: inputPath, project, ...options.parser }); - let inputSource = null; + let inputSource: string | null = null; if (inputPath.endsWith('.d.ts')) { try { inputSource = fs.readFileSync(inputJS, 'utf8'); diff --git a/packages/typescript-to-proptypes/test/union-props/input.d.ts b/packages-internal/scripts/typescript-to-proptypes/test/union-props/input.d.ts similarity index 100% rename from packages/typescript-to-proptypes/test/union-props/input.d.ts rename to packages-internal/scripts/typescript-to-proptypes/test/union-props/input.d.ts diff --git a/packages/typescript-to-proptypes/test/union-props/input.js b/packages-internal/scripts/typescript-to-proptypes/test/union-props/input.js similarity index 100% rename from packages/typescript-to-proptypes/test/union-props/input.js rename to packages-internal/scripts/typescript-to-proptypes/test/union-props/input.js diff --git a/packages/typescript-to-proptypes/test/union-props/output.js b/packages-internal/scripts/typescript-to-proptypes/test/union-props/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/union-props/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/union-props/output.js diff --git a/packages/typescript-to-proptypes/test/unused-prop/input.tsx b/packages-internal/scripts/typescript-to-proptypes/test/unused-prop/input.tsx similarity index 100% rename from packages/typescript-to-proptypes/test/unused-prop/input.tsx rename to packages-internal/scripts/typescript-to-proptypes/test/unused-prop/input.tsx diff --git a/packages/typescript-to-proptypes/test/unused-prop/output.js b/packages-internal/scripts/typescript-to-proptypes/test/unused-prop/output.js similarity index 100% rename from packages/typescript-to-proptypes/test/unused-prop/output.js rename to packages-internal/scripts/typescript-to-proptypes/test/unused-prop/output.js diff --git a/packages-internal/scripts/typescript-to-proptypes/tsconfig.json b/packages-internal/scripts/typescript-to-proptypes/tsconfig.json new file mode 100644 index 00000000000000..ea50eaf1556770 --- /dev/null +++ b/packages-internal/scripts/typescript-to-proptypes/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../tsconfig.base.json", + "compilerOptions": { + "rootDir": "./src", + "outDir": "../build/typescript-to-proptypes", + "tsBuildInfoFile": "../build/typescript-to-proptypes/.tsbuildinfo" + }, + "include": ["./src/*"] +} diff --git a/packages/typescript-to-proptypes/tsconfig.json b/packages-internal/scripts/typescript-to-proptypes/tsconfig.test.json similarity index 77% rename from packages/typescript-to-proptypes/tsconfig.json rename to packages-internal/scripts/typescript-to-proptypes/tsconfig.test.json index 9939012a1f603f..d5feab93342396 100644 --- a/packages/typescript-to-proptypes/tsconfig.json +++ b/packages-internal/scripts/typescript-to-proptypes/tsconfig.test.json @@ -8,5 +8,5 @@ "isolatedModules": true }, "include": ["./src/*.ts", "./test/*.ts"], - "references": [{ "path": "../docs-utils/tsconfig.build.json" }] + "references": [{ "path": "../../docs-utils/tsconfig.build.json" }] } diff --git a/packages/api-docs-builder-core/baseUi/generateBaseUiApiPages.ts b/packages/api-docs-builder-core/baseUi/generateBaseUiApiPages.ts index 929ada80e915a5..2989159dd6fd24 100644 --- a/packages/api-docs-builder-core/baseUi/generateBaseUiApiPages.ts +++ b/packages/api-docs-builder-core/baseUi/generateBaseUiApiPages.ts @@ -1,7 +1,7 @@ import fs from 'fs'; import path from 'path'; import kebabCase from 'lodash/kebabCase'; -import { getHeaders } from '@mui/markdown'; +import { getHeaders } from '@mui/internal-markdown'; import findPagesMarkdown from '@mui-internal/api-docs-builder/utils/findPagesMarkdown'; import { writePrettifiedFile } from '@mui-internal/api-docs-builder/buildApiUtils'; @@ -30,7 +30,7 @@ export async function generateBaseUIApiPages() { import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from '${importStatement}?@mui/markdown'; +import * as pageProps from '${importStatement}?muiMarkdown'; export default function Page(props) { const { userLanguage, ...other } = props; @@ -116,7 +116,7 @@ Page.getLayout = (page) => { import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from '${importStatement}?@mui/markdown'; +import * as pageProps from '${importStatement}?muiMarkdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; ${apiTabImportStatements} diff --git a/packages/api-docs-builder-core/baseUi/getBaseUiComponentInfo.ts b/packages/api-docs-builder-core/baseUi/getBaseUiComponentInfo.ts index 1996895131d157..b3d8ba5c182530 100644 --- a/packages/api-docs-builder-core/baseUi/getBaseUiComponentInfo.ts +++ b/packages/api-docs-builder-core/baseUi/getBaseUiComponentInfo.ts @@ -1,7 +1,7 @@ import fs from 'fs'; import path from 'path'; import kebabCase from 'lodash/kebabCase'; -import { getHeaders, getTitle } from '@mui/markdown'; +import { getHeaders, getTitle } from '@mui/internal-markdown'; import { ComponentInfo, extractPackageFile, @@ -70,7 +70,7 @@ export function getBaseUiComponentInfo(filename: string): ComponentInfo { name: inheritedComponent, apiPathname: inheritedComponent === 'Transition' - ? 'http://reactcommunity.org/react-transition-group/transition/#Transition-props' + ? 'https://reactcommunity.org/react-transition-group/transition/#Transition-props' : `/base-ui/api/${kebabCase(inheritedComponent)}/`, }; }, diff --git a/packages/api-docs-builder-core/baseUi/getBaseUiHookInfo.ts b/packages/api-docs-builder-core/baseUi/getBaseUiHookInfo.ts index 7a74e48c77801e..6859623e09a5de 100644 --- a/packages/api-docs-builder-core/baseUi/getBaseUiHookInfo.ts +++ b/packages/api-docs-builder-core/baseUi/getBaseUiHookInfo.ts @@ -1,7 +1,7 @@ import fs from 'fs'; import path from 'path'; import kebabCase from 'lodash/kebabCase'; -import { getHeaders, getTitle } from '@mui/markdown'; +import { getHeaders, getTitle } from '@mui/internal-markdown'; import { ComponentInfo, HookInfo, diff --git a/packages/api-docs-builder-core/joyUi/getJoyUiComponentInfo.ts b/packages/api-docs-builder-core/joyUi/getJoyUiComponentInfo.ts index cedc966f4a1640..6e93feb97b55eb 100644 --- a/packages/api-docs-builder-core/joyUi/getJoyUiComponentInfo.ts +++ b/packages/api-docs-builder-core/joyUi/getJoyUiComponentInfo.ts @@ -1,7 +1,7 @@ import fs from 'fs'; import path from 'path'; import kebabCase from 'lodash/kebabCase'; -import { getHeaders, getTitle } from '@mui/markdown'; +import { getHeaders, getTitle } from '@mui/internal-markdown'; import { ComponentInfo, extractPackageFile, diff --git a/packages/api-docs-builder-core/materialUi/getMaterialUiComponentInfo.ts b/packages/api-docs-builder-core/materialUi/getMaterialUiComponentInfo.ts index f4dcdbcb3bbd68..be080b01e268a9 100644 --- a/packages/api-docs-builder-core/materialUi/getMaterialUiComponentInfo.ts +++ b/packages/api-docs-builder-core/materialUi/getMaterialUiComponentInfo.ts @@ -1,7 +1,7 @@ import fs from 'fs'; import path from 'path'; import kebabCase from 'lodash/kebabCase'; -import { getHeaders, getTitle } from '@mui/markdown'; +import { getHeaders, getTitle } from '@mui/internal-markdown'; import { ComponentInfo, extractPackageFile, @@ -42,7 +42,7 @@ export function getMaterialUiComponentInfo(filename: string): ComponentInfo { name: inheritedComponent.replace(/unstyled/i, ''), apiPathname: inheritedComponent === 'Transition' - ? 'http://reactcommunity.org/react-transition-group/transition/#Transition-props' + ? 'https://reactcommunity.org/react-transition-group/transition/#Transition-props' : `/${ inheritedComponent.match(/unstyled/i) ? 'base-ui' : 'material-ui' }/api/${kebabCase(inheritedComponent.replace(/unstyled/i, ''))}/`, diff --git a/packages/api-docs-builder-core/muiSystem/getSystemComponentInfo.ts b/packages/api-docs-builder-core/muiSystem/getSystemComponentInfo.ts index 5074cf652e9d87..7ae097a4ffc2eb 100644 --- a/packages/api-docs-builder-core/muiSystem/getSystemComponentInfo.ts +++ b/packages/api-docs-builder-core/muiSystem/getSystemComponentInfo.ts @@ -1,7 +1,7 @@ import fs from 'fs'; import path from 'path'; import kebabCase from 'lodash/kebabCase'; -import { getHeaders, getTitle } from '@mui/markdown'; +import { getHeaders, getTitle } from '@mui/internal-markdown'; import { ComponentInfo, extractPackageFile, diff --git a/packages/api-docs-builder-core/package.json b/packages/api-docs-builder-core/package.json index 471dfded3f00d3..aa4dc20a1f6fc2 100644 --- a/packages/api-docs-builder-core/package.json +++ b/packages/api-docs-builder-core/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@mui-internal/api-docs-builder": "workspace:^", - "@mui/markdown": "workspace:^", + "@mui/internal-markdown": "workspace:^", "docs": "workspace:^", "lodash": "^4.17.21" }, diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts index ebe0d2e8374a07..379532af1e7d0f 100644 --- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts +++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts @@ -9,7 +9,7 @@ import remark from 'remark'; import remarkVisit from 'unist-util-visit'; import type { Link } from 'mdast'; import { defaultHandlers, parse as docgenParse, ReactDocgenApi } from 'react-docgen'; -import { renderMarkdown } from '@mui/markdown'; +import { renderMarkdown } from '@mui/internal-markdown'; import { ComponentClassDefinition } from '@mui-internal/docs-utils'; import { ProjectSettings, SortingStrategiesType } from '../ProjectSettings'; import { ComponentInfo, toGitHubPath, writePrettifiedFile } from '../buildApiUtils'; diff --git a/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts index e9d357164e67cd..f02e5e6d9de344 100644 --- a/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts +++ b/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts @@ -8,7 +8,7 @@ import traverse from '@babel/traverse'; import { defaultHandlers, parse as docgenParse, ReactDocgenApi } from 'react-docgen'; import kebabCase from 'lodash/kebabCase'; import upperFirst from 'lodash/upperFirst'; -import { renderMarkdown } from '@mui/markdown'; +import { renderMarkdown } from '@mui/internal-markdown'; import { ProjectSettings } from '../ProjectSettings'; import { computeApiDescription } from './ComponentApiBuilder'; import { diff --git a/packages/api-docs-builder/package.json b/packages/api-docs-builder/package.json index d04916d0fd9049..ab819321b1f584 100644 --- a/packages/api-docs-builder/package.json +++ b/packages/api-docs-builder/package.json @@ -12,7 +12,7 @@ "@babel/preset-typescript": "^7.23.3", "@babel/traverse": "^7.23.9", "@mui-internal/docs-utils": "workspace:^", - "@mui/markdown": "workspace:^", + "@mui/internal-markdown": "workspace:^", "ast-types": "^0.14.2", "doctrine": "^3.0.0", "fast-glob": "^3.3.2", diff --git a/packages/api-docs-builder/utils/parseSlotsAndClasses.ts b/packages/api-docs-builder/utils/parseSlotsAndClasses.ts index 8056c440d663bf..92582e71355370 100644 --- a/packages/api-docs-builder/utils/parseSlotsAndClasses.ts +++ b/packages/api-docs-builder/utils/parseSlotsAndClasses.ts @@ -1,6 +1,6 @@ import * as ts from 'typescript'; import { ComponentClassDefinition } from '@mui-internal/docs-utils'; -import { renderMarkdown } from '@mui/markdown'; +import { renderMarkdown } from '@mui/internal-markdown'; import { getSymbolDescription, getSymbolJSDocTags } from '../buildApiUtils'; import { TypeScriptProject } from './createTypeScriptProject'; import { getPropsFromComponentNode } from './getPropsFromComponentNode'; @@ -53,7 +53,10 @@ export default function parseSlotsAndClasses({ componentName, muiName, slotInterfaceName, -}: ParseSlotsAndClassesParameters): { slots: Slot[]; classes: ComponentClassDefinition[] } { +}: ParseSlotsAndClassesParameters): { + slots: Slot[]; + classes: ComponentClassDefinition[]; +} { // Obtain an array of classes for the given component const classDefinitions = extractClasses( typescriptProject, diff --git a/packages/docs-utils/CHANGELOG.md b/packages/docs-utils/CHANGELOG.md index a6c93f9bf457a6..3255c1a72040cf 100644 --- a/packages/docs-utils/CHANGELOG.md +++ b/packages/docs-utils/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 1.0.2 + +Fixed incorrectly released package. + ## 1.0.0 Initial release as an npm package. diff --git a/packages/docs-utils/package.json b/packages/docs-utils/package.json index 2875cdea0f9636..a199a615938c69 100644 --- a/packages/docs-utils/package.json +++ b/packages/docs-utils/package.json @@ -1,6 +1,6 @@ { "name": "@mui-internal/docs-utils", - "version": "1.0.1", + "version": "1.0.2", "author": "MUI Team", "description": "Utilities for MUI docs. This is an internal package not meant for general use.", "main": "./build/index.js", @@ -17,8 +17,8 @@ "prebuild": "rimraf ./build", "build": "tsc -b tsconfig.build.json", "typescript": "tsc -b tsconfig.json", - "release:publish": "pnpm publish --tag latest", - "release:publish:dry-run": "pnpm publish --tag latest --registry=\"http://localhost:4873/\"" + "release:publish": "pnpm build && pnpm publish --tag latest", + "release:publish:dry-run": "pnpm build && pnpm publish --tag latest --registry=\"http://localhost:4873/\"" }, "dependencies": { "rimraf": "^5.0.5", diff --git a/packages/docs-utils/src/getPropsFromComponentNode.ts b/packages/docs-utils/src/getPropsFromComponentNode.ts index 2e2036fcaa9472..0c04dcd987c2f7 100644 --- a/packages/docs-utils/src/getPropsFromComponentNode.ts +++ b/packages/docs-utils/src/getPropsFromComponentNode.ts @@ -204,7 +204,7 @@ function getPropsFromVariableDeclaration({ const propsType = type.aliasTypeArguments[0]; if (propsType === undefined) { throw new TypeError( - 'Unable to find symbol for `props`. This is a bug in @mui-internal/typescript-to-proptypes.', + 'Unable to find symbol for `props`. This is a bug in typescript-to-proptypes.', ); } return parsePropsType({ diff --git a/packages/markdown/CHANGELOG.md b/packages/markdown/CHANGELOG.md new file mode 100644 index 00000000000000..e8e145aeb8077c --- /dev/null +++ b/packages/markdown/CHANGELOG.md @@ -0,0 +1,5 @@ +# Changelog + +## 1.0.0 + +First release as an npm package. diff --git a/packages/markdown/README.md b/packages/markdown/README.md new file mode 100644 index 00000000000000..d7f8bba018b3bf --- /dev/null +++ b/packages/markdown/README.md @@ -0,0 +1,11 @@ +# @mui-internal/markdown + +MUI markdown parser and webpack loader. +This is an internal package not meant for general use. + +## Release + +There is no build step. +Sources are meant to be used directly. + +To publish the build artifacts to npm run `pnpm release:publish`. diff --git a/packages/markdown/loader.js b/packages/markdown/loader.js index 99da3ae6403e1c..ed418dc2bfc0b8 100644 --- a/packages/markdown/loader.js +++ b/packages/markdown/loader.js @@ -28,50 +28,33 @@ function moduleIDToJSIdentifier(moduleID) { .join(''); } -const componentPackageMapping = { - 'material-ui': {}, - 'base-ui': {}, - 'joy-ui': {}, -}; +let componentPackageMapping = null; -const packages = [ - { - productId: 'material-ui', - paths: [ - path.join(__dirname, '../../packages/mui-base/src'), - path.join(__dirname, '../../packages/mui-lab/src'), - path.join(__dirname, '../../packages/mui-material/src'), - ], - }, - { - productId: 'base-ui', - paths: [path.join(__dirname, '../../packages/mui-base/src')], - }, - { - productId: 'joy-ui', - paths: [path.join(__dirname, '../../packages/mui-joy/src')], - }, -]; - -packages.forEach((pkg) => { - pkg.paths.forEach((pkgPath) => { - const match = pkgPath.match(/packages(?:\\|\/)([^/\\]+)(?:\\|\/)src/); - const packageName = match ? match[1] : null; - if (!packageName) { - throw new Error(`cannot find package name from path: ${pkgPath}`); - } - const filePaths = readdirSync(pkgPath); - filePaths.forEach((folder) => { - if (folder.match(/^[A-Z]/)) { - if (!componentPackageMapping[pkg.productId]) { - throw new Error(`componentPackageMapping must have "${pkg.productId}" as a key`); - } - // filename starts with Uppercase = component - componentPackageMapping[pkg.productId][folder] = packageName; +function findComponents(packages) { + const mapping = {}; + + packages.forEach((pkg) => { + pkg.paths.forEach((pkgPath) => { + const match = pkgPath.match(/packages(?:\\|\/)([^/\\]+)(?:\\|\/)src/); + const packageName = match ? match[1] : null; + if (!packageName) { + throw new Error(`cannot find package name from path: ${pkgPath}`); } + const filePaths = readdirSync(pkgPath); + filePaths.forEach((folder) => { + if (folder.match(/^[A-Z]/)) { + if (!mapping[pkg.productId]) { + mapping[pkg.productId] = {}; + } + // filename starts with Uppercase = component + mapping[pkg.productId][folder] = packageName; + } + }); }); }); -}); + + return mapping; +} /** * @type {import('webpack').loader.Loader} @@ -80,6 +63,10 @@ module.exports = async function demoLoader() { const englishFilepath = this.resourcePath; const options = this.getOptions(); + if (componentPackageMapping === null) { + componentPackageMapping = findComponents(options.packages ?? []); + } + const englishFilename = path.basename(englishFilepath, '.md'); const files = await fs.readdir(path.dirname(englishFilepath)); @@ -122,9 +109,8 @@ module.exports = async function demoLoader() { ); // Use .. as the docs runs from the /docs folder - const repositoryRoot = path.join(this.rootContext, '..'); const fileRelativeContext = path - .relative(repositoryRoot, this.context) + .relative(options.workspaceRoot, this.context) // win32 to posix .replace(/\\/g, '/'); diff --git a/packages/markdown/package.json b/packages/markdown/package.json index d6d982041d4255..4b799f5e3f95b2 100644 --- a/packages/markdown/package.json +++ b/packages/markdown/package.json @@ -1,7 +1,8 @@ { - "name": "@mui/markdown", - "version": "5.0.0", - "private": true, + "name": "@mui/internal-markdown", + "version": "1.0.0", + "author": "MUI Team", + "description": "MUI markdown parser. This is an internal package not meant for general use.", "main": "./index.js", "types": "./index.d.ts", "exports": { @@ -9,6 +10,15 @@ "./loader": "./loader.js", "./prism": "./prism.js" }, + "repository": { + "type": "git", + "url": "https://github.com/mui/material-ui.git", + "directory": "packages/docs-utils" + }, + "scripts": { + "release:publish": "pnpm publish --tag latest", + "release:publish:dry-run": "pnpm publish --tag latest --registry=\"http://localhost:4873/\"" + }, "dependencies": { "@babel/runtime": "^7.23.9", "lodash": "^4.17.21", @@ -18,5 +28,8 @@ "devDependencies": { "@types/chai": "^4.3.11", "chai": "^4.4.1" + }, + "publishConfig": { + "access": "public" } } diff --git a/packages/markdown/prepareMarkdown.js b/packages/markdown/prepareMarkdown.js index bce1eff29d8764..31e2a95a9e710b 100644 --- a/packages/markdown/prepareMarkdown.js +++ b/packages/markdown/prepareMarkdown.js @@ -104,7 +104,7 @@ function prepareMarkdown(config) { contents.push(` ## Unstyled -Use the [Base UI ${markdownH1}](${headers.unstyled}) for complete ownership of the component's design, with no Material UI styles to override. +Use the [Base UI ${markdownH1}](${headers.unstyled}) for complete ownership of the component's design, with no Material UI or Joy UI styles to override. This unstyled version of the component is the ideal choice for heavy customization with a smaller bundle size. `); } @@ -240,7 +240,7 @@ ${headers.hooks if (docs.en.headers.card === 'true') { const slug = docs.en.location.replace(/(.*)\/(.*)\.md/, '$2'); const exists = fs.existsSync( - path.resolve(__dirname, `../../docs/public/static/blog/${slug}/card.png`), + path.resolve(config.options.workspaceRoot, `docs/public/static/blog/${slug}/card.png`), ); if (!exists) { diff --git a/packages/mui-babel-macros/CHANGELOG.md b/packages/mui-babel-macros/CHANGELOG.md new file mode 100644 index 00000000000000..a6c93f9bf457a6 --- /dev/null +++ b/packages/mui-babel-macros/CHANGELOG.md @@ -0,0 +1,5 @@ +# Changelog + +## 1.0.0 + +Initial release as an npm package. diff --git a/packages/mui-babel-macros/MuiError.macro.js b/packages/mui-babel-macros/MuiError.macro.js index d10b169d9183e6..0b2e2a0a963d59 100644 --- a/packages/mui-babel-macros/MuiError.macro.js +++ b/packages/mui-babel-macros/MuiError.macro.js @@ -12,7 +12,7 @@ function invertObject(object) { /** * Supported imports: - * 1. bare specifier e.g. `'@mui-internal/babel-macros/MuiError.macro'` + * 1. bare specifier e.g. `'@mui/internal-babel-macros/MuiError.macro'` * 2. relative import from `packages/mui-utils/src` e.g. `'../macros/MuiError.macro'` * @param {import('babel-plugin-macros').MacroParams} param0 */ @@ -128,9 +128,9 @@ function muiError({ references, babel, config, source }) { errorCode = parseInt(errorCode, 10); if (formatMuiErrorMessageIdentifier === null) { - const isBareImportSourceIdentifier = source.startsWith('@mui-internal/babel-macros'); + const isBareImportSourceIdentifier = source.startsWith('@mui/internal-babel-macros'); if (isBareImportSourceIdentifier) { - // Input: import MuiError from '@mui-internal/babel-macros/MuiError.macro' + // Input: import MuiError from '@mui/internal-babel-macros/MuiError.macro' // Outputs: // import { formatMuiErrorMessage } from '@mui/utils'; formatMuiErrorMessageIdentifier = helperModuleImports.addDefault( @@ -139,7 +139,7 @@ function muiError({ references, babel, config, source }) { { nameHint: '_formatMuiErrorMessage' }, ); } else { - throw new Error('Only package imports from @mui-internal/babel-macros are supported'); + throw new Error('Only package imports from @mui/internal-babel-macros are supported'); } } diff --git a/packages/mui-babel-macros/README.md b/packages/mui-babel-macros/README.md new file mode 100644 index 00000000000000..4fcfb319018975 --- /dev/null +++ b/packages/mui-babel-macros/README.md @@ -0,0 +1,9 @@ +# @mui/internal-babel-macros + +This package contains the error macro used in MUI projects. +This is an internal package not meant for general use. + +## Release + +There is no build step. +To publish the package to npm, run: `pnpm release:publish` diff --git a/packages/mui-babel-macros/__fixtures__/error-code-extraction/input.js b/packages/mui-babel-macros/__fixtures__/error-code-extraction/input.js index 0e9bea7f05e01a..69a30d073b7136 100644 --- a/packages/mui-babel-macros/__fixtures__/error-code-extraction/input.js +++ b/packages/mui-babel-macros/__fixtures__/error-code-extraction/input.js @@ -1,4 +1,4 @@ -import MuiError from '@mui-internal/babel-macros/MuiError.macro'; +import MuiError from '@mui/internal-babel-macros/MuiError.macro'; throw new MuiError('exists'); throw new MuiError('will be created'); diff --git a/packages/mui-babel-macros/__fixtures__/factory-call/input.js b/packages/mui-babel-macros/__fixtures__/factory-call/input.js index 30a058dbfe37b5..c4957eb663baad 100644 --- a/packages/mui-babel-macros/__fixtures__/factory-call/input.js +++ b/packages/mui-babel-macros/__fixtures__/factory-call/input.js @@ -1,4 +1,4 @@ -import MuiError from '@mui-internal/babel-macros/MuiError.macro'; +import MuiError from '@mui/internal-babel-macros/MuiError.macro'; // `throw Error(message)` is valid JS but we limit error construction to a single syntax. throw MuiError('my message'); diff --git a/packages/mui-babel-macros/__fixtures__/literal/input.js b/packages/mui-babel-macros/__fixtures__/literal/input.js index ef1f0337c1b16e..2ed3398ceb8021 100644 --- a/packages/mui-babel-macros/__fixtures__/literal/input.js +++ b/packages/mui-babel-macros/__fixtures__/literal/input.js @@ -1,3 +1,3 @@ -import MuiError from '@mui-internal/babel-macros/MuiError.macro'; +import MuiError from '@mui/internal-babel-macros/MuiError.macro'; throw new MuiError('MUI: Expected valid input target.\n' + 'Did you use `inputComponent`'); diff --git a/packages/mui-babel-macros/__fixtures__/no-error-code-annotation/input.js b/packages/mui-babel-macros/__fixtures__/no-error-code-annotation/input.js index 9931ed0b0a1963..922dbfba609578 100644 --- a/packages/mui-babel-macros/__fixtures__/no-error-code-annotation/input.js +++ b/packages/mui-babel-macros/__fixtures__/no-error-code-annotation/input.js @@ -1,3 +1,3 @@ -import MuiError from '@mui-internal/babel-macros/MuiError.macro'; +import MuiError from '@mui/internal-babel-macros/MuiError.macro'; throw new MuiError('MUI: Expected valid input target.\n' + 'Did you use inputComponent'); diff --git a/packages/mui-babel-macros/__fixtures__/no-error-code-throw/input.js b/packages/mui-babel-macros/__fixtures__/no-error-code-throw/input.js index 834e86b59175c1..d804f33d59c04d 100644 --- a/packages/mui-babel-macros/__fixtures__/no-error-code-throw/input.js +++ b/packages/mui-babel-macros/__fixtures__/no-error-code-throw/input.js @@ -1,3 +1,3 @@ -import MuiError from '@mui-internal/babel-macros/MuiError.macro'; +import MuiError from '@mui/internal-babel-macros/MuiError.macro'; throw new MuiError('missing'); diff --git a/packages/mui-babel-macros/package.json b/packages/mui-babel-macros/package.json index 13eb125da748a9..825d35f8b080b3 100644 --- a/packages/mui-babel-macros/package.json +++ b/packages/mui-babel-macros/package.json @@ -1,8 +1,9 @@ { - "name": "@mui-internal/babel-macros", + "name": "@mui/internal-babel-macros", "version": "1.0.0", - "private": true, "author": "MUI Team", + "description": "MUI Babel macros. This is an internal package not meant for general use.", + "main": "./MuiError.macro.js", "repository": { "type": "git", "url": "https://github.com/mui/material-ui.git", @@ -12,12 +13,13 @@ "bugs": { "url": "https://github.com/mui/material-ui/issues" }, - "homepage": "private package", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" }, "scripts": { + "release:publish": "pnpm publish --tag latest", + "release:publish:dry-run": "pnpm publish --tag latest --registry=\"http://localhost:4873/\"", "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-babel-macros/**/*.test.{js,ts,tsx}'" }, "dependencies": { @@ -26,7 +28,7 @@ "babel-plugin-macros": "^3.1.0" }, "devDependencies": { - "@mui-internal/babel-macros": "workspace:*", + "@mui/internal-babel-macros": "workspace:*", "@types/babel-plugin-macros": "^3.1.3", "@types/chai": "^4.3.11", "@types/mocha": "^10.0.6", @@ -35,10 +37,13 @@ "chai": "^4.4.1" }, "peerDependencies": { - "@mui/utils": "workspace:^" + "@mui/utils": "^5.0.0" }, "sideEffects": false, "engines": { "node": ">=12.0.0" + }, + "publishConfig": { + "access": "public" } } diff --git a/packages/mui-base/README.md b/packages/mui-base/README.md index 9b85e19eace6ca..35b605e1330406 100644 --- a/packages/mui-base/README.md +++ b/packages/mui-base/README.md @@ -24,7 +24,7 @@ Visit [https://mui.com/base-ui/](https://mui.com/base-ui/) to view the full docu ## Questions For how-to questions that don't involve making changes to the code base, please use [Stack Overflow](https://stackoverflow.com/questions/tagged/base-ui) instead of GitHub issues. -Use the "base-ui" tag on Stack Overflow to make it easier for the community to find your question. +Use the "base-ui" tag on Stack Overflow to make it easier for the community to find your question. ## Examples diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index b6691cd901870b..7593292d12cd68 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.36", + "version": "5.0.0-beta.37", "private": false, "author": "MUI Team", "description": "Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.", @@ -50,9 +50,8 @@ "prop-types": "^15.8.1" }, "devDependencies": { - "@mui-internal/babel-macros": "workspace:^", + "@mui/internal-babel-macros": "workspace:^", "@mui-internal/test-utils": "workspace:^", - "@mui/base": "workspace:*", "@mui/types": "workspace:^", "@testing-library/react": "^14.2.1", "@testing-library/user-event": "^14.5.2", diff --git a/packages/mui-base/src/Unstable_Popup/Popup.test.tsx b/packages/mui-base/src/Unstable_Popup/Popup.test.tsx index c557195636c768..03ae6a31d9195d 100644 --- a/packages/mui-base/src/Unstable_Popup/Popup.test.tsx +++ b/packages/mui-base/src/Unstable_Popup/Popup.test.tsx @@ -13,7 +13,7 @@ function FakeTransition(props: React.PropsWithChildren<{}>) { const { requestedEnter, onExited } = useTransitionStateManager(); React.useEffect(() => { - let timeoutId: NodeJS.Timeout | null = null; + let timeoutId: ReturnType | null = null; if (!requestedEnter) { timeoutId = setTimeout(() => { act(() => onExited()); diff --git a/packages/mui-base/src/Unstable_Popup/PopupContext.ts b/packages/mui-base/src/Unstable_Popup/PopupContext.ts index 9cad96409c8ea5..0229cccaf96f44 100644 --- a/packages/mui-base/src/Unstable_Popup/PopupContext.ts +++ b/packages/mui-base/src/Unstable_Popup/PopupContext.ts @@ -6,3 +6,7 @@ export interface PopupContextValue { } export const PopupContext = React.createContext(null); + +if (process.env.NODE_ENV !== 'production') { + PopupContext.displayName = 'PopupContext'; +} diff --git a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts index 2b74b67fdf7a7d..1129b7013fd1e7 100644 --- a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts +++ b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts @@ -1,6 +1,6 @@ 'use client'; import * as React from 'react'; -import MuiError from '@mui-internal/babel-macros/MuiError.macro'; +import MuiError from '@mui/internal-babel-macros/MuiError.macro'; import { unstable_useForkRef as useForkRef, unstable_useId as useId } from '@mui/utils'; import { extractEventHandlers } from '../utils/extractEventHandlers'; import { MuiCancellableEvent } from '../utils/MuiCancellableEvent'; diff --git a/packages/mui-base/src/useCompound/useCompoundParent.ts b/packages/mui-base/src/useCompound/useCompoundParent.ts index 61aa53700cc3bd..b85b4d31496d48 100644 --- a/packages/mui-base/src/useCompound/useCompoundParent.ts +++ b/packages/mui-base/src/useCompound/useCompoundParent.ts @@ -43,7 +43,9 @@ export const CompoundComponentContext = React.createContext | null>(null); -CompoundComponentContext.displayName = 'CompoundComponentContext'; +if (process.env.NODE_ENV !== 'production') { + CompoundComponentContext.displayName = 'CompoundComponentContext'; +} export interface UseCompoundParentReturnValue }> { /** diff --git a/packages/mui-base/src/useDropdown/DropdownContext.ts b/packages/mui-base/src/useDropdown/DropdownContext.ts index 059a7c4c0d455f..5dbd32ceb14827 100644 --- a/packages/mui-base/src/useDropdown/DropdownContext.ts +++ b/packages/mui-base/src/useDropdown/DropdownContext.ts @@ -12,4 +12,8 @@ export interface DropdownContextValue { const DropdownContext = React.createContext(null); +if (process.env.NODE_ENV !== 'production') { + DropdownContext.displayName = 'DropdownContext'; +} + export { DropdownContext }; diff --git a/packages/mui-base/src/useInput/useInput.ts b/packages/mui-base/src/useInput/useInput.ts index f380b57fdcb2bd..146d7f0882232d 100644 --- a/packages/mui-base/src/useInput/useInput.ts +++ b/packages/mui-base/src/useInput/useInput.ts @@ -1,6 +1,6 @@ 'use client'; import * as React from 'react'; -import MuiError from '@mui-internal/babel-macros/MuiError.macro'; +import MuiError from '@mui/internal-babel-macros/MuiError.macro'; import { unstable_useForkRef as useForkRef } from '@mui/utils'; import { FormControlState, useFormControlContext } from '../FormControl'; import { extractEventHandlers } from '../utils/extractEventHandlers'; diff --git a/packages/mui-base/src/useList/ListContext.ts b/packages/mui-base/src/useList/ListContext.ts index b1f8aea95d62a6..5bb81324693228 100644 --- a/packages/mui-base/src/useList/ListContext.ts +++ b/packages/mui-base/src/useList/ListContext.ts @@ -8,6 +8,7 @@ export interface ListContextValue { } export const ListContext = React.createContext | null>(null); + if (process.env.NODE_ENV !== 'production') { ListContext.displayName = 'ListContext'; } diff --git a/packages/mui-base/src/useTransition/TransitionContext.ts b/packages/mui-base/src/useTransition/TransitionContext.ts index 06e2fa23956415..3c59d463b4e429 100644 --- a/packages/mui-base/src/useTransition/TransitionContext.ts +++ b/packages/mui-base/src/useTransition/TransitionContext.ts @@ -20,3 +20,7 @@ export type TransitionContextValue = { }; export const TransitionContext = React.createContext(null); + +if (process.env.NODE_ENV !== 'production') { + TransitionContext.displayName = 'TransitionContext'; +} diff --git a/packages/mui-base/src/utils/ClassNameConfigurator.tsx b/packages/mui-base/src/utils/ClassNameConfigurator.tsx index 7c05240b84169d..5838b91495cb34 100644 --- a/packages/mui-base/src/utils/ClassNameConfigurator.tsx +++ b/packages/mui-base/src/utils/ClassNameConfigurator.tsx @@ -15,6 +15,10 @@ const defaultContextValue: ClassNameConfiguration = { const ClassNameConfiguratorContext = React.createContext(defaultContextValue); +if (process.env.NODE_ENV !== 'production') { + ClassNameConfiguratorContext.displayName = 'ClassNameConfiguratorContext'; +} + export interface ClassNameConfiguratorProps extends Partial { children?: React.ReactNode; } diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 5951cf346d63c2..f527a92d273c2c 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -136,6 +136,102 @@ CSS transforms: npx @mui/codemod@latest deprecations/accordion-summary-classes ``` +#### `alert-classes` + +JS transforms: + +```diff + import { alertClasses } from '@mui/material/PaginationItem'; + + MuiPaginationItem: { + styleOverrides: { + root: { +- [`&.${alertClasses.standardSuccess}`]: { ++ [`&.${alertClasses.standard}.${alertClasses.colorSuccess}`]: { + color: 'red', + }, +- [`&.${alertClasses.standardInfo}`]: { ++ [`&.${alertClasses.standard}.${alertClasses.colorInfo}`]: { + color: 'red', + }, +- [`&.${alertClasses.standardWarning}`]: { ++ [`&.${alertClasses.standard}.${alertClasses.colorWarning}`]: { + color: 'red', + }, +- [`&.${alertClasses.standardError}`]: { ++ [`&.${alertClasses.standard}.${alertClasses.colorError}`]: { + color: 'red', + }, +- [`&.${alertClasses.outlinedSuccess}`]: { ++ [`&.${alertClasses.outlined}.${alertClasses.colorSuccess}`]: { + color: 'red', + }, +- [`&.${alertClasses.outlinedInfo}`]: { ++ [`&.${alertClasses.outlined}.${alertClasses.colorInfo}`]: { + color: 'red', + }, +- [`&.${alertClasses.outlinedWarning}`]: { ++ [`&.${alertClasses.outlined}.${alertClasses.colorWarning}`]: { + color: 'red', + }, +- [`&.${alertClasses.outlinedError}`]: { ++ [`&.${alertClasses.outlined}.${alertClasses.colorError}`]: { + color: 'red', + }, +- [`&.${alertClasses.filledSuccess}`]: { ++ [`&.${alertClasses.filled}.${alertClasses.colorSuccess}`]: { + color: 'red', + }, +- [`&.${alertClasses.filledInfo}`]: { ++ [`&.${alertClasses.filled}.${alertClasses.colorInfo}`]: { + color: 'red', + }, +- [`&.${alertClasses.filledWarning}`]: { ++ [`&.${alertClasses.filled}.${alertClasses.colorWarning}`]: { + color: 'red', + }, +- [`&.${alertClasses.filledError}`]: { ++ [`&.${alertClasses.filled}.${alertClasses.colorError}`]: { + color: 'red', + }, + }, + }, + }, +``` + +CSS transforms: + +```diff +-.MuiAlert-standardSuccess ++.MuiAlert-standard.MuiAlert-colorSuccess +-.MuiAlert-standardInfo ++.MuiAlert-standard.MuiAlert-colorInfo +-.MuiAlert-standardWarning ++.MuiAlert-standard.MuiAlert-colorWarning +-.MuiAlert-standardError ++.MuiAlert-standard.MuiAlert-colorError +-.MuiAlert-outlinedSuccess ++.MuiAlert-outlined.MuiAlert-colorSuccess +-.MuiAlert-outlinedInfo ++.MuiAlert-outlined.MuiAlert-colorInfo +-.MuiAlert-outlinedWarning ++.MuiAlert-outlined.MuiAlert-colorWarning +-.MuiAlert-outlinedError ++.MuiAlert-outlined.MuiAlert-colorError +-.MuiAlert-filledSuccess ++.MuiAlert-filled.MuiAlert-colorSuccess +-.MuiAlert-filledInfo ++.MuiAlert-filled.MuiAlert-colorInfo +-.MuiAlert-filledWarning ++.MuiAlert-filled.MuiAlert-colorWarning +-.MuiAlert-filledError ++.MuiAlert-filled.MuiAlert-colorError +``` + +```bash +npx @mui/codemod@latest deprecations/alert-classes +``` + #### `alert-props` ```diff @@ -178,6 +274,411 @@ npx @mui/codemod@latest deprecations/alert-props />; ``` +#### `button-classes` + +JS transforms: + +```diff + import { buttonClasses } from '@mui/material/Button'; + + MuiButton: { + styleOverrides: { + root: { +- [`&.${buttonClasses.textInherit}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorInherit}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textPrimary}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textSecondary}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textSuccess}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorSuccess}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textError}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorError}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textInfo}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorInfo}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textWarning}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.colorWarning}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedInherit}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorInherit}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedPrimary}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedSecondary}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedSuccess}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorSuccess}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedError}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorError}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedInfo}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorInfo}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedWarning}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.colorWarning}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedInherit}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorInherit}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedPrimary}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedSecondary}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedSuccess}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorSuccess}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedError}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorError}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedInfo}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorInfo}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedWarning}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.colorWarning}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedSizeSmall}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.sizeSmall}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedSizeMedium}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.sizeMedium}`]: { + color: 'red', + }, +- [`&.${buttonClasses.containedSizeLarge}`]: { ++ [`&.${buttonClasses.contained}.${buttonClasses.sizeLarge}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textSizeSmall}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.sizeSmall}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textSizeMedium}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.sizeMedium}`]: { + color: 'red', + }, +- [`&.${buttonClasses.textSizeLarge}`]: { ++ [`&.${buttonClasses.text}.${buttonClasses.sizeLarge}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedSizeSmall}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.sizeSmall}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedSizeMedium}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.sizeMedium}`]: { + color: 'red', + }, +- [`&.${buttonClasses.outlinedSizeLarge}`]: { ++ [`&.${buttonClasses.outlined}.${buttonClasses.sizeLarge}`]: { + color: 'red', + }, +- [`& .${buttonClasses.iconSizeSmall}`]: { ++ [`&.${buttonClasses.sizeSmall} > .${buttonClasses.icon}`]: { + color: 'red', + }, +- [`& .${buttonClasses.iconSizeMedium}`]: { ++ [`&.${buttonClasses.sizeMedium} > .${buttonClasses.icon}`]: { + color: 'red', + }, +- [`& .${buttonClasses.iconSizeLarge}`]: { ++ [`&.${buttonClasses.sizeLarge} > .${buttonClasses.icon}`]: { + color: 'red', + }, + }, + }, + }, +``` + +CSS transforms: + +```diff +-.MuiButton-textInherit ++.MuiButton-text.MuiButton-colorInherit +-.MuiButton-textPrimary ++.MuiButton-text.MuiButton-colorPrimary +-.MuiButton-textSecondary ++.MuiButton-text.MuiButton-colorSecondary +-.MuiButton-textSuccess ++.MuiButton-text.MuiButton-colorSuccess +-.MuiButton-textError ++.MuiButton-text.MuiButton-colorError +-.MuiButton-textInfo ++.MuiButton-text.MuiButton-colorInfo +-.MuiButton-textWarning ++.MuiButton-text.MuiButton-colorWarning +-.MuiButton-outlinedInherit ++.MuiButton-outlined.MuiButton-colorInherit +-.MuiButton-outlinedPrimary ++.MuiButton-outlined.MuiButton-colorPrimary +-.MuiButton-outlinedSecondary ++.MuiButton-outlined.MuiButton-colorSecondary +-.MuiButton-outlinedSuccess ++.MuiButton-outlined.MuiButton-colorSuccess +-.MuiButton-outlinedError ++.MuiButton-outlined.MuiButton-colorError +-.MuiButton-outlinedInfo ++.MuiButton-outlined.MuiButton-colorInfo +-.MuiButton-outlinedWarning ++.MuiButton-outlined.MuiButton-colorWarning +-.MuiButton-containedInherit ++.MuiButton-contained.MuiButton-colorInherit +-.MuiButton-containedPrimary ++.MuiButton-contained.MuiButton-colorPrimary +-.MuiButton-containedSecondary ++.MuiButton-contained.MuiButton-colorSecondary +-.MuiButton-containedSuccess ++.MuiButton-contained.MuiButton-colorSuccess +-.MuiButton-containedError ++.MuiButton-contained.MuiButton-colorError +-.MuiButton-containedInfo ++.MuiButton-contained.MuiButton-colorInfo +-.MuiButton-containedWarning ++.MuiButton-contained.MuiButton-colorWarning +-.MuiButton-textSizeSmall ++.MuiButton-text.MuiButton-sizeSmall +-.MuiButton-textSizeMedium ++.MuiButton-text.MuiButton-sizeMedium +-.MuiButton-textSizeLarge ++.MuiButton-text.MuiButton-sizeLarge +-.MuiButton-outlinedSizeSmall ++.MuiButton-outlined.MuiButton-sizeSmall +-.MuiButton-outlinedSizeMedium ++.MuiButton-outlined.MuiButton-sizeMedium +-.MuiButton-outlinedSizeLarge ++.MuiButton-outlined.MuiButton-sizeLarge +-.MuiButton-containedSizeSmall ++.MuiButton-contained.MuiButton-sizeSmall +-.MuiButton-containedSizeMedium ++.MuiButton-contained.MuiButton-sizeMedium +-.MuiButton-containedSizeLarge ++.MuiButton-contained.MuiButton-sizeLarge +-.MuiButton-root .MuiButton-iconSizeSmall ++.MuiButton-root.MuiButton-sizeSmall > .MuiButton-icon +-.MuiButton-root .MuiButton-iconSizeMedium ++.MuiButton-root.MuiButton-sizeMedium > .MuiButton-icon +-.MuiButton-root .MuiButton-iconSizeLarge ++.MuiButton-root.MuiButton-sizeLarge > .MuiButton-icon + /> +``` + +```bash +npx @mui/codemod@latest deprecations/button-classes +``` + +#### `chip-classes` + +JS transforms: + +```diff + + import { chipClasses } from '@mui/material/Chip'; + + MuiChip: { + styleOverrides: { + root: { +- [`&.${chipClasses.clickableColorPrimary}`]: { ++ [`&.${chipClasses.clickable}.${chipClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${chipClasses.clickableColorSecondary}`]: { ++ [`&.${chipClasses.clickable}.${chipClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${chipClasses.deletableColorPrimary}`]: { ++ [`&.${chipClasses.deletable}.${chipClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${chipClasses.deletableColorSecondary}`]: { ++ [`&.${chipClasses.deletable}.${chipClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${chipClasses.outlinedPrimary}`]: { ++ [`&.${chipClasses.outlined}.${chipClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${chipClasses.outlinedSecondary}`]: { ++ [`&.${chipClasses.outlined}.${chipClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${chipClasses.filledPrimary}`]: { ++ [`&.${chipClasses.filled}.${chipClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${chipClasses.filledSecondary}`]: { ++ [`&.${chipClasses.filled}.${chipClasses.colorSecondary}`]: { + color: 'red', + }, +- [`& .${chipClasses.avatarSmall}`]: { ++ [`&.${chipClasses.sizeSmall} > .${chipClasses.avatar}`]: { + color: 'red', + }, +- [`& .${chipClasses.avatarMedium}`]: { ++ [`&.${chipClasses.sizeMedium} > .${chipClasses.avatar}`]: { + color: 'red', + }, +- [`& .${chipClasses.avatarColorPrimary}`]: { ++ [`&.${chipClasses.colorPrimary} > .${chipClasses.avatar}`]: { + color: 'red', + }, +- [`& .${chipClasses.avatarColorSecondary}`]: { ++ [`&.${chipClasses.colorSecondary} > .${chipClasses.avatar}`]: { + color: 'red', + }, +- [`& .${chipClasses.iconSmall}`]: { ++ [`&.${chipClasses.sizeSmall} > .${chipClasses.icon}`]: { + color: 'red', + }, +- [`& .${chipClasses.iconMedium}`]: { ++ [`&.${chipClasses.sizeMedium} > .${chipClasses.icon}`]: { + color: 'red', + }, +- [`& .${chipClasses.iconColorPrimary}`]: { ++ [`&.${chipClasses.colorPrimary} > .${chipClasses.icon}`]: { + color: 'red', + }, +- [`& .${chipClasses.iconColorSecondary}`]: { ++ [`&.${chipClasses.colorSecondary} > .${chipClasses.icon}`]: { + color: 'red', + }, +- [`& .${chipClasses.labelSmall}`]: { ++ [`&.${chipClasses.sizeSmall} > .${chipClasses.label}`]: { + color: 'red', + }, +- [`& .${chipClasses.labelMedium}`]: { ++ [`&.${chipClasses.sizeMedium} > .${chipClasses.label}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconSmall}`]: { ++ [`&.${chipClasses.sizeSmall} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconMedium}`]: { ++ [`&.${chipClasses.sizeMedium} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconColorPrimary}`]: { ++ [`&.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconColorSecondary}`]: { ++ [`&.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconOutlinedColorPrimary}`]: { ++ [`&.${chipClasses.outlined}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconOutlinedColorSecondary}`]: { ++ [`&.${chipClasses.outlined}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconFilledColorPrimary}`]: { ++ [`&.${chipClasses.filled}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconFilledColorSecondary}`]: { ++ [`&.${chipClasses.filled}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, + }, + }, + }, + +``` + +CSS transforms: + +```diff +-.MuiChip-clickableColorPrimary ++.MuiChip-clickable.MuiChip-colorPrimary +-.MuiChip-clickableColorSecondary ++.MuiChip-clickable.MuiChip-colorSecondary +-.MuiChip-deletableColorPrimary ++.MuiChip-deletable.MuiChip-colorPrimary +-.MuiChip-deletableColorSecondary ++.MuiChip-deletable.MuiChip-colorSecondary +-.MuiChip-outlinedPrimary ++.MuiChip-outlined.MuiChip-colorPrimary +-.MuiChip-outlinedSecondary ++.MuiChip-outlined.MuiChip-colorSecondary +-.MuiChip-filledPrimary ++.MuiChip-filled.MuiChip-colorPrimary +-.MuiChip-filledSecondary ++.MuiChip-filled.MuiChip-colorSecondary +-.MuiChip-root .MuiChip-avatarSmall ++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-avatar +-.MuiChip-root .MuiChip-avatarMedium ++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-avatar +-.MuiChip-root .MuiChip-avatarColorPrimary ++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-avatar +-.MuiChip-root .MuiChip-avatarColorSecondary ++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-avatar +-.MuiChip-root .MuiChip-iconSmall ++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-icon +-.MuiChip-root .MuiChip-iconMedium ++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-icon +-.MuiChip-root .MuiChip-iconColorPrimary ++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-icon +-.MuiChip-root .MuiChip-iconColorSecondary ++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-icon +-.MuiChip-root .MuiChip-labelSmall ++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-label +-.MuiChip-root .MuiChip-labelMedium ++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-label +-.MuiChip-root .MuiChip-deleteIconSmall ++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconMedium ++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconColorPrimary ++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconColorSecondary ++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconOutlinedColorPrimary ++.MuiChip-root.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconOutlinedColorSecondary ++.MuiChip-root.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconFilledColorPrimary ++.MuiChip-root.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconFilledColorSecondary ++.MuiChip-root.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon +``` + +```bash +npx @mui/codemod@latest deprecations/chip-classes +``` + #### `divider-props` ```diff @@ -191,6 +692,97 @@ npx @mui/codemod@latest deprecations/alert-props npx @mui/codemod@latest deprecations/divider-props ``` +#### `pagination-item-classes` + +JS transforms: + +```diff + import { paginationItemClasses } from '@mui/material/PaginationItem'; + + MuiPaginationItem: { + styleOverrides: { + root: { +- [`&.${paginationItemClasses.textPrimary}`]: { ++ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${paginationItemClasses.textSecondary}`]: { ++ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${paginationItemClasses.outlinedPrimary}`]: { ++ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${paginationItemClasses.outlinedSecondary}`]: { ++ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, +- '&.MuiPaginationItem-textPrimary': { ++ '&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary': { + color: 'red', + }, +- '&.MuiPaginationItem-textSecondary': { ++ '&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary': { + color: 'red', + }, +- '&.MuiPaginationItem-outlinedPrimary': { ++ '&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary': { + color: 'red', + }, +- '&.MuiPaginationItem-outlinedSecondary': { ++ '&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary': { + color: 'red', + }, + }, + }, + }, +``` + +CSS transforms: + +```diff +-.MuiPaginationItem-textPrimary ++.MuiPaginationItem-text.MuiPaginationItem-primary +-.MuiPaginationItem-textSecondary ++.MuiPaginationItem-text.MuiPaginationItem-secondary +-.MuiPaginationItem-outlinedPrimary ++.MuiPaginationItem-outlined.MuiPaginationItem-primary +-.MuiPaginationItem-outlinedSecondary ++.MuiPaginationItem-outlined.MuiPaginationItem-secondary + /> +``` + +```bash +npx @mui/codemod@latest deprecations/pagination-item-classes +``` + +#### `slider-props` + +```diff + +``` + +```diff + MuiSlider: { + defaultProps: { +- components: { Track: CustomTrack } ++ slots: { track: CustomTrack }, +- componentsProps: { track: { testid: 'test-id' }} ++ slotProps: { track: { testid: 'test-id' } }, + }, + }, +``` + +```bash +npx @mui/codemod@latest deprecations/slider-props +``` + ### v5.0.0 #### `base-use-named-exports` diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json index ec537f782bad05..91dc87cbe0035e 100644 --- a/packages/mui-codemod/package.json +++ b/packages/mui-codemod/package.json @@ -1,6 +1,6 @@ { "name": "@mui/codemod", - "version": "5.15.10", + "version": "5.15.11", "bin": "./codemod.js", "private": false, "author": "MUI Team", diff --git a/packages/mui-codemod/src/deprecations/alert-classes/alert-classes.js b/packages/mui-codemod/src/deprecations/alert-classes/alert-classes.js new file mode 100644 index 00000000000000..13c32a4bae1238 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/alert-classes/alert-classes.js @@ -0,0 +1,80 @@ +import { classes } from './postcss-plugin'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + classes.forEach(({ deprecatedClass, replacementSelector }) => { + root + .find(j.ImportDeclaration) + .filter((path) => path.node.source.value.match(/^@mui\/material\/Alert$/)) + .forEach((path) => { + path.node.specifiers.forEach((specifier) => { + if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'alertClasses') { + const deprecatedAtomicClass = deprecatedClass.replace('.MuiAlert-', ''); + root + .find(j.MemberExpression, { + object: { name: specifier.local.name }, + property: { name: deprecatedAtomicClass }, + }) + .forEach((memberExpression) => { + const parent = memberExpression.parentPath.parentPath.value; + if (parent.type === j.TemplateLiteral.name) { + const memberExpressionIndex = parent.expressions.findIndex( + (expression) => expression === memberExpression.value, + ); + const precedingTemplateElement = parent.quasis[memberExpressionIndex]; + const atomicClasses = replacementSelector + .replaceAll('MuiAlert-', '') + .split('.') + .filter(Boolean); + + if (precedingTemplateElement.value.raw.endsWith('&.')) { + parent.expressions.splice( + memberExpressionIndex, + 1, + j.memberExpression( + memberExpression.value.object, + j.identifier(atomicClasses[0]), + ), + j.memberExpression( + memberExpression.value.object, + j.identifier(atomicClasses[1]), + ), + ); + parent.quasis.splice( + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw, + cooked: precedingTemplateElement.value.cooked, + }, + false, + ), + j.templateElement({ raw: '.', cooked: '.' }, false), + ); + } + } + }); + } + }); + }); + + const selectorRegex = new RegExp(`^&${deprecatedClass}`); + + root + .find( + j.Literal, + (literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex), + ) + .forEach((path) => { + path.replace(j.literal(path.value.value.replace(selectorRegex, `&${replacementSelector}`))); + }); + }); + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/alert-classes/alert-classes.test.js b/packages/mui-codemod/src/deprecations/alert-classes/alert-classes.test.js new file mode 100644 index 00000000000000..6fcd2044c19d66 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/alert-classes/alert-classes.test.js @@ -0,0 +1,78 @@ +import path from 'path'; +import { expect } from 'chai'; +import postcss from 'postcss'; +import { jscodeshift } from '../../../testUtils'; +import jsTransform from './alert-classes'; +import { plugin as postcssPlugin } from './postcss-plugin'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +const postcssProcessor = postcss([postcssPlugin]); + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('alert-classes', () => { + describe('js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/actual.js') }, + { jscodeshift }, + { printOptions: { quote: 'single', trailingComma: true } }, + ); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('css-transform', () => { + it('transforms classes as needed', async () => { + const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { + from: undefined, + }); + + const expected = read('./test-cases/expected.css'); + expect(actual.css).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', async () => { + const actual = await postcssProcessor.process(read('./test-cases/expected.css'), { + from: undefined, + }); + + const expected = read('./test-cases/expected.css'); + expect(actual.css).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('test-cases', () => { + it('should not be the same', () => { + const actualJS = read('./test-cases/actual.js'); + const expectedJS = read('./test-cases/expected.js'); + expect(actualJS).not.to.equal(expectedJS, 'The actual and expected should be different'); + + const actualCSS = read('./test-cases/actual.css'); + const expectedCSS = read('./test-cases/expected.css'); + expect(actualCSS).not.to.equal( + expectedCSS, + 'The actual and expected should be different', + ); + }); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/alert-classes/index.js b/packages/mui-codemod/src/deprecations/alert-classes/index.js new file mode 100644 index 00000000000000..7193b0b3d350a5 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/alert-classes/index.js @@ -0,0 +1 @@ +export { default } from './alert-classes'; diff --git a/packages/mui-codemod/src/deprecations/alert-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/alert-classes/postcss-plugin.js new file mode 100644 index 00000000000000..29995a5ff4a05e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/alert-classes/postcss-plugin.js @@ -0,0 +1,39 @@ +const variants = ['standard', 'outlined', 'filled']; +const colors = ['Success', 'Info', 'Warning', 'Error']; + +const classes = variants.reduce((acc, variant) => { + return acc.concat( + colors.map((color) => { + const deprecatedClass = `.MuiAlert-${variant}${color}`; + const replacementSelector = `.MuiAlert-${variant}.MuiAlert-color${color}`; + + return { + deprecatedClass, + replacementSelector, + }; + }), + ); +}, []); + +const plugin = () => { + return { + postcssPlugin: `Replace deperecated Alert classes with new classes`, + Rule(rule) { + const { selector } = rule; + + classes.forEach(({ deprecatedClass, replacementSelector }) => { + const selectorRegex = new RegExp(`${deprecatedClass}`); + + if (selector.match(selectorRegex)) { + rule.selector = selector.replace(selectorRegex, replacementSelector); + } + }); + }, + }; +}; +plugin.postcss = true; + +module.exports = { + plugin, + classes, +}; diff --git a/packages/mui-codemod/src/deprecations/alert-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/alert-classes/postcss.config.js new file mode 100644 index 00000000000000..23bebc1125be6e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/alert-classes/postcss.config.js @@ -0,0 +1,5 @@ +const { plugin } = require('./postcss-plugin'); + +module.exports = { + plugins: [plugin], +}; diff --git a/packages/mui-codemod/src/deprecations/alert-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/alert-classes/test-cases/actual.css new file mode 100644 index 00000000000000..946ca8c6a2cce2 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/alert-classes/test-cases/actual.css @@ -0,0 +1,47 @@ +.MuiAlert-standardSuccess { + color: red; +} + +.MuiAlert-standardInfo { + color: red; +} + +.MuiAlert-standardWarning { + color: red; +} + +.MuiAlert-standardError { + color: red; +} + +.MuiAlert-outlinedSuccess { + color: red; +} + +.MuiAlert-outlinedInfo { + color: red; +} + +.MuiAlert-outlinedWarning { + color: red; +} + +.MuiAlert-outlinedError { + color: red; +} + +.MuiAlert-filledSuccess { + color: red; +} + +.MuiAlert-filledInfo { + color: red; +} + +.MuiAlert-filledWarning { + color: red; +} + +.MuiAlert-filledError { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/alert-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/alert-classes/test-cases/actual.js new file mode 100644 index 00000000000000..93270b52ffa850 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/alert-classes/test-cases/actual.js @@ -0,0 +1,26 @@ +import { alertClasses } from '@mui/material/Alert'; + +('&.MuiAlert-standardSuccess'); +('&.MuiAlert-standardInfo'); +('&.MuiAlert-standardWarning'); +('&.MuiAlert-standardError'); +('&.MuiAlert-outlinedSuccess'); +('&.MuiAlert-outlinedInfo'); +('&.MuiAlert-outlinedWarning'); +('&.MuiAlert-outlinedError'); +('&.MuiAlert-filledSuccess'); +('&.MuiAlert-filledInfo'); +('&.MuiAlert-filledWarning'); +('&.MuiAlert-filledError'); +`&.${alertClasses.standardSuccess}`; +`&.${alertClasses.standardInfo}`; +`&.${alertClasses.standardWarning}`; +`&.${alertClasses.standardError}`; +`&.${alertClasses.outlinedSuccess}`; +`&.${alertClasses.outlinedInfo}`; +`&.${alertClasses.outlinedWarning}`; +`&.${alertClasses.outlinedError}`; +`&.${alertClasses.filledSuccess}`; +`&.${alertClasses.filledInfo}`; +`&.${alertClasses.filledWarning}`; +`&.${alertClasses.filledError}`; diff --git a/packages/mui-codemod/src/deprecations/alert-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/alert-classes/test-cases/expected.css new file mode 100644 index 00000000000000..620ef39ea7789c --- /dev/null +++ b/packages/mui-codemod/src/deprecations/alert-classes/test-cases/expected.css @@ -0,0 +1,47 @@ +.MuiAlert-standard.MuiAlert-colorSuccess { + color: red; +} + +.MuiAlert-standard.MuiAlert-colorInfo { + color: red; +} + +.MuiAlert-standard.MuiAlert-colorWarning { + color: red; +} + +.MuiAlert-standard.MuiAlert-colorError { + color: red; +} + +.MuiAlert-outlined.MuiAlert-colorSuccess { + color: red; +} + +.MuiAlert-outlined.MuiAlert-colorInfo { + color: red; +} + +.MuiAlert-outlined.MuiAlert-colorWarning { + color: red; +} + +.MuiAlert-outlined.MuiAlert-colorError { + color: red; +} + +.MuiAlert-filled.MuiAlert-colorSuccess { + color: red; +} + +.MuiAlert-filled.MuiAlert-colorInfo { + color: red; +} + +.MuiAlert-filled.MuiAlert-colorWarning { + color: red; +} + +.MuiAlert-filled.MuiAlert-colorError { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/alert-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/alert-classes/test-cases/expected.js new file mode 100644 index 00000000000000..e55fca0e80f511 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/alert-classes/test-cases/expected.js @@ -0,0 +1,26 @@ +import { alertClasses } from '@mui/material/Alert'; + +('&.MuiAlert-standard.MuiAlert-colorSuccess'); +('&.MuiAlert-standard.MuiAlert-colorInfo'); +('&.MuiAlert-standard.MuiAlert-colorWarning'); +('&.MuiAlert-standard.MuiAlert-colorError'); +('&.MuiAlert-outlined.MuiAlert-colorSuccess'); +('&.MuiAlert-outlined.MuiAlert-colorInfo'); +('&.MuiAlert-outlined.MuiAlert-colorWarning'); +('&.MuiAlert-outlined.MuiAlert-colorError'); +('&.MuiAlert-filled.MuiAlert-colorSuccess'); +('&.MuiAlert-filled.MuiAlert-colorInfo'); +('&.MuiAlert-filled.MuiAlert-colorWarning'); +('&.MuiAlert-filled.MuiAlert-colorError'); +`&.${alertClasses.standard}.${alertClasses.colorSuccess}`; +`&.${alertClasses.standard}.${alertClasses.colorInfo}`; +`&.${alertClasses.standard}.${alertClasses.colorWarning}`; +`&.${alertClasses.standard}.${alertClasses.colorError}`; +`&.${alertClasses.outlined}.${alertClasses.colorSuccess}`; +`&.${alertClasses.outlined}.${alertClasses.colorInfo}`; +`&.${alertClasses.outlined}.${alertClasses.colorWarning}`; +`&.${alertClasses.outlined}.${alertClasses.colorError}`; +`&.${alertClasses.filled}.${alertClasses.colorSuccess}`; +`&.${alertClasses.filled}.${alertClasses.colorInfo}`; +`&.${alertClasses.filled}.${alertClasses.colorWarning}`; +`&.${alertClasses.filled}.${alertClasses.colorError}`; diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js index 2ea28ab2ed544a..a360b241125539 100644 --- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -2,6 +2,10 @@ import transformAccordionProps from '../accordion-props'; import transformAvatarProps from '../avatar-props'; import transformDividerProps from '../divider-props'; import transformAccordionClasses from '../accordion-summary-classes'; +import transformButtonClasses from '../button-classes'; +import transformChipClasses from '../chip-classes'; +import transformPaginationItemClasses from '../pagination-item-classes'; +import transformAlertClasses from '../alert-classes'; /** * @param {import('jscodeshift').FileInfo} file @@ -12,6 +16,10 @@ export default function deprecationsAll(file, api, options) { file.source = transformAvatarProps(file, api, options); file.source = transformDividerProps(file, api, options); file.source = transformAccordionClasses(file, api, options); + file.source = transformButtonClasses(file, api, options); + file.source = transformChipClasses(file, api, options); + file.source = transformPaginationItemClasses(file, api, options); + file.source = transformAlertClasses(file, api, options); return file.source; } diff --git a/packages/mui-codemod/src/deprecations/all/postcss.config.js b/packages/mui-codemod/src/deprecations/all/postcss.config.js index ee2e3316deba79..9673a34e2131fd 100644 --- a/packages/mui-codemod/src/deprecations/all/postcss.config.js +++ b/packages/mui-codemod/src/deprecations/all/postcss.config.js @@ -1,7 +1,19 @@ const { plugin: accordionSummaryClassesPlugin, } = require('../accordion-summary-classes/postcss-plugin'); +const { plugin: alertClassesPlugin } = require('../alert-classes/postcss-plugin'); +const { plugin: buttonClassesPlugin } = require('../button-classes/postcss-plugin'); +const { plugin: chipClassesPlugin } = require('../chip-classes/postcss-plugin'); +const { + plugin: paginationItemClassesPlugin, +} = require('../pagination-item-classes/postcss-plugin'); module.exports = { - plugins: [accordionSummaryClassesPlugin], + plugins: [ + accordionSummaryClassesPlugin, + alertClassesPlugin, + buttonClassesPlugin, + chipClassesPlugin, + paginationItemClassesPlugin, + ], }; diff --git a/packages/mui-codemod/src/deprecations/button-classes/button-classes.js b/packages/mui-codemod/src/deprecations/button-classes/button-classes.js new file mode 100644 index 00000000000000..33bfc4a13c0ad6 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-classes/button-classes.js @@ -0,0 +1,116 @@ +import { classes } from './postcss-plugin'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + classes.forEach(({ deprecatedClass, replacementSelector }) => { + const replacementSelectorPrefix = '&'; + root + .find(j.ImportDeclaration) + .filter((path) => path.node.source.value.match(/^@mui\/material\/Button$/)) + .forEach((path) => { + path.node.specifiers.forEach((specifier) => { + if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'buttonClasses') { + const deprecatedAtomicClass = deprecatedClass.replace( + `${deprecatedClass.split('-')[0]}-`, + '', + ); + root + .find(j.MemberExpression, { + object: { name: specifier.local.name }, + property: { name: deprecatedAtomicClass }, + }) + .forEach((memberExpression) => { + const parent = memberExpression.parentPath.parentPath.value; + if (parent.type === j.TemplateLiteral.name) { + const memberExpressionIndex = parent.expressions.findIndex( + (expression) => expression === memberExpression.value, + ); + const precedingTemplateElement = parent.quasis[memberExpressionIndex]; + const atomicClasses = replacementSelector + .replaceAll('MuiButton-', '') + .replaceAll(replacementSelectorPrefix, '') + .replaceAll(' > ', '') + .split('.') + .filter(Boolean); + + if ( + precedingTemplateElement.value.raw.endsWith( + deprecatedClass.startsWith(' ') + ? `${replacementSelectorPrefix} .` + : `${replacementSelectorPrefix}.`, + ) + ) { + parent.expressions.splice( + memberExpressionIndex, + 1, + j.memberExpression( + memberExpression.value.object, + j.identifier(atomicClasses[0]), + ), + + j.memberExpression( + memberExpression.value.object, + j.identifier(atomicClasses[1]), + ), + ); + + if (replacementSelector.includes(' > ')) { + parent.quasis.splice( + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw.replace(' ', ''), + cooked: precedingTemplateElement.value.cooked.replace(' ', ''), + }, + false, + ), + j.templateElement({ raw: ' > .', cooked: ' > .' }, false), + ); + } else { + parent.quasis.splice( + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw, + cooked: precedingTemplateElement.value.cooked, + }, + false, + ), + + j.templateElement({ raw: '.', cooked: '.' }, false), + ); + } + } + } + }); + } + }); + }); + + const selectorRegex = new RegExp(`^${replacementSelectorPrefix}${deprecatedClass}`); + root + .find( + j.Literal, + (literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex), + ) + .forEach((path) => { + path.replace( + j.literal( + path.value.value.replace( + selectorRegex, + `${replacementSelectorPrefix}${replacementSelector}`, + ), + ), + ); + }); + }); + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/button-classes/button-classes.test.js b/packages/mui-codemod/src/deprecations/button-classes/button-classes.test.js new file mode 100644 index 00000000000000..3ad6b897697d56 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-classes/button-classes.test.js @@ -0,0 +1,78 @@ +import path from 'path'; +import { expect } from 'chai'; +import postcss from 'postcss'; +import { jscodeshift } from '../../../testUtils'; +import jsTransform from './button-classes'; +import { plugin as postcssPlugin } from './postcss-plugin'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +const postcssProcessor = postcss([postcssPlugin]); + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('button-classes', () => { + describe('js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/actual.js') }, + { jscodeshift }, + { printOptions: { quote: 'double', trailingComma: true } }, + ); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('css-transform', () => { + it('transforms classes as needed', async () => { + const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { + from: undefined, + }); + + const expected = read('./test-cases/expected.css'); + expect(actual.css).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', async () => { + const actual = await postcssProcessor.process(read('./test-cases/expected.css'), { + from: undefined, + }); + + const expected = read('./test-cases/expected.css'); + expect(actual.css).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('test-cases', () => { + it('should not be the same', () => { + const actualJS = read('./test-cases/actual.js'); + const expectedJS = read('./test-cases/expected.js'); + expect(actualJS).not.to.equal(expectedJS, 'The actual and expected should be different'); + + const actualCSS = read('./test-cases/actual.css'); + const expectedCSS = read('./test-cases/expected.css'); + expect(actualCSS).not.to.equal( + expectedCSS, + 'The actual and expected should be different', + ); + }); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/button-classes/index.js b/packages/mui-codemod/src/deprecations/button-classes/index.js new file mode 100644 index 00000000000000..a4879ceaf231a7 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-classes/index.js @@ -0,0 +1 @@ +export { default } from './button-classes'; diff --git a/packages/mui-codemod/src/deprecations/button-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/button-classes/postcss-plugin.js new file mode 100644 index 00000000000000..796ba52db6a657 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-classes/postcss-plugin.js @@ -0,0 +1,157 @@ +const classes = [ + { + deprecatedClass: '.MuiButton-textInherit', + replacementSelector: '.MuiButton-text.MuiButton-colorInherit', + }, + { + deprecatedClass: '.MuiButton-textPrimary', + replacementSelector: '.MuiButton-text.MuiButton-colorPrimary', + }, + { + deprecatedClass: '.MuiButton-textSecondary', + replacementSelector: '.MuiButton-text.MuiButton-colorSecondary', + }, + { + deprecatedClass: '.MuiButton-textSuccess', + replacementSelector: '.MuiButton-text.MuiButton-colorSuccess', + }, + { + deprecatedClass: '.MuiButton-textError', + replacementSelector: '.MuiButton-text.MuiButton-colorError', + }, + { + deprecatedClass: '.MuiButton-textInfo', + replacementSelector: '.MuiButton-text.MuiButton-colorInfo', + }, + { + deprecatedClass: '.MuiButton-textWarning', + replacementSelector: '.MuiButton-text.MuiButton-colorWarning', + }, + { + deprecatedClass: '.MuiButton-outlinedInherit', + replacementSelector: '.MuiButton-outlined.MuiButton-colorInherit', + }, + { + deprecatedClass: '.MuiButton-outlinedPrimary', + replacementSelector: '.MuiButton-outlined.MuiButton-colorPrimary', + }, + { + deprecatedClass: '.MuiButton-outlinedSecondary', + replacementSelector: '.MuiButton-outlined.MuiButton-colorSecondary', + }, + { + deprecatedClass: '.MuiButton-outlinedSuccess', + replacementSelector: '.MuiButton-outlined.MuiButton-colorSuccess', + }, + { + deprecatedClass: '.MuiButton-outlinedError', + replacementSelector: '.MuiButton-outlined.MuiButton-colorError', + }, + { + deprecatedClass: '.MuiButton-outlinedInfo', + replacementSelector: '.MuiButton-outlined.MuiButton-colorInfo', + }, + { + deprecatedClass: '.MuiButton-outlinedWarning', + replacementSelector: '.MuiButton-outlined.MuiButton-colorWarning', + }, + { + deprecatedClass: '.MuiButton-containedInherit', + replacementSelector: '.MuiButton-contained.MuiButton-colorInherit', + }, + { + deprecatedClass: '.MuiButton-containedPrimary', + replacementSelector: '.MuiButton-contained.MuiButton-colorPrimary', + }, + { + deprecatedClass: '.MuiButton-containedSecondary', + replacementSelector: '.MuiButton-contained.MuiButton-colorSecondary', + }, + { + deprecatedClass: '.MuiButton-containedSuccess', + replacementSelector: '.MuiButton-contained.MuiButton-colorSuccess', + }, + { + deprecatedClass: '.MuiButton-containedError', + replacementSelector: '.MuiButton-contained.MuiButton-colorError', + }, + { + deprecatedClass: '.MuiButton-containedInfo', + replacementSelector: '.MuiButton-contained.MuiButton-colorInfo', + }, + { + deprecatedClass: '.MuiButton-containedWarning', + replacementSelector: '.MuiButton-contained.MuiButton-colorWarning', + }, + { + deprecatedClass: '.MuiButton-textSizeSmall', + replacementSelector: '.MuiButton-text.MuiButton-sizeSmall', + }, + { + deprecatedClass: '.MuiButton-textSizeLarge', + replacementSelector: '.MuiButton-text.MuiButton-sizeLarge', + }, + { + deprecatedClass: '.MuiButton-outlinedSizeSmall', + replacementSelector: '.MuiButton-outlined.MuiButton-sizeSmall', + }, + { + deprecatedClass: '.MuiButton-outlinedSizeLarge', + replacementSelector: '.MuiButton-outlined.MuiButton-sizeLarge', + }, + { + deprecatedClass: '.MuiButton-containedSizeSmall', + replacementSelector: '.MuiButton-contained.MuiButton-sizeSmall', + }, + { + deprecatedClass: '.MuiButton-containedSizeLarge', + replacementSelector: '.MuiButton-contained.MuiButton-sizeLarge', + }, + { + deprecatedClass: '.MuiButton-textSizeMedium', + replacementSelector: '.MuiButton-text.MuiButton-sizeMedium', + }, + { + deprecatedClass: '.MuiButton-outlinedSizeMedium', + replacementSelector: '.MuiButton-outlined.MuiButton-sizeMedium', + }, + { + deprecatedClass: '.MuiButton-containedSizeMedium', + replacementSelector: '.MuiButton-contained.MuiButton-sizeMedium', + }, + { + deprecatedClass: ' .MuiButton-iconSizeSmall', + replacementSelector: '.MuiButton-sizeSmall > .MuiButton-icon', + }, + { + deprecatedClass: ' .MuiButton-iconSizeMedium', + replacementSelector: '.MuiButton-sizeMedium > .MuiButton-icon', + }, + { + deprecatedClass: ' .MuiButton-iconSizeLarge', + replacementSelector: '.MuiButton-sizeLarge > .MuiButton-icon', + }, +]; + +const plugin = () => { + return { + postcssPlugin: `Replace deperecated Button classes with new classes`, + Rule(rule) { + const { selector } = rule; + + classes.forEach(({ deprecatedClass, replacementSelector }) => { + const selectorRegex = new RegExp(`${deprecatedClass}`); + + if (selector.match(selectorRegex)) { + rule.selector = selector.replace(selectorRegex, replacementSelector); + } + }); + }, + }; +}; +plugin.postcss = true; + +module.exports = { + plugin, + classes, +}; diff --git a/packages/mui-codemod/src/deprecations/button-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/button-classes/postcss.config.js new file mode 100644 index 00000000000000..23bebc1125be6e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-classes/postcss.config.js @@ -0,0 +1,5 @@ +const { plugin } = require('./postcss-plugin'); + +module.exports = { + plugins: [plugin], +}; diff --git a/packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.css new file mode 100644 index 00000000000000..a0860cfe391ca8 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.css @@ -0,0 +1,133 @@ +.MuiButton-textInherit { + color: red; +} + +.MuiButton-textPrimary { + color: red; +} + +.MuiButton-textSecondary { + color: red; +} + +.MuiButton-textSuccess { + color: red; +} + +.MuiButton-textError { + color: red; +} + +.MuiButton-textInfo { + color: red; +} + +.MuiButton-textWarning { + color: red; +} + +.MuiButton-outlinedInherit { + color: red; +} + +.MuiButton-outlinedPrimary { + color: red; +} + +.MuiButton-outlinedSecondary { + color: red; +} + +.MuiButton-outlinedSuccess { + color: red; +} + +.MuiButton-outlinedError { + color: red; +} + +.MuiButton-outlinedInfo { + color: red; +} + +.MuiButton-outlinedWarning { + color: red; +} + +.MuiButton-containedInherit { + color: red; +} + +.MuiButton-containedPrimary { + color: red; +} + +.MuiButton-containedSecondary { + color: red; +} + +.MuiButton-containedSuccess { + color: red; +} + +.MuiButton-containedError { + color: red; +} + +.MuiButton-containedInfo { + color: red; +} + +.MuiButton-containedWarning { + color: red; +} + +.MuiButton-textSizeSmall { + color: red; +} + +.MuiButton-textSizeMedium { + color: red; +} + +.MuiButton-textSizeLarge { + color: red; +} + +.MuiButton-outlinedSizeSmall { + color: red; +} + +.MuiButton-outlinedSizeMedium { + color: red; +} + +.MuiButton-outlinedSizeLarge { + color: red; +} + +.MuiButton-containedSizeSmall { + color: red; +} + +.MuiButton-containedSizeMedium { + color: red; +} + +.MuiButton-containedSizeLarge { + color: red; +} + +.MuiButton-root .MuiButton-iconSizeSmall { + color: red; +} + +.MuiButton-root .MuiButton-iconSizeMedium { + color: red; +} + +.MuiButton-root .MuiButton-iconSizeLarge { + color: red; +} + + diff --git a/packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.js new file mode 100644 index 00000000000000..6c312172b25e71 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.js @@ -0,0 +1,68 @@ +import { buttonClasses } from '@mui/material/Button'; + +('&.MuiButton-textInherit'); +('&.MuiButton-textPrimary'); +('&.MuiButton-textSecondary'); +('&.MuiButton-textSuccess'); +('&.MuiButton-textError'); +('&.MuiButton-textInfo'); +('&.MuiButton-textWarning'); +('&.MuiButton-outlinedInherit'); +('&.MuiButton-outlinedPrimary'); +('&.MuiButton-outlinedSecondary'); +('&.MuiButton-outlinedSuccess'); +('&.MuiButton-outlinedError'); +('&.MuiButton-outlinedInfo'); +('&.MuiButton-outlinedWarning'); +('&.MuiButton-containedInherit'); +('&.MuiButton-containedPrimary'); +('&.MuiButton-containedSecondary'); +('&.MuiButton-containedSuccess'); +('&.MuiButton-containedError'); +('&.MuiButton-containedInfo'); +('&.MuiButton-containedWarning'); +('&.MuiButton-textSizeSmall'); +('&.MuiButton-textSizeMedium'); +('&.MuiButton-textSizeLarge'); +('&.MuiButton-outlinedSizeSmall'); +('&.MuiButton-outlinedSizeMedium'); +('&.MuiButton-outlinedSizeLarge'); +('&.MuiButton-containedSizeSmall'); +('&.MuiButton-containedSizeMedium'); +('&.MuiButton-containedSizeLarge'); +('& .MuiButton-iconSizeSmall'); +('& .MuiButton-iconSizeMedium'); +('& .MuiButton-iconSizeLarge'); +`&.${buttonClasses.textInherit}`; +`&.${buttonClasses.textPrimary}`; +`&.${buttonClasses.textSecondary}`; +`&.${buttonClasses.textSuccess}`; +`&.${buttonClasses.textError}`; +`&.${buttonClasses.textInfo}`; +`&.${buttonClasses.textWarning}`; +`&.${buttonClasses.outlinedInherit}`; +`&.${buttonClasses.outlinedPrimary}`; +`&.${buttonClasses.outlinedSecondary}`; +`&.${buttonClasses.outlinedSuccess}`; +`&.${buttonClasses.outlinedError}`; +`&.${buttonClasses.outlinedInfo}`; +`&.${buttonClasses.outlinedWarning}`; +`&.${buttonClasses.containedInherit}`; +`&.${buttonClasses.containedPrimary}`; +`&.${buttonClasses.containedSecondary}`; +`&.${buttonClasses.containedSuccess}`; +`&.${buttonClasses.containedError}`; +`&.${buttonClasses.containedInfo}`; +`&.${buttonClasses.containedWarning}`; +`&.${buttonClasses.textSizeSmall}`; +`&.${buttonClasses.textSizeMedium}`; +`&.${buttonClasses.textSizeLarge}`; +`&.${buttonClasses.outlinedSizeSmall}`; +`&.${buttonClasses.outlinedSizeMedium}`; +`&.${buttonClasses.outlinedSizeLarge}`; +`&.${buttonClasses.containedSizeSmall}`; +`&.${buttonClasses.containedSizeMedium}`; +`&.${buttonClasses.containedSizeLarge}`; +`& .${buttonClasses.iconSizeSmall}`; +`& .${buttonClasses.iconSizeMedium}`; +`& .${buttonClasses.iconSizeLarge}`; diff --git a/packages/mui-codemod/src/deprecations/button-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/button-classes/test-cases/expected.css new file mode 100644 index 00000000000000..1739d14cb703a3 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-classes/test-cases/expected.css @@ -0,0 +1,133 @@ +.MuiButton-text.MuiButton-colorInherit { + color: red; +} + +.MuiButton-text.MuiButton-colorPrimary { + color: red; +} + +.MuiButton-text.MuiButton-colorSecondary { + color: red; +} + +.MuiButton-text.MuiButton-colorSuccess { + color: red; +} + +.MuiButton-text.MuiButton-colorError { + color: red; +} + +.MuiButton-text.MuiButton-colorInfo { + color: red; +} + +.MuiButton-text.MuiButton-colorWarning { + color: red; +} + +.MuiButton-outlined.MuiButton-colorInherit { + color: red; +} + +.MuiButton-outlined.MuiButton-colorPrimary { + color: red; +} + +.MuiButton-outlined.MuiButton-colorSecondary { + color: red; +} + +.MuiButton-outlined.MuiButton-colorSuccess { + color: red; +} + +.MuiButton-outlined.MuiButton-colorError { + color: red; +} + +.MuiButton-outlined.MuiButton-colorInfo { + color: red; +} + +.MuiButton-outlined.MuiButton-colorWarning { + color: red; +} + +.MuiButton-contained.MuiButton-colorInherit { + color: red; +} + +.MuiButton-contained.MuiButton-colorPrimary { + color: red; +} + +.MuiButton-contained.MuiButton-colorSecondary { + color: red; +} + +.MuiButton-contained.MuiButton-colorSuccess { + color: red; +} + +.MuiButton-contained.MuiButton-colorError { + color: red; +} + +.MuiButton-contained.MuiButton-colorInfo { + color: red; +} + +.MuiButton-contained.MuiButton-colorWarning { + color: red; +} + +.MuiButton-text.MuiButton-sizeSmall { + color: red; +} + +.MuiButton-text.MuiButton-sizeMedium { + color: red; +} + +.MuiButton-text.MuiButton-sizeLarge { + color: red; +} + +.MuiButton-outlined.MuiButton-sizeSmall { + color: red; +} + +.MuiButton-outlined.MuiButton-sizeMedium { + color: red; +} + +.MuiButton-outlined.MuiButton-sizeLarge { + color: red; +} + +.MuiButton-contained.MuiButton-sizeSmall { + color: red; +} + +.MuiButton-contained.MuiButton-sizeMedium { + color: red; +} + +.MuiButton-contained.MuiButton-sizeLarge { + color: red; +} + +.MuiButton-root.MuiButton-sizeSmall > .MuiButton-icon { + color: red; +} + +.MuiButton-root.MuiButton-sizeMedium > .MuiButton-icon { + color: red; +} + +.MuiButton-root.MuiButton-sizeLarge > .MuiButton-icon { + color: red; +} + + diff --git a/packages/mui-codemod/src/deprecations/button-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/button-classes/test-cases/expected.js new file mode 100644 index 00000000000000..397e23dc31d8ef --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-classes/test-cases/expected.js @@ -0,0 +1,68 @@ +import { buttonClasses } from '@mui/material/Button'; + +("&.MuiButton-text.MuiButton-colorInherit"); +("&.MuiButton-text.MuiButton-colorPrimary"); +("&.MuiButton-text.MuiButton-colorSecondary"); +("&.MuiButton-text.MuiButton-colorSuccess"); +("&.MuiButton-text.MuiButton-colorError"); +("&.MuiButton-text.MuiButton-colorInfo"); +("&.MuiButton-text.MuiButton-colorWarning"); +("&.MuiButton-outlined.MuiButton-colorInherit"); +("&.MuiButton-outlined.MuiButton-colorPrimary"); +("&.MuiButton-outlined.MuiButton-colorSecondary"); +("&.MuiButton-outlined.MuiButton-colorSuccess"); +("&.MuiButton-outlined.MuiButton-colorError"); +("&.MuiButton-outlined.MuiButton-colorInfo"); +("&.MuiButton-outlined.MuiButton-colorWarning"); +("&.MuiButton-contained.MuiButton-colorInherit"); +("&.MuiButton-contained.MuiButton-colorPrimary"); +("&.MuiButton-contained.MuiButton-colorSecondary"); +("&.MuiButton-contained.MuiButton-colorSuccess"); +("&.MuiButton-contained.MuiButton-colorError"); +("&.MuiButton-contained.MuiButton-colorInfo"); +("&.MuiButton-contained.MuiButton-colorWarning"); +("&.MuiButton-text.MuiButton-sizeSmall"); +("&.MuiButton-text.MuiButton-sizeMedium"); +("&.MuiButton-text.MuiButton-sizeLarge"); +("&.MuiButton-outlined.MuiButton-sizeSmall"); +("&.MuiButton-outlined.MuiButton-sizeMedium"); +("&.MuiButton-outlined.MuiButton-sizeLarge"); +("&.MuiButton-contained.MuiButton-sizeSmall"); +("&.MuiButton-contained.MuiButton-sizeMedium"); +("&.MuiButton-contained.MuiButton-sizeLarge"); +("&.MuiButton-sizeSmall > .MuiButton-icon"); +("&.MuiButton-sizeMedium > .MuiButton-icon"); +("&.MuiButton-sizeLarge > .MuiButton-icon"); +`&.${buttonClasses.text}.${buttonClasses.colorInherit}`; +`&.${buttonClasses.text}.${buttonClasses.colorPrimary}`; +`&.${buttonClasses.text}.${buttonClasses.colorSecondary}`; +`&.${buttonClasses.text}.${buttonClasses.colorSuccess}`; +`&.${buttonClasses.text}.${buttonClasses.colorError}`; +`&.${buttonClasses.text}.${buttonClasses.colorInfo}`; +`&.${buttonClasses.text}.${buttonClasses.colorWarning}`; +`&.${buttonClasses.outlined}.${buttonClasses.colorInherit}`; +`&.${buttonClasses.outlined}.${buttonClasses.colorPrimary}`; +`&.${buttonClasses.outlined}.${buttonClasses.colorSecondary}`; +`&.${buttonClasses.outlined}.${buttonClasses.colorSuccess}`; +`&.${buttonClasses.outlined}.${buttonClasses.colorError}`; +`&.${buttonClasses.outlined}.${buttonClasses.colorInfo}`; +`&.${buttonClasses.outlined}.${buttonClasses.colorWarning}`; +`&.${buttonClasses.contained}.${buttonClasses.colorInherit}`; +`&.${buttonClasses.contained}.${buttonClasses.colorPrimary}`; +`&.${buttonClasses.contained}.${buttonClasses.colorSecondary}`; +`&.${buttonClasses.contained}.${buttonClasses.colorSuccess}`; +`&.${buttonClasses.contained}.${buttonClasses.colorError}`; +`&.${buttonClasses.contained}.${buttonClasses.colorInfo}`; +`&.${buttonClasses.contained}.${buttonClasses.colorWarning}`; +`&.${buttonClasses.text}.${buttonClasses.sizeSmall}`; +`&.${buttonClasses.text}.${buttonClasses.sizeMedium}`; +`&.${buttonClasses.text}.${buttonClasses.sizeLarge}`; +`&.${buttonClasses.outlined}.${buttonClasses.sizeSmall}`; +`&.${buttonClasses.outlined}.${buttonClasses.sizeMedium}`; +`&.${buttonClasses.outlined}.${buttonClasses.sizeLarge}`; +`&.${buttonClasses.contained}.${buttonClasses.sizeSmall}`; +`&.${buttonClasses.contained}.${buttonClasses.sizeMedium}`; +`&.${buttonClasses.contained}.${buttonClasses.sizeLarge}`; +`&.${buttonClasses.sizeSmall} > .${buttonClasses.icon}`; +`&.${buttonClasses.sizeMedium} > .${buttonClasses.icon}`; +`&.${buttonClasses.sizeLarge} > .${buttonClasses.icon}`; diff --git a/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.js b/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.js new file mode 100644 index 00000000000000..82fec4f91a4e07 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.js @@ -0,0 +1,124 @@ +import { classes } from './postcss-plugin'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + classes.forEach(({ deprecatedClass, replacementSelector }) => { + const replacementSelectorPrefix = '&'; + root + .find(j.ImportDeclaration) + .filter((path) => path.node.source.value.match(/^@mui\/material\/Chip$/)) + .forEach((path) => { + path.node.specifiers.forEach((specifier) => { + if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'chipClasses') { + const deprecatedAtomicClass = deprecatedClass.replace( + `${deprecatedClass.split('-')[0]}-`, + '', + ); + root + .find(j.MemberExpression, { + object: { name: specifier.local.name }, + property: { name: deprecatedAtomicClass }, + }) + .forEach((memberExpression) => { + const parent = memberExpression.parentPath.parentPath.value; + if (parent.type === j.TemplateLiteral.name) { + const memberExpressionIndex = parent.expressions.findIndex( + (expression) => expression === memberExpression.value, + ); + const precedingTemplateElement = parent.quasis[memberExpressionIndex]; + const atomicClasses = replacementSelector + .replaceAll('MuiChip-', '') + .replaceAll(replacementSelectorPrefix, '') + .replaceAll(' > ', '') + .split('.') + .filter(Boolean); + + if ( + precedingTemplateElement.value.raw.endsWith( + deprecatedClass.startsWith(' ') + ? `${replacementSelectorPrefix} .` + : `${replacementSelectorPrefix}.`, + ) + ) { + const atomicClassesArgs = [ + memberExpressionIndex, + 1, + ...atomicClasses.map((atomicClass) => + j.memberExpression( + memberExpression.value.object, + j.identifier(atomicClass), + ), + ), + ]; + parent.expressions.splice(...atomicClassesArgs); + + if (replacementSelector.includes(' > ')) { + const quasisArgs = [ + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw.replace(' ', ''), + cooked: precedingTemplateElement.value.cooked.replace(' ', ''), + }, + false, + ), + j.templateElement({ raw: ' > .', cooked: ' > .' }, false), + ]; + + if (atomicClasses.length === 3) { + quasisArgs.splice( + 3, + 0, + j.templateElement({ raw: '.', cooked: '.' }, false), + ); + } + + parent.quasis.splice(...quasisArgs); + } else { + parent.quasis.splice( + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw, + cooked: precedingTemplateElement.value.cooked, + }, + false, + ), + + j.templateElement({ raw: '.', cooked: '.' }, false), + ); + } + } + } + }); + } + }); + }); + + const selectorRegex = new RegExp(`^${replacementSelectorPrefix}${deprecatedClass}`); + root + .find( + j.Literal, + (literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex), + ) + .forEach((path) => { + path.replace( + j.literal( + path.value.value.replace( + selectorRegex, + `${replacementSelectorPrefix}${replacementSelector}`, + ), + ), + ); + }); + }); + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.test.js b/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.test.js new file mode 100644 index 00000000000000..aee266dc004726 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.test.js @@ -0,0 +1,78 @@ +import path from 'path'; +import { expect } from 'chai'; +import postcss from 'postcss'; +import { jscodeshift } from '../../../testUtils'; +import jsTransform from './chip-classes'; +import { plugin as postcssPlugin } from './postcss-plugin'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +const postcssProcessor = postcss([postcssPlugin]); + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('chip-classes', () => { + describe('js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/actual.js') }, + { jscodeshift }, + { printOptions: { quote: 'double', trailingComma: true } }, + ); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('css-transform', () => { + it('transforms classes as needed', async () => { + const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { + from: undefined, + }); + + const expected = read('./test-cases/expected.css'); + expect(actual.css).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', async () => { + const actual = await postcssProcessor.process(read('./test-cases/expected.css'), { + from: undefined, + }); + + const expected = read('./test-cases/expected.css'); + expect(actual.css).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('test-cases', () => { + it('should not be the same', () => { + const actualJS = read('./test-cases/actual.js'); + const expectedJS = read('./test-cases/expected.js'); + expect(actualJS).not.to.equal(expectedJS, 'The actual and expected should be different'); + + const actualCSS = read('./test-cases/actual.css'); + const expectedCSS = read('./test-cases/expected.css'); + expect(actualCSS).not.to.equal( + expectedCSS, + 'The actual and expected should be different', + ); + }); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/chip-classes/index.js b/packages/mui-codemod/src/deprecations/chip-classes/index.js new file mode 100644 index 00000000000000..a34fddd15caa1e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/chip-classes/index.js @@ -0,0 +1 @@ +export { default } from './chip-classes'; diff --git a/packages/mui-codemod/src/deprecations/chip-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/chip-classes/postcss-plugin.js new file mode 100644 index 00000000000000..f2264798f6d96a --- /dev/null +++ b/packages/mui-codemod/src/deprecations/chip-classes/postcss-plugin.js @@ -0,0 +1,129 @@ +const classes = [ + { + deprecatedClass: '.MuiChip-clickableColorPrimary', + replacementSelector: '.MuiChip-clickable.MuiChip-colorPrimary', + }, + { + deprecatedClass: '.MuiChip-clickableColorSecondary', + replacementSelector: '.MuiChip-clickable.MuiChip-colorSecondary', + }, + { + deprecatedClass: '.MuiChip-deletableColorPrimary', + replacementSelector: '.MuiChip-deletable.MuiChip-colorPrimary', + }, + { + deprecatedClass: '.MuiChip-deletableColorSecondary', + replacementSelector: '.MuiChip-deletable.MuiChip-colorSecondary', + }, + { + deprecatedClass: '.MuiChip-outlinedPrimary', + replacementSelector: '.MuiChip-outlined.MuiChip-colorPrimary', + }, + { + deprecatedClass: '.MuiChip-outlinedSecondary', + replacementSelector: '.MuiChip-outlined.MuiChip-colorSecondary', + }, + { + deprecatedClass: '.MuiChip-filledPrimary', + replacementSelector: '.MuiChip-filled.MuiChip-colorPrimary', + }, + { + deprecatedClass: '.MuiChip-filledSecondary', + replacementSelector: '.MuiChip-filled.MuiChip-colorSecondary', + }, + { + deprecatedClass: ' .MuiChip-avatarSmall', + replacementSelector: '.MuiChip-sizeSmall > .MuiChip-avatar', + }, + { + deprecatedClass: ' .MuiChip-avatarMedium', + replacementSelector: '.MuiChip-sizeMedium > .MuiChip-avatar', + }, + { + deprecatedClass: ' .MuiChip-avatarColorPrimary', + replacementSelector: '.MuiChip-colorPrimary > .MuiChip-avatar', + }, + { + deprecatedClass: ' .MuiChip-avatarColorSecondary', + replacementSelector: '.MuiChip-colorSecondary > .MuiChip-avatar', + }, + { + deprecatedClass: ' .MuiChip-iconSmall', + replacementSelector: '.MuiChip-sizeSmall > .MuiChip-icon', + }, + { + deprecatedClass: ' .MuiChip-iconMedium', + replacementSelector: '.MuiChip-sizeMedium > .MuiChip-icon', + }, + { + deprecatedClass: ' .MuiChip-iconColorPrimary', + replacementSelector: '.MuiChip-colorPrimary > .MuiChip-icon', + }, + { + deprecatedClass: ' .MuiChip-iconColorSecondary', + replacementSelector: '.MuiChip-colorSecondary > .MuiChip-icon', + }, + { + deprecatedClass: ' .MuiChip-labelSmall', + replacementSelector: '.MuiChip-sizeSmall > .MuiChip-label', + }, + { + deprecatedClass: ' .MuiChip-labelMedium', + replacementSelector: '.MuiChip-sizeMedium > .MuiChip-label', + }, + { + deprecatedClass: ' .MuiChip-deleteIconSmall', + replacementSelector: '.MuiChip-sizeSmall > .MuiChip-deleteIcon', + }, + { + deprecatedClass: ' .MuiChip-deleteIconMedium', + replacementSelector: '.MuiChip-sizeMedium > .MuiChip-deleteIcon', + }, + { + deprecatedClass: ' .MuiChip-deleteIconColorPrimary', + replacementSelector: '.MuiChip-colorPrimary > .MuiChip-deleteIcon', + }, + { + deprecatedClass: ' .MuiChip-deleteIconColorSecondary', + replacementSelector: '.MuiChip-colorSecondary > .MuiChip-deleteIcon', + }, + { + deprecatedClass: ' .MuiChip-deleteIconOutlinedColorPrimary', + replacementSelector: '.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon', + }, + { + deprecatedClass: ' .MuiChip-deleteIconOutlinedColorSecondary', + replacementSelector: '.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon', + }, + { + deprecatedClass: ' .MuiChip-deleteIconFilledColorPrimary', + replacementSelector: '.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon', + }, + { + deprecatedClass: ' .MuiChip-deleteIconFilledColorSecondary', + replacementSelector: '.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon', + }, +]; + +const plugin = () => { + return { + postcssPlugin: `Replace deperecated Chip classes with new classes`, + Rule(rule) { + const { selector } = rule; + + classes.forEach(({ deprecatedClass, replacementSelector }) => { + const selectorRegex = new RegExp(`${deprecatedClass}`); + + if (selector.match(selectorRegex)) { + rule.selector = selector.replace(selectorRegex, replacementSelector); + } + }); + }, + }; +}; +plugin.postcss = true; + +module.exports = { + plugin, + classes, +}; diff --git a/packages/mui-codemod/src/deprecations/chip-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/chip-classes/postcss.config.js new file mode 100644 index 00000000000000..23bebc1125be6e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/chip-classes/postcss.config.js @@ -0,0 +1,5 @@ +const { plugin } = require('./postcss-plugin'); + +module.exports = { + plugins: [plugin], +}; diff --git a/packages/mui-codemod/src/deprecations/chip-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/actual.css new file mode 100644 index 00000000000000..2b253d22c96a99 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/actual.css @@ -0,0 +1,103 @@ +.MuiChip-clickableColorPrimary { + color: red; +} + +.MuiChip-clickableColorSecondary { + color: red; +} + +.MuiChip-deletableColorPrimary { + color: red; +} + +.MuiChip-deletableColorSecondary { + color: red; +} + +.MuiChip-outlinedPrimary { + color: red; +} + +.MuiChip-outlinedSecondary { + color: red; +} + +.MuiChip-filledPrimary { + color: red; +} + +.MuiChip-filledSecondary { + color: red; +} + +.MuiChip-root .MuiChip-avatarSmall { + color: red; +} + +.MuiChip-root .MuiChip-avatarMedium { + color: red; +} + +.MuiChip-root .MuiChip-avatarColorPrimary { + color: red; +} + +.MuiChip-root .MuiChip-avatarColorSecondary { + color: red; +} + +.MuiChip-root .MuiChip-iconSmall { + color: red; +} + +.MuiChip-root .MuiChip-iconMedium { + color: red; +} + +.MuiChip-root .MuiChip-iconColorPrimary { + color: red; +} + +.MuiChip-root .MuiChip-iconColorSecondary { + color: red; +} + +.MuiChip-root .MuiChip-labelSmall { + color: red; +} + +.MuiChip-root .MuiChip-labelMedium { + color: red; +} + +.MuiChip-root .MuiChip-deleteIconSmall { + color: red; +} + +.MuiChip-root .MuiChip-deleteIconMedium { + color: red; +} + +.MuiChip-root .MuiChip-deleteIconColorPrimary { + color: red; +} + +.MuiChip-root .MuiChip-deleteIconColorSecondary { + color: red; +} + +.MuiChip-root .MuiChip-deleteIconFilledColorPrimary { + color: red; +} + +.MuiChip-root .MuiChip-deleteIconFilledColorSecondary { + color: red; +} + +.MuiChip-root .MuiChip-deleteIconOutlinedColorPrimary { + color: red; +} + +.MuiChip-root .MuiChip-deleteIconOutlinedColorSecondary { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/chip-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/actual.js new file mode 100644 index 00000000000000..26a37c20e71dcb --- /dev/null +++ b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/actual.js @@ -0,0 +1,54 @@ +import { chipClasses } from '@mui/material/Chip'; + +('&.MuiChip-clickableColorPrimary'); +('&.MuiChip-clickableColorSecondary'); +('&.MuiChip-deletableColorPrimary'); +('&.MuiChip-deletableColorSecondary'); +('&.MuiChip-outlinedPrimary'); +('&.MuiChip-outlinedSecondary'); +('&.MuiChip-filledPrimary'); +('&.MuiChip-filledSecondary'); +('& .MuiChip-avatarSmall'); +('& .MuiChip-avatarMedium'); +('& .MuiChip-avatarColorPrimary'); +('& .MuiChip-avatarColorSecondary'); +('& .MuiChip-iconSmall'); +('& .MuiChip-iconMedium'); +('& .MuiChip-iconColorPrimary'); +('& .MuiChip-iconColorSecondary'); +('& .MuiChip-labelSmall'); +('& .MuiChip-labelMedium'); +('& .MuiChip-deleteIconSmall'); +('& .MuiChip-deleteIconMedium'); +('& .MuiChip-deleteIconColorPrimary'); +('& .MuiChip-deleteIconColorSecondary'); +('& .MuiChip-deleteIconFilledColorPrimary'); +('& .MuiChip-deleteIconFilledColorSecondary'); +('& .MuiChip-deleteIconOutlinedColorPrimary'); +('& .MuiChip-deleteIconOutlinedColorSecondary'); +`&.${chipClasses.clickableColorPrimary}`; +`&.${chipClasses.clickableColorSecondary}`; +`&.${chipClasses.deletableColorPrimary}`; +`&.${chipClasses.deletableColorSecondary}`; +`&.${chipClasses.outlinedPrimary}`; +`&.${chipClasses.outlinedSecondary}`; +`&.${chipClasses.filledPrimary}`; +`&.${chipClasses.filledSecondary}`; +`& .${chipClasses.avatarSmall}`; +`& .${chipClasses.avatarMedium}`; +`& .${chipClasses.avatarColorPrimary}`; +`& .${chipClasses.avatarColorSecondary}`; +`& .${chipClasses.iconSmall}`; +`& .${chipClasses.iconMedium}`; +`& .${chipClasses.iconColorPrimary}`; +`& .${chipClasses.iconColorSecondary}`; +`& .${chipClasses.labelSmall}`; +`& .${chipClasses.labelMedium}`; +`& .${chipClasses.deleteIconSmall}`; +`& .${chipClasses.deleteIconMedium}`; +`& .${chipClasses.deleteIconColorPrimary}`; +`& .${chipClasses.deleteIconColorSecondary}`; +`& .${chipClasses.deleteIconFilledColorPrimary}`; +`& .${chipClasses.deleteIconFilledColorSecondary}`; +`& .${chipClasses.deleteIconOutlinedColorPrimary}`; +`& .${chipClasses.deleteIconOutlinedColorSecondary}`; diff --git a/packages/mui-codemod/src/deprecations/chip-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/expected.css new file mode 100644 index 00000000000000..6ca46e53bd5b2c --- /dev/null +++ b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/expected.css @@ -0,0 +1,103 @@ +.MuiChip-clickable.MuiChip-colorPrimary { + color: red; +} + +.MuiChip-clickable.MuiChip-colorSecondary { + color: red; +} + +.MuiChip-deletable.MuiChip-colorPrimary { + color: red; +} + +.MuiChip-deletable.MuiChip-colorSecondary { + color: red; +} + +.MuiChip-outlined.MuiChip-colorPrimary { + color: red; +} + +.MuiChip-outlined.MuiChip-colorSecondary { + color: red; +} + +.MuiChip-filled.MuiChip-colorPrimary { + color: red; +} + +.MuiChip-filled.MuiChip-colorSecondary { + color: red; +} + +.MuiChip-root.MuiChip-sizeSmall > .MuiChip-avatar { + color: red; +} + +.MuiChip-root.MuiChip-sizeMedium > .MuiChip-avatar { + color: red; +} + +.MuiChip-root.MuiChip-colorPrimary > .MuiChip-avatar { + color: red; +} + +.MuiChip-root.MuiChip-colorSecondary > .MuiChip-avatar { + color: red; +} + +.MuiChip-root.MuiChip-sizeSmall > .MuiChip-icon { + color: red; +} + +.MuiChip-root.MuiChip-sizeMedium > .MuiChip-icon { + color: red; +} + +.MuiChip-root.MuiChip-colorPrimary > .MuiChip-icon { + color: red; +} + +.MuiChip-root.MuiChip-colorSecondary > .MuiChip-icon { + color: red; +} + +.MuiChip-root.MuiChip-sizeSmall > .MuiChip-label { + color: red; +} + +.MuiChip-root.MuiChip-sizeMedium > .MuiChip-label { + color: red; +} + +.MuiChip-root.MuiChip-sizeSmall > .MuiChip-deleteIcon { + color: red; +} + +.MuiChip-root.MuiChip-sizeMedium > .MuiChip-deleteIcon { + color: red; +} + +.MuiChip-root.MuiChip-colorPrimary > .MuiChip-deleteIcon { + color: red; +} + +.MuiChip-root.MuiChip-colorSecondary > .MuiChip-deleteIcon { + color: red; +} + +.MuiChip-root.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon { + color: red; +} + +.MuiChip-root.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon { + color: red; +} + +.MuiChip-root.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon { + color: red; +} + +.MuiChip-root.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/chip-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/expected.js new file mode 100644 index 00000000000000..e3468e5166c6b5 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/expected.js @@ -0,0 +1,54 @@ +import { chipClasses } from '@mui/material/Chip'; + +("&.MuiChip-clickable.MuiChip-colorPrimary"); +("&.MuiChip-clickable.MuiChip-colorSecondary"); +("&.MuiChip-deletable.MuiChip-colorPrimary"); +("&.MuiChip-deletable.MuiChip-colorSecondary"); +("&.MuiChip-outlined.MuiChip-colorPrimary"); +("&.MuiChip-outlined.MuiChip-colorSecondary"); +("&.MuiChip-filled.MuiChip-colorPrimary"); +("&.MuiChip-filled.MuiChip-colorSecondary"); +("&.MuiChip-sizeSmall > .MuiChip-avatar"); +("&.MuiChip-sizeMedium > .MuiChip-avatar"); +("&.MuiChip-colorPrimary > .MuiChip-avatar"); +("&.MuiChip-colorSecondary > .MuiChip-avatar"); +("&.MuiChip-sizeSmall > .MuiChip-icon"); +("&.MuiChip-sizeMedium > .MuiChip-icon"); +("&.MuiChip-colorPrimary > .MuiChip-icon"); +("&.MuiChip-colorSecondary > .MuiChip-icon"); +("&.MuiChip-sizeSmall > .MuiChip-label"); +("&.MuiChip-sizeMedium > .MuiChip-label"); +("&.MuiChip-sizeSmall > .MuiChip-deleteIcon"); +("&.MuiChip-sizeMedium > .MuiChip-deleteIcon"); +("&.MuiChip-colorPrimary > .MuiChip-deleteIcon"); +("&.MuiChip-colorSecondary > .MuiChip-deleteIcon"); +("&.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon"); +("&.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon"); +("&.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon"); +("&.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon"); +`&.${chipClasses.clickable}.${chipClasses.colorPrimary}`; +`&.${chipClasses.clickable}.${chipClasses.colorSecondary}`; +`&.${chipClasses.deletable}.${chipClasses.colorPrimary}`; +`&.${chipClasses.deletable}.${chipClasses.colorSecondary}`; +`&.${chipClasses.outlined}.${chipClasses.colorPrimary}`; +`&.${chipClasses.outlined}.${chipClasses.colorSecondary}`; +`&.${chipClasses.filled}.${chipClasses.colorPrimary}`; +`&.${chipClasses.filled}.${chipClasses.colorSecondary}`; +`&.${chipClasses.sizeSmall} > .${chipClasses.avatar}`; +`&.${chipClasses.sizeMedium} > .${chipClasses.avatar}`; +`&.${chipClasses.colorPrimary} > .${chipClasses.avatar}`; +`&.${chipClasses.colorSecondary} > .${chipClasses.avatar}`; +`&.${chipClasses.sizeSmall} > .${chipClasses.icon}`; +`&.${chipClasses.sizeMedium} > .${chipClasses.icon}`; +`&.${chipClasses.colorPrimary} > .${chipClasses.icon}`; +`&.${chipClasses.colorSecondary} > .${chipClasses.icon}`; +`&.${chipClasses.sizeSmall} > .${chipClasses.label}`; +`&.${chipClasses.sizeMedium} > .${chipClasses.label}`; +`&.${chipClasses.sizeSmall} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.sizeMedium} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.filled}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.filled}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.outlined}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.outlined}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/index.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/index.js new file mode 100644 index 00000000000000..9200e42765f6b8 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/index.js @@ -0,0 +1 @@ +export { default } from './pagination-item-classes'; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js new file mode 100644 index 00000000000000..5bf5e6cdd23a3f --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js @@ -0,0 +1,84 @@ +import { classes } from './postcss-plugin'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + classes.forEach(({ deprecatedClass, replacementSelector }) => { + root + .find(j.ImportDeclaration) + .filter((path) => path.node.source.value.match(/^@mui\/material\/PaginationItem$/)) + .forEach((path) => { + path.node.specifiers.forEach((specifier) => { + if ( + specifier.type === 'ImportSpecifier' && + specifier.imported.name === 'paginationItemClasses' + ) { + const deprecatedAtomicClass = deprecatedClass.replace('.MuiPaginationItem-', ''); + root + .find(j.MemberExpression, { + object: { name: specifier.local.name }, + property: { name: deprecatedAtomicClass }, + }) + .forEach((memberExpression) => { + const parent = memberExpression.parentPath.parentPath.value; + if (parent.type === j.TemplateLiteral.name) { + const memberExpressionIndex = parent.expressions.findIndex( + (expression) => expression === memberExpression.value, + ); + const precedingTemplateElement = parent.quasis[memberExpressionIndex]; + const atomicClasses = replacementSelector + .replaceAll('MuiPaginationItem-', '') + .replaceAll('&.', '') + .split('.') + .filter(Boolean); + + if (precedingTemplateElement.value.raw.endsWith('&.')) { + parent.expressions.splice( + memberExpressionIndex, + 1, + j.memberExpression( + memberExpression.value.object, + j.identifier(atomicClasses[0]), + ), + j.memberExpression( + memberExpression.value.object, + j.identifier(atomicClasses[1]), + ), + ); + parent.quasis.splice( + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw, + cooked: precedingTemplateElement.value.cooked, + }, + false, + ), + j.templateElement({ raw: '.', cooked: '.' }, false), + ); + } + } + }); + } + }); + }); + + const selectorRegex = new RegExp(`^&${deprecatedClass}`); + + root + .find( + j.Literal, + (literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex), + ) + .forEach((path) => { + path.replace(j.literal(path.value.value.replace(selectorRegex, `&${replacementSelector}`))); + }); + }); + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js new file mode 100644 index 00000000000000..4949d6d844ef3a --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js @@ -0,0 +1,78 @@ +import path from 'path'; +import { expect } from 'chai'; +import postcss from 'postcss'; +import { jscodeshift } from '../../../testUtils'; +import jsTransform from './pagination-item-classes'; +import { plugin as postcssPlugin } from './postcss-plugin'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +const postcssProcessor = postcss([postcssPlugin]); + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('pagination-item-classes', () => { + describe('js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/actual.js') }, + { jscodeshift }, + { printOptions: { quote: 'double', trailingComma: true } }, + ); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('css-transform', () => { + it('transforms classes as needed', async () => { + const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { + from: undefined, + }); + + const expected = read('./test-cases/expected.css'); + expect(actual.css).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', async () => { + const actual = await postcssProcessor.process(read('./test-cases/expected.css'), { + from: undefined, + }); + + const expected = read('./test-cases/expected.css'); + expect(actual.css).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('test-cases', () => { + it('should not be the same', () => { + const actualJS = read('./test-cases/actual.js'); + const expectedJS = read('./test-cases/expected.js'); + expect(actualJS).not.to.equal(expectedJS, 'The actual and expected should be different'); + + const actualCSS = read('./test-cases/actual.css'); + const expectedCSS = read('./test-cases/expected.css'); + expect(actualCSS).not.to.equal( + expectedCSS, + 'The actual and expected should be different', + ); + }); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js new file mode 100644 index 00000000000000..c07b8d28264957 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js @@ -0,0 +1,41 @@ +const classes = [ + { + deprecatedClass: '.MuiPaginationItem-textPrimary', + replacementSelector: '.MuiPaginationItem-text.MuiPaginationItem-colorPrimary', + }, + { + deprecatedClass: '.MuiPaginationItem-textSecondary', + replacementSelector: '.MuiPaginationItem-text.MuiPaginationItem-colorSecondary', + }, + { + deprecatedClass: '.MuiPaginationItem-outlinedPrimary', + replacementSelector: '.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary', + }, + { + deprecatedClass: '.MuiPaginationItem-outlinedSecondary', + replacementSelector: '.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary', + }, +]; + +const plugin = () => { + return { + postcssPlugin: `Replace deperecated PaginationItem classes with new classes`, + Rule(rule) { + const { selector } = rule; + + classes.forEach(({ deprecatedClass, replacementSelector }) => { + const selectorRegex = new RegExp(`${deprecatedClass}`); + + if (selector.match(selectorRegex)) { + rule.selector = selector.replace(selectorRegex, replacementSelector); + } + }); + }, + }; +}; +plugin.postcss = true; + +module.exports = { + plugin, + classes, +}; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss.config.js new file mode 100644 index 00000000000000..23bebc1125be6e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss.config.js @@ -0,0 +1,5 @@ +const { plugin } = require('./postcss-plugin'); + +module.exports = { + plugins: [plugin], +}; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.css new file mode 100644 index 00000000000000..2bf14ae9103fe5 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.css @@ -0,0 +1,15 @@ +.MuiPaginationItem-textPrimary { + color: red; +} + +.MuiPaginationItem-textSecondary { + color: blue; +} + +.MuiPaginationItem-outlinedPrimary { + border: 1px solid black; +} + +.MuiPaginationItem-outlinedSecondary { + border: 1px solid green; +} diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js new file mode 100644 index 00000000000000..5959ac9142b25e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js @@ -0,0 +1,111 @@ +import { paginationItemClasses } from '@mui/material/PaginationItem'; + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + '&.MuiPaginationItem-textPrimary': { + color: 'red', + }, + '&.MuiPaginationItem-textSecondary': { + color: 'red', + }, + '&.MuiPaginationItem-outlinedPrimary': { + color: 'red', + }, + '&.MuiPaginationItem-outlinedSecondary': { + color: 'red', + }, + }, + }, + }, +}); + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + [`&.${paginationItemClasses.textPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.textSecondary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlinedPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlinedSecondary}`]: { + color: 'red', + }, + }, + }, + }, +}); + +styled(Component)(() => { + return { + '&.MuiPaginationItem-textPrimary': { + color: 'red', + }, + '&.MuiPaginationItem-textSecondary': { + color: 'red', + }, + '&.MuiPaginationItem-outlinedPrimary': { + color: 'red', + }, + '&.MuiPaginationItem-outlinedSecondary': { + color: 'red', + }, + }; +}); + +styled(Component)(() => { + return { + [`&.${paginationItemClasses.textPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.textSecondary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlinedPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlinedSecondary}`]: { + color: 'red', + }, + }; +}); + +; + +; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css new file mode 100644 index 00000000000000..2446978a1256d6 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css @@ -0,0 +1,15 @@ +.MuiPaginationItem-text.MuiPaginationItem-colorPrimary { + color: red; +} + +.MuiPaginationItem-text.MuiPaginationItem-colorSecondary { + color: blue; +} + +.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary { + border: 1px solid black; +} + +.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary { + border: 1px solid green; +} diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.js new file mode 100644 index 00000000000000..320220e105dd15 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.js @@ -0,0 +1,111 @@ +import { paginationItemClasses } from '@mui/material/PaginationItem'; + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + "&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary": { + color: 'red', + }, + "&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary": { + color: 'red', + }, + "&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary": { + color: 'red', + }, + "&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary": { + color: 'red', + }, + }, + }, + }, +}); + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, + }, + }, + }, +}); + +styled(Component)(() => { + return { + "&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary": { + color: 'red', + }, + "&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary": { + color: 'red', + }, + "&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary": { + color: 'red', + }, + "&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary": { + color: 'red', + }, + }; +}); + +styled(Component)(() => { + return { + [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, + }; +}); + +; + +; diff --git a/packages/mui-codemod/src/deprecations/slider-props/index.js b/packages/mui-codemod/src/deprecations/slider-props/index.js new file mode 100644 index 00000000000000..e49c11aa151c65 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/slider-props/index.js @@ -0,0 +1 @@ +export { default } from './slider-props'; diff --git a/packages/mui-codemod/src/deprecations/slider-props/slider-props.js b/packages/mui-codemod/src/deprecations/slider-props/slider-props.js new file mode 100644 index 00000000000000..056962a8b4c82a --- /dev/null +++ b/packages/mui-codemod/src/deprecations/slider-props/slider-props.js @@ -0,0 +1,15 @@ +import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + + replaceComponentsWithSlots(j, { root, componentName: 'Slider' }); + + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/slider-props/slider-props.test.js b/packages/mui-codemod/src/deprecations/slider-props/slider-props.test.js new file mode 100644 index 00000000000000..b6d5682eb2a76a --- /dev/null +++ b/packages/mui-codemod/src/deprecations/slider-props/slider-props.test.js @@ -0,0 +1,53 @@ +import path from 'path'; +import { expect } from 'chai'; +import { jscodeshift } from '../../../testUtils'; +import transform from './slider-props'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('slider-props', () => { + it('transforms props as needed', () => { + const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {}); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {}); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('[theme] slider-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/theme.actual.js') }, + { jscodeshift }, + { printOptions: { trailingComma: true } }, + ); + + const expected = read('./test-cases/theme.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/theme.expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/theme.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/slider-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/slider-props/test-cases/actual.js new file mode 100644 index 00000000000000..c73ad39187900b --- /dev/null +++ b/packages/mui-codemod/src/deprecations/slider-props/test-cases/actual.js @@ -0,0 +1,18 @@ +import Slider from '@mui/material/Slider'; + +; +; +; diff --git a/packages/mui-codemod/src/deprecations/slider-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/slider-props/test-cases/expected.js new file mode 100644 index 00000000000000..c1809d70cfa6eb --- /dev/null +++ b/packages/mui-codemod/src/deprecations/slider-props/test-cases/expected.js @@ -0,0 +1,20 @@ +import Slider from '@mui/material/Slider'; + +; +; +; diff --git a/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.actual.js new file mode 100644 index 00000000000000..5b68897f2ddc97 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.actual.js @@ -0,0 +1,30 @@ +fn({ + MuiSlider: { + defaultProps: { + components: { Track: ComponentsTrack }, + componentsProps: { track: componentsTrackProps }, + }, + }, +}); + +fn({ + MuiSlider: { + defaultProps: { + components: { Track: ComponentsTrack }, + slots: { rail: SlotsRail }, + componentsProps: { track: componentsTrackProps }, + slotProps: { rail: slotsRailProps }, + }, + }, +}); + +fn({ + MuiSlider: { + defaultProps: { + components: { Track: ComponentsTrack }, + slots: { rail: SlotsRail, track: SlotsTrack }, + componentsProps: { track: componentsTrackProps }, + slotProps: { rail: slotsRailProps, track: slotsTrackProps }, + }, + }, +}); diff --git a/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.expected.js new file mode 100644 index 00000000000000..74c5dab30c7553 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/slider-props/test-cases/theme.expected.js @@ -0,0 +1,45 @@ +fn({ + MuiSlider: { + defaultProps: { + slots: { + track: ComponentsTrack, + }, + + slotProps: { + track: componentsTrackProps, + }, + }, + }, +}); + +fn({ + MuiSlider: { + defaultProps: { + slots: { + track: ComponentsTrack, + rail: SlotsRail, + }, + + slotProps: { + track: componentsTrackProps, + rail: slotsRailProps, + }, + }, + }, +}); + +fn({ + MuiSlider: { + defaultProps: { + slots: { + track: SlotsTrack, + rail: SlotsRail, + }, + + slotProps: { + track: slotsTrackProps, + rail: slotsRailProps, + }, + }, + }, +}); diff --git a/packages/mui-core-downloads-tracker/package.json b/packages/mui-core-downloads-tracker/package.json index 5c18faeb1c32f6..fea026d1e65021 100644 --- a/packages/mui-core-downloads-tracker/package.json +++ b/packages/mui-core-downloads-tracker/package.json @@ -1,6 +1,6 @@ { "name": "@mui/core-downloads-tracker", - "version": "5.15.10", + "version": "5.15.11", "private": false, "author": "MUI Team", "description": "Internal package to track number of downloads of our design system libraries", diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json index f90cfbd3d19c12..7256766209a528 100644 --- a/packages/mui-docs/package.json +++ b/packages/mui-docs/package.json @@ -1,6 +1,6 @@ { "name": "@mui/docs", - "version": "5.15.9", + "version": "5.15.11", "private": false, "author": "MUI Team", "description": "MUI Docs - Documentation building blocks.", diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json index 3ec0aa17a551a1..655de74410cd1b 100644 --- a/packages/mui-icons-material/package.json +++ b/packages/mui-icons-material/package.json @@ -1,6 +1,6 @@ { "name": "@mui/icons-material", - "version": "5.15.10", + "version": "5.15.11", "private": false, "author": "MUI Team", "description": "Material Design icons distributed as SVG React components.", diff --git a/packages/mui-icons-material/test/generated-types/tsconfig.json b/packages/mui-icons-material/test/generated-types/tsconfig.json index 7448a99bb9fb9f..9b00faf9c2d744 100644 --- a/packages/mui-icons-material/test/generated-types/tsconfig.json +++ b/packages/mui-icons-material/test/generated-types/tsconfig.json @@ -21,8 +21,8 @@ "@mui/joy/*": ["./mui-joy/src/*"], "@mui/lab": ["./mui-lab/src"], "@mui/lab/*": ["./mui-lab/src/*"], - "@mui/markdown": ["./markdown"], - "@mui/markdown/*": ["./markdown/*"], + "@mui/internal-markdown": ["./markdown"], + "@mui/internal-markdown/*": ["./markdown/*"], "@mui/material-next": ["./mui-material-next/src"], "@mui/material-next/*": ["./mui-material-next/src/*"], "@mui/material-nextjs": ["./mui-material-nextjs/src"], @@ -50,7 +50,9 @@ "@mui/zero-tag-processor/*": ["./zero-tag-processor/src/*"], "@mui/zero-vite-plugin": ["./zero-vite-plugin/src"], "@mui/zero-vite-plugin/*": ["./zero-vite-plugin/src/*"], - "typescript-to-proptypes": ["./typescript-to-proptypes/src"] + "@mui/internal-scripts/typescript-to-proptypes": [ + "../packages-internal/scripts/typescript-to-proptypes/src" + ] } }, "exclude": ["**/node_modules/"] diff --git a/packages/mui-joy/README.md b/packages/mui-joy/README.md index 023f2c85fec6ae..98053e50428614 100644 --- a/packages/mui-joy/README.md +++ b/packages/mui-joy/README.md @@ -22,7 +22,7 @@ Visit [https://mui.com/joy-ui/getting-started/](https://mui.com/joy-ui/getting-s ## Questions For how-to questions that don't involve making changes to the code base, please use [Stack Overflow](https://stackoverflow.com/questions/tagged/joy-ui) instead of GitHub issues. -Use the "joy-ui" tag on Stack Overflow to make it easier for the community to find your question. +Use the "joy-ui" tag on Stack Overflow to make it easier for the community to find your question. ## Examples diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json index f96e1c6064b189..c46bd9f9b649af 100644 --- a/packages/mui-joy/package.json +++ b/packages/mui-joy/package.json @@ -1,6 +1,6 @@ { "name": "@mui/joy", - "version": "5.0.0-beta.28", + "version": "5.0.0-beta.29", "private": false, "author": "MUI Team", "description": "Joy UI is an open-source React component library that implements MUI's own design principles. It's comprehensive and can be used in production out of the box.", diff --git a/packages/mui-joy/src/AvatarGroup/AvatarGroup.tsx b/packages/mui-joy/src/AvatarGroup/AvatarGroup.tsx index fdfbd949dcdd04..b3b8138b8b331d 100644 --- a/packages/mui-joy/src/AvatarGroup/AvatarGroup.tsx +++ b/packages/mui-joy/src/AvatarGroup/AvatarGroup.tsx @@ -12,6 +12,10 @@ import useSlot from '../utils/useSlot'; export const AvatarGroupContext = React.createContext(undefined); +if (process.env.NODE_ENV !== 'production') { + AvatarGroupContext.displayName = 'AvatarGroupContext'; +} + const useUtilityClasses = () => { const slots = { root: ['root'], diff --git a/packages/mui-joy/src/Chip/ChipContext.ts b/packages/mui-joy/src/Chip/ChipContext.ts index d94b224f0e0d92..d4dd7e0e676bd1 100644 --- a/packages/mui-joy/src/Chip/ChipContext.ts +++ b/packages/mui-joy/src/Chip/ChipContext.ts @@ -7,4 +7,8 @@ const ChipColorContext = React.createContext(undefined); +if (process.env.NODE_ENV !== 'production') { + FormControlContext.displayName = 'FormControlContext'; +} + export default FormControlContext; diff --git a/packages/mui-joy/src/List/ComponentListContext.ts b/packages/mui-joy/src/List/ComponentListContext.ts index a8c889f3f05761..aff97dca3a362d 100644 --- a/packages/mui-joy/src/List/ComponentListContext.ts +++ b/packages/mui-joy/src/List/ComponentListContext.ts @@ -2,4 +2,8 @@ import * as React from 'react'; const ComponentListContext = React.createContext(undefined); +if (process.env.NODE_ENV !== 'production') { + ComponentListContext.displayName = 'ComponentListContext'; +} + export default ComponentListContext; diff --git a/packages/mui-joy/src/List/GroupListContext.ts b/packages/mui-joy/src/List/GroupListContext.ts index 0f6584855e2355..e4298395f6472d 100644 --- a/packages/mui-joy/src/List/GroupListContext.ts +++ b/packages/mui-joy/src/List/GroupListContext.ts @@ -2,4 +2,8 @@ import * as React from 'react'; const GroupListContext = React.createContext(undefined); +if (process.env.NODE_ENV !== 'production') { + GroupListContext.displayName = 'GroupListContext'; +} + export default GroupListContext; diff --git a/packages/mui-joy/src/List/NestedListContext.ts b/packages/mui-joy/src/List/NestedListContext.ts index 02d171d438d444..f898ff83b51610 100644 --- a/packages/mui-joy/src/List/NestedListContext.ts +++ b/packages/mui-joy/src/List/NestedListContext.ts @@ -2,4 +2,8 @@ import * as React from 'react'; const NestedListContext = React.createContext(false); +if (process.env.NODE_ENV !== 'production') { + NestedListContext.displayName = 'NestedListContext'; +} + export default NestedListContext; diff --git a/packages/mui-joy/src/List/RowListContext.ts b/packages/mui-joy/src/List/RowListContext.ts index 34f73a18906b28..ab535324f9b37c 100644 --- a/packages/mui-joy/src/List/RowListContext.ts +++ b/packages/mui-joy/src/List/RowListContext.ts @@ -2,4 +2,8 @@ import * as React from 'react'; const RowListContext = React.createContext(false); +if (process.env.NODE_ENV !== 'production') { + RowListContext.displayName = 'RowListContext'; +} + export default RowListContext; diff --git a/packages/mui-joy/src/List/WrapListContext.ts b/packages/mui-joy/src/List/WrapListContext.ts index 702eb5b96cf811..9624e8a69a0926 100644 --- a/packages/mui-joy/src/List/WrapListContext.ts +++ b/packages/mui-joy/src/List/WrapListContext.ts @@ -2,4 +2,8 @@ import * as React from 'react'; const WrapListContext = React.createContext(false); +if (process.env.NODE_ENV !== 'production') { + WrapListContext.displayName = 'WrapListContext'; +} + export default WrapListContext; diff --git a/packages/mui-joy/src/ListItem/ListItem.tsx b/packages/mui-joy/src/ListItem/ListItem.tsx index 339d2463cc57d0..b195625fd273d8 100644 --- a/packages/mui-joy/src/ListItem/ListItem.tsx +++ b/packages/mui-joy/src/ListItem/ListItem.tsx @@ -17,7 +17,7 @@ import NestedListContext from '../List/NestedListContext'; import RowListContext from '../List/RowListContext'; import WrapListContext from '../List/WrapListContext'; import ComponentListContext from '../List/ComponentListContext'; -import ListSubheaderDispatch from '../ListSubheader/ListSubheaderContext'; +import ListSubheaderContext from '../ListSubheader/ListSubheaderContext'; import GroupListContext from '../List/GroupListContext'; const useUtilityClasses = (ownerState: ListItemOwnerState) => { @@ -244,7 +244,7 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) { }); return ( - + {startAction && {startAction}} @@ -265,7 +265,7 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) { {endAction && {endAction}} - + ); }) as OverridableComponent; diff --git a/packages/mui-joy/src/ListItemButton/ListItemButtonOrientationContext.ts b/packages/mui-joy/src/ListItemButton/ListItemButtonOrientationContext.ts index 94065dbc891508..b2e7380dae11b1 100644 --- a/packages/mui-joy/src/ListItemButton/ListItemButtonOrientationContext.ts +++ b/packages/mui-joy/src/ListItemButton/ListItemButtonOrientationContext.ts @@ -4,4 +4,8 @@ const ListItemButtonOrientationContext = React.createContext<'horizontal' | 'ver 'horizontal', ); +if (process.env.NODE_ENV !== 'production') { + ListItemButtonOrientationContext.displayName = 'ListItemButtonOrientationContext'; +} + export default ListItemButtonOrientationContext; diff --git a/packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx b/packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx index 94720d6d974c52..6af9deba3d4a54 100644 --- a/packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx +++ b/packages/mui-joy/src/ListSubheader/ListSubheader.test.tsx @@ -4,7 +4,7 @@ import { spy } from 'sinon'; import { createRenderer } from '@mui-internal/test-utils'; import { ThemeProvider } from '@mui/joy/styles'; import ListSubheader, { listSubheaderClasses as classes } from '@mui/joy/ListSubheader'; -import ListSubheaderDispatch from './ListSubheaderContext'; +import ListSubheaderContext from './ListSubheaderContext'; import describeConformance from '../../test/describeConformance'; describe('Joy ', () => { @@ -50,9 +50,9 @@ describe('Joy ', () => { it('should call dispatch context with the generated id', () => { const dispatch = spy(); const { container } = render( - + - , + , ); // @ts-ignore diff --git a/packages/mui-joy/src/ListSubheader/ListSubheader.tsx b/packages/mui-joy/src/ListSubheader/ListSubheader.tsx index 070e599fcc41c7..e880abf242adcf 100644 --- a/packages/mui-joy/src/ListSubheader/ListSubheader.tsx +++ b/packages/mui-joy/src/ListSubheader/ListSubheader.tsx @@ -8,7 +8,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base/composeClas import { styled, useThemeProps } from '../styles'; import { ListSubheaderOwnerState, ListSubheaderTypeMap } from './ListSubheaderProps'; import { getListSubheaderUtilityClass } from './listSubheaderClasses'; -import ListSubheaderDispatch from './ListSubheaderContext'; +import ListSubheaderContext from './ListSubheaderContext'; import useSlot from '../utils/useSlot'; import { INVERTED_COLORS_ATTR } from '../colorInversion/colorInversionUtils'; @@ -88,7 +88,7 @@ const ListSubheader = React.forwardRef(function ListSubheader(inProps, ref) { ...other } = props; const id = useId(idOverride); - const setSubheaderId = React.useContext(ListSubheaderDispatch); + const setSubheaderId = React.useContext(ListSubheaderContext); React.useEffect(() => { if (setSubheaderId) { diff --git a/packages/mui-joy/src/ListSubheader/ListSubheaderContext.ts b/packages/mui-joy/src/ListSubheader/ListSubheaderContext.ts index 1d9258302a4fd6..b7705c35b1bfc7 100644 --- a/packages/mui-joy/src/ListSubheader/ListSubheaderContext.ts +++ b/packages/mui-joy/src/ListSubheader/ListSubheaderContext.ts @@ -1,7 +1,11 @@ import * as React from 'react'; -const ListSubheaderDispatch = React.createContext< +const ListSubheaderContext = React.createContext< undefined | React.Dispatch> >(undefined); -export default ListSubheaderDispatch; +if (process.env.NODE_ENV !== 'production') { + ListSubheaderContext.displayName = 'ListSubheaderContext'; +} + +export default ListSubheaderContext; diff --git a/packages/mui-joy/src/Modal/CloseModalContext.ts b/packages/mui-joy/src/Modal/CloseModalContext.ts index 487543623efe95..372a18b97d395c 100644 --- a/packages/mui-joy/src/Modal/CloseModalContext.ts +++ b/packages/mui-joy/src/Modal/CloseModalContext.ts @@ -3,4 +3,8 @@ import { ModalProps } from './ModalProps'; const CloseModalContext = React.createContext(undefined); +if (process.env.NODE_ENV !== 'production') { + CloseModalContext.displayName = 'CloseModalContext'; +} + export default CloseModalContext; diff --git a/packages/mui-joy/src/ModalDialog/ModalDialogSizeContext.ts b/packages/mui-joy/src/ModalDialog/ModalDialogSizeContext.ts index 061e784aaf6436..927f009620b383 100644 --- a/packages/mui-joy/src/ModalDialog/ModalDialogSizeContext.ts +++ b/packages/mui-joy/src/ModalDialog/ModalDialogSizeContext.ts @@ -3,4 +3,8 @@ import { ModalDialogProps } from './ModalDialogProps'; const ModalDialogSizeContext = React.createContext(undefined); +if (process.env.NODE_ENV !== 'production') { + ModalDialogSizeContext.displayName = 'ModalDialogSizeContext'; +} + export default ModalDialogSizeContext; diff --git a/packages/mui-joy/src/ModalDialog/ModalDialogVariantColorContext.ts b/packages/mui-joy/src/ModalDialog/ModalDialogVariantColorContext.ts index b028adfe78e17d..b4f7e01137c04f 100644 --- a/packages/mui-joy/src/ModalDialog/ModalDialogVariantColorContext.ts +++ b/packages/mui-joy/src/ModalDialog/ModalDialogVariantColorContext.ts @@ -6,4 +6,8 @@ const ModalDialogVariantColorContext = React.createContext< | (Pick & { labelledBy?: string; describedBy?: string }) >(undefined); +if (process.env.NODE_ENV !== 'production') { + ModalDialogVariantColorContext.displayName = 'ModalDialogVariantColorContext'; +} + export default ModalDialogVariantColorContext; diff --git a/packages/mui-joy/src/Tabs/SizeTabsContext.ts b/packages/mui-joy/src/Tabs/SizeTabsContext.ts index 4d69a43cf37e4b..340b7ed4d358bf 100644 --- a/packages/mui-joy/src/Tabs/SizeTabsContext.ts +++ b/packages/mui-joy/src/Tabs/SizeTabsContext.ts @@ -3,4 +3,8 @@ import { TabsProps } from './TabsProps'; const SizeTabsContext = React.createContext>('md'); +if (process.env.NODE_ENV !== 'production') { + SizeTabsContext.displayName = 'SizeTabsContext'; +} + export default SizeTabsContext; diff --git a/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroupContext.tsx b/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroupContext.tsx index 4ac127761679ee..d580c18ee818f0 100644 --- a/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroupContext.tsx +++ b/packages/mui-joy/src/ToggleButtonGroup/ToggleButtonGroupContext.tsx @@ -17,4 +17,8 @@ const ToggleButtonGroupContext = React.createContext) => { + const handleMouseOver = (event: React.MouseEvent) => { if (ignoreNonTouchEvents.current && event.type !== 'touchstart') { return; } @@ -325,7 +325,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { } }; - const handleLeave = (event: React.MouseEvent) => { + const handleMouseLeave = (event: React.MouseEvent) => { enterTimer.clear(); leaveTimer.start(leaveDelay, () => { handleClose(event); @@ -345,7 +345,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { handleBlurVisible(event as React.FocusEvent); if (isFocusVisibleRef.current === false) { setChildIsFocusVisible(false); - handleLeave(event as React.MouseEvent); + handleMouseLeave(event as React.MouseEvent); } }; @@ -360,7 +360,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { handleFocusVisible(event as React.FocusEvent); if (isFocusVisibleRef.current === true) { setChildIsFocusVisible(true); - handleEnter(event as React.MouseEvent); + handleMouseOver(event as React.MouseEvent); } }; @@ -373,9 +373,6 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { } }; - const handleMouseOver = handleEnter; - const handleMouseLeave = handleLeave; - const handleTouchStart = (event: React.TouchEvent) => { detectTouchStart(event); leaveTimer.clear(); @@ -391,7 +388,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { touchTimer.start(enterTouchDelay, () => { (document.body.style as unknown as { WebkitUserSelect?: string }).WebkitUserSelect = prevUserSelect.current; - handleEnter(event as unknown as React.MouseEvent); + handleMouseOver(event as unknown as React.MouseEvent); }); }; diff --git a/packages/mui-joy/src/Typography/Typography.tsx b/packages/mui-joy/src/Typography/Typography.tsx index 8a84dad92a2327..6e22027df5ad1f 100644 --- a/packages/mui-joy/src/Typography/Typography.tsx +++ b/packages/mui-joy/src/Typography/Typography.tsx @@ -22,6 +22,10 @@ import { TypographySystem } from '../styles/types'; */ export const TypographyNestedContext = React.createContext(false); +if (process.env.NODE_ENV !== 'production') { + TypographyNestedContext.displayName = 'TypographyNestedContext'; +} + /** * @internal * Typography's level will be inherit within this context unless an explicit `level` prop is provided. @@ -30,6 +34,10 @@ export const TypographyNestedContext = React.createContext(false); */ export const TypographyInheritContext = React.createContext(false); +if (process.env.NODE_ENV !== 'production') { + TypographyInheritContext.displayName = 'TypographyInheritContext'; +} + const useUtilityClasses = (ownerState: TypographyOwnerState) => { const { gutterBottom, noWrap, level, color, variant } = ownerState; diff --git a/packages/mui-joy/src/styles/variantColorInheritance.tsx b/packages/mui-joy/src/styles/variantColorInheritance.tsx index 08bf2298c1f488..f15ea4c85ec58c 100644 --- a/packages/mui-joy/src/styles/variantColorInheritance.tsx +++ b/packages/mui-joy/src/styles/variantColorInheritance.tsx @@ -3,6 +3,10 @@ import { ColorPaletteProp, VariantProp } from '@mui/joy/styles/types'; const VariantColorContext = React.createContext(undefined); +if (process.env.NODE_ENV !== 'production') { + VariantColorContext.displayName = 'VariantColorContext'; +} + /** * @internal For internal usage only. * diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json index 2b00ba123f521d..37c1a9941320fa 100644 --- a/packages/mui-lab/package.json +++ b/packages/mui-lab/package.json @@ -1,6 +1,6 @@ { "name": "@mui/lab", - "version": "5.0.0-alpha.165", + "version": "5.0.0-alpha.166", "private": false, "author": "MUI Team", "description": "Laboratory for new MUI modules.", diff --git a/packages/mui-lab/src/TimelineDot/color-palette-prop.spec.tsx b/packages/mui-lab/src/TimelineDot/color-palette-prop.spec.tsx new file mode 100644 index 00000000000000..3702b0b0c914bb --- /dev/null +++ b/packages/mui-lab/src/TimelineDot/color-palette-prop.spec.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import TimelineDot from '@mui/lab/TimelineDot'; + +function TestBaseColorPaletteProp() { + const baseColorPalette = ['primary', 'secondary', 'error', 'info', 'success', 'warning'] as const; + return ( +
    + {baseColorPalette.map((color) => ( +
    + +
    + ))} +
    + ); +} diff --git a/packages/mui-material-next/package.json b/packages/mui-material-next/package.json index e5260817da6f50..474288b423c989 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.123", + "version": "6.0.0-alpha.124", "private": false, "author": "MUI Team", "description": "v6-alpha: React components that implement Google's Material Design", @@ -54,7 +54,7 @@ }, "devDependencies": { "@emotion/react": "^11.11.3", - "@mui-internal/babel-macros": "workspace:^", + "@mui/internal-babel-macros": "workspace:^", "@mui-internal/test-utils": "workspace:^", "@testing-library/user-event": "^14.5.2", "@types/chai": "^4.3.11", diff --git a/packages/mui-material-next/src/ButtonBase/Ripple.tsx b/packages/mui-material-next/src/ButtonBase/Ripple.tsx index 753bf98dc6b63a..832a94c6829f3c 100644 --- a/packages/mui-material-next/src/ButtonBase/Ripple.tsx +++ b/packages/mui-material-next/src/ButtonBase/Ripple.tsx @@ -57,7 +57,6 @@ function Ripple(props: RippleProps) { Ripple.propTypes = { /** * Override or extend the styles applied to the component. - * See [CSS API](#css) below for more details. */ classes: PropTypes.object.isRequired, className: PropTypes.string, diff --git a/packages/mui-material-next/src/ButtonBase/TouchRipple.tsx b/packages/mui-material-next/src/ButtonBase/TouchRipple.tsx index e2bbd26659b497..4f5025e3025ca4 100644 --- a/packages/mui-material-next/src/ButtonBase/TouchRipple.tsx +++ b/packages/mui-material-next/src/ButtonBase/TouchRipple.tsx @@ -284,7 +284,6 @@ TouchRipple.propTypes = { center: PropTypes.bool, /** * Override or extend the styles applied to the component. - * See [CSS API](#css) below for more details. */ classes: PropTypes.object, /** diff --git a/packages/mui-material-next/src/Menu/Menu.tsx b/packages/mui-material-next/src/Menu/Menu.tsx index b133c2cdb670ea..6719041fa5668e 100644 --- a/packages/mui-material-next/src/Menu/Menu.tsx +++ b/packages/mui-material-next/src/Menu/Menu.tsx @@ -428,7 +428,7 @@ Menu.propTypes /* remove-proptypes */ = { ]), /** * Props applied to the transition element. - * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component. + * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component. * @default {} */ TransitionProps: PropTypes.object, diff --git a/packages/mui-material-next/src/Menu/Menu.types.ts b/packages/mui-material-next/src/Menu/Menu.types.ts index 4049d6d60f23f1..49ddbfabbe9a27 100644 --- a/packages/mui-material-next/src/Menu/Menu.types.ts +++ b/packages/mui-material-next/src/Menu/Menu.types.ts @@ -101,7 +101,7 @@ export interface MenuTypeMap; /** * Props applied to the transition element. - * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component. + * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component. * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ TransitionProps?: TransitionProps; diff --git a/packages/mui-material/src/Accordion/Accordion.js b/packages/mui-material/src/Accordion/Accordion.js index 3adf939dcd5cdd..d7274d92b2d1a9 100644 --- a/packages/mui-material/src/Accordion/Accordion.js +++ b/packages/mui-material/src/Accordion/Accordion.js @@ -180,8 +180,6 @@ const Accordion = React.forwardRef(function Accordion(inProps, ref) { ownerState, }); - delete transitionProps.ownerState; - return ( { const { variant, color, severity, classes } = ownerState; const slots = { - root: ['root', `${variant}${capitalize(color || severity)}`, `${variant}`], + root: [ + 'root', + `color${capitalize(color || severity)}`, + `${variant}${capitalize(color || severity)}`, + `${variant}`, + ], icon: ['icon'], message: ['message'], action: ['action'], diff --git a/packages/mui-material/src/Alert/Alert.test.js b/packages/mui-material/src/Alert/Alert.test.js index 18cda2b0690235..e0fefe68874db0 100644 --- a/packages/mui-material/src/Alert/Alert.test.js +++ b/packages/mui-material/src/Alert/Alert.test.js @@ -7,6 +7,7 @@ import Paper, { paperClasses } from '@mui/material/Paper'; import { iconButtonClasses } from '@mui/material/IconButton'; import { svgIconClasses } from '@mui/material/SvgIcon'; import describeConformance from '../../test/describeConformance'; +import capitalize from '../utils/capitalize'; describe('', () => { const { render } = createRenderer(); @@ -198,4 +199,20 @@ describe('', () => { }); }); }); + + describe('classes', () => { + it('should apply default color class to the root', () => { + render(); + + expect(screen.getByTestId('alert')).to.have.class(classes.colorSuccess); + }); + + ['success', 'info', 'warning', 'error'].forEach((color) => { + it('should apply color classes to the root', () => { + render(); + + expect(screen.getByTestId('alert')).to.have.class(classes[`color${capitalize(color)}`]); + }); + }); + }); }); diff --git a/packages/mui-material/src/Alert/alertClasses.ts b/packages/mui-material/src/Alert/alertClasses.ts index f992c041c4e561..e9777b969b9607 100644 --- a/packages/mui-material/src/Alert/alertClasses.ts +++ b/packages/mui-material/src/Alert/alertClasses.ts @@ -10,29 +10,85 @@ export interface AlertClasses { outlined: string; /** Styles applied to the root element if `variant="standard"`. */ standard: string; - /** Styles applied to the root element if `variant="standard"` and `color="success"`. */ + /** Styles applied to the root element if `color="success"`. */ + colorSuccess: string; + /** Styles applied to the root element if `color="info"`. */ + colorInfo: string; + /** Styles applied to the root element if `color="warning"`. */ + colorWarning: string; + /** Styles applied to the root element if `color="error"`. */ + colorError: string; + /** Styles applied to the root element if `variant="standard"` and `color="success"`. + * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard) + * and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead. + * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + */ standardSuccess: string; - /** Styles applied to the root element if `variant="standard"` and `color="info"`. */ + /** Styles applied to the root element if `variant="standard"` and `color="info"`. + * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard) + * and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead. + * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + */ standardInfo: string; - /** Styles applied to the root element if `variant="standard"` and `color="warning"`. */ + /** Styles applied to the root element if `variant="standard"` and `color="warning"`. + * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard) + * and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead. + * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + */ standardWarning: string; - /** Styles applied to the root element if `variant="standard"` and `color="error"`. */ + /** Styles applied to the root element if `variant="standard"` and `color="error"`. + * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard) + * and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead. + * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + */ standardError: string; - /** Styles applied to the root element if `variant="outlined"` and `color="success"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="success"`. + * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined) + * and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead. + * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + */ outlinedSuccess: string; - /** Styles applied to the root element if `variant="outlined"` and `color="info"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="info"`. + * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined) + * and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead. + * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + */ outlinedInfo: string; - /** Styles applied to the root element if `variant="outlined"` and `color="warning"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="warning"`. + * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined) + * and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead. + * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + */ outlinedWarning: string; - /** Styles applied to the root element if `variant="outlined"` and `color="error"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="error"`. + * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined) + * and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead. + * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + */ outlinedError: string; - /** Styles applied to the root element if `variant="filled"` and `color="success"`. */ + /** Styles applied to the root element if `variant="filled"` and `color="success"`. + * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled) + * and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead. + * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + */ filledSuccess: string; - /** Styles applied to the root element if `variant="filled"` and `color="info"`. */ + /** Styles applied to the root element if `variant="filled"` and `color="info"`. + * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled) + * and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead. + * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + */ filledInfo: string; - /** Styles applied to the root element if `variant="filled"` and `color="warning"`. */ + /** Styles applied to the root element if `variant="filled"` and `color="warning"` + * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled) + * and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead. + * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + */ filledWarning: string; - /** Styles applied to the root element if `variant="filled"` and `color="error"`. */ + /** Styles applied to the root element if `variant="filled"` and `color="error"`. + * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled) + * and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead. + * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + */ filledError: string; /** Styles applied to the icon wrapper element. */ icon: string; @@ -54,6 +110,10 @@ const alertClasses: AlertClasses = generateUtilityClasses('MuiAlert', [ 'icon', 'message', 'filled', + 'colorSuccess', + 'colorInfo', + 'colorWarning', + 'colorError', 'filledSuccess', 'filledInfo', 'filledWarning', diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 014448bf49e051..483ed0d99fe0e1 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -23,13 +23,13 @@ const useUtilityClasses = (ownerState) => { `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, - color === 'inherit' && 'colorInherit', + `color${capitalize(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth', ], label: ['label'], - startIcon: ['startIcon', `iconSize${capitalize(size)}`], - endIcon: ['endIcon', `iconSize${capitalize(size)}`], + startIcon: ['icon', 'startIcon', `iconSize${capitalize(size)}`], + endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`], }; const composedClasses = composeClasses(slots, getButtonUtilityClass, classes); diff --git a/packages/mui-material/src/Button/Button.test.js b/packages/mui-material/src/Button/Button.test.js index 5833d66608afe6..411e988ac8dc19 100644 --- a/packages/mui-material/src/Button/Button.test.js +++ b/packages/mui-material/src/Button/Button.test.js @@ -44,6 +44,55 @@ describe(', + ); + const button = getByRole('button'); + const startIcon = button.querySelector(`.${classes.startIcon}`); + const endIcon = button.querySelector(`.${classes.endIcon}`); + expect(startIcon).to.have.class(classes.icon); + expect(endIcon).to.have.class(classes.icon); + }); + + it('should add the appropriate color class to root element based on color prop', () => { + const { getByTestId } = render( + + + + + + + + + , + ); + + expect(getByTestId('color-inherit')).to.have.class(classes.colorInherit); + expect(getByTestId('color-primary')).to.have.class(classes.colorPrimary); + expect(getByTestId('color-secondary')).to.have.class(classes.colorSecondary); + expect(getByTestId('color-success')).to.have.class(classes.colorSuccess); + expect(getByTestId('color-error')).to.have.class(classes.colorError); + expect(getByTestId('color-info')).to.have.class(classes.colorInfo); + expect(getByTestId('color-warning')).to.have.class(classes.colorWarning); + }); + it('can render a text primary button', () => { const { getByRole } = render(); const button = getByRole('button'); diff --git a/packages/mui-material/src/Button/buttonClasses.ts b/packages/mui-material/src/Button/buttonClasses.ts index 5348573ee78d0d..d6f50aae215752 100644 --- a/packages/mui-material/src/Button/buttonClasses.ts +++ b/packages/mui-material/src/Button/buttonClasses.ts @@ -6,51 +6,93 @@ export interface ButtonClasses { root: string; /** Styles applied to the root element if `variant="text"`. */ text: string; - /** Styles applied to the root element if `variant="text"` and `color="inherit"`. */ + /** Styles applied to the root element if `variant="text"` and `color="inherit"`. + * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorInherit](/material-ui/api/button/#button-classes-colorInherit) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ textInherit: string; - /** Styles applied to the root element if `variant="text"` and `color="primary"`. */ + /** Styles applied to the root element if `variant="text"` and `color="primary"`. + * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorPrimary](/material-ui/api/button/#button-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ textPrimary: string; - /** Styles applied to the root element if `variant="text"` and `color="secondary"`. */ + /** Styles applied to the root element if `variant="text"` and `color="secondary"`. + * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorSecondary](/material-ui/api/button/#button-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ textSecondary: string; - /** Styles applied to the root element if `variant="text"` and `color="success"`. */ + /** Styles applied to the root element if `variant="text"` and `color="success"`. + * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorSuccess](/material-ui/api/button/#button-classes-colorSuccess) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ textSuccess: string; - /** Styles applied to the root element if `variant="text"` and `color="error"`. */ + /** Styles applied to the root element if `variant="text"` and `color="error"`. + * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorError](/material-ui/api/button/#button-classes-colorError) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ textError: string; - /** Styles applied to the root element if `variant="text"` and `color="info"`. */ + /** Styles applied to the root element if `variant="text"` and `color="info"`. + * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorInfo](/material-ui/api/button/#button-classes-colorInfo) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ textInfo: string; - /** Styles applied to the root element if `variant="text"` and `color="warning"`. */ + /** Styles applied to the root element if `variant="text"` and `color="warning"`. + * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorWarning](/material-ui/api/button/#button-classes-colorWarning) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ textWarning: string; /** Styles applied to the root element if `variant="outlined"`. */ outlined: string; - /** Styles applied to the root element if `variant="outlined"` and `color="inherit"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="inherit"`. + * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorInherit](/material-ui/api/button/#button-classes-colorInherit) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ outlinedInherit: string; - /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. + * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorPrimary](/material-ui/api/button/#button-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ outlinedPrimary: string; - /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. + * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorSecondary](/material-ui/api/button/#button-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ outlinedSecondary: string; - /** Styles applied to the root element if `variant="outlined"` and `color="success"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="success"`. + * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorSuccess](/material-ui/api/button/#button-classes-colorSuccess) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ outlinedSuccess: string; - /** Styles applied to the root element if `variant="outlined"` and `color="error"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="error"`. + * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorError](/material-ui/api/button/#button-classes-colorError) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ outlinedError: string; - /** Styles applied to the root element if `variant="outlined"` and `color="info"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="info"`. + * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorInfo](/material-ui/api/button/#button-classes-colorInfo) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ outlinedInfo: string; - /** Styles applied to the root element if `variant="outlined"` and `color="warning"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="warning"`. + * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorWarning](/material-ui/api/button/#button-classes-colorWarning) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ outlinedWarning: string; /** Styles applied to the root element if `variant="contained"`. */ contained: string; - /** Styles applied to the root element if `variant="contained"` and `color="inherit"`. */ + /** Styles applied to the root element if `variant="contained"` and `color="inherit"`. + * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorInherit](/material-ui/api/button/#button-classes-colorInherit) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ containedInherit: string; - /** Styles applied to the root element if `variant="contained"` and `color="primary"`. */ + /** Styles applied to the root element if `variant="contained"` and `color="primary"`. + * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorPrimary](/material-ui/api/button/#button-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ containedPrimary: string; - /** Styles applied to the root element if `variant="contained"` and `color="secondary"`. */ + /** Styles applied to the root element if `variant="contained"` and `color="secondary"`. + * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorSecondary](/material-ui/api/button/#button-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ containedSecondary: string; - /** Styles applied to the root element if `variant="contained"` and `color="success"`. */ + /** Styles applied to the root element if `variant="contained"` and `color="success"`. + * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorSuccess](/material-ui/api/button/#button-classes-colorSuccess) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ containedSuccess: string; - /** Styles applied to the root element if `variant="contained"` and `color="info"`. */ + /** Styles applied to the root element if `variant="contained"` and `color="info"`. + * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorInfo](/material-ui/api/button/#button-classes-colorInfo) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ containedInfo: string; - /** Styles applied to the root element if `variant="contained"` and `color="error"`. */ + /** Styles applied to the root element if `variant="contained"` and `color="error"`. + * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorError](/material-ui/api/button/#button-classes-colorError) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ containedError: string; - /** Styles applied to the root element if `variant="contained"` and `color="warning"`. */ + /** Styles applied to the root element if `variant="contained"` and `color="warning"`. + * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorWarning](/material-ui/api/button/#button-classes-colorWarning) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ containedWarning: string; /** Styles applied to the root element if `disableElevation={true}`. */ disableElevation: string; @@ -60,23 +102,41 @@ export interface ButtonClasses { disabled: string; /** Styles applied to the root element if `color="inherit"`. */ colorInherit: string; - /** Styles applied to the root element if `size="small"` and `variant="text"`. */ + /** Styles applied to the root element if `size="small"` and `variant="text"`. + * @deprecated Combine the [.MuiButton-sizeSmall](/material-ui/api/button/#button-classes-sizeSmall) and [.MuiButton-text](/material-ui/api/button/#button-classes-text) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ textSizeSmall: string; - /** Styles applied to the root element if `size="medium"` and `variant="text"`. */ + /** Styles applied to the root element if `size="medium"` and `variant="text"`. + * @deprecated Combine the [.MuiButton-sizeMedium](/material-ui/api/button/#button-classes-sizeMedium) and [.MuiButton-text](/material-ui/api/button/#button-classes-text) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ textSizeMedium: string; - /** Styles applied to the root element if `size="large"` and `variant="text"`. */ + /** Styles applied to the root element if `size="large"` and `variant="text"`. + * @deprecated Combine the [.MuiButton-sizeLarge](/material-ui/api/button/#button-classes-sizeLarge) and [.MuiButton-text](/material-ui/api/button/#button-classes-text) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ textSizeLarge: string; - /** Styles applied to the root element if `size="small"` and `variant="outlined"`. */ + /** Styles applied to the root element if `size="small"` and `variant="outlined"`. + * @deprecated Combine the [.MuiButton-sizeSmall](/material-ui/api/button/#button-classes-sizeSmall) and [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ outlinedSizeSmall: string; - /** Styles applied to the root element if `size="medium"` and `variant="outlined"`. */ + /** Styles applied to the root element if `size="medium"` and `variant="outlined"`. + * @deprecated Combine the [.MuiButton-sizeMedium](/material-ui/api/button/#button-classes-sizeMedium) and [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ outlinedSizeMedium: string; - /** Styles applied to the root element if `size="large"` and `variant="outlined"`. */ + /** Styles applied to the root element if `size="large"` and `variant="outlined"`. + * @deprecated Combine the [.MuiButton-sizeLarge](/material-ui/api/button/#button-classes-sizeLarge) and [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ outlinedSizeLarge: string; - /** Styles applied to the root element if `size="small"` and `variant="contained"`. */ + /** Styles applied to the root element if `size="small"` and `variant="contained"`. + * @deprecated Combine the [.MuiButton-sizeSmall](/material-ui/api/button/#button-classes-sizeSmall) and [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ containedSizeSmall: string; - /** Styles applied to the root element if `size="medium"` and `variant="contained"`. */ + /** Styles applied to the root element if `size="medium"` and `variant="contained"`. + * @deprecated Combine the [.MuiButton-sizeMedium](/material-ui/api/button/#button-classes-sizeMedium) and [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ containedSizeMedium: string; - /** Styles applied to the root element if `size="large"` and `variant="contained"`. */ + /** Styles applied to the root element if `size="large"` and `variant="contained"`. + * @deprecated Combine the [.MuiButton-sizeLarge](/material-ui/api/button/#button-classes-sizeLarge) and [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ containedSizeLarge: string; /** Styles applied to the root element if `size="small"`. */ sizeSmall: string; @@ -86,16 +146,36 @@ export interface ButtonClasses { sizeLarge: string; /** Styles applied to the root element if `fullWidth={true}`. */ fullWidth: string; + /** Styles applied to the icon element if supplied */ + icon: string; /** Styles applied to the startIcon element if supplied. */ startIcon: string; /** Styles applied to the endIcon element if supplied. */ endIcon: string; - /** Styles applied to the icon element if supplied and `size="small"`. */ + /** Styles applied to the icon element if supplied and `size="small"`. + * @deprecated Combine the [.MuiButton-icon](/material-ui/api/button/#button-classes-icon) and [.MuiButtonSizeSmall](/material-ui/api/button/#button-classes-sizeSmall) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ iconSizeSmall: string; - /** Styles applied to the icon element if supplied and `size="medium"`. */ + /** Styles applied to the icon element if supplied and `size="medium"`. + * @deprecated Combine the [.MuiButton-icon](/material-ui/api/button/#button-classes-icon) and [.MuiButtonSizeMedium](/material-ui/api/button/#button-classes-sizeMedium) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ iconSizeMedium: string; - /** Styles applied to the icon element if supplied and `size="large"`. */ + /** Styles applied to the icon element if supplied and `size="large"`. + * @deprecated Combine the [.MuiButton-icon](/material-ui/api/button/#button-classes-icon) and [.MuiButtonSizeLarge](/material-ui/api/button/#button-classes-sizeLarge) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ iconSizeLarge: string; + /** Styles applied to the root element if `color="primary"`. */ + colorPrimary: string; + /** Styles applied to the root element if `color="secondary"`. */ + colorSecondary: string; + /** Styles applied to the root element if `color="success"`. */ + colorSuccess: string; + /** Styles applied to the root element if `color="error"`. */ + colorError: string; + /** Styles applied to the root element if `color="info"`. */ + colorInfo: string; + /** Styles applied to the root element if `color="warning"`. */ + colorWarning: string; } export type ButtonClassKey = keyof ButtonClasses; @@ -134,6 +214,12 @@ const buttonClasses: ButtonClasses = generateUtilityClasses('MuiButton', [ 'focusVisible', 'disabled', 'colorInherit', + 'colorPrimary', + 'colorSecondary', + 'colorSuccess', + 'colorError', + 'colorInfo', + 'colorWarning', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', @@ -149,6 +235,7 @@ const buttonClasses: ButtonClasses = generateUtilityClasses('MuiButton', [ 'fullWidth', 'startIcon', 'endIcon', + 'icon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge', diff --git a/packages/mui-material/src/ButtonBase/Ripple.js b/packages/mui-material/src/ButtonBase/Ripple.js index 8435331a1d098a..7daadb96618fac 100644 --- a/packages/mui-material/src/ButtonBase/Ripple.js +++ b/packages/mui-material/src/ButtonBase/Ripple.js @@ -60,7 +60,6 @@ function Ripple(props) { Ripple.propTypes = { /** * Override or extend the styles applied to the component. - * See [CSS API](#css) below for more details. */ classes: PropTypes.object.isRequired, className: PropTypes.string, diff --git a/packages/mui-material/src/ButtonBase/TouchRipple.js b/packages/mui-material/src/ButtonBase/TouchRipple.js index 584d3982405702..6834650d85fc06 100644 --- a/packages/mui-material/src/ButtonBase/TouchRipple.js +++ b/packages/mui-material/src/ButtonBase/TouchRipple.js @@ -324,7 +324,6 @@ TouchRipple.propTypes = { center: PropTypes.bool, /** * Override or extend the styles applied to the component. - * See [CSS API](#css) below for more details. */ classes: PropTypes.object, /** diff --git a/packages/mui-material/src/Chip/chipClasses.ts b/packages/mui-material/src/Chip/chipClasses.ts index bb4f7b105f0d77..48efe3fbe3cea6 100644 --- a/packages/mui-material/src/Chip/chipClasses.ts +++ b/packages/mui-material/src/Chip/chipClasses.ts @@ -24,71 +24,123 @@ export interface ChipClasses { disabled: string; /** Styles applied to the root element if `onClick` is defined or `clickable={true}`. */ clickable: string; - /** Styles applied to the root element if `onClick` and `color="primary"` is defined or `clickable={true}`. */ + /** Styles applied to the root element if `onClick` and `color="primary"` is defined or `clickable={true}`. + * @deprecated Combine the [.MuiChip-clickable](/material-ui/api/chip/#chip-classes-clickable) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ clickableColorPrimary: string; - /** Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`. */ + /** Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`. + * @deprecated Combine the [.MuiChip-clickable](/material-ui/api/chip/#chip-classes-clickable) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ clickableColorSecondary: string; /** Styles applied to the root element if `onDelete` is defined. */ deletable: string; - /** Styles applied to the root element if `onDelete` and `color="primary"` is defined. */ + /** Styles applied to the root element if `onDelete` and `color="primary"` is defined. + * @deprecated Combine the [.MuiChip-deletable](/material-ui/api/chip/#chip-classes-deletable) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ deletableColorPrimary: string; - /** Styles applied to the root element if `onDelete` and `color="secondary"` is defined. */ + /** Styles applied to the root element if `onDelete` and `color="secondary"` is defined. + * @deprecated Combine the [.MuiChip-deletable](/material-ui/api/chip/#chip-classes-deletable) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ deletableColorSecondary: string; /** Styles applied to the root element if `variant="outlined"`. */ outlined: string; /** Styles applied to the root element if `variant="filled"`. */ filled: string; - /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. + * @deprecated Combine the [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ outlinedPrimary: string; - /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. + * @deprecated Combine the [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ outlinedSecondary: string; - /** Styles applied to the root element if `variant="filled"` and `color="primary"`. */ + /** Styles applied to the root element if `variant="filled"` and `color="primary"`. + * @deprecated Combine the [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ filledPrimary: string; - /** Styles applied to the root element if `variant="filled"` and `color="secondary"`. */ + /** Styles applied to the root element if `variant="filled"` and `color="secondary"`. + * @deprecated Combine the [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ filledSecondary: string; /** Styles applied to the avatar element. */ avatar: string; - /** Styles applied to the avatar element if `size="small"`. */ + /** Styles applied to the avatar element if `size="small"`. + * @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ avatarSmall: string; - /** Styles applied to the avatar element if `size="medium"`. */ + /** Styles applied to the avatar element if `size="medium"`. + * @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ avatarMedium: string; - /** Styles applied to the avatar element if `color="primary"`. */ + /** Styles applied to the avatar element if `color="primary"`. + * @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ avatarColorPrimary: string; - /** Styles applied to the avatar element if `color="secondary"`. */ + /** Styles applied to the avatar element if `color="secondary"`. + * @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ avatarColorSecondary: string; /** Styles applied to the icon element. */ icon: string; - /** Styles applied to the icon element if `size="small"`. */ + /** Styles applied to the icon element if `size="small"`. + * @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ iconSmall: string; - /** Styles applied to the icon element if `size="medium"`. */ + /** Styles applied to the icon element if `size="medium"`. + * @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ iconMedium: string; - /** Styles applied to the icon element if `color="primary"`. */ + /** Styles applied to the icon element if `color="primary"`. + * @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ iconColorPrimary: string; - /** Styles applied to the icon element if `color="secondary"`. */ + /** Styles applied to the icon element if `color="secondary"`. + * @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ iconColorSecondary: string; /** Styles applied to the label `span` element. */ label: string; - /** Styles applied to the label `span` element if `size="small"`. */ + /** Styles applied to the label `span` element if `size="small"`. + * @deprecated Combine the [.MuiChip-label](/material-ui/api/chip/#chip-classes-label) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ labelSmall: string; - /** Styles applied to the label `span` element if `size="medium"`. */ + /** Styles applied to the label `span` element if `size="medium"`. + * @deprecated Combine the [.MuiChip-label](/material-ui/api/chip/#chip-classes-label) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ labelMedium: string; /** Styles applied to the deleteIcon element. */ deleteIcon: string; - /** Styles applied to the deleteIcon element if `size="small"`. */ + /** Styles applied to the deleteIcon element if `size="small"`. + * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ deleteIconSmall: string; - /** Styles applied to the deleteIcon element if `size="medium"`. */ + /** Styles applied to the deleteIcon element if `size="medium"`. + * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ deleteIconMedium: string; - /** Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`. */ + /** Styles applied to the deleteIcon element if `color="primary"`. + * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ deleteIconColorPrimary: string; - /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. */ + /** Styles applied to the deleteIcon element if `color="secondary"`. + * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ deleteIconColorSecondary: string; - /** Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`. */ + /** Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`. + * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ deleteIconOutlinedColorPrimary: string; - /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`. */ + /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`. + * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ deleteIconOutlinedColorSecondary: string; - /** Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`. */ + /** Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`. + * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ deleteIconFilledColorPrimary: string; - /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. */ + /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. + * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ deleteIconFilledColorSecondary: string; /** State class applied to the root element if keyboard focused. */ focusVisible: string; diff --git a/packages/mui-material/src/Collapse/Collapse.d.ts b/packages/mui-material/src/Collapse/Collapse.d.ts index ea073109be4981..2206f44019aefc 100644 --- a/packages/mui-material/src/Collapse/Collapse.d.ts +++ b/packages/mui-material/src/Collapse/Collapse.d.ts @@ -66,7 +66,7 @@ export interface CollapseProps extends StandardProps * API: * * - [Collapse API](https://mui.com/material-ui/api/collapse/) - * - inherits [Transition API](http://reactcommunity.org/react-transition-group/transition/#Transition-props) + * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props) */ export default function Collapse(props: CollapseProps): JSX.Element; diff --git a/packages/mui-material/src/Collapse/Collapse.js b/packages/mui-material/src/Collapse/Collapse.js index 42e206e96137b8..27bc19224a42f5 100644 --- a/packages/mui-material/src/Collapse/Collapse.js +++ b/packages/mui-material/src/Collapse/Collapse.js @@ -287,9 +287,11 @@ const Collapse = React.forwardRef(function Collapse(inProps, ref) { [isHorizontal ? 'minWidth' : 'minHeight']: collapsedSize, ...style, }} - ownerState={{ ...ownerState, state }} ref={handleRef} {...childProps} + // `ownerState` is set after `childProps` to override any existing `ownerState` property in `childProps` + // that might have been forwarded from the Transition component. + ownerState={{ ...ownerState, state }} > { transitionDuration?: TransitionProps['timeout']; /** * Props applied to the transition element. - * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component. + * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component. */ TransitionProps?: TransitionProps; } diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js index 420076e0bf8092..927c9b0f44e244 100644 --- a/packages/mui-material/src/Dialog/Dialog.js +++ b/packages/mui-material/src/Dialog/Dialog.js @@ -418,7 +418,7 @@ Dialog.propTypes /* remove-proptypes */ = { ]), /** * Props applied to the transition element. - * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component. + * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component. */ TransitionProps: PropTypes.object, }; diff --git a/packages/mui-material/src/Fade/Fade.d.ts b/packages/mui-material/src/Fade/Fade.d.ts index 5094cd6a757867..b9b5288ea5f14c 100644 --- a/packages/mui-material/src/Fade/Fade.d.ts +++ b/packages/mui-material/src/Fade/Fade.d.ts @@ -44,6 +44,6 @@ export interface FadeProps extends Omit { * API: * * - [Fade API](https://mui.com/material-ui/api/fade/) - * - inherits [Transition API](http://reactcommunity.org/react-transition-group/transition/#Transition-props) + * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props) */ export default function Fade(props: FadeProps): JSX.Element; diff --git a/packages/mui-material/src/Grow/Grow.d.ts b/packages/mui-material/src/Grow/Grow.d.ts index 381b945a48d2cb..173360b6ed7b55 100644 --- a/packages/mui-material/src/Grow/Grow.d.ts +++ b/packages/mui-material/src/Grow/Grow.d.ts @@ -45,6 +45,6 @@ export interface GrowProps extends Omit { * API: * * - [Grow API](https://mui.com/material-ui/api/grow/) - * - inherits [Transition API](http://reactcommunity.org/react-transition-group/transition/#Transition-props) + * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props) */ export default function Grow(props: GrowProps): JSX.Element; diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js index cbb51b1ed0f844..970dd62ab36b2c 100644 --- a/packages/mui-material/src/InputBase/InputBase.js +++ b/packages/mui-material/src/InputBase/InputBase.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; import refType from '@mui/utils/refType'; -import MuiError from '@mui-internal/babel-macros/MuiError.macro'; +import MuiError from '@mui/internal-babel-macros/MuiError.macro'; import { TextareaAutosize } from '@mui/base'; import { isHostComponent } from '@mui/base/utils'; import composeClasses from '@mui/utils/composeClasses'; diff --git a/packages/mui-material/src/Menu/Menu.d.ts b/packages/mui-material/src/Menu/Menu.d.ts index 16e78dd1cd12e3..34b27cb8cca448 100644 --- a/packages/mui-material/src/Menu/Menu.d.ts +++ b/packages/mui-material/src/Menu/Menu.d.ts @@ -69,7 +69,7 @@ export interface MenuProps extends StandardProps { transitionDuration?: TransitionProps['timeout'] | 'auto'; /** * Props applied to the transition element. - * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component. + * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component. * @default {} */ TransitionProps?: TransitionProps; diff --git a/packages/mui-material/src/Menu/Menu.js b/packages/mui-material/src/Menu/Menu.js index adced73ab01bb1..0a292d37b0d2cf 100644 --- a/packages/mui-material/src/Menu/Menu.js +++ b/packages/mui-material/src/Menu/Menu.js @@ -323,7 +323,7 @@ Menu.propTypes /* remove-proptypes */ = { ]), /** * Props applied to the transition element. - * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component. + * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component. * @default {} */ TransitionProps: PropTypes.object, diff --git a/packages/mui-material/src/NativeSelect/NativeSelectInput.js b/packages/mui-material/src/NativeSelect/NativeSelectInput.js index c912d69ddc9a7c..042b89dfa4b3af 100644 --- a/packages/mui-material/src/NativeSelect/NativeSelectInput.js +++ b/packages/mui-material/src/NativeSelect/NativeSelectInput.js @@ -168,7 +168,6 @@ NativeSelectInput.propTypes = { children: PropTypes.node, /** * Override or extend the styles applied to the component. - * See [CSS API](#css) below for more details. */ classes: PropTypes.object, /** diff --git a/packages/mui-material/src/OutlinedInput/NotchedOutline.js b/packages/mui-material/src/OutlinedInput/NotchedOutline.js index 0e613bd7b9a2b8..58223da4479c8e 100644 --- a/packages/mui-material/src/OutlinedInput/NotchedOutline.js +++ b/packages/mui-material/src/OutlinedInput/NotchedOutline.js @@ -97,7 +97,6 @@ NotchedOutline.propTypes = { children: PropTypes.node, /** * Override or extend the styles applied to the component. - * See [CSS API](#css) below for more details. */ classes: PropTypes.object, /** diff --git a/packages/mui-material/src/PaginationItem/paginationItemClasses.ts b/packages/mui-material/src/PaginationItem/paginationItemClasses.ts index c1a2ed82a4f7b8..1ec0961e66114c 100644 --- a/packages/mui-material/src/PaginationItem/paginationItemClasses.ts +++ b/packages/mui-material/src/PaginationItem/paginationItemClasses.ts @@ -13,25 +13,21 @@ export interface PaginationItemClasses { /** Styles applied to the root element if `variant="text"`. */ text: string; /** Styles applied to the root element if `variant="text"` and `color="primary"`. - * @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text) - * and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead. + * @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text) and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ textPrimary: string; /** Styles applied to the root element if `variant="text"` and `color="secondary"`. - * @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text) - * and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead. + * @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text) and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ textSecondary: string; /** Styles applied to the root element if `variant="outlined"`. */ outlined: string; /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. - * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined) - * and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead. + * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined) and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ outlinedPrimary: string; /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. - * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined) - * and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead. + * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined) and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ outlinedSecondary: string; /** Styles applied to the root element if `rounded="true"`. */ diff --git a/packages/mui-material/src/Popover/Popover.d.ts b/packages/mui-material/src/Popover/Popover.d.ts index 54b4a7e8bd3527..d8308b68ac7a5b 100644 --- a/packages/mui-material/src/Popover/Popover.d.ts +++ b/packages/mui-material/src/Popover/Popover.d.ts @@ -160,7 +160,7 @@ export interface PopoverProps transitionDuration?: TransitionProps['timeout'] | 'auto'; /** * Props applied to the transition element. - * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component. + * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component. * @default {} */ TransitionProps?: TransitionProps; diff --git a/packages/mui-material/src/Popover/Popover.js b/packages/mui-material/src/Popover/Popover.js index 8df1fbc6b7cd6d..3edef3441101c5 100644 --- a/packages/mui-material/src/Popover/Popover.js +++ b/packages/mui-material/src/Popover/Popover.js @@ -639,7 +639,7 @@ Popover.propTypes /* remove-proptypes */ = { ]), /** * Props applied to the transition element. - * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component. + * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component. * @default {} */ TransitionProps: PropTypes.object, diff --git a/packages/mui-material/src/Radio/RadioButtonIcon.js b/packages/mui-material/src/Radio/RadioButtonIcon.js index 489a4b8242cab9..d38eba60cff2ee 100644 --- a/packages/mui-material/src/Radio/RadioButtonIcon.js +++ b/packages/mui-material/src/Radio/RadioButtonIcon.js @@ -59,7 +59,6 @@ RadioButtonIcon.propTypes = { checked: PropTypes.bool, /** * Override or extend the styles applied to the component. - * See [CSS API](#css) below for more details. */ classes: PropTypes.object, /** diff --git a/packages/mui-material/src/Select/Select.d.ts b/packages/mui-material/src/Select/Select.d.ts index e62fed42ba5f97..cbf55494ba697f 100644 --- a/packages/mui-material/src/Select/Select.d.ts +++ b/packages/mui-material/src/Select/Select.d.ts @@ -184,8 +184,8 @@ export type SelectProps< (Variant extends 'filled' ? FilledSelectProps : Variant extends 'standard' - ? StandardSelectProps - : OutlinedSelectProps); + ? StandardSelectProps + : OutlinedSelectProps); /** * diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js index 159346bf0bc050..54741070da1a85 100644 --- a/packages/mui-material/src/Select/SelectInput.js +++ b/packages/mui-material/src/Select/SelectInput.js @@ -3,7 +3,7 @@ import * as React from 'react'; import { isFragment } from 'react-is'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import MuiError from '@mui-internal/babel-macros/MuiError.macro'; +import MuiError from '@mui/internal-babel-macros/MuiError.macro'; import composeClasses from '@mui/utils/composeClasses'; import useId from '@mui/utils/useId'; import refType from '@mui/utils/refType'; @@ -600,7 +600,6 @@ SelectInput.propTypes = { children: PropTypes.node, /** * Override or extend the styles applied to the component. - * See [CSS API](#css) below for more details. */ classes: PropTypes.object, /** diff --git a/packages/mui-material/src/Slide/Slide.d.ts b/packages/mui-material/src/Slide/Slide.d.ts index 5d45c3f617c8cb..76621b10735cbf 100644 --- a/packages/mui-material/src/Slide/Slide.d.ts +++ b/packages/mui-material/src/Slide/Slide.d.ts @@ -59,6 +59,6 @@ export interface SlideProps extends TransitionProps { * API: * * - [Slide API](https://mui.com/material-ui/api/slide/) - * - inherits [Transition API](http://reactcommunity.org/react-transition-group/transition/#Transition-props) + * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props) */ export default function Slide(props: SlideProps): JSX.Element; diff --git a/packages/mui-material/src/Slider/Slider.d.ts b/packages/mui-material/src/Slider/Slider.d.ts index bbc205f652527e..e6ac5223f9302b 100644 --- a/packages/mui-material/src/Slider/Slider.d.ts +++ b/packages/mui-material/src/Slider/Slider.d.ts @@ -46,8 +46,7 @@ export interface SliderOwnProps { /** * The components used for each slot inside. * - * This prop is an alias for the `slots` prop. - * It's recommended to use the `slots` prop instead. + * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * * @default {} */ @@ -65,8 +64,7 @@ export interface SliderOwnProps { * The extra props for the slot components. * You can override the existing props or add new ones. * - * This prop is an alias for the `slotProps` prop. - * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future. + * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * * @default {} */ diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index 5b4e386af1f6d8..42b1c83a4757cf 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -762,8 +762,7 @@ Slider.propTypes /* remove-proptypes */ = { /** * The components used for each slot inside. * - * This prop is an alias for the `slots` prop. - * It's recommended to use the `slots` prop instead. + * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * * @default {} */ @@ -781,8 +780,7 @@ Slider.propTypes /* remove-proptypes */ = { * The extra props for the slot components. * You can override the existing props or add new ones. * - * This prop is an alias for the `slotProps` prop. - * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future. + * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). * * @default {} */ diff --git a/packages/mui-material/src/Snackbar/Snackbar.d.ts b/packages/mui-material/src/Snackbar/Snackbar.d.ts index 8256e2a0834bc8..30b6fc17082d8b 100644 --- a/packages/mui-material/src/Snackbar/Snackbar.d.ts +++ b/packages/mui-material/src/Snackbar/Snackbar.d.ts @@ -111,7 +111,7 @@ export interface SnackbarProps extends StandardProps; /** * Props applied to the transition element. - * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component. + * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component. */ TransitionProps?: TransitionProps; } diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js index b7888092e8acc3..88d6d7e563d55b 100644 --- a/packages/mui-material/src/Tooltip/Tooltip.js +++ b/packages/mui-material/src/Tooltip/Tooltip.js @@ -365,7 +365,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { }, ); - const handleEnter = (event) => { + const handleMouseOver = (event) => { if (ignoreNonTouchEvents.current && event.type !== 'touchstart') { return; } @@ -388,7 +388,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { } }; - const handleLeave = (event) => { + const handleMouseLeave = (event) => { enterTimer.clear(); leaveTimer.start(leaveDelay, () => { handleClose(event); @@ -408,7 +408,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { handleBlurVisible(event); if (isFocusVisibleRef.current === false) { setChildIsFocusVisible(false); - handleLeave(event); + handleMouseLeave(event); } }; @@ -423,7 +423,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { handleFocusVisible(event); if (isFocusVisibleRef.current === true) { setChildIsFocusVisible(true); - handleEnter(event); + handleMouseOver(event); } }; @@ -436,9 +436,6 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { } }; - const handleMouseOver = handleEnter; - const handleMouseLeave = handleLeave; - const handleTouchStart = (event) => { detectTouchStart(event); leaveTimer.clear(); @@ -451,7 +448,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) { touchTimer.start(enterTouchDelay, () => { document.body.style.WebkitUserSelect = prevUserSelect.current; - handleEnter(event); + handleMouseOver(event); }); }; @@ -914,7 +911,7 @@ Tooltip.propTypes /* remove-proptypes */ = { TransitionComponent: PropTypes.elementType, /** * Props applied to the transition element. - * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component. + * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component. */ TransitionProps: PropTypes.object, }; diff --git a/packages/mui-material/src/Zoom/Zoom.d.ts b/packages/mui-material/src/Zoom/Zoom.d.ts index ad2aad460d3fce..dbe0e5f86e08a7 100644 --- a/packages/mui-material/src/Zoom/Zoom.d.ts +++ b/packages/mui-material/src/Zoom/Zoom.d.ts @@ -45,6 +45,6 @@ export interface ZoomProps extends TransitionProps { * API: * * - [Zoom API](https://mui.com/material-ui/api/zoom/) - * - inherits [Transition API](http://reactcommunity.org/react-transition-group/transition/#Transition-props) + * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props) */ export default function Zoom(props: ZoomProps): JSX.Element; diff --git a/packages/mui-material/src/internal/SwitchBase.js b/packages/mui-material/src/internal/SwitchBase.js index 35d8b4b1f749ff..3c259cc05cc01f 100644 --- a/packages/mui-material/src/internal/SwitchBase.js +++ b/packages/mui-material/src/internal/SwitchBase.js @@ -194,7 +194,6 @@ SwitchBase.propTypes = { checkedIcon: PropTypes.node.isRequired, /** * Override or extend the styles applied to the component. - * See [CSS API](#css) below for more details. */ classes: PropTypes.object, /** diff --git a/packages/mui-material/src/styles/createPalette.js b/packages/mui-material/src/styles/createPalette.js index 4d6bf554415986..949c41e7a8d6e2 100644 --- a/packages/mui-material/src/styles/createPalette.js +++ b/packages/mui-material/src/styles/createPalette.js @@ -1,5 +1,5 @@ import deepmerge from '@mui/utils/deepmerge'; -import MuiError from '@mui-internal/babel-macros/MuiError.macro'; +import MuiError from '@mui/internal-babel-macros/MuiError.macro'; import { darken, getContrastRatio, lighten } from '@mui/system/colorManipulator'; import common from '../colors/common'; import grey from '../colors/grey'; diff --git a/packages/mui-material/src/styles/createTheme.js b/packages/mui-material/src/styles/createTheme.js index da3850cf994703..b078c0bc355762 100644 --- a/packages/mui-material/src/styles/createTheme.js +++ b/packages/mui-material/src/styles/createTheme.js @@ -3,7 +3,7 @@ import styleFunctionSx, { unstable_defaultSxConfig as defaultSxConfig, } from '@mui/system/styleFunctionSx'; import systemCreateTheme from '@mui/system/createTheme'; -import MuiError from '@mui-internal/babel-macros/MuiError.macro'; +import MuiError from '@mui/internal-babel-macros/MuiError.macro'; import generateUtilityClass from '@mui/utils/generateUtilityClass'; import createMixins from './createMixins'; import createPalette from './createPalette'; diff --git a/packages/mui-material/src/styles/index.js b/packages/mui-material/src/styles/index.js index 34ea0230b89a82..42e3a789b6c13c 100644 --- a/packages/mui-material/src/styles/index.js +++ b/packages/mui-material/src/styles/index.js @@ -1,5 +1,5 @@ 'use client'; -import MuiError from '@mui-internal/babel-macros/MuiError.macro'; +import MuiError from '@mui/internal-babel-macros/MuiError.macro'; export { default as THEME_ID } from './identifier'; export { default as adaptV4Theme } from './adaptV4Theme'; diff --git a/packages/mui-material/src/styles/makeStyles.js b/packages/mui-material/src/styles/makeStyles.js index a678001a3309e2..380bbc39f5a8c8 100644 --- a/packages/mui-material/src/styles/makeStyles.js +++ b/packages/mui-material/src/styles/makeStyles.js @@ -1,4 +1,4 @@ -import MuiError from '@mui-internal/babel-macros/MuiError.macro'; +import MuiError from '@mui/internal-babel-macros/MuiError.macro'; export default function makeStyles() { throw new MuiError( diff --git a/packages/mui-material/src/styles/responsiveFontSizes.js b/packages/mui-material/src/styles/responsiveFontSizes.js index acdb59992c69a4..fe0a5a6eda7d4f 100644 --- a/packages/mui-material/src/styles/responsiveFontSizes.js +++ b/packages/mui-material/src/styles/responsiveFontSizes.js @@ -1,4 +1,4 @@ -import MuiError from '@mui-internal/babel-macros/MuiError.macro'; +import MuiError from '@mui/internal-babel-macros/MuiError.macro'; import { isUnitless, convertLength, responsiveProperty, alignProperty, fontGrid } from './cssUtils'; export default function responsiveFontSizes(themeInput, options = {}) { diff --git a/packages/mui-material/src/styles/withStyles.js b/packages/mui-material/src/styles/withStyles.js index e4170cd1ae94c5..b5064fae0a4d51 100644 --- a/packages/mui-material/src/styles/withStyles.js +++ b/packages/mui-material/src/styles/withStyles.js @@ -1,4 +1,4 @@ -import MuiError from '@mui-internal/babel-macros/MuiError.macro'; +import MuiError from '@mui/internal-babel-macros/MuiError.macro'; export default function withStyles() { throw new MuiError( diff --git a/packages/mui-material/src/styles/withTheme.js b/packages/mui-material/src/styles/withTheme.js index 83ee107b6adf55..1b24aa0c8feeb8 100644 --- a/packages/mui-material/src/styles/withTheme.js +++ b/packages/mui-material/src/styles/withTheme.js @@ -1,4 +1,4 @@ -import MuiError from '@mui-internal/babel-macros/MuiError.macro'; +import MuiError from '@mui/internal-babel-macros/MuiError.macro'; export default function withTheme() { throw new MuiError( diff --git a/packages/mui-material/src/useMediaQuery/index.d.ts b/packages/mui-material/src/useMediaQuery/index.d.ts index bf4072caa40b80..189cf6a41d036a 100644 --- a/packages/mui-material/src/useMediaQuery/index.d.ts +++ b/packages/mui-material/src/useMediaQuery/index.d.ts @@ -1,2 +1,2 @@ -export { default } from './useMediaQuery'; -export * from './useMediaQuery'; +export { default } from '@mui/system/useMediaQuery'; +export * from '@mui/system/useMediaQuery'; diff --git a/packages/mui-material/src/useMediaQuery/index.js b/packages/mui-material/src/useMediaQuery/index.js index 74992f88e57857..ebc567714f0478 100644 --- a/packages/mui-material/src/useMediaQuery/index.js +++ b/packages/mui-material/src/useMediaQuery/index.js @@ -1,2 +1 @@ -'use client'; -export { default } from './useMediaQuery'; +export { default } from '@mui/system/useMediaQuery'; diff --git a/packages/mui-material/src/useMediaQuery/useMediaQueryTheme.d.ts b/packages/mui-material/src/useMediaQuery/useMediaQueryTheme.d.ts index f8ac72baf1d28d..2505b54663cf76 100644 --- a/packages/mui-material/src/useMediaQuery/useMediaQueryTheme.d.ts +++ b/packages/mui-material/src/useMediaQuery/useMediaQueryTheme.d.ts @@ -1,3 +1,3 @@ -import useMediaQuery from './useMediaQuery'; +import useMediaQuery from '@mui/system/useMediaQuery'; export default useMediaQuery; diff --git a/packages/mui-material/src/useMediaQuery/useMediaQueryTheme.js b/packages/mui-material/src/useMediaQuery/useMediaQueryTheme.js index 184b1e26a63cb5..2c2fa3858a6644 100644 --- a/packages/mui-material/src/useMediaQuery/useMediaQueryTheme.js +++ b/packages/mui-material/src/useMediaQuery/useMediaQueryTheme.js @@ -1,5 +1,5 @@ 'use client'; -import useMediaQuery from './useMediaQuery'; +import useMediaQuery from '@mui/system/useMediaQuery'; // TODO v5: to deprecate in v4.x and remove in v5 export default function useMediaQueryTheme(...args) { diff --git a/packages/mui-material/test/typescript/color-palette-prop.spec.tsx b/packages/mui-material/test/typescript/color-palette-prop.spec.tsx index 0b3cb37b90600a..0e8abd6b6001a9 100644 --- a/packages/mui-material/test/typescript/color-palette-prop.spec.tsx +++ b/packages/mui-material/test/typescript/color-palette-prop.spec.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import TimelineDot from '@mui/lab/TimelineDot'; import { Badge, Button, @@ -39,7 +38,6 @@ function TestBaseColorPaletteProp() { - diff --git a/packages/mui-private-theming/package.json b/packages/mui-private-theming/package.json index d5779b71a45eca..38e8e8504c7453 100644 --- a/packages/mui-private-theming/package.json +++ b/packages/mui-private-theming/package.json @@ -1,6 +1,6 @@ { "name": "@mui/private-theming", - "version": "5.15.9", + "version": "5.15.11", "private": false, "author": "MUI Team", "description": "Private - The React theme context to be shared between `@mui/styles` and `@mui/material`.", diff --git a/packages/mui-styled-engine-sc/package.json b/packages/mui-styled-engine-sc/package.json index afa3280d2c1210..463f80e82ee9ec 100644 --- a/packages/mui-styled-engine-sc/package.json +++ b/packages/mui-styled-engine-sc/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styled-engine-sc", - "version": "6.0.0-alpha.16", + "version": "6.0.0-alpha.17", "private": false, "author": "MUI Team", "description": "styled() API wrapper package for styled-components.", diff --git a/packages/mui-styled-engine/package.json b/packages/mui-styled-engine/package.json index 254d1834585e47..fa84f01529555c 100644 --- a/packages/mui-styled-engine/package.json +++ b/packages/mui-styled-engine/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styled-engine", - "version": "5.15.9", + "version": "5.15.11", "private": false, "author": "MUI Team", "description": "styled() API wrapper package for emotion.", diff --git a/packages/mui-styles/package.json b/packages/mui-styles/package.json index dc52c68c932545..ccc727a90e8f4a 100644 --- a/packages/mui-styles/package.json +++ b/packages/mui-styles/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styles", - "version": "5.15.10", + "version": "5.15.11", "private": false, "author": "MUI Team", "description": "MUI Styles - The legacy JSS-based styling solution of Material UI.", diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json index 55cc38c33ec675..2dfaa1dc08d4ea 100644 --- a/packages/mui-system/package.json +++ b/packages/mui-system/package.json @@ -1,6 +1,6 @@ { "name": "@mui/system", - "version": "5.15.9", + "version": "5.15.11", "private": false, "author": "MUI Team", "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.", @@ -52,7 +52,7 @@ "devDependencies": { "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", - "@mui-internal/babel-macros": "workspace:^", + "@mui/internal-babel-macros": "workspace:^", "@mui-internal/test-utils": "workspace:^", "@mui/system": "workspace:*", "@types/chai": "^4.3.11", diff --git a/packages/mui-system/src/Unstable_Grid/createGrid.tsx b/packages/mui-system/src/Unstable_Grid/createGrid.tsx index 38b361a9a2a44b..092185ae30fcb1 100644 --- a/packages/mui-system/src/Unstable_Grid/createGrid.tsx +++ b/packages/mui-system/src/Unstable_Grid/createGrid.tsx @@ -57,7 +57,11 @@ export default function createGrid( componentName = 'MuiGrid', } = options; - const OverflowContext = React.createContext(undefined); + const GridOverflowContext = React.createContext(undefined); + + if (process.env.NODE_ENV !== 'production') { + GridOverflowContext.displayName = 'GridOverflowContext'; + } const useUtilityClasses = (ownerState: GridOwnerState, theme: typeof defaultTheme) => { const { container, direction, spacing, wrap, gridSize } = ownerState; @@ -91,7 +95,7 @@ export default function createGrid( const theme = useTheme(); const themeProps = useThemeProps(inProps); const props = extendSxProp(themeProps) as Omit & GridOwnerState; // `color` type conflicts with html color attribute. - const overflow = React.useContext(OverflowContext); + const overflow = React.useContext(GridOverflowContext); const { className, children, @@ -171,11 +175,13 @@ export default function createGrid( ); if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow ?? false)) { - // There are 2 possibilities that should wrap with the OverflowContext to communicate with the nested grids: + // There are 2 possibilities that should wrap with the GridOverflowContext to communicate with the nested grids: // 1. It is the root grid with `disableEqualOverflow`. // 2. It is a nested grid with different `disableEqualOverflow` from the context. result = ( - {result} + + {result} + ); } diff --git a/packages/mui-system/src/colorManipulator.js b/packages/mui-system/src/colorManipulator.js index cec3860d6bd6c3..e5a5a87b1b6a4a 100644 --- a/packages/mui-system/src/colorManipulator.js +++ b/packages/mui-system/src/colorManipulator.js @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/naming-convention */ import clamp from '@mui/utils/clamp'; -import MuiError from '@mui-internal/babel-macros/MuiError.macro'; +import MuiError from '@mui/internal-babel-macros/MuiError.macro'; /** * Returns a number whose value is limited to the given range. diff --git a/packages/mui-system/src/createStyled.js b/packages/mui-system/src/createStyled.js index da61ca564547da..eaaf392f62cb8c 100644 --- a/packages/mui-system/src/createStyled.js +++ b/packages/mui-system/src/createStyled.js @@ -66,7 +66,7 @@ function processStyleArg(callableStyle, { ownerState, ...props }) { variants.forEach((variant) => { let isMatch = true; if (typeof variant.props === 'function') { - isMatch = variant.props({ ownerState, ...props }); + isMatch = variant.props({ ownerState, ...props, ...ownerState }); } else { Object.keys(variant.props).forEach((key) => { if (ownerState?.[key] !== variant.props[key] && props[key] !== variant.props[key]) { @@ -80,7 +80,7 @@ function processStyleArg(callableStyle, { ownerState, ...props }) { } result.push( typeof variant.style === 'function' - ? variant.style({ ownerState, ...props }) + ? variant.style({ ownerState, ...props, ...ownerState }) : variant.style, ); } diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js index b6c1877bbaea65..dc6882ab204cb3 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import MuiError from '@mui-internal/babel-macros/MuiError.macro'; +import MuiError from '@mui/internal-babel-macros/MuiError.macro'; import deepmerge from '@mui/utils/deepmerge'; import { GlobalStyles } from '@mui/styled-engine'; import { useTheme as muiUseTheme } from '@mui/private-theming'; @@ -48,6 +48,10 @@ export default function createCssVarsProvider(options) { } const ColorSchemeContext = React.createContext(undefined); + if (process.env.NODE_ENV !== 'production') { + ColorSchemeContext.displayName = 'ColorSchemeContext'; + } + const useColorScheme = () => { const value = React.useContext(ColorSchemeContext); if (!value) { diff --git a/packages/mui-system/src/index.d.ts b/packages/mui-system/src/index.d.ts index 7f24359229a63d..825745b588f909 100644 --- a/packages/mui-system/src/index.d.ts +++ b/packages/mui-system/src/index.d.ts @@ -153,6 +153,9 @@ export * from './useTheme'; export { default as useThemeWithoutDefault } from './useThemeWithoutDefault'; export * from './useThemeWithoutDefault'; +export { default as useMediaQuery } from './useMediaQuery'; +export * from './useMediaQuery'; + export * from './colorManipulator'; export { default as ThemeProvider } from './ThemeProvider'; diff --git a/packages/mui-system/src/index.js b/packages/mui-system/src/index.js index 3ff435af5e49bc..d44e83fc65a04d 100644 --- a/packages/mui-system/src/index.js +++ b/packages/mui-system/src/index.js @@ -1,4 +1,4 @@ -import MuiError from '@mui-internal/babel-macros/MuiError.macro'; +import MuiError from '@mui/internal-babel-macros/MuiError.macro'; export { css, keyframes, StyledEngineProvider } from '@mui/styled-engine'; export { default as GlobalStyles } from './GlobalStyles'; @@ -55,6 +55,7 @@ export { default as shape } from './createTheme/shape'; export { default as useThemeProps, getThemeProps } from './useThemeProps'; export { default as useTheme } from './useTheme'; export { default as useThemeWithoutDefault } from './useThemeWithoutDefault'; +export { default as useMediaQuery } from './useMediaQuery'; export * from './colorManipulator'; export { default as ThemeProvider } from './ThemeProvider'; export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider'; diff --git a/packages/mui-system/src/useMediaQuery/index.ts b/packages/mui-system/src/useMediaQuery/index.ts new file mode 100644 index 00000000000000..bf4072caa40b80 --- /dev/null +++ b/packages/mui-system/src/useMediaQuery/index.ts @@ -0,0 +1,2 @@ +export { default } from './useMediaQuery'; +export * from './useMediaQuery'; diff --git a/packages/mui-material/src/useMediaQuery/useMediaQuery.ts b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts similarity index 97% rename from packages/mui-material/src/useMediaQuery/useMediaQuery.ts rename to packages/mui-system/src/useMediaQuery/useMediaQuery.ts index 33d8650b83395c..592785aece184b 100644 --- a/packages/mui-material/src/useMediaQuery/useMediaQuery.ts +++ b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts @@ -1,8 +1,8 @@ 'use client'; import * as React from 'react'; -import { getThemeProps } from '@mui/system/useThemeProps'; -import useTheme from '@mui/system/useThemeWithoutDefault'; -import useEnhancedEffect from '../utils/useEnhancedEffect'; +import useEnhancedEffect from '@mui/utils/useEnhancedEffect'; +import { getThemeProps } from '../useThemeProps'; +import useTheme from '../useThemeWithoutDefault'; /** * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead. diff --git a/packages/mui-utils/package.json b/packages/mui-utils/package.json index 240bf8744b167f..71f66306009ad1 100644 --- a/packages/mui-utils/package.json +++ b/packages/mui-utils/package.json @@ -1,6 +1,6 @@ { "name": "@mui/utils", - "version": "5.15.9", + "version": "5.15.11", "private": false, "author": "MUI Team", "description": "Utility functions for React components.", @@ -45,7 +45,7 @@ "react-is": "^18.2.0" }, "devDependencies": { - "@mui-internal/babel-macros": "workspace:^", + "@mui/internal-babel-macros": "workspace:^", "@mui-internal/test-utils": "workspace:^", "@mui/types": "workspace:^", "@types/chai": "^4.3.11", diff --git a/packages/mui-utils/src/capitalize/capitalize.ts b/packages/mui-utils/src/capitalize/capitalize.ts index b7a3bb304875a0..6b3407ffb374ec 100644 --- a/packages/mui-utils/src/capitalize/capitalize.ts +++ b/packages/mui-utils/src/capitalize/capitalize.ts @@ -1,4 +1,4 @@ -import MuiError from '@mui-internal/babel-macros/MuiError.macro'; +import MuiError from '@mui/internal-babel-macros/MuiError.macro'; // It should to be noted that this function isn't equivalent to `text-transform: capitalize`. // diff --git a/packages/mui-utils/src/formatMuiErrorMessage/formatMuiErrorMessage.ts b/packages/mui-utils/src/formatMuiErrorMessage/formatMuiErrorMessage.ts index f0a6751bfda08d..3118870f40e511 100644 --- a/packages/mui-utils/src/formatMuiErrorMessage/formatMuiErrorMessage.ts +++ b/packages/mui-utils/src/formatMuiErrorMessage/formatMuiErrorMessage.ts @@ -1,6 +1,6 @@ /** * WARNING: Don't import this directly. - * Use `MuiError` from `@mui-internal/babel-macros/MuiError.macro` instead. + * Use `MuiError` from `@mui/internal-babel-macros/MuiError.macro` instead. * @param {number} code */ export default function formatMuiErrorMessage(code: number): string { diff --git a/packages/mui-utils/src/useTimeout/useTimeout.ts b/packages/mui-utils/src/useTimeout/useTimeout.ts index 72a1bdedcf4a54..3f7b1be63810da 100644 --- a/packages/mui-utils/src/useTimeout/useTimeout.ts +++ b/packages/mui-utils/src/useTimeout/useTimeout.ts @@ -7,7 +7,7 @@ export class Timeout { return new Timeout(); } - currentId: number = 0; + currentId: ReturnType | null = null; /** * Executes `fn` after `delay`, clearing any previously scheduled call. @@ -15,15 +15,15 @@ export class Timeout { start(delay: number, fn: Function) { this.clear(); this.currentId = setTimeout(() => { - this.currentId = 0; + this.currentId = null; fn(); - }, delay) as unknown as number; + }, delay); } clear = () => { - if (this.currentId !== 0) { + if (this.currentId !== null) { clearTimeout(this.currentId); - this.currentId = 0; + this.currentId = null; } }; diff --git a/packages/typescript-to-proptypes/CHANGELOG.md b/packages/typescript-to-proptypes/CHANGELOG.md deleted file mode 100644 index 92be29c879bcf8..00000000000000 --- a/packages/typescript-to-proptypes/CHANGELOG.md +++ /dev/null @@ -1,18 +0,0 @@ -# Changelog - -This file documents changes in the `@mui-internal/typescript-to-proptypes` package. -For changes before the package was forked, while it was and published as `typescript-to-proptypes`, see [CHANGELOG.old.md](./CHANGELOG.old.md). - -Unfortunately changes done between forking the `typescript-to-proptypes` and publishing `@mui-internal/typescript-to-proptypes` are not documented. - -## 1.0.2 - -Fix the incorrectly published package. - -## 1.0.1 - -Fix the incorrectly published package. - -## 1.0.0 - -Initial release as a `@mui-internal/typescript-to-proptypes` package. diff --git a/packages/typescript-to-proptypes/LICENSE b/packages/typescript-to-proptypes/LICENSE deleted file mode 100644 index 13df8f10e07beb..00000000000000 --- a/packages/typescript-to-proptypes/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2019 Kristoffer K. - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/packages/typescript-to-proptypes/README.md b/packages/typescript-to-proptypes/README.md deleted file mode 100644 index 4521bd893bca63..00000000000000 --- a/packages/typescript-to-proptypes/README.md +++ /dev/null @@ -1,25 +0,0 @@ -# @mui-internal/typescript-to-proptypes - -An API for converting [TypeScript](https://www.npmjs.com/package/typescript) definitions to [PropTypes](https://www.npmjs.com/package/prop-types) using the TypeScript Compiler API. - -This package has been adapted for MUI needs. -It is not meant for general use. - -## Support - -| Component type | | -| :--------------- | :----------------- | -| Class | :heavy_check_mark: | -| Function | :heavy_check_mark: | -| Const functions | :heavy_check_mark: | -| React.memo | :heavy_check_mark: | -| React.ForwardRef | :heavy_check_mark: | - -## License - -This project is licensed under the terms of the [MIT license](/LICENSE). - -## Release - -1. Build the project: `pnpm build` -2. Publish the build artifacts to npm: `pnpm release:publish` diff --git a/packages/typescript-to-proptypes/tsconfig.build.json b/packages/typescript-to-proptypes/tsconfig.build.json deleted file mode 100644 index 8992c3d55a7be0..00000000000000 --- a/packages/typescript-to-proptypes/tsconfig.build.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "rootDir": "./src", - "outDir": "./build", - "declaration": true, - "noEmit": false, - "composite": true, - "tsBuildInfoFile": "./build/.tsbuildinfo", - "target": "ES2020", - "module": "commonjs", - "types": ["node"] - }, - "exclude": ["./test/*.ts"] -} diff --git a/packages/zero-next-plugin/.gitignore b/packages/zero-next-plugin/.gitignore new file mode 100644 index 00000000000000..6b1d0bfabc3c1c --- /dev/null +++ b/packages/zero-next-plugin/.gitignore @@ -0,0 +1 @@ +LICENSE diff --git a/packages/zero-next-plugin/package.json b/packages/zero-next-plugin/package.json index 219c729b3fde34..e1fd2188767bd7 100644 --- a/packages/zero-next-plugin/package.json +++ b/packages/zero-next-plugin/package.json @@ -4,10 +4,26 @@ "main": "build/index.js", "module": "build/index.mjs", "types": "build/index.d.ts", - "private": true, + "author": "MUI Team", + "description": "Next.js integration for @mui/zero-runtime CSS-in-JS library.", + "repository": { + "type": "git", + "url": "https://github.com/mui/material-ui.git", + "directory": "packages/zero-next-plugin" + }, + "license": "MIT", + "bugs": { + "url": "https://github.com/mui/material-ui/issues" + }, + "homepage": "https://github.com/mui/material-ui/tree/master/packages/zero-runtime", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, "scripts": { "clean": "rimraf build types", "watch": "tsup --watch --tsconfig tsconfig.build.json", + "copy-license": "node ../../scripts/zero-runtime-license.mjs", "build": "tsup --tsconfig tsconfig.build.json", "typecheck": "tsc --noEmit -p ." }, @@ -30,6 +46,7 @@ "next-font.js", "next-image.js", "zero-virtual.css", - "package.json" + "package.json", + "LICENSE" ] } diff --git a/packages/zero-next-plugin/src/index.ts b/packages/zero-next-plugin/src/index.ts index 3e4f9c3ac462bd..661e0d0b2fe045 100644 --- a/packages/zero-next-plugin/src/index.ts +++ b/packages/zero-next-plugin/src/index.ts @@ -3,6 +3,7 @@ import type { NextConfig } from 'next'; import { findPagesDir } from 'next/dist/lib/find-pages-dir'; import { webpack as zeroWebpackPlugin, + extendTheme, type PluginOptions as BaseZeroPluginConfig, } from '@mui/zero-unplugin'; @@ -81,3 +82,5 @@ export function withZeroPlugin(nextConfig: NextConfig, zeroConfig: ZeroPluginCon webpack, }; } + +export { extendTheme }; diff --git a/packages/zero-runtime/.gitignore b/packages/zero-runtime/.gitignore index f43d90c8429d5e..9119044d594604 100644 --- a/packages/zero-runtime/.gitignore +++ b/packages/zero-runtime/.gitignore @@ -1,2 +1,4 @@ /processors/ /utils/ +/extendTheme/ +LICENSE diff --git a/packages/zero-runtime/README.md b/packages/zero-runtime/README.md index f32aab05d20d91..1024a9d8078e94 100644 --- a/packages/zero-runtime/README.md +++ b/packages/zero-runtime/README.md @@ -47,7 +47,7 @@ npm install @mui/zero-runtime npm install --save-dev @mui/zero-vite-plugin ``` -Then, in your vite config file file, import the plugin and wrap the exported config object: +Then, in your Vite config file, import the plugin and pass it to the `plugins` array as shown: ```js import { zeroVitePlugin } from '@mui/zero-vite-plugin'; @@ -269,7 +269,7 @@ Theming is an **optional** feature that lets you reuse the same values, such as > **💡 Good to know**: > -> The **theme** object are used at build time without relying on React context like common CSS-in-JS libraries. This means that components created by zero-runtime `styled` will be React Server Component by default and still get benefits from theming. +> The **theme** object is used at build time and does not exist in the final JS bundle. This means that components created using zero-runtime's `styled` can be used with React Server Components by default while still getting the benefits of theming. For example, in Next.js, you can define a theme in the `next.config.js` file like this: @@ -319,7 +319,7 @@ const { withZeroPlugin, extendTheme } = require('@mui/zero-next-plugin'); module.exports = withZeroPlugin( { - // ...other nextConfig + // ...nextConfig }, { theme: extendTheme({ @@ -395,7 +395,7 @@ However, if you want to control the color scheme based on application logic, for }); ``` -Note that you need to add a logic to a button by yourself. Here is an example of how to do it: +Note that you need to add the logic to a button by yourself. Here is an example of how to do it: ```jsx function App() { diff --git a/packages/zero-runtime/package.json b/packages/zero-runtime/package.json index a0d78db0cb4466..1d26cc3279eefa 100644 --- a/packages/zero-runtime/package.json +++ b/packages/zero-runtime/package.json @@ -4,19 +4,32 @@ "main": "build/index.js", "module": "build/index.mjs", "types": "build/index.d.ts", - "private": true, + "author": "MUI Team", + "description": "A zero-runtime CSS-in-JS library.", + "repository": { + "type": "git", + "url": "https://github.com/mui/material-ui.git", + "directory": "packages/zero-runtime" + }, + "license": "MIT", + "bugs": { + "url": "https://github.com/mui/material-ui/issues" + }, + "homepage": "https://github.com/mui/material-ui/tree/master/packages/zero-runtime", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, "scripts": { - "clean": "rimraf build types processors utils", + "clean": "rimraf build extendTheme types processors utils", "watch": "tsup --watch --clean false", + "copy-license": "node ../../scripts/zero-runtime-license.mjs", "build": "tsup", "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/zero-runtime/**/*.test.{js,ts,tsx}'", "test:ci": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov --report-dir=./coverage/zero mocha 'packages/zero-runtime/**/*.test.{js,ts,tsx}'", "typecheck": "tsc --noEmit -p ." }, "dependencies": { - "csstype": "^3.1.3", - "cssesc": "^3.0.0", - "clsx": "^2.1.0", "@babel/core": "^7.23.9", "@babel/helper-module-imports": "^7.22.15", "@babel/helper-plugin-utils": "^7.22.5", @@ -24,10 +37,15 @@ "@babel/types": "^7.23.9", "@emotion/css": "^11.11.2", "@emotion/serialize": "^1.1.3", + "@emotion/styled": "^11.11.0", + "@emotion/react": "^11.11.3", + "@mui/system": "workspace:^", "@wyw-in-js/processor-utils": "^0.4.1", "@wyw-in-js/shared": "^0.4.1", "@wyw-in-js/transform": "^0.4.1", - "@mui/system": "workspace:^", + "clsx": "^2.1.0", + "cssesc": "^3.0.0", + "csstype": "^3.1.3", "lodash": "^4.17.21", "stylis": "^4.3.1" }, @@ -64,11 +82,13 @@ "files": [ "build", "exports", + "extendTheme", "processors", + "theme", "utils", "package.json", "styles.css", - "theme" + "LICENSE" ], "exports": { ".": { @@ -83,6 +103,15 @@ "require": "./theme/index.js", "default": "./theme/index.js" }, + "./extendTheme": { + "types": "./extendTheme/index.d.ts", + "import": { + "default": "./extendTheme/index.mjs", + "types": "./extendTheme/index.d.mts" + }, + "require": "./extendTheme/index.js", + "default": "./extendTheme/index.js" + }, "./styles.css": { "default": "./styles.css" }, @@ -111,6 +140,16 @@ } }, "nx": { + "targetDefaults": { + "build": { + "outputs": [ + "{projectRoot}/build", + "{projectRoot}/extendTheme", + "{projectRoot}/processors", + "{projectRoot}/utils" + ] + } + }, "targets": { "test": { "cache": false, diff --git a/packages/zero-runtime/src/extendTheme.ts b/packages/zero-runtime/src/extendTheme.ts index abfee8b62139ab..7af8566e32e99a 100644 --- a/packages/zero-runtime/src/extendTheme.ts +++ b/packages/zero-runtime/src/extendTheme.ts @@ -86,7 +86,7 @@ export type Theme = ExtendTheme; /** * A utility to tell zero-runtime to generate CSS variables for the theme. */ -export default function extendTheme< +export function extendTheme< Options extends { colorScheme: string; tokens: Record; diff --git a/packages/zero-runtime/src/index.ts b/packages/zero-runtime/src/index.ts index fb1923bf0e3803..52c2a5e4bc993f 100644 --- a/packages/zero-runtime/src/index.ts +++ b/packages/zero-runtime/src/index.ts @@ -4,5 +4,3 @@ export { default as keyframes } from './keyframes'; export { generateAtomics, atomics } from './generateAtomics'; export { default as css } from './css'; export { default as createUseThemeProps } from './createUseThemeProps'; -export { default as extendTheme } from './extendTheme'; -export type { Theme, ExtendTheme } from './extendTheme'; diff --git a/packages/zero-runtime/tsup.config.ts b/packages/zero-runtime/tsup.config.ts index 635ac6fa9b2f64..445e63376e2435 100644 --- a/packages/zero-runtime/tsup.config.ts +++ b/packages/zero-runtime/tsup.config.ts @@ -19,6 +19,13 @@ export default defineConfig([ ...baseConfig, entry: ['./src/index.ts', './src/theme.ts'], }, + { + ...baseConfig, + entry: { + index: './src/extendTheme.ts', + }, + outDir: 'extendTheme', + }, { ...baseConfig, entry: processors.map((fn) => `./src/processors/${fn}.ts`), diff --git a/packages/zero-unplugin/.gitignore b/packages/zero-unplugin/.gitignore new file mode 100644 index 00000000000000..6b1d0bfabc3c1c --- /dev/null +++ b/packages/zero-unplugin/.gitignore @@ -0,0 +1 @@ +LICENSE diff --git a/packages/zero-unplugin/package.json b/packages/zero-unplugin/package.json index ce5b9d7ce18f04..852dd3eff11908 100644 --- a/packages/zero-unplugin/package.json +++ b/packages/zero-unplugin/package.json @@ -4,22 +4,38 @@ "main": "build/index.js", "module": "build/index.mjs", "types": "build/index.d.ts", - "private": true, + "author": "MUI Team", + "description": "Webpack integration for @mui/zero-runtime CSS-in-JS library.", + "repository": { + "type": "git", + "url": "https://github.com/mui/material-ui.git", + "directory": "packages/zero-unplugin" + }, + "license": "MIT", + "bugs": { + "url": "https://github.com/mui/material-ui/issues" + }, + "homepage": "https://github.com/mui/material-ui/tree/master/packages/zero-runtime", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, "scripts": { "clean": "rimraf build types", "watch": "tsup --watch --tsconfig tsconfig.build.json", + "copy-license": "node ../../scripts/zero-runtime-license.mjs", "build": "tsup --tsconfig tsconfig.build.json", "typecheck": "tsc --noEmit -p ." }, "dependencies": { "@babel/core": "^7.23.9", + "@mui/zero-runtime": "workspace:^", "@wyw-in-js/shared": "^0.4.1", "@wyw-in-js/transform": "^0.4.1", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "unplugin": "^1.7.1" }, "devDependencies": { - "@mui/zero-runtime": "workspace:^", "@types/babel__core": "^7.20.5" }, "peerDependencies": { @@ -31,6 +47,7 @@ }, "files": [ "build", - "package.json" + "package.json", + "LICENSE" ] } diff --git a/packages/zero-unplugin/src/index.ts b/packages/zero-unplugin/src/index.ts index ab21cb71d0f4d2..8643cf1bd8b644 100644 --- a/packages/zero-unplugin/src/index.ts +++ b/packages/zero-unplugin/src/index.ts @@ -19,7 +19,7 @@ import { generateTokenCss, generateThemeTokens, } from '@mui/zero-runtime/utils'; -import type { Theme as BaseTheme } from '@mui/zero-runtime'; +import { extendTheme, type Theme as BaseTheme } from '@mui/zero-runtime/extendTheme'; type NextMeta = { type: 'next'; @@ -341,3 +341,5 @@ export const webpack = plugin.webpack as unknown as UnpluginFactoryOutput< PluginOptions, WebpackPluginInstance >; + +export { extendTheme }; diff --git a/packages/zero-vite-plugin/.gitignore b/packages/zero-vite-plugin/.gitignore new file mode 100644 index 00000000000000..9dc7e3d4a9c91b --- /dev/null +++ b/packages/zero-vite-plugin/.gitignore @@ -0,0 +1 @@ +/LICENSE diff --git a/packages/zero-vite-plugin/package.json b/packages/zero-vite-plugin/package.json index 5ffd41b0396442..15e561fcca0f1b 100644 --- a/packages/zero-vite-plugin/package.json +++ b/packages/zero-vite-plugin/package.json @@ -4,10 +4,26 @@ "main": "build/index.js", "module": "build/index.mjs", "types": "build/index.d.ts", - "private": true, + "author": "MUI Team", + "description": "Vite integration for @mui/zero-runtime CSS-in-JS library.", + "repository": { + "type": "git", + "url": "https://github.com/mui/material-ui.git", + "directory": "packages/zero-vite-plugin" + }, + "license": "MIT", + "bugs": { + "url": "https://github.com/mui/material-ui/issues" + }, + "homepage": "https://github.com/mui/material-ui/tree/master/packages/zero-runtime", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, "scripts": { "clean": "rimraf build", "watch": "tsup --watch", + "copy-license": "node ../../scripts/zero-runtime-license.mjs", "build": "tsup", "typecheck": "tsc --noEmit -p ." }, @@ -32,6 +48,7 @@ }, "files": [ "build", - "package.json" + "package.json", + "LICENSE" ] } diff --git a/packages/zero-vite-plugin/src/index.ts b/packages/zero-vite-plugin/src/index.ts index f494274b65a4d4..f13dc6e73278e8 100644 --- a/packages/zero-vite-plugin/src/index.ts +++ b/packages/zero-vite-plugin/src/index.ts @@ -4,7 +4,7 @@ import { generateTokenCss, generateThemeTokens, } from '@mui/zero-runtime/utils'; -import type { Theme } from '@mui/zero-runtime'; +import type { Theme } from '@mui/zero-runtime/extendTheme'; import { transformAsync } from '@babel/core'; import baseZeroVitePlugin, { type VitePluginOptions } from './zero-vite-plugin'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 24a1868a1dfb71..70544eee911181 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -104,9 +104,9 @@ importers: '@mui-internal/test-utils': specifier: workspace:^ version: link:packages/test-utils - '@mui-internal/typescript-to-proptypes': + '@mui/internal-scripts': specifier: workspace:^ - version: link:packages/typescript-to-proptypes + version: link:packages-internal/scripts '@mui/joy': specifier: workspace:* version: link:packages/mui-joy/build @@ -592,15 +592,15 @@ importers: '@mui/icons-material': specifier: workspace:^ version: link:../packages/mui-icons-material/build + '@mui/internal-markdown': + specifier: workspace:^ + version: link:../packages/markdown '@mui/joy': specifier: workspace:* version: link:../packages/mui-joy/build '@mui/lab': specifier: workspace:* version: link:../packages/mui-lab/build - '@mui/markdown': - specifier: workspace:^ - version: link:../packages/markdown '@mui/material': specifier: workspace:^ version: link:../packages/mui-material/build @@ -839,9 +839,9 @@ importers: '@mui-internal/test-utils': specifier: workspace:^ version: link:../packages/test-utils - '@mui-internal/typescript-to-proptypes': + '@mui/internal-scripts': specifier: workspace:^ - version: link:../packages/typescript-to-proptypes + version: link:../packages-internal/scripts '@types/autosuggest-highlight': specifier: ^3.2.3 version: 3.2.3 @@ -906,6 +906,79 @@ importers: specifier: ^17.7.2 version: 17.7.2 + packages-internal/scripts: + dependencies: + '@babel/core': + specifier: ^7.23.9 + version: 7.23.9 + '@babel/plugin-syntax-class-properties': + specifier: ^7.12.13 + version: 7.12.13(@babel/core@7.23.9) + '@babel/plugin-syntax-jsx': + specifier: ^7.23.3 + version: 7.23.3(@babel/core@7.23.9) + '@babel/plugin-syntax-typescript': + specifier: ^7.23.3 + version: 7.23.3(@babel/core@7.23.9) + '@babel/types': + specifier: ^7.23.9 + version: 7.23.9 + '@mui-internal/docs-utils': + specifier: workspace:^ + version: link:../../packages/docs-utils + doctrine: + specifier: ^3.0.0 + version: 3.0.0 + lodash: + specifier: ^4.17.21 + version: 4.17.21 + typescript: + specifier: ^5.3.3 + version: 5.3.3 + uuid: + specifier: ^9.0.1 + version: 9.0.1 + devDependencies: + '@babel/register': + specifier: ^7.23.7 + version: 7.23.7(@babel/core@7.23.9) + '@types/babel__core': + specifier: ^7.20.5 + version: 7.20.5 + '@types/chai': + specifier: ^4.3.11 + version: 4.3.11 + '@types/doctrine': + specifier: ^0.0.9 + version: 0.0.9 + '@types/lodash': + specifier: ^4.14.202 + version: 4.14.202 + '@types/node': + specifier: ^18.19.15 + version: 18.19.15 + '@types/prettier': + specifier: ^2.7.3 + version: 2.7.3 + '@types/react': + specifier: ^18.2.55 + version: 18.2.55 + '@types/uuid': + specifier: ^9.0.8 + version: 9.0.8 + chai: + specifier: ^4.4.1 + version: 4.4.1 + fast-glob: + specifier: ^3.3.2 + version: 3.3.2 + prettier: + specifier: ^3.2.5 + version: 3.2.5 + rimraf: + specifier: ^5.0.5 + version: 5.0.5 + packages/api-docs-builder: dependencies: '@babel/core': @@ -920,7 +993,7 @@ importers: '@mui-internal/docs-utils': specifier: workspace:^ version: link:../docs-utils - '@mui/markdown': + '@mui/internal-markdown': specifier: workspace:^ version: link:../markdown ast-types: @@ -996,7 +1069,7 @@ importers: '@mui-internal/api-docs-builder': specifier: workspace:^ version: link:../api-docs-builder - '@mui/markdown': + '@mui/internal-markdown': specifier: workspace:^ version: link:../markdown docs: @@ -1101,13 +1174,13 @@ importers: specifier: ^7.23.9 version: 7.23.9 '@mui/utils': - specifier: workspace:^ + specifier: ^5.0.0 version: link:../mui-utils/build babel-plugin-macros: specifier: ^3.1.0 version: 3.1.0 devDependencies: - '@mui-internal/babel-macros': + '@mui/internal-babel-macros': specifier: workspace:* version: 'link:' '@types/babel-plugin-macros': @@ -1153,15 +1226,12 @@ importers: specifier: ^15.8.1 version: 15.8.1 devDependencies: - '@mui-internal/babel-macros': - specifier: workspace:^ - version: link:../mui-babel-macros '@mui-internal/test-utils': specifier: workspace:^ version: link:../test-utils - '@mui/base': - specifier: workspace:* - version: link:build + '@mui/internal-babel-macros': + specifier: workspace:^ + version: link:../mui-babel-macros '@testing-library/react': specifier: ^14.2.1 version: 14.2.1(react-dom@18.2.0)(react@18.2.0) @@ -1575,15 +1645,12 @@ importers: specifier: ^4.4.5 version: 4.4.5(react-dom@18.2.0)(react@18.2.0) devDependencies: - '@mui-internal/babel-macros': - specifier: workspace:^ - version: link:../mui-babel-macros '@mui-internal/test-utils': specifier: workspace:^ version: link:../test-utils - '@mui/lab': - specifier: workspace:* - version: link:../mui-lab/build + '@mui/internal-babel-macros': + specifier: workspace:^ + version: link:../mui-babel-macros '@popperjs/core': specifier: ^2.11.8 version: 2.11.8 @@ -1706,12 +1773,12 @@ importers: '@emotion/react': specifier: ^11.11.3 version: 11.11.3(@types/react@18.2.55)(react@18.2.0) - '@mui-internal/babel-macros': - specifier: workspace:^ - version: link:../mui-babel-macros '@mui-internal/test-utils': specifier: workspace:^ version: link:../test-utils + '@mui/internal-babel-macros': + specifier: workspace:^ + version: link:../mui-babel-macros '@testing-library/user-event': specifier: ^14.5.2 version: 14.5.2(@testing-library/dom@9.3.4) @@ -2015,12 +2082,12 @@ importers: '@emotion/styled': specifier: ^11.11.0 version: 11.11.0(@emotion/react@11.11.3)(@types/react@18.2.55)(react@18.2.0) - '@mui-internal/babel-macros': - specifier: workspace:^ - version: link:../mui-babel-macros '@mui-internal/test-utils': specifier: workspace:^ version: link:../test-utils + '@mui/internal-babel-macros': + specifier: workspace:^ + version: link:../mui-babel-macros '@mui/system': specifier: workspace:* version: link:build @@ -2081,12 +2148,12 @@ importers: specifier: ^18.2.0 version: 18.2.0 devDependencies: - '@mui-internal/babel-macros': - specifier: workspace:^ - version: link:../mui-babel-macros '@mui-internal/test-utils': specifier: workspace:^ version: link:../test-utils + '@mui/internal-babel-macros': + specifier: workspace:^ + version: link:../mui-babel-macros '@mui/types': specifier: workspace:^ version: link:../mui-types/build @@ -2259,79 +2326,6 @@ importers: specifier: ^5.3.3 version: 5.3.3 - packages/typescript-to-proptypes: - dependencies: - '@babel/core': - specifier: ^7.23.9 - version: 7.23.9 - '@babel/plugin-syntax-class-properties': - specifier: ^7.12.13 - version: 7.12.13(@babel/core@7.23.9) - '@babel/plugin-syntax-jsx': - specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) - '@babel/plugin-syntax-typescript': - specifier: ^7.23.3 - version: 7.23.3(@babel/core@7.23.9) - '@babel/types': - specifier: ^7.23.9 - version: 7.23.9 - '@mui-internal/docs-utils': - specifier: workspace:* - version: link:../docs-utils - doctrine: - specifier: ^3.0.0 - version: 3.0.0 - lodash: - specifier: ^4.17.21 - version: 4.17.21 - typescript: - specifier: ^5.3.3 - version: 5.3.3 - uuid: - specifier: ^9.0.1 - version: 9.0.1 - devDependencies: - '@babel/register': - specifier: ^7.23.7 - version: 7.23.7(@babel/core@7.23.9) - '@types/babel__core': - specifier: ^7.20.5 - version: 7.20.5 - '@types/chai': - specifier: ^4.3.11 - version: 4.3.11 - '@types/doctrine': - specifier: ^0.0.9 - version: 0.0.9 - '@types/lodash': - specifier: ^4.14.202 - version: 4.14.202 - '@types/node': - specifier: ^18.19.15 - version: 18.19.15 - '@types/prettier': - specifier: ^2.7.3 - version: 2.7.3 - '@types/react': - specifier: ^18.2.55 - version: 18.2.55 - '@types/uuid': - specifier: ^9.0.8 - version: 9.0.8 - chai: - specifier: ^4.4.1 - version: 4.4.1 - fast-glob: - specifier: ^3.3.2 - version: 3.3.2 - prettier: - specifier: ^3.2.5 - version: 3.2.5 - rimraf: - specifier: ^5.0.5 - version: 5.0.5 - packages/waterfall: {} packages/zero-next-plugin: @@ -2364,9 +2358,15 @@ importers: '@emotion/css': specifier: ^11.11.2 version: 11.11.2 + '@emotion/react': + specifier: ^11.11.3 + version: 11.11.3(@types/react@18.2.55)(react@18.2.0) '@emotion/serialize': specifier: ^1.1.3 version: 1.1.3 + '@emotion/styled': + specifier: ^11.11.0 + version: 11.11.0(@emotion/react@11.11.3)(@types/react@18.2.55)(react@18.2.0) '@mui/system': specifier: workspace:^ version: link:../mui-system/build @@ -2431,6 +2431,9 @@ importers: '@babel/core': specifier: ^7.23.9 version: 7.23.9 + '@mui/zero-runtime': + specifier: workspace:^ + version: link:../zero-runtime '@wyw-in-js/shared': specifier: ^0.4.1 version: 0.4.1 @@ -2444,9 +2447,6 @@ importers: specifier: ^1.7.1 version: 1.7.1 devDependencies: - '@mui/zero-runtime': - specifier: workspace:^ - version: link:../zero-runtime '@types/babel__core': specifier: ^7.20.5 version: 7.20.5 @@ -6424,7 +6424,7 @@ packages: envinfo: 7.11.1 execa: 5.1.1 hermes-profile-transformer: 0.0.6 - ip: 1.1.8 + ip: 1.1.9 node-stream-zip: 1.15.0 ora: 5.4.1 semver: 7.6.0 @@ -6442,7 +6442,7 @@ packages: '@react-native-community/cli-tools': 12.3.2 chalk: 4.1.2 hermes-profile-transformer: 0.0.6 - ip: 1.1.8 + ip: 1.1.9 transitivePeerDependencies: - encoding dev: false @@ -13568,8 +13568,8 @@ packages: loose-envify: 1.4.0 dev: false - /ip@1.1.8: - resolution: {integrity: sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==} + /ip@1.1.9: + resolution: {integrity: sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==} dev: false /ip@2.0.0: diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 7381846dd1bbab..b02f0b0d8d9901 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -2,6 +2,7 @@ packages: - 'benchmark' - 'packages/*' - 'packages/mui-envinfo/test' + - 'packages-internal/*' - 'docs' - 'test' - 'apps/*' diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index aa9d7d63766a14..f029876db67f78 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -15,7 +15,7 @@ import { getPropTypesFromFile, injectPropTypesInFile, InjectPropTypesInFileOptions, -} from '@mui-internal/typescript-to-proptypes'; +} from '@mui/internal-scripts/typescript-to-proptypes'; import { createTypeScriptProjectBuilder, TypeScriptProject, diff --git a/scripts/zero-runtime-license.mjs b/scripts/zero-runtime-license.mjs new file mode 100644 index 00000000000000..121cccded534c1 --- /dev/null +++ b/scripts/zero-runtime-license.mjs @@ -0,0 +1,11 @@ +import * as path from 'node:path'; +import fse from 'fs-extra'; +import { getWorkspaceRoot } from './utils.mjs'; + +async function run() { + const licenseFile = path.join(getWorkspaceRoot(), 'LICENSE'); + const cwd = process.cwd(); + await fse.copyFile(licenseFile, path.join(cwd, 'LICENSE')); +} + +run(); diff --git a/test/e2e/fixtures/TextareaAutosize/TextareaAutosizeSuspense.tsx b/test/e2e/fixtures/TextareaAutosize/TextareaAutosizeSuspense.tsx index 00058ada505ad3..989d8109c1d82f 100644 --- a/test/e2e/fixtures/TextareaAutosize/TextareaAutosizeSuspense.tsx +++ b/test/e2e/fixtures/TextareaAutosize/TextareaAutosizeSuspense.tsx @@ -8,7 +8,7 @@ function LazyRoute() { if (!isDone) { // Force React to show fallback suspense throw new Promise((resolve) => { - window.setTimeout(resolve, 1); + setTimeout(resolve, 1); setIsDone(true); }); } diff --git a/test/integration/mui-system/createStyled.test.js b/test/integration/mui-system/createStyled.test.js index b9c3ead976653d..5301c6a56f8cc0 100644 --- a/test/integration/mui-system/createStyled.test.js +++ b/test/integration/mui-system/createStyled.test.js @@ -513,6 +513,38 @@ describe('createStyled', () => { expect(getByTestId('red')).toHaveComputedStyle({ backgroundColor: 'rgb(255, 0, 0)' }); }); + it('should merge props and ownerState in props callback', () => { + const styled = createStyled({ + defaultTheme: { + colors: { blue: 'rgb(0, 0, 255)', red: 'rgb(255, 0, 0)', green: 'rgb(0, 255, 0)' }, + }, + }); + + const Test = styled('div')(({ theme, color }) => ({ + variants: [ + { + props: (props) => props.color === 'green' || props.color === 'red', + style: { + backgroundColor: theme.colors[color], + }, + }, + ], + })); + + const { getByTestId } = render( + + + Red + + + Green + + , + ); + expect(getByTestId('green')).toHaveComputedStyle({ backgroundColor: 'rgb(0, 255, 0)' }); + expect(getByTestId('red')).toHaveComputedStyle({ backgroundColor: 'rgb(255, 0, 0)' }); + }); + it('should accept variants in arrays', () => { const styled = createStyled({ defaultTheme: { colors: { blue: 'rgb(0, 0, 255)' } } }); diff --git a/test/regressions/webpack.config.js b/test/regressions/webpack.config.js index f01402c61451df..b4472eedd1cfe4 100644 --- a/test/regressions/webpack.config.js +++ b/test/regressions/webpack.config.js @@ -33,7 +33,7 @@ module.exports = { rules: [ { test: /\.(js|ts|tsx)$/, - // prism.js blocks @mui/markdown/prism from being interpreted as ESM in this build. + // prism.js blocks @mui/internal-markdown/prism from being interpreted as ESM in this build. exclude: /node_modules|prism\.js/, loader: 'babel-loader', options: { diff --git a/tsconfig.json b/tsconfig.json index 55113a353cabee..1dcf1925a54a49 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,8 +18,8 @@ "@mui/material/*": ["./packages/mui-material/src/*"], "@mui/lab": ["./packages/mui-lab/src"], "@mui/lab/*": ["./packages/mui-lab/src/*"], - "@mui/markdown": ["./packages/markdown"], - "@mui/markdown/*": ["./packages/markdown/*"], + "@mui/internal-markdown": ["./packages/markdown"], + "@mui/internal-markdown/*": ["./packages/markdown/*"], "@mui/styled-engine": ["./packages/mui-styled-engine/src"], "@mui/styled-engine/*": ["./packages/mui-styled-engine/src/*"], "@mui/styled-engine-sc": ["./packages/mui-styled-engine-sc/src"], @@ -54,7 +54,9 @@ "@mui/zero-vite-plugin": ["./packages/zero-vite-plugin/src"], "@mui/zero-vite-plugin/*": ["./packages/zero-vite-plugin/src/*"], "@mui-internal/docs-utils": ["./packages/docs-utils/src"], - "@mui-internal/typescript-to-proptypes": ["./packages/typescript-to-proptypes/src"] + "@mui/internal-scripts/typescript-to-proptypes": [ + "./packages-internal/scripts/typescript-to-proptypes/src" + ] }, // Otherwise we get react-native typings which conflict with dom.lib. "types": ["node", "react"] diff --git a/tsup.config.ts b/tsup.config.ts index 9891894d481fd0..10795948887c53 100644 --- a/tsup.config.ts +++ b/tsup.config.ts @@ -1,5 +1,18 @@ +import * as path from 'node:path'; +import fs from 'node:fs'; import { defineConfig } from 'tsup'; +const pkgJson = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'package.json'), 'utf8')); + +const licenseText = `/** + * ${pkgJson.name} v${pkgJson.version} + * + * @license ${pkgJson.license} + * This source code is licensed under the ${pkgJson.license} license found in the + * LICENSE file in the root directory of this source tree. + */ + `; + export default defineConfig({ entry: ['src/index.ts'], outDir: 'build', @@ -11,4 +24,7 @@ export default defineConfig({ cjsInterop: true, dts: true, silent: true, + banner: { + js: licenseText, + }, }); diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js index ac26167c3cabd7..c9530cd25ee3bf 100644 --- a/webpackBaseConfig.js +++ b/webpackBaseConfig.js @@ -9,7 +9,7 @@ module.exports = { resolve: { modules: [__dirname, 'node_modules'], alias: { - '@mui/markdown': path.resolve(__dirname, './packages/markdown'), + '@mui/internal-markdown': path.resolve(__dirname, './packages/markdown'), '@mui/material': path.resolve(__dirname, './packages/mui-material/src'), '@mui/docs': path.resolve(__dirname, './packages/mui-docs/src'), '@mui/icons-material': path.resolve(__dirname, './packages/mui-icons-material/lib/esm'), @@ -26,9 +26,9 @@ module.exports = { '@mui/joy': path.resolve(__dirname, './packages/mui-joy/src'), '@mui/zero-runtime': path.resolve(__dirname, './packages/zero-runtime/src'), '@mui-internal/docs-utils': path.resolve(__dirname, './packages/docs-utils/src'), - '@mui-internal/typescript-to-proptypes': path.resolve( + '@mui/internal-scripts/typescript-to-proptypes': path.resolve( __dirname, - './packages/typescript-to-proptypes/src', + './packages-internal/scripts/typescript-to-proptypes/src', ), docs: path.resolve(__dirname, './docs'), },