diff --git a/.github/ISSUE_TEMPLATE/1.bug.yml b/.github/ISSUE_TEMPLATE/1.bug.yml index 735c03c27eac5c..ab864bcaa38beb 100644 --- a/.github/ISSUE_TEMPLATE/1.bug.yml +++ b/.github/ISSUE_TEMPLATE/1.bug.yml @@ -8,13 +8,13 @@ body: Please provide a searchable summary of the issue in the title above ⬆️. Thanks for contributing by creating an issue! ❤️ - - type: checkboxes + - type: input attributes: - label: Duplicates - description: Please [search the history](https://github.com/mui/material-ui/issues) to see if an issue already exists for the same problem. - options: - - label: I have searched the existing issues - required: true + label: Search keywords + description: Your issue may have already been reported! List the keywords you've used to search the [existing issues](https://github.com/mui/material-ui/issues). This will also make your issue searchable for others. + placeholder: e.g. tooltip color + validations: + required: true - type: checkboxes attributes: label: Latest version @@ -24,34 +24,33 @@ body: required: true - type: textarea attributes: - label: Steps to reproduce 🕹 + label: Steps to reproduce description: | - **⚠️ Issues that we can't reproduce will be closed.** + **⚠️ Issues that we can't reproduce can't be fixed.** Please provide a link to a live example and an unambiguous set of steps to reproduce this bug. As a starting point, we recommend you browse our [documentation](https://mui.com/material-ui/getting-started/installation/), and [select](https://mui.com/static/docs/forking-an-example.png) the closest example to your use case. Or you can use the [official template](https://mui.com/r/issue-template) to build a reproduction case. value: | - Link to live example: + Link to live example: (required) Steps: - 1. 2. 3. - type: textarea attributes: - label: Current behavior 😯 + label: Current behavior description: Describe what happens instead of the expected behavior. - type: textarea attributes: - label: Expected behavior 🤔 + label: Expected behavior description: Describe what should happen. - type: textarea attributes: - label: Context 🔦 + label: Context description: What are you trying to accomplish? How has this issue affected you? Providing context helps us come up with a solution that is more useful in the real world. - type: textarea attributes: - label: Your environment 🌎 + label: Your environment description: Run `npx @mui/envinfo` and post the results. If you encounter issues with TypeScript please include the used tsconfig. value: |
diff --git a/.github/workflows/issue-cleanup.yml b/.github/workflows/issue-cleanup.yml new file mode 100644 index 00000000000000..dab93c5d505e39 --- /dev/null +++ b/.github/workflows/issue-cleanup.yml @@ -0,0 +1,52 @@ +name: Cleanup issue comment + +on: + issues: + types: + - opened + +permissions: {} + +jobs: + issue_cleanup: + runs-on: ubuntu-latest + permissions: + issues: write + steps: + - uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 # v6 + with: + script: | + const issue = await github.rest.issues.get({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.issue.number, + }) + + const lines = issue.data.body.split('\n') + + const _ = extractInputSection(lines, 'Latest version') + const searchKeywords = extractInputSection(lines, 'Search keywords') + const orderID = extractInputSection(lines, 'Order ID or Support key') + + lines.push('') + lines.push('**Search keywords**: ' + searchKeywords) + if (orderID !== '' && orderID !== '_No response_') { + lines.push('**Order ID**: ' + orderID) + } + + const body = lines.join('\n') + + await github.rest.issues.update({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.issue.number, + body, + }) + + function extractInputSection(lines, title) { + const index = lines.findIndex(line => line.startsWith('###') && line.includes(title)) + if (index === -1) { + return '' + } + return lines.splice(index, 4)[2].trim() + } diff --git a/docs/data/joy/getting-started/overview/overview.md b/docs/data/joy/getting-started/overview/overview.md index 29c3c086d13e97..69d42a02282cc3 100644 --- a/docs/data/joy/getting-started/overview/overview.md +++ b/docs/data/joy/getting-started/overview/overview.md @@ -4,7 +4,7 @@ title: Overview # Joy UI - Overview -

Joy UI is an open-source React component library that implements MUI's own in-house design principles. It's comprehensive and can be used in production out of the box.

+

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.

## Introduction diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts index 27d0a7d8e529a9..636f3918e8aaca 100644 --- a/docs/data/material/pages.ts +++ b/docs/data/material/pages.ts @@ -134,7 +134,9 @@ const pages: MuiPage[] = [ subheader: 'MUI X', children: [ { pathname: '/x/react-data-grid', title: 'Data Grid' }, - { pathname: '/x/react-date-pickers/getting-started', title: 'Date & Time Pickers' }, + { pathname: '/x/react-date-pickers', title: 'Date & Time Pickers' }, + { pathname: '/x/react-charts' }, + { pathname: '/x/react-tree-view', title: 'Tree View' }, ], }, { diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 0559003ad6c40f..65f3bd3718eb3c 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -127,8 +127,10 @@ function PostPreview(props: BlogPost) { ))} diff --git a/docs/pages/experiments/md3/buttons.tsx b/docs/pages/experiments/md3/buttons.tsx index 8128c2de82628e..2ccfc177c59306 100644 --- a/docs/pages/experiments/md3/buttons.tsx +++ b/docs/pages/experiments/md3/buttons.tsx @@ -201,17 +201,8 @@ function DemoComponents() { // custom MD3 theme const cssVarsTheme = extendTheme({ - colorSchemes: { - light: { - ref: { - palette: customPalette, - }, - }, - dark: { - ref: { - palette: customPalette, - }, - }, + ref: { + palette: customPalette, }, }); diff --git a/docs/public/static/branding/base-ui/headless-ui-dark.svg b/docs/public/static/branding/base-ui/headless-ui-dark.svg index c1ce8dd253ac64..8a1805ef83de4b 100644 --- a/docs/public/static/branding/base-ui/headless-ui-dark.svg +++ b/docs/public/static/branding/base-ui/headless-ui-dark.svg @@ -1,29 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/docs/public/static/branding/base-ui/headless-ui.svg b/docs/public/static/branding/base-ui/headless-ui.svg index 8bb22cbb239e82..d3d46d34774eb8 100644 --- a/docs/public/static/branding/base-ui/headless-ui.svg +++ b/docs/public/static/branding/base-ui/headless-ui.svg @@ -1,29 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/docs/public/static/branding/base-ui/nhost-2x.jpg b/docs/public/static/branding/base-ui/nhost-2x.jpg deleted file mode 100644 index 213722ec01957d..00000000000000 Binary files a/docs/public/static/branding/base-ui/nhost-2x.jpg and /dev/null differ diff --git a/docs/public/static/branding/base-ui/nhost-dark.svg b/docs/public/static/branding/base-ui/nhost-dark.svg new file mode 100644 index 00000000000000..b19eaa8a4ee651 --- /dev/null +++ b/docs/public/static/branding/base-ui/nhost-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/public/static/branding/base-ui/nhost-light.svg b/docs/public/static/branding/base-ui/nhost-light.svg new file mode 100644 index 00000000000000..8840bda6a0f3b6 --- /dev/null +++ b/docs/public/static/branding/base-ui/nhost-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/public/static/branding/base-ui/nhost-screenshot-2x.png b/docs/public/static/branding/base-ui/nhost-screenshot-2x.png new file mode 100644 index 00000000000000..a3d296db67c6ab Binary files /dev/null and b/docs/public/static/branding/base-ui/nhost-screenshot-2x.png differ diff --git a/docs/public/static/branding/base-ui/nhost-screenshot.png b/docs/public/static/branding/base-ui/nhost-screenshot.png new file mode 100644 index 00000000000000..b8b296f1f7804f Binary files /dev/null and b/docs/public/static/branding/base-ui/nhost-screenshot.png differ diff --git a/docs/public/static/branding/base-ui/nhost.jpg b/docs/public/static/branding/base-ui/nhost.jpg deleted file mode 100644 index e9fc65018deee4..00000000000000 Binary files a/docs/public/static/branding/base-ui/nhost.jpg and /dev/null differ diff --git a/docs/public/static/branding/base-ui/radix-dark.svg b/docs/public/static/branding/base-ui/radix-dark.svg index ba98b6a5ed315e..65d9544bc8e5cb 100644 --- a/docs/public/static/branding/base-ui/radix-dark.svg +++ b/docs/public/static/branding/base-ui/radix-dark.svg @@ -1,21 +1 @@ - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/docs/public/static/branding/base-ui/radix.svg b/docs/public/static/branding/base-ui/radix.svg index 082a5c84c6cde9..78940fb00133d2 100644 --- a/docs/public/static/branding/base-ui/radix.svg +++ b/docs/public/static/branding/base-ui/radix.svg @@ -1,21 +1 @@ - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/docs/public/static/branding/base-ui/react-aria-dark.svg b/docs/public/static/branding/base-ui/react-aria-dark.svg index 0b9f6d55fcca35..821788ee6fe1d2 100644 --- a/docs/public/static/branding/base-ui/react-aria-dark.svg +++ b/docs/public/static/branding/base-ui/react-aria-dark.svg @@ -1,15 +1 @@ - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/docs/public/static/branding/base-ui/react-aria.svg b/docs/public/static/branding/base-ui/react-aria.svg index 7c4d25147221d8..92faea7de6599c 100644 --- a/docs/public/static/branding/base-ui/react-aria.svg +++ b/docs/public/static/branding/base-ui/react-aria.svg @@ -1,15 +1 @@ - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/docs/src/components/productBaseUI/BaseUITestimonial.tsx b/docs/src/components/productBaseUI/BaseUITestimonial.tsx index b1e0337061afd5..53f24fca570721 100644 --- a/docs/src/components/productBaseUI/BaseUITestimonial.tsx +++ b/docs/src/components/productBaseUI/BaseUITestimonial.tsx @@ -37,7 +37,8 @@ export default function BaseUITestimonial() { @@ -95,15 +97,16 @@ export default function BaseUITestimonial() { Senior Software Engineer + {/** icons from https://docs.nhost.io/introduction */} ({ width: '80px', alignSelf: 'center', ...theme.applyDarkStyles({ - content: `url(https://nhost.io/common/logo.svg)`, + content: 'url(/static/branding/base-ui/nhost-dark.svg)', }), })} /> diff --git a/docs/src/modules/components/AppLayoutDocsFooter.js b/docs/src/modules/components/AppLayoutDocsFooter.js index e14c8aee93a801..86e44ba3fc7000 100644 --- a/docs/src/modules/components/AppLayoutDocsFooter.js +++ b/docs/src/modules/components/AppLayoutDocsFooter.js @@ -27,7 +27,6 @@ import RssFeedIcon from '@mui/icons-material/RssFeed'; import ArrowOutwardRoundedIcon from '@mui/icons-material/ArrowOutwardRounded'; import DiscordIcon from 'docs/src/icons/DiscordIcon'; // Other imports -import ROUTES from 'docs/src/route'; import Link from 'docs/src/modules/components/Link'; import PageContext from 'docs/src/modules/components/PageContext'; import EditPage from 'docs/src/modules/components/EditPage'; @@ -542,13 +541,13 @@ export default function AppLayoutDocsFooter(props) { spacing={{ xs: 3, sm: 1 }} > - + • - + Blog @@ -556,7 +555,7 @@ export default function AppLayoutDocsFooter(props) { • - + Store @@ -566,7 +565,7 @@ export default function AppLayoutDocsFooter(props) { , }, { diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index 72a91ae9306d0e..062a245627486c 100644 --- a/docs/src/modules/components/TopLayoutBlog.js +++ b/docs/src/modules/components/TopLayoutBlog.js @@ -157,9 +157,9 @@ const Root = styled('div')( '& h1': { marginBottom: theme.spacing(3), }, - '& .markdown-body': { - lineHeight: 1.7, - }, + }, + '& .markdown-body': { + lineHeight: 1.7, '& img, & video': { border: '1px solid', borderColor: (theme.vars || theme).palette.grey[200], @@ -224,7 +224,7 @@ const Root = styled('div')( } 100%)`, backgroundSize: '100% 1000px', backgroundRepeat: 'no-repeat', - [`& .${classes.container}`]: { + '& .markdown-body': { '& strong': { color: (theme.vars || theme).palette.grey[100], }, @@ -372,7 +372,9 @@ export default function TopLayoutBlog(props) { sx={{ width: 36, height: 36 }} alt="" src={`${authors[author].avatar}?s=${36}`} - srcSet={`${authors[author].avatar}?s=${36 * 2} 2x`} + srcSet={`${authors[author].avatar}?s=${36 * 2} 2x, ${ + authors[author].avatar + }?s=${36 * 3} 3x`} />
diff --git a/docs/src/route.ts b/docs/src/route.ts index 8ef6d08284549e..792ff14c1c056c 100644 --- a/docs/src/route.ts +++ b/docs/src/route.ts @@ -49,7 +49,7 @@ const ROUTES = { // Tree View doc pages treeViewOverview: '/x/react-tree-view/', // Toolpad pages - toolpadDocs: '/toolpad/getting-started/overview/', + toolpadDocs: '/toolpad/getting-started/', // External pages rssFeed: '/feed/blog/rss.xml', handbook: 'https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b', diff --git a/packages/mui-joy/README.md b/packages/mui-joy/README.md index 0b252f6d948316..023f2c85fec6ae 100644 --- a/packages/mui-joy/README.md +++ b/packages/mui-joy/README.md @@ -5,7 +5,7 @@

Joy UI

-Joy UI is an open-source React component library that implements MUI's own in-house design principles. It's comprehensive and can be used in production out of the box. +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. ## Installation diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json index c8f0d0487004e3..712d7a3d9f45ef 100644 --- a/packages/mui-joy/package.json +++ b/packages/mui-joy/package.json @@ -3,7 +3,7 @@ "version": "5.0.0-beta.20", "private": false, "author": "MUI Team", - "description": "Joy UI is an open-source React component library that implements MUI's own in-house design principles. It's comprehensive and can be used in production out of the box.", + "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.", "main": "./src/index.ts", "keywords": [ "react", diff --git a/packages/mui-material-next/CONTRIBUTING.md b/packages/mui-material-next/CONTRIBUTING.md index 75573598bf0aee..8876baeb7022fa 100644 --- a/packages/mui-material-next/CONTRIBUTING.md +++ b/packages/mui-material-next/CONTRIBUTING.md @@ -1,6 +1,6 @@ # Contributing -The Material You components are targeted for v6, so they will be developed on the `material-next` package. +The Material You components are targeted for v7, so they will be developed on the `material-next` package. The progress for each component will be tracked in a separate GitHub issue. If you wish to contribute to the migration go to a component's linked issue to see what tasks are missing (see progress tracker [here](https://github.com/mui/material-ui/issues/29345)). @@ -8,7 +8,7 @@ If the issue doesn't exist, create it, name it `[][material-next] ## Steps -1. Copy component files from `material` (v5) to `material-next`, including tests, types, and utils. Keep in mind to: +1. Copy component files from `material` to `material-next`, including tests, types, and utils. Keep in mind to: - Add component export to `packages/mui-material-next/src/index.ts` - Change imports from `@mui/material` to `@mui/material-next` - If there are utils that don't exist in `material-next`, add them by copying from `material` @@ -18,8 +18,8 @@ If the issue doesn't exist, create it, name it `[][material-next] 4. Drop support for `ThemeProvider` in favor of `CssVarsProvider`. In practice, this means: - Consuming tokens from `theme.vars` instead of `theme` - In tests, using `CssVarsProvider` and `extendTheme` (both imported from `@mui/material-next/styles`) instead of `ThemeProvider` and `createTheme`, as well as providing the same `CssVarsProvier` and `extendTheme` to `describeConformance`'s `ThemeProvider` and `createTheme` options. -5. Implement Material You design specs. Add missing tokens if necessary. Use [material-web tokens](https://github.com/material-components/material-web/tree/main/tokens/v0_172) as a reference for token values -6. Add component playground to v5 docs, take the [Slider playground](https://mui.com/material-ui/react-slider/#material-you-version) as an example +5. Implement Material You design specs. Add missing tokens if necessary. Use [material-web tokens](https://github.com/material-components/material-web/tree/main/tokens) as a reference for token values +6. Add component playground to the docs, take the [Slider playground](https://mui.com/material-ui/react-slider/#material-you-version) as an example 7. Refactor styles to use component CSS Variables, following [material-web tokens](https://github.com/material-components/material-web/tree/main/tokens) and Joy UI's equivalent component (if it exists) as guides. ## Other things to keep in mind diff --git a/packages/mui-material-next/src/styles/Theme.types.ts b/packages/mui-material-next/src/styles/Theme.types.ts index 50b9e6ff480c90..f79e033251b433 100644 --- a/packages/mui-material-next/src/styles/Theme.types.ts +++ b/packages/mui-material-next/src/styles/Theme.types.ts @@ -239,6 +239,7 @@ export interface Motion { export interface MD3CssVarsThemeOptions extends Omit { ref?: { typeface?: Partial; + palette?: Partial; }; sys?: { typescale?: Partial; @@ -250,9 +251,6 @@ export interface MD3CssVarsThemeOptions extends Omit; - }; sys?: { color?: Partial; elevation?: string[]; diff --git a/packages/mui-material-next/src/styles/extendTheme.ts b/packages/mui-material-next/src/styles/extendTheme.ts index 861ba9150d1d56..790ce6a791c4a4 100644 --- a/packages/mui-material-next/src/styles/extendTheme.ts +++ b/packages/mui-material-next/src/styles/extendTheme.ts @@ -90,7 +90,7 @@ export default function extendTheme(options: CssVarsThemeOptions = {}, ...args: ref: { ...input.ref, typeface, - palette: deepmerge(md3CommonPalette, colorSchemesInput.light?.ref?.palette), + palette: deepmerge(md3CommonPalette, input.ref?.palette), }, sys: { ...input.sys, @@ -121,7 +121,7 @@ export default function extendTheme(options: CssVarsThemeOptions = {}, ...args: ref: { ...input.ref, typeface, - palette: deepmerge(md3CommonPalette, colorSchemesInput.dark?.ref?.palette), + palette: deepmerge(md3CommonPalette, input.ref?.palette), }, sys: { ...input.sys, diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index feb08be14c6329..c7c04da74668ea 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -60,7 +60,6 @@ "@mui-internal/test-utils": "workspace:^", "@mui/icons-material": "workspace:^", "@mui/lab": "workspace:*", - "@mui/styles": "workspace:^", "@popperjs/core": "^2.11.8", "@rollup/plugin-replace": "^5.0.5", "@testing-library/dom": "^9.3.3", diff --git a/packages/mui-material/src/styles/index.js b/packages/mui-material/src/styles/index.js index a47ba06fec5acb..34ea0230b89a82 100644 --- a/packages/mui-material/src/styles/index.js +++ b/packages/mui-material/src/styles/index.js @@ -51,4 +51,5 @@ export { default as shouldSkipGeneratingVar } from './shouldSkipGeneratingVar'; // Private methods for creating parts of the theme export { default as private_createTypography } from './createTypography'; +export { default as private_createMixins } from './createMixins'; export { default as private_excludeVariablesFromRoot } from './excludeVariablesFromRoot'; diff --git a/packages/mui-private-theming/package.json b/packages/mui-private-theming/package.json index d0295a3cadf63f..f5d15f41594b9e 100644 --- a/packages/mui-private-theming/package.json +++ b/packages/mui-private-theming/package.json @@ -44,8 +44,6 @@ }, "devDependencies": { "@mui-internal/test-utils": "workspace:^", - "@mui/material": "workspace:^", - "@mui/styles": "workspace:^", "@mui/types": "workspace:^", "@types/chai": "^4.3.11", "@types/react": "^18.2.45", diff --git a/packages/mui-styles/package.json b/packages/mui-styles/package.json index 0c3f645ee163a0..fb88bf1834de16 100644 --- a/packages/mui-styles/package.json +++ b/packages/mui-styles/package.json @@ -58,7 +58,6 @@ }, "devDependencies": { "@mui-internal/test-utils": "workspace:^", - "@mui/joy": "workspace:*", "@mui/material": "workspace:^", "@types/chai": "^4.3.11", "@types/react": "^18.2.45", diff --git a/packages/mui-styles/src/makeStyles/makeStyles.spec.tsx b/packages/mui-styles/src/makeStyles/makeStyles.spec.tsx index b3431adc42f4cd..1e1765dec63af0 100644 --- a/packages/mui-styles/src/makeStyles/makeStyles.spec.tsx +++ b/packages/mui-styles/src/makeStyles/makeStyles.spec.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { Theme } from '@mui/material'; -import { AppBarProps } from '@mui/material/AppBar'; import { createStyles, makeStyles } from '@mui/styles'; // makeStyles diff --git a/packages/mui-styles/test/theme-scoping.test.tsx b/packages/mui-styles/test/theme-scoping.test.tsx index 36338e944fdaf7..d5c862dacccdf0 100644 --- a/packages/mui-styles/test/theme-scoping.test.tsx +++ b/packages/mui-styles/test/theme-scoping.test.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { expect } from 'chai'; import { createRenderer } from '@mui-internal/test-utils'; import * as material from '@mui/material/styles'; -import * as joy from '@mui/joy/styles'; import { makeStyles } from '@mui/styles'; describe('Theme scoping', () => { @@ -78,27 +77,4 @@ describe('Theme scoping', () => { ); expect(container.firstChild).toHaveComputedStyle({ mixBlendMode: 'darken' }); }); - - it('should get Material UI theme even it is inside Joy provider', () => { - const useStyles = makeStyles((theme) => ({ - root: { - color: theme.palette.grey[700], // joy does not have `grey` in the default theme. - }, - })); - function Component() { - const classes = useStyles(); - - return
Component
; - } - - expect(() => - render( - - - - - , - ), - ).not.to.throw(); - }); }); diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json index 8bb9d7dcd21140..f302c3fd0b0369 100644 --- a/packages/mui-system/package.json +++ b/packages/mui-system/package.json @@ -54,9 +54,6 @@ "@emotion/styled": "^11.11.0", "@mui-internal/babel-macros": "workspace:^", "@mui-internal/test-utils": "workspace:^", - "@mui/joy": "workspace:*", - "@mui/material": "workspace:^", - "@mui/material-next": "workspace:*", "@mui/system": "workspace:*", "@types/chai": "^4.3.11", "@types/prop-types": "^15.7.11", diff --git a/packages/mui-system/src/createTheme/index.js b/packages/mui-system/src/createTheme/index.js index d5a11b2ff8f2b5..5684efceff7316 100644 --- a/packages/mui-system/src/createTheme/index.js +++ b/packages/mui-system/src/createTheme/index.js @@ -1 +1,2 @@ export { default } from './createTheme'; +export { default as private_createBreakpoints } from './createBreakpoints'; diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js index 642f2cfc6c332c..dced5959cb72aa 100644 --- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js +++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js @@ -1,7 +1,4 @@ import { expect } from 'chai'; -import createMixins from '@mui/material/styles/createMixins'; -import createTypography from '@mui/material/styles/createTypography'; -import createBreakpoints from '../createTheme/createBreakpoints'; import styleFunctionSx from './styleFunctionSx'; describe('styleFunctionSx', () => { @@ -244,24 +241,6 @@ describe('styleFunctionSx', () => { '@media (min-width:1280px)': { margin: '20px' }, }); }); - - it('writes breakpoints in correct order if default toolbar mixin is present in theme', () => { - const breakpoints = createBreakpoints({}); - const result = styleFunctionSx({ - theme: { - mixins: createMixins(breakpoints), - breakpoints, - }, - sx: (themeParam) => themeParam.mixins.toolbar, - }); - - // Test the order - expect(Object.keys(result)).to.deep.equal([ - '@media (min-width:0px)', - '@media (min-width:600px)', - 'minHeight', - ]); - }); }); describe('theme callback', () => { @@ -424,42 +403,4 @@ describe('styleFunctionSx', () => { ).not.to.throw(); }); }); - - it('resolves inherit typography properties', () => { - const result = styleFunctionSx({ - theme: { typography: createTypography({}, {}) }, - sx: { - fontFamily: 'inherit', - fontWeight: 'inherit', - fontSize: 'inherit', - lineHeight: 'inherit', - letterSpacing: 'inherit', - }, - }); - - expect(result).deep.equal({ - fontFamily: 'inherit', - fontWeight: 'inherit', - fontSize: 'inherit', - lineHeight: 'inherit', - letterSpacing: 'inherit', - }); - }); - - it('resolves theme typography properties', () => { - const result = styleFunctionSx({ - theme: { typography: createTypography({}, {}) }, - sx: { - fontFamily: 'default', - fontWeight: 'fontWeightMedium', - fontSize: 'fontSize', - }, - }); - - expect(result).deep.equal({ - fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', - fontWeight: 500, - fontSize: 14, - }); - }); }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index da1c0666d991f8..ec9a7c0511b71f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1540,9 +1540,6 @@ importers: '@mui/lab': specifier: workspace:* version: link:../mui-lab/build - '@mui/styles': - specifier: workspace:^ - version: link:../mui-styles/build '@popperjs/core': specifier: ^2.11.8 version: 2.11.8 @@ -1752,12 +1749,6 @@ importers: '@mui-internal/test-utils': specifier: workspace:^ version: link:../test-utils - '@mui/material': - specifier: workspace:^ - version: link:../mui-material/build - '@mui/styles': - specifier: workspace:^ - version: link:../mui-styles/build '@mui/types': specifier: workspace:^ version: link:../mui-types/build @@ -1914,9 +1905,6 @@ importers: '@mui-internal/test-utils': specifier: workspace:^ version: link:../test-utils - '@mui/joy': - specifier: workspace:* - version: link:../mui-joy/build '@mui/material': specifier: workspace:^ version: link:../mui-material/build @@ -1985,15 +1973,6 @@ importers: '@mui-internal/test-utils': specifier: workspace:^ version: link:../test-utils - '@mui/joy': - specifier: workspace:* - version: link:../mui-joy/build - '@mui/material': - specifier: workspace:^ - version: link:../mui-material/build - '@mui/material-next': - specifier: workspace:* - version: link:../mui-material-next/build '@mui/system': specifier: workspace:* version: link:build @@ -7254,7 +7233,7 @@ packages: resolution: {integrity: sha512-yLvrWDOh6uMOUlFCTJIZEnwOT9Xte7NPXUqVexEKGSF5XtBAuSg5du0kn3dRR0p47a4ah10Y0mNt8+uyeQXrBQ==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} dependencies: - '@sigstore/protobuf-specs': 0.2.0 + '@sigstore/protobuf-specs': 0.2.1 dev: true /@sigstore/bundle@2.1.0: @@ -7264,11 +7243,6 @@ packages: '@sigstore/protobuf-specs': 0.2.1 dev: true - /@sigstore/protobuf-specs@0.2.0: - resolution: {integrity: sha512-8ZhZKAVfXjIspDWwm3D3Kvj0ddbJ0HqDZ/pOs5cx88HpT8mVsotFrg7H1UMnXOuDHz6Zykwxn4mxG3QLuN+RUg==} - engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} - dev: true - /@sigstore/protobuf-specs@0.2.1: resolution: {integrity: sha512-XTWVxnWJu+c1oCshMLwnKvz8ZQJJDVOlciMfgpJBQbThVjKTCG8dwyhgLngBD2KN0ap9F/gOV8rFDEx8uh7R2A==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} @@ -7289,7 +7263,7 @@ packages: resolution: {integrity: sha512-2bRovzs0nJZFlCN3rXirE4gwxCn97JNjMmwpecqlbgV9WcxX7WRuIrgzx/X7Ib7MYRbyUTpBYE0s2x6AmZXnlg==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} dependencies: - '@sigstore/protobuf-specs': 0.2.0 + '@sigstore/protobuf-specs': 0.2.1 tuf-js: 1.1.7 transitivePeerDependencies: - supports-color @@ -13359,7 +13333,7 @@ packages: foreground-child: 3.1.1 jackspeak: 2.3.6 minimatch: 9.0.3 - minipass: 7.0.2 + minipass: 7.0.4 path-scurry: 1.10.1 /glob@7.1.4: @@ -16279,14 +16253,9 @@ packages: engines: {node: '>=8'} dev: true - /lru-cache@10.0.0: - resolution: {integrity: sha512-svTf/fzsKHffP42sujkO/Rjs37BCIsQVRCeNYIm9WN8rgT7ffoUnRtZCqU+6BqcSBdv8gwJeTz8knJpgACeQMw==} - engines: {node: 14 || >=16.14} - /lru-cache@10.1.0: resolution: {integrity: sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==} engines: {node: 14 || >=16.14} - dev: true /lru-cache@4.1.5: resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==} @@ -16388,7 +16357,7 @@ packages: cacache: 18.0.1 http-cache-semantics: 4.1.1 is-lambda: 1.0.1 - minipass: 7.0.2 + minipass: 7.0.4 minipass-fetch: 3.0.3 minipass-flush: 1.0.5 minipass-pipeline: 1.2.4 @@ -17050,14 +17019,9 @@ packages: engines: {node: '>=8'} dev: true - /minipass@7.0.2: - resolution: {integrity: sha512-eL79dXrE1q9dBbDCLg7xfn/vl7MS4F1gvJAgjJrQli/jbQWdUttuVawphqpffoIYfRdq78LHx6GP4bU/EQ2ATA==} - engines: {node: '>=16 || 14 >=14.17'} - /minipass@7.0.4: resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==} engines: {node: '>=16 || 14 >=14.17'} - dev: true /minizlib@2.1.2: resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==} @@ -17659,7 +17623,7 @@ packages: engines: {node: ^16.14.0 || >=18.0.0} dependencies: make-fetch-happen: 13.0.0 - minipass: 7.0.2 + minipass: 7.0.4 minipass-fetch: 3.0.3 minipass-json-stream: 1.0.1 minizlib: 2.1.2 @@ -18211,7 +18175,7 @@ packages: '@npmcli/run-script': 7.0.2 cacache: 18.0.1 fs-minipass: 3.0.2 - minipass: 7.0.2 + minipass: 7.0.4 npm-package-arg: 11.0.1 npm-packlist: 8.0.1 npm-pick-manifest: 9.0.0 @@ -18375,8 +18339,8 @@ packages: resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==} engines: {node: '>=16 || 14 >=14.17'} dependencies: - lru-cache: 10.0.0 - minipass: 7.0.2 + lru-cache: 10.1.0 + minipass: 7.0.4 /path-to-regexp@0.1.7: resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==} @@ -20470,7 +20434,7 @@ packages: hasBin: true dependencies: '@sigstore/bundle': 1.0.0 - '@sigstore/protobuf-specs': 0.2.0 + '@sigstore/protobuf-specs': 0.2.1 '@sigstore/tuf': 1.0.3 make-fetch-happen: 11.1.1 transitivePeerDependencies: @@ -20639,7 +20603,7 @@ packages: dependencies: agent-base: 6.0.2 debug: 4.3.4(supports-color@8.1.1) - socks: 2.7.0 + socks: 2.7.1 transitivePeerDependencies: - supports-color dev: true @@ -20655,14 +20619,6 @@ packages: - supports-color dev: true - /socks@2.7.0: - resolution: {integrity: sha512-scnOe9y4VuiNUULJN72GrM26BNOjVsfPXI+j+98PkyEfsIXroa5ofyjT+FzGvn/xHs73U2JtoBYAVx9Hl4quSA==} - engines: {node: '>= 10.13.0', npm: '>= 3.0.0'} - dependencies: - ip: 2.0.0 - smart-buffer: 4.2.0 - dev: true - /socks@2.7.1: resolution: {integrity: sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==} engines: {node: '>= 10.13.0', npm: '>= 3.0.0'} diff --git a/packages/mui-material/test/typescript/components.spec.tsx b/test/integration/material-ui/components.spec.tsx similarity index 100% rename from packages/mui-material/test/typescript/components.spec.tsx rename to test/integration/material-ui/components.spec.tsx diff --git a/packages/mui-material/test/typescript/hoc-interop.spec.tsx b/test/integration/material-ui/hoc-interop.spec.tsx similarity index 100% rename from packages/mui-material/test/typescript/hoc-interop.spec.tsx rename to test/integration/material-ui/hoc-interop.spec.tsx diff --git a/packages/mui-private-theming/src/defaultTheme/defaultTheme.spec.ts b/test/integration/mui-styles/defaultTheme.spec.ts similarity index 100% rename from packages/mui-private-theming/src/defaultTheme/defaultTheme.spec.ts rename to test/integration/mui-styles/defaultTheme.spec.ts diff --git a/test/integration/mui-styles/theme-scoping.test.tsx b/test/integration/mui-styles/theme-scoping.test.tsx new file mode 100644 index 00000000000000..93028bb3366058 --- /dev/null +++ b/test/integration/mui-styles/theme-scoping.test.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { expect } from 'chai'; +import { createRenderer } from '@mui-internal/test-utils'; +import * as material from '@mui/material/styles'; +import * as joy from '@mui/joy/styles'; +import { makeStyles } from '@mui/styles'; + +describe('Theme scoping', () => { + const { render } = createRenderer(); + + it('should get Material UI theme even it is inside Joy provider', () => { + const useStyles = makeStyles((theme) => ({ + root: { + color: theme.palette.grey[700], // joy does not have `grey` in the default theme. + }, + })); + function Component() { + const classes = useStyles(); + + return
Component
; + } + + expect(() => + render( + + + + + , + ), + ).not.to.throw(); + }); +}); diff --git a/packages/mui-system/src/createStyled.test.js b/test/integration/mui-system/createStyled.test.js similarity index 99% rename from packages/mui-system/src/createStyled.test.js rename to test/integration/mui-system/createStyled.test.js index 88622a9b5a57a0..b9c3ead976653d 100644 --- a/packages/mui-system/src/createStyled.test.js +++ b/test/integration/mui-system/createStyled.test.js @@ -1,9 +1,9 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; +import createStyled from '@mui/system/createStyled'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import { createRenderer } from '@mui-internal/test-utils'; -import createStyled from './createStyled'; describe('createStyled', () => { const { render } = createRenderer(); diff --git a/test/integration/mui-system/styleFunctionSx.test.js b/test/integration/mui-system/styleFunctionSx.test.js new file mode 100644 index 00000000000000..3ff6fe2bdbefb7 --- /dev/null +++ b/test/integration/mui-system/styleFunctionSx.test.js @@ -0,0 +1,67 @@ +import { expect } from 'chai'; +import styleFunctionSx from '@mui/system/styleFunctionSx'; +import { + private_createMixins as createMixins, + private_createTypography as createTypography, +} from '@mui/material/styles'; +import { private_createBreakpoints as createBreakpoints } from '@mui/system/createTheme'; + +describe('styleFunctionSx', () => { + describe('breakpoints', () => { + it('writes breakpoints in correct order if default toolbar mixin is present in theme', () => { + const breakpoints = createBreakpoints({}); + const result = styleFunctionSx({ + theme: { + mixins: createMixins(breakpoints), + breakpoints, + }, + sx: (themeParam) => themeParam.mixins.toolbar, + }); + + // Test the order + expect(Object.keys(result)).to.deep.equal([ + '@media (min-width:0px)', + '@media (min-width:600px)', + 'minHeight', + ]); + }); + }); + + it('resolves inherit typography properties', () => { + const result = styleFunctionSx({ + theme: { typography: createTypography({}, {}) }, + sx: { + fontFamily: 'inherit', + fontWeight: 'inherit', + fontSize: 'inherit', + lineHeight: 'inherit', + letterSpacing: 'inherit', + }, + }); + + expect(result).deep.equal({ + fontFamily: 'inherit', + fontWeight: 'inherit', + fontSize: 'inherit', + lineHeight: 'inherit', + letterSpacing: 'inherit', + }); + }); + + it('resolves theme typography properties', () => { + const result = styleFunctionSx({ + theme: { typography: createTypography({}, {}) }, + sx: { + fontFamily: 'default', + fontWeight: 'fontWeightMedium', + fontSize: 'fontSize', + }, + }); + + expect(result).deep.equal({ + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 500, + fontSize: 14, + }); + }); +}); diff --git a/packages/mui-system/test/integration/theme-scoping.test.tsx b/test/integration/mui-system/theme-scoping.test.tsx similarity index 100% rename from packages/mui-system/test/integration/theme-scoping.test.tsx rename to test/integration/mui-system/theme-scoping.test.tsx diff --git a/test/tsconfig.json b/test/tsconfig.json index f9c0db98ae7b3b..b6fabbf786faeb 100644 --- a/test/tsconfig.json +++ b/test/tsconfig.json @@ -2,13 +2,12 @@ "extends": "../tsconfig.json", "compilerOptions": { "allowJs": true, - "noUnusedLocals": true, "skipLibCheck": true, "esModuleInterop": true, "module": "Node16", "moduleResolution": "Node16", "types": ["mocha"] }, - "include": ["e2e/**/*", "regressions/**/*"], + "include": ["e2e/**/*", "integration/**/*", "regressions/**/*"], "exclude": ["node_modules", "regressions/build/**/*"] }