Sync is a Figma plugin that generates Material UI themes directly from design to code.
+:::warning +This plugin is experimental. +::: + ## Introduction [Material UI Sync](https://www.figma.com/community/plugin/1336346114713490235/material-ui-sync) is a Figma plugin that lets you generate a theme from the [Material UI for Figma Design Kit](https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x). -:::warning -Sync works in combination with the [Material UI for Figma Design Kit v5.16.0](https://github.com/mui/mui-design-kits/releases) and later. -Other kits, such as the Joy UI Design Kit, are not supported yet. -::: - +Sync works in combination with the [Material UI for Figma Design Kit v5.16.0](https://github.com/mui/mui-design-kits/releases) and later. + ## Running the plugin If you don't have the [complete and latest version](/store/items/figma-react/) of the Material UI for Figma Design Kit installed, you can test the plugin by using the [Community version](https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x) instead. diff --git a/docs/data/material/getting-started/overview/overview.md b/docs/data/material/getting-started/overview/overview.md index 62406390415e2f..4dc5721b2d857d 100644 --- a/docs/data/material/getting-started/overview/overview.md +++ b/docs/data/material/getting-started/overview/overview.md @@ -14,8 +14,7 @@ It includes a comprehensive collection of prebuilt components that are ready for :::info Material UI v6 supports Material Design 2. -Adoption of Material Design 3 is tentatively planned for a future Material UI version. -You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/29345) for future updates. +You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/29345) for future design-related updates. ::: ## Advantages of Material UI diff --git a/docs/data/material/guides/composition/composition.md b/docs/data/material/guides/composition/composition.md index cc77b9161e6e53..2398f114be463c 100644 --- a/docs/data/material/guides/composition/composition.md +++ b/docs/data/material/guides/composition/composition.md @@ -65,6 +65,10 @@ If you added another `className` via the `slotProps` prop on the Custom Tooltip The popper slot in the original example would now have both classes applied to it, in addition to any others that may be present: `"[…] custom-tooltip-popper foo"`. ::: +:::info +`style` object are shallow merged rather than replacing one another. The style keys from the first argument have higher priority. +::: + ## Component prop Material UI allows you to change the root element that will be rendered via a prop called `component`. 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 24c27c33051d02..6e5484cae23ae2 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 @@ -855,6 +855,36 @@ Here's how to migrate: }, ``` +## CardHeader + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#card-header-props) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@latest deprecations/card-header-propsslotProps.subheader
instead. This prop will be removed in v7. See Migrating from deprecated APIs for more details."
+ },
"sx": {
"type": {
"name": "union",
@@ -15,51 +33,56 @@
"additionalInfo": { "sx": true }
},
"title": { "type": { "name": "node" } },
- "titleTypographyProps": { "type": { "name": "object" } }
+ "titleTypographyProps": {
+ "type": { "name": "object" },
+ "deprecated": true,
+ "deprecationInfo": "Use slotProps.title
instead. This prop will be removed in v7. See Migrating from deprecated APIs for more details."
+ }
},
"name": "CardHeader",
"imports": [
"import CardHeader from '@mui/material/CardHeader';",
"import { CardHeader } from '@mui/material';"
],
- "classes": [
+ "slots": [
{
- "key": "action",
- "className": "MuiCardHeader-action",
- "description": "Styles applied to the action element.",
- "isGlobal": false
+ "name": "root",
+ "description": "The component that renders the root slot.",
+ "default": "'div'",
+ "class": "MuiCardHeader-root"
},
{
- "key": "avatar",
- "className": "MuiCardHeader-avatar",
- "description": "Styles applied to the avatar element.",
- "isGlobal": false
+ "name": "avatar",
+ "description": "The component that renders the avatar slot.",
+ "default": "'div'",
+ "class": "MuiCardHeader-avatar"
},
{
- "key": "content",
- "className": "MuiCardHeader-content",
- "description": "Styles applied to the content wrapper element.",
- "isGlobal": false
+ "name": "action",
+ "description": "The component that renders the action slot.",
+ "default": "'div'",
+ "class": "MuiCardHeader-action"
},
{
- "key": "root",
- "className": "MuiCardHeader-root",
- "description": "Styles applied to the root element.",
- "isGlobal": false
+ "name": "content",
+ "description": "The component that renders the content slot.",
+ "default": "'div'",
+ "class": "MuiCardHeader-content"
},
{
- "key": "subheader",
- "className": "MuiCardHeader-subheader",
- "description": "Styles applied to the subheader Typography element.",
- "isGlobal": false
+ "name": "title",
+ "description": "The component that renders the title slot (as long as disableTypography is not `true`).\n[Follow this guide](https://mui.com/material-ui/api/typography/#props) to learn more about the requirements for this component.",
+ "default": "Typography",
+ "class": "MuiCardHeader-title"
},
{
- "key": "title",
- "className": "MuiCardHeader-title",
- "description": "Styles applied to the title Typography element.",
- "isGlobal": false
+ "name": "subheader",
+ "description": "The component that renders the subheader slot (as long as disableTypography is not `true`).\n[Follow this guide](https://mui.com/material-ui/api/typography/#props) to learn more about the requirements for this component.",
+ "default": "Typography",
+ "class": "MuiCardHeader-subheader"
}
],
+ "classes": [],
"spread": true,
"themeDefaultProps": true,
"muiName": "MuiCardHeader",
diff --git a/docs/pages/material-ui/api/linear-progress.json b/docs/pages/material-ui/api/linear-progress.json
index f6118ba323228f..09371e65e408d3 100644
--- a/docs/pages/material-ui/api/linear-progress.json
+++ b/docs/pages/material-ui/api/linear-progress.json
@@ -37,47 +37,66 @@
"description": "Styles applied to the layered bar1 and bar2 elements.",
"isGlobal": false
},
+ {
+ "key": "bar1",
+ "className": "MuiLinearProgress-bar1",
+ "description": "Styles applied to the bar1 element.",
+ "isGlobal": false
+ },
{
"key": "bar1Buffer",
"className": "MuiLinearProgress-bar1Buffer",
"description": "Styles applied to the bar1 element if `variant=\"buffer\"`.",
- "isGlobal": false
+ "isGlobal": false,
+ "isDeprecated": true
},
{
"key": "bar1Determinate",
"className": "MuiLinearProgress-bar1Determinate",
"description": "Styles applied to the bar1 element if `variant=\"determinate\"`.",
- "isGlobal": false
+ "isGlobal": false,
+ "isDeprecated": true
},
{
"key": "bar1Indeterminate",
"className": "MuiLinearProgress-bar1Indeterminate",
"description": "Styles applied to the bar1 element if `variant=\"indeterminate or query\"`.",
+ "isGlobal": false,
+ "isDeprecated": true
+ },
+ {
+ "key": "bar2",
+ "className": "MuiLinearProgress-bar2",
+ "description": "Styles applied to the bar2 element.",
"isGlobal": false
},
{
"key": "bar2Buffer",
"className": "MuiLinearProgress-bar2Buffer",
"description": "Styles applied to the bar2 element if `variant=\"buffer\"`.",
- "isGlobal": false
+ "isGlobal": false,
+ "isDeprecated": true
},
{
"key": "bar2Indeterminate",
"className": "MuiLinearProgress-bar2Indeterminate",
"description": "Styles applied to the bar2 element if `variant=\"indeterminate or query\"`.",
- "isGlobal": false
+ "isGlobal": false,
+ "isDeprecated": true
},
{
"key": "barColorPrimary",
"className": "MuiLinearProgress-barColorPrimary",
"description": "Styles applied to the bar elements if `color=\"primary\"`; bar2 if `variant` not \"buffer\".",
- "isGlobal": false
+ "isGlobal": false,
+ "isDeprecated": true
},
{
"key": "barColorSecondary",
"className": "MuiLinearProgress-barColorSecondary",
"description": "Styles applied to the bar elements if `color=\"secondary\"`; bar2 if `variant` not \"buffer\".",
- "isGlobal": false
+ "isGlobal": false,
+ "isDeprecated": true
},
{
"key": "buffer",
@@ -107,13 +126,15 @@
"key": "dashedColorPrimary",
"className": "MuiLinearProgress-dashedColorPrimary",
"description": "Styles applied to the additional bar element if `variant=\"buffer\"` and `color=\"primary\"`.",
- "isGlobal": false
+ "isGlobal": false,
+ "isDeprecated": true
},
{
"key": "dashedColorSecondary",
"className": "MuiLinearProgress-dashedColorSecondary",
"description": "Styles applied to the additional bar element if `variant=\"buffer\"` and `color=\"secondary\"`.",
- "isGlobal": false
+ "isGlobal": false,
+ "isDeprecated": true
},
{
"key": "determinate",
diff --git a/docs/src/components/careers/CareersFaq.tsx b/docs/src/components/careers/CareersFaq.tsx
index 7662d4c7709763..70a178bad825c8 100644
--- a/docs/src/components/careers/CareersFaq.tsx
+++ b/docs/src/components/careers/CareersFaq.tsx
@@ -83,7 +83,7 @@ const faqData = [
For those that chose the "employee":
- - people in France are hired as full-time employees under the French [legal entity](https://www.infogreffe.com/entreprise-societe/852357748-material-ui-750119B189960000.html).
+ - people in France are hired as full-time employees under the French [legal entity](https://www.infogreffe.fr/entreprise-societe/852357748-material-ui-750119B189960000.html).
- people outside of France are hired through an Employer of Record (EOR), for example, Deel: https://www.deel.com/.
`,
},
diff --git a/docs/src/components/productMaterial/MaterialEnd.tsx b/docs/src/components/productMaterial/MaterialEnd.tsx
index f38fcdae423c17..6b4ad3486d9f5f 100644
--- a/docs/src/components/productMaterial/MaterialEnd.tsx
+++ b/docs/src/components/productMaterial/MaterialEnd.tsx
@@ -103,16 +103,11 @@ export default function MaterialEnd({ noFaq }: MaterialEndProps) {
Does it support Material Design 3?
true
, subheader
and title
won't be wrapped by a Typography component. This can be useful to render an alternative Typography variant by wrapping the title
text, and optional subheader
text with the Typography component."
},
+ "slotProps": { "description": "The props used for each slot inside." },
+ "slots": { "description": "The components used for each slot inside." },
"subheader": { "description": "The content of the component." },
"subheaderTypographyProps": {
"description": "These props will be forwarded to the subheader (as long as disableTypography is not true
)."
@@ -22,27 +24,13 @@
"description": "These props will be forwarded to the title (as long as disableTypography is not true
)."
}
},
- "classDescriptions": {
- "action": {
- "description": "Styles applied to {{nodeName}}.",
- "nodeName": "the action element"
- },
- "avatar": {
- "description": "Styles applied to {{nodeName}}.",
- "nodeName": "the avatar element"
- },
- "content": {
- "description": "Styles applied to {{nodeName}}.",
- "nodeName": "the content wrapper element"
- },
- "root": { "description": "Styles applied to the root element." },
- "subheader": {
- "description": "Styles applied to {{nodeName}}.",
- "nodeName": "the subheader Typography element"
- },
- "title": {
- "description": "Styles applied to {{nodeName}}.",
- "nodeName": "the title Typography element"
- }
+ "classDescriptions": {},
+ "slotDescriptions": {
+ "action": "The component that renders the action slot.",
+ "avatar": "The component that renders the avatar slot.",
+ "content": "The component that renders the content slot.",
+ "root": "The component that renders the root slot.",
+ "subheader": "The component that renders the subheader slot (as long as disableTypography is not true
). Follow this guide to learn more about the requirements for this component.",
+ "title": "The component that renders the title slot (as long as disableTypography is not true
). Follow this guide to learn more about the requirements for this component."
}
}
diff --git a/docs/translations/api-docs/linear-progress/linear-progress.json b/docs/translations/api-docs/linear-progress/linear-progress.json
index 832be0ad1151f0..697fe047053067 100644
--- a/docs/translations/api-docs/linear-progress/linear-progress.json
+++ b/docs/translations/api-docs/linear-progress/linear-progress.json
@@ -21,40 +21,49 @@
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the layered bar1 and bar2 elements"
},
+ "bar1": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the bar1 element" },
"bar1Buffer": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the bar1 element",
- "conditions": "variant=\"buffer\"
"
+ "conditions": "variant=\"buffer\"
",
+ "deprecationInfo": "Use the .MuiLinearProgress-bar1 and .MuiLinearProgress-buffer classes instead. How to migrate"
},
"bar1Determinate": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the bar1 element",
- "conditions": "variant=\"determinate\"
"
+ "conditions": "variant=\"determinate\"
",
+ "deprecationInfo": "Use the .MuiLinearProgress-bar1 and .MuiLinearProgress-determinate classes instead. How to migrate"
},
"bar1Indeterminate": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the bar1 element",
- "conditions": "variant=\"indeterminate or query\"
"
+ "conditions": "variant=\"indeterminate or query\"
",
+ "deprecationInfo": "Use the .MuiLinearProgress-bar1 and .MuiLinearProgress-indeterminate classes instead. How to migrate"
},
+ "bar2": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the bar2 element" },
"bar2Buffer": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the bar2 element",
- "conditions": "variant=\"buffer\"
"
+ "conditions": "variant=\"buffer\"
",
+ "deprecationInfo": "Use the .MuiLinearProgress-bar2 and .MuiLinearProgress-buffer classes instead. How to migrate"
},
"bar2Indeterminate": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the bar2 element",
- "conditions": "variant=\"indeterminate or query\"
"
+ "conditions": "variant=\"indeterminate or query\"
",
+ "deprecationInfo": "Use the .MuiLinearProgress-bar2 and .MuiLinearProgress-indeterminate classes instead. How to migrate"
},
"barColorPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the bar elements",
- "conditions": "color=\"primary\"
; bar2 if variant
not "buffer""
+ "conditions": "color=\"primary\"
; bar2 if variant
not "buffer"",
+ "deprecationInfo": "Use the .MuiLinearProgress-bar and .MuiLinearProgress-colorPrimary classes instead. How to migrate"
},
"barColorSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the bar elements",
- "conditions": "color=\"secondary\"
; bar2 if variant
not "buffer""
+ "conditions": "color=\"secondary\"
; bar2 if variant
not "buffer"",
+ "deprecationInfo": "Use the .MuiLinearProgress-bar and .MuiLinearProgress-colorSecondary classes instead. How to migrate"
},
"buffer": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
@@ -79,12 +88,14 @@
"dashedColorPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the additional bar element",
- "conditions": "variant=\"buffer\"
and color=\"primary\"
"
+ "conditions": "variant=\"buffer\"
and color=\"primary\"
",
+ "deprecationInfo": "Combine the .MuiLinearProgress-dashed and .MuiLinearProgress-colorPrimary classes instead. How to migrate"
},
"dashedColorSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the additional bar element",
- "conditions": "variant=\"buffer\"
and color=\"secondary\"
"
+ "conditions": "variant=\"buffer\"
and color=\"secondary\"
",
+ "deprecationInfo": "Combine the .MuiLinearProgress-dashed and .MuiLinearProgress-colorSecondary classes instead. How to migrate"
},
"determinate": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
diff --git a/package.json b/package.json
index 072668ad1a6d18..b6e89e5855f15d 100644
--- a/package.json
+++ b/package.json
@@ -99,7 +99,7 @@
},
"dependencies": {
"@googleapis/sheets": "^9.3.1",
- "@netlify/functions": "^2.8.2",
+ "@netlify/functions": "^3.0.0",
"@slack/bolt": "^4.2.0",
"execa": "^9.5.2",
"google-auth-library": "^9.15.0"
@@ -131,7 +131,7 @@
"@types/fs-extra": "^11.0.4",
"@types/lodash": "^4.17.14",
"@types/mocha": "^10.0.10",
- "@types/node": "^20.17.10",
+ "@types/node": "^20.17.12",
"@types/react": "^19.0.2",
"@types/yargs": "^17.0.33",
"@typescript-eslint/eslint-plugin": "^7.18.0",
@@ -198,7 +198,7 @@
"vitest-fail-on-console": "^0.7.1",
"webpack": "^5.97.1",
"webpack-bundle-analyzer": "^4.10.2",
- "webpack-cli": "^5.1.4",
+ "webpack-cli": "^6.0.1",
"yargs": "^17.7.2"
},
"packageManager": "pnpm@9.15.2",
@@ -216,7 +216,7 @@
"@definitelytyped/header-parser": "^0.2.16",
"@definitelytyped/typescript-versions": "^0.1.6",
"@definitelytyped/utils": "^0.1.8",
- "@types/node": "^20.17.10",
+ "@types/node": "^20.17.12",
"cross-fetch": "^4.1.0",
"@pigment-css/react": "0.0.29",
"@pigment-css/unplugin": "0.0.29",
diff --git a/packages-internal/scripts/package.json b/packages-internal/scripts/package.json
index 6c3419ab47b085..fd5769f0ae9b80 100644
--- a/packages-internal/scripts/package.json
+++ b/packages-internal/scripts/package.json
@@ -42,7 +42,7 @@
"@types/chai": "^4.3.20",
"@types/doctrine": "^0.0.9",
"@types/lodash": "^4.17.14",
- "@types/node": "^20.17.10",
+ "@types/node": "^20.17.12",
"@types/react": "^19.0.2",
"@types/uuid": "^10.0.0",
"chai": "^4.5.0",
diff --git a/packages/api-docs-builder-core/package.json b/packages/api-docs-builder-core/package.json
index c66785695c2276..fb1e698887e51d 100644
--- a/packages/api-docs-builder-core/package.json
+++ b/packages/api-docs-builder-core/package.json
@@ -17,7 +17,7 @@
"devDependencies": {
"@types/chai": "^4.3.20",
"@types/mocha": "^10.0.10",
- "@types/node": "^20.17.10",
+ "@types/node": "^20.17.12",
"@types/sinon": "^17.0.3",
"chai": "^4.5.0",
"sinon": "^19.0.2",
diff --git a/packages/api-docs-builder/package.json b/packages/api-docs-builder/package.json
index 14d889bbd587f5..7e044aff188fcd 100644
--- a/packages/api-docs-builder/package.json
+++ b/packages/api-docs-builder/package.json
@@ -32,7 +32,7 @@
"@types/doctrine": "^0.0.9",
"@types/mdast": "4.0.4",
"@types/mocha": "^10.0.10",
- "@types/node": "^20.17.10",
+ "@types/node": "^20.17.12",
"@types/react-docgen": "workspace:*",
"@types/sinon": "^17.0.3",
"chai": "^4.5.0",
diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md
index aa51cb7a8373c2..d376805bb85e80 100644
--- a/packages/mui-codemod/README.md
+++ b/packages/mui-codemod/README.md
@@ -1242,6 +1242,66 @@ npx @mui/codemod@latest deprecations/input-base-props