From ad5c79eecca47c15cda94387e337cbf2eea98f88 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Fri, 2 Feb 2024 14:00:24 -0600 Subject: [PATCH 01/19] first pass --- .../data/material/components/badges/badges.md | 2 +- .../components/button-group/button-group.md | 8 ++-- .../material/components/buttons/buttons.md | 2 +- docs/data/material/components/chips/chips.md | 2 +- .../material/components/dividers/dividers.md | 2 +- .../material/components/progress/progress.md | 2 +- .../data/material/components/slider/slider.md | 2 +- .../material-3-components.md | 38 +++++++++---------- docs/data/material/pages.ts | 2 +- .../blog/2023-material-ui-v6-and-beyond.md | 4 +- .../productMaterial/MaterialEnd.tsx | 4 +- packages/mui-material-next/CONTRIBUTING.md | 2 +- packages/mui-material-next/README.md | 2 +- packages/mui-material-next/migration.md | 8 ++-- 14 files changed, 40 insertions(+), 40 deletions(-) diff --git a/docs/data/material/components/badges/badges.md b/docs/data/material/components/badges/badges.md index ee170ff60ad407..adedbeb969512c 100644 --- a/docs/data/material/components/badges/badges.md +++ b/docs/data/material/components/badges/badges.md @@ -74,7 +74,7 @@ You should provide a full description, for instance, with `aria-label`: ## Experimental APIs -### Material 3 Badge +### Material Design 3 The default Material UI Badge component follows the Material Design 2 specs. To use the [Material 3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. diff --git a/docs/data/material/components/button-group/button-group.md b/docs/data/material/components/button-group/button-group.md index 97ba5869c02eca..6698e919f16bfc 100644 --- a/docs/data/material/components/button-group/button-group.md +++ b/docs/data/material/components/button-group/button-group.md @@ -56,10 +56,10 @@ You can use the [``](/material-ui/react-button/#loading-button) {{"demo": "LoadingButtonGroup.js"}} -### Material 3 version +### Material Design 3 -The default Material UI ButtonGroup component follows the Material Design 2 specs. -To get the [Material 3](https://m3.material.io/) version, use the new experimental `@mui/material-next` package. +The default Material UI Button Group component follows the Material Design 2 specs. +To use the [Material 3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. ```js import ButtonGroup from '@mui/material-next/ButtonGroup'; @@ -67,4 +67,4 @@ import ButtonGroup from '@mui/material-next/ButtonGroup'; {{"demo": "ButtonGroupMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}} -For more instructions on how to use it, visit the [detailed guide](/material-ui/guides/material-3-components/). +To learn more about Material UI's MD3 implementation, visit the [Material 3 Components documentation](/material-ui/guides/material-3-components/). diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md index ef1985f548a014..bf5ad50928eab9 100644 --- a/docs/data/material/components/buttons/buttons.md +++ b/docs/data/material/components/buttons/buttons.md @@ -199,7 +199,7 @@ To prevent this, ensure that the contents of the Loading Button are nested insid ::: -### Material 3 Button +### Material Design 3 The default Material UI Button component follows the Material Design 2 specs. To use the [Material 3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. diff --git a/docs/data/material/components/chips/chips.md b/docs/data/material/components/chips/chips.md index b589b25492fcbd..7fb2671563a5ae 100644 --- a/docs/data/material/components/chips/chips.md +++ b/docs/data/material/components/chips/chips.md @@ -99,7 +99,7 @@ gain depth while clicked or touched. ## Experimental API -### Material 3 Chip +### Material Design 3 The default Material UI Chip component follows the Material Design 2 specs. To use the [Material 3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. diff --git a/docs/data/material/components/dividers/dividers.md b/docs/data/material/components/dividers/dividers.md index 7fa00cf3263bc9..d7bb2275dd9180 100644 --- a/docs/data/material/components/dividers/dividers.md +++ b/docs/data/material/components/dividers/dividers.md @@ -93,7 +93,7 @@ The Divider component is composed of a root `
`. ## Experimental APIs -### Material 3 Divider +### Material Design 3 The default Material UI Divider component follows the Material Design 2 specs. To use the [Material 3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. diff --git a/docs/data/material/components/progress/progress.md b/docs/data/material/components/progress/progress.md index 438420fca50891..0feb57867391be 100644 --- a/docs/data/material/components/progress/progress.md +++ b/docs/data/material/components/progress/progress.md @@ -153,7 +153,7 @@ You can solve the latter with: ## Experimental APIs -### Material 3 Progress +### Material Design 3 The default Material UI Progress components follow the Material Design 2 specs. To use the [Material 3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. diff --git a/docs/data/material/components/slider/slider.md b/docs/data/material/components/slider/slider.md index 5b206383b9acd4..edb374262efcc1 100644 --- a/docs/data/material/components/slider/slider.md +++ b/docs/data/material/components/slider/slider.md @@ -167,7 +167,7 @@ You can solve the issue with: ## Experimental APIs -### Material 3 Slider +### Material Design 3 The default Material UI Slider component follows the Material Design 2 specs. To use the [Material 3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. diff --git a/docs/data/material/guides/material-3-components/material-3-components.md b/docs/data/material/guides/material-3-components/material-3-components.md index da7cab6b47660c..ae52180859c715 100644 --- a/docs/data/material/guides/material-3-components/material-3-components.md +++ b/docs/data/material/guides/material-3-components/material-3-components.md @@ -1,27 +1,27 @@ -# Material 3 Components +# Material Design 3 Components -

Try out Material UI's implementation of MD3 and learn how to contribute to the project.

+

Try out Material UI's implementation of M3 and learn how to contribute to the project.

-## Material 3 +## Material UI and M3 -Material 3 (MD3), also referred to as [Material You](https://m3.material.io), is the latest version of Google's design system. -The primary Material UI package (`@mui/material`) currently implements Material 2. -MD3 implementation is a work in progress, targeted for completion in late 2024. -You can try out Material UI's MD3 components as they're developed using the `@mui/material-next` package. +Material Design 3 (M3), also referred to as [Material You](https://m3.material.io), is the latest version of Google's design system. +The primary Material UI package (`@mui/material`) currently implements Material Design 2. +M3 implementation is a work in progress, targeted for completion in late 2024. +You can try out Material UI's M3 components as they're developed using the `@mui/material-next` package. :::warning -The Material 3 components are currently in alpha and subject to change. +The M3 components are currently in alpha and subject to change. ::: ## Supported components -Visit the [All Components page](/material-ui/all-components/) to see which components support MD3—look for the green MD3 indicator. -All components that have MD3 versions have a corresponding playground on their page. -For example, here's the [MD3 Button playground](/material-ui/react-button/#material-3-button). +Visit the [All Components page](/material-ui/all-components/) to see which components support M3—look for the green M3 indicator. +All components that have M3 versions have a corresponding playground on their page. +For example, here's the [M3 Button playground](/material-ui/react-button/#material-design-3). -## Getting started with MD3 components +## Getting started with M3 components -The MD3 components are included in the `@mui/material-next` package. +The M3 components are included in the `@mui/material-next` package. The following guide explains how to get started using them. ### Installation @@ -106,10 +106,10 @@ To install Roboto through the Google Web Fonts CDN, add the following code insid After [installation](/material-ui/guides/material-3-components/#installation), you can import any component from `@mui/material-next` just as you would do with the stable Material UI package. -{{"demo": "MD3ButtonUsage.js"}} +{{"demo": "M3ButtonUsage.js"}} :::warning -If your application uses the `ThemeProvider` from `@mui/material`, you must include `CssVarsProvider` from `@mui/material-next` in the tree above the MD3 components. +If your application uses the `ThemeProvider` from `@mui/material`, you must include `CssVarsProvider` from `@mui/material-next` in the tree above the M3 components. The following example shows how to do this. ::: @@ -118,16 +118,16 @@ The following example shows how to do this. ### Theming Use the `extendTheme` function to modify the default theme. -The theme structure follows [MD3 specifications](https://m3.material.io/styles/color/system/overview). +The theme structure follows [M3 specifications](https://m3.material.io/styles/color/system/overview). For example, if you wanted to modify the primary color, you would provide the [color tones](https://m3.material.io/styles/color/system/how-the-system-works#e1e92a3b-8702-46b6-8132-58321aa600bd) via `ref.palette.primary`: -{{"demo": "MD3Theming.js"}} +{{"demo": "M3Theming.js"}} :::success -You can use Material Design's [Figma MD3 Theme Builder](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder) plugin to generate palette tones. +You can use Material Design's [Figma Material Theme Builder](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder) plugin to generate palette tones. ::: ## Stable release -The stable release of the MD3 components is tentatively targeted for Q4 2024 in Material UI v7. +The stable release of the M3 components is tentatively targeted for Q4 2024 in Material UI v7. To follow the progress or contribute to the project, check out [the Material 3 GitHub issue](https://github.com/mui/material-ui/issues/29345). diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts index 1279434c9744ff..28a9c3ddb5de17 100644 --- a/docs/data/material/pages.ts +++ b/docs/data/material/pages.ts @@ -213,7 +213,7 @@ const pages: MuiPage[] = [ }, { pathname: '/material-ui/guides/material-3-components', - title: 'Material 3 components', + title: 'Material Design 3 components', newFeature: true, }, ], 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 ecd374b1838fba..4b2c5ef484c2b1 100644 --- a/docs/pages/blog/2023-material-ui-v6-and-beyond.md +++ b/docs/pages/blog/2023-material-ui-v6-and-beyond.md @@ -35,13 +35,13 @@ As a taste of the performance upgrade, here are some early Lighthouse metrics wi ### Material UI v7 -Material UI v7 is where you can expect to see native support for [Material 3](https://m3.material.io/), Google's latest Material Design update, as well as many other design improvements across the component suite. +Material UI v7 is where you can expect to see native support for [Material Design 3](https://m3.material.io/), Google's latest Material Design update, as well as many other design improvements across the component suite. It's tentatively planned for Q4 of 2024. Side-to-side comparison of a Card component using Material Design 2 and 3, respectively. The development for this version is already in progress, though! -See which components already support the Material 3 specs, through the experimental `@mui/material-next` package, by visiting the newly released [All Components page](/material-ui/all-components/). +See which components already support the M3 specs, through the experimental `@mui/material-next` package, by visiting the newly released [All Components page](/material-ui/all-components/). ```diff -import Button from '@mui/material/Button'; diff --git a/docs/src/components/productMaterial/MaterialEnd.tsx b/docs/src/components/productMaterial/MaterialEnd.tsx index 22c69b1242ba58..9f0402ac0be6fc 100644 --- a/docs/src/components/productMaterial/MaterialEnd.tsx +++ b/docs/src/components/productMaterial/MaterialEnd.tsx @@ -68,10 +68,10 @@ export default function MaterialEnd() { } />
- Does it support Material 3? + Does it support Material Design 3? - The adoption of Material 3 is tentatively planned for Material UI v6. See the{' '} + The adoption of Material Design 3 is tentatively planned for Material UI v7. See the{' '} the release schedule {' '} diff --git a/packages/mui-material-next/CONTRIBUTING.md b/packages/mui-material-next/CONTRIBUTING.md index 44bdd82f1365a2..884e55c27b93b6 100644 --- a/packages/mui-material-next/CONTRIBUTING.md +++ b/packages/mui-material-next/CONTRIBUTING.md @@ -1,6 +1,6 @@ # Contributing -The Material 3 components are targeted for v7, so they will be developed on the `material-next` package. +The Material Design 3 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)). diff --git a/packages/mui-material-next/README.md b/packages/mui-material-next/README.md index 40f5948e44e8e8..ca29c9adb30dc7 100644 --- a/packages/mui-material-next/README.md +++ b/packages/mui-material-next/README.md @@ -1,6 +1,6 @@ # @mui/material-next -[Material 3](https://m3.material.io/) components built using [@mui/base](https://mui.com/base-ui/getting-started/overview/). +[Material Design 3](https://m3.material.io/) components built using [@mui/base](https://mui.com/base-ui/getting-started/overview/). This package is a nursery for components that will ultimately replace the @mui/material ones. diff --git a/packages/mui-material-next/migration.md b/packages/mui-material-next/migration.md index 1ca0322d107c35..c23168afab94c8 100644 --- a/packages/mui-material-next/migration.md +++ b/packages/mui-material-next/migration.md @@ -116,7 +116,7 @@ So the examples below are interchangeable for these components. ### Removed focusRipple -The `focusRipple` prop was removed as ripples are absent in Material 3's focused states. +The `focusRipple` prop was removed as ripples are absent in Material Design 3's focused states. ### Prevent default on `key-up` and `key-down` events @@ -166,13 +166,13 @@ The `FormControlState` interface was renamed to `FormControlContextValue`: ### Removed the `standard` variant -The standard variant is no longer supported in Material 3, use the `filled` or `outlined` variants instead. +The standard variant is no longer supported in M3, use the `filled` or `outlined` variants instead. ## FormLabel ### Removed the `standard` variant -The standard variant is no longer supported in Material 3, use the `filled` or `outlined` variants instead. +The standard variant is no longer supported in M3, use the `filled` or `outlined` variants instead. ## InputBase @@ -191,7 +191,7 @@ The standard variant is no longer supported in Material 3, use the `filled` or ` ### Removed the `standard` variant -The standard variant is no longer supported in Material 3, use the `filled` or `outlined` variants instead. +The standard variant is no longer supported in M3, use the `filled` or `outlined` variants instead. ## Chip From ab72cc64dd0c48584f0ccb529d1b8503d10a057d Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Fri, 2 Feb 2024 14:15:05 -0600 Subject: [PATCH 02/19] M3 --- .../joy/customization/theme-typography/theme-typography.md | 2 +- docs/data/material/components/badges/badges.md | 4 ++-- docs/data/material/components/button-group/button-group.md | 4 ++-- docs/data/material/components/buttons/buttons.md | 4 ++-- .../material/components/chips/ChipMaterialYouPlayground.js | 4 ++-- docs/data/material/components/chips/chips.md | 4 ++-- docs/data/material/components/dividers/dividers.md | 4 ++-- docs/data/material/components/progress/progress.md | 4 ++-- docs/data/material/components/slider/slider.md | 4 ++-- .../guides/material-3-components/material-3-components.md | 2 +- docs/translations/translations.json | 2 +- packages/mui-material-next/CONTRIBUTING.md | 4 ++-- packages/mui-material-next/README.md | 2 +- packages/mui-material-next/migration.md | 2 +- 14 files changed, 23 insertions(+), 23 deletions(-) diff --git a/docs/data/joy/customization/theme-typography/theme-typography.md b/docs/data/joy/customization/theme-typography/theme-typography.md index 437f8507ce6a11..95384397f6aafb 100644 --- a/docs/data/joy/customization/theme-typography/theme-typography.md +++ b/docs/data/joy/customization/theme-typography/theme-typography.md @@ -163,7 +163,7 @@ Feel free to [submit a PR](https://github.com/mui/material-ui/compare) to add yo diff --git a/docs/data/material/components/badges/badges.md b/docs/data/material/components/badges/badges.md index adedbeb969512c..300f5619752bb4 100644 --- a/docs/data/material/components/badges/badges.md +++ b/docs/data/material/components/badges/badges.md @@ -77,7 +77,7 @@ You should provide a full description, for instance, with `aria-label`: ### Material Design 3 The default Material UI Badge component follows the Material Design 2 specs. -To use the [Material 3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. +To use the [M3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. ```js import Badge from '@mui/material-next/Badge'; @@ -85,4 +85,4 @@ import Badge from '@mui/material-next/Badge'; {{"demo": "BadgeMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}} -To learn more about Material UI's MD3 implementation, visit the [Material 3 Components documentation](/material-ui/guides/material-3-components/). +To learn more about Material UI's MD3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). diff --git a/docs/data/material/components/button-group/button-group.md b/docs/data/material/components/button-group/button-group.md index 6698e919f16bfc..714c1220fe1530 100644 --- a/docs/data/material/components/button-group/button-group.md +++ b/docs/data/material/components/button-group/button-group.md @@ -59,7 +59,7 @@ You can use the [``](/material-ui/react-button/#loading-button) ### Material Design 3 The default Material UI Button Group component follows the Material Design 2 specs. -To use the [Material 3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. +To use the [M3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. ```js import ButtonGroup from '@mui/material-next/ButtonGroup'; @@ -67,4 +67,4 @@ import ButtonGroup from '@mui/material-next/ButtonGroup'; {{"demo": "ButtonGroupMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}} -To learn more about Material UI's MD3 implementation, visit the [Material 3 Components documentation](/material-ui/guides/material-3-components/). +To learn more about Material UI's MD3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md index bf5ad50928eab9..ea7efb97060b6f 100644 --- a/docs/data/material/components/buttons/buttons.md +++ b/docs/data/material/components/buttons/buttons.md @@ -202,7 +202,7 @@ To prevent this, ensure that the contents of the Loading Button are nested insid ### Material Design 3 The default Material UI Button component follows the Material Design 2 specs. -To use the [Material 3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. +To use the [M3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. ```js import Button from '@mui/material-next/Button'; @@ -210,4 +210,4 @@ import Button from '@mui/material-next/Button'; {{"demo": "ButtonMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}} -To learn more about Material UI's MD3 implementation, visit the [Material 3 Components documentation](/material-ui/guides/material-3-components/). +To learn more about Material UI's MD3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). diff --git a/docs/data/material/components/chips/ChipMaterialYouPlayground.js b/docs/data/material/components/chips/ChipMaterialYouPlayground.js index 145891ca28e95f..6da30fac769676 100644 --- a/docs/data/material/components/chips/ChipMaterialYouPlayground.js +++ b/docs/data/material/components/chips/ChipMaterialYouPlayground.js @@ -45,12 +45,12 @@ export default function ChipMaterialYouPlayground() { alert('Clicked Material 3 Chip')} + onClick={() => alert('Clicked M3 Chip')} /> alert('Deleted Material 3 Chip')} + onDelete={() => alert('Deleted M3 Chip')} /> )} diff --git a/docs/data/material/components/chips/chips.md b/docs/data/material/components/chips/chips.md index 7fb2671563a5ae..d8340b278cbe37 100644 --- a/docs/data/material/components/chips/chips.md +++ b/docs/data/material/components/chips/chips.md @@ -102,7 +102,7 @@ gain depth while clicked or touched. ### Material Design 3 The default Material UI Chip component follows the Material Design 2 specs. -To use the [Material 3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. +To use the [M3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. ```js import Chip from '@mui/material-next/Chip'; @@ -110,7 +110,7 @@ import Chip from '@mui/material-next/Chip'; {{"demo": "ChipMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}} -To learn more about Material UI's MD3 implementation, visit the [Material 3 Components documentation](/material-ui/guides/material-3-components/). +To learn more about Material UI's MD3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). ## Accessibility diff --git a/docs/data/material/components/dividers/dividers.md b/docs/data/material/components/dividers/dividers.md index d7bb2275dd9180..e8554603a31865 100644 --- a/docs/data/material/components/dividers/dividers.md +++ b/docs/data/material/components/dividers/dividers.md @@ -96,7 +96,7 @@ The Divider component is composed of a root `
`. ### Material Design 3 The default Material UI Divider component follows the Material Design 2 specs. -To use the [Material 3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. +To use the [M3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. ```js import Divider from '@mui/material-next/Divider'; @@ -104,4 +104,4 @@ import Divider from '@mui/material-next/Divider'; {{"demo": "DividerMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}} -To learn more about Material UI's MD3 implementation, visit the [Material 3 Components documentation](/material-ui/guides/material-3-components/). +To learn more about Material UI's MD3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). diff --git a/docs/data/material/components/progress/progress.md b/docs/data/material/components/progress/progress.md index 0feb57867391be..b4dc6089367fd2 100644 --- a/docs/data/material/components/progress/progress.md +++ b/docs/data/material/components/progress/progress.md @@ -156,7 +156,7 @@ You can solve the latter with: ### Material Design 3 The default Material UI Progress components follow the Material Design 2 specs. -To use the [Material 3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. +To use the [M3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. ```js import CircularProgress from '@mui/material-next/CircularProgress'; @@ -165,4 +165,4 @@ import LinearProgress from '@mui/material-next/LinearProgress'; {{"demo": "ProgressMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}} -To learn more about Material UI's MD3 implementation, visit the [Material 3 Components documentation](/material-ui/guides/material-3-components/). +To learn more about Material UI's MD3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). diff --git a/docs/data/material/components/slider/slider.md b/docs/data/material/components/slider/slider.md index edb374262efcc1..7daf16b3719481 100644 --- a/docs/data/material/components/slider/slider.md +++ b/docs/data/material/components/slider/slider.md @@ -170,7 +170,7 @@ You can solve the issue with: ### Material Design 3 The default Material UI Slider component follows the Material Design 2 specs. -To use the [Material 3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. +To use the [M3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. ```js import Slider from '@mui/material-next/Slider'; @@ -178,4 +178,4 @@ import Slider from '@mui/material-next/Slider'; {{"demo": "SliderMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}} -To learn more about Material UI's MD3 implementation, visit the [Material 3 Components documentation](/material-ui/guides/material-3-components/). +To learn more about Material UI's MD3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). diff --git a/docs/data/material/guides/material-3-components/material-3-components.md b/docs/data/material/guides/material-3-components/material-3-components.md index ae52180859c715..d34e601ec22e44 100644 --- a/docs/data/material/guides/material-3-components/material-3-components.md +++ b/docs/data/material/guides/material-3-components/material-3-components.md @@ -130,4 +130,4 @@ You can use Material Design's [Figma Material Theme Builder](https://www.figma.c ## Stable release The stable release of the M3 components is tentatively targeted for Q4 2024 in Material UI v7. -To follow the progress or contribute to the project, check out [the Material 3 GitHub issue](https://github.com/mui/material-ui/issues/29345). +To follow the progress or contribute to the project, check out [the M3 GitHub issue](https://github.com/mui/material-ui/issues/29345). diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 8a4e327c573986..602d70edbc51b5 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -458,7 +458,7 @@ "/material-ui/guides/right-to-left": "Right-to-left support", "/material-ui/guides/shadow-dom": "Shadow DOM", "/material-ui/guides/nextjs": "Next.js integration", - "/material-ui/guides/material-3-components": "Material 3 components", + "/material-ui/guides/material-3-components": "M3 components", "/material-ui/experimental-api": "Experimental APIs", "/material-ui/experimental-api/classname-generator": "ClassName generator", "CSS theme variables": "CSS theme variables", diff --git a/packages/mui-material-next/CONTRIBUTING.md b/packages/mui-material-next/CONTRIBUTING.md index 884e55c27b93b6..de6a9e7132fb68 100644 --- a/packages/mui-material-next/CONTRIBUTING.md +++ b/packages/mui-material-next/CONTRIBUTING.md @@ -18,7 +18,7 @@ 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 3 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 +5. Implement M3 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-3-slider) 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. @@ -27,7 +27,7 @@ If the issue doesn't exist, create it, name it `[][material-next] - Except for the first step, there's no particular order to follow, but the proposed order has provided the best experience so far - For every step, checking the components that are already in `material-next` will be really helpful - Try to avoid breaking changes, keeping the component's API the same: - - An exception to this is to use Material 3 nomenclature and naming conventions, even if it would be a breaking change. + - An exception to this is to use M3 nomenclature and naming conventions, even if it would be a breaking change. - If breaking changes are inevitable, then document them right away in `/packages/mui-material-next/migration.md` and add the `breaking change` label to your PR. - Divide the work in whatever way makes more sense. One PR for a few steps or one PR for each step, however keep in mind that smaller pull requests will be reviewed and merged faster - Let everyone know what you're working on so we can keep the work coordinated and avoid overlap diff --git a/packages/mui-material-next/README.md b/packages/mui-material-next/README.md index ca29c9adb30dc7..ed674c24fda2a9 100644 --- a/packages/mui-material-next/README.md +++ b/packages/mui-material-next/README.md @@ -10,7 +10,7 @@ Material UI v6's notable changes compared to v5 are: - Built using [@mui/base](https://mui.com/base-ui/getting-started/overview/) - Built with TypeScript. -- Implement [Material 3](https://m3.material.io/) (Material Design 3). +- Implement [M3](https://m3.material.io/) (Material Design 3). For migration steps when upgrading from v5, follow the [migration guide](/packages/mui-material-next/migration.md). diff --git a/packages/mui-material-next/migration.md b/packages/mui-material-next/migration.md index c23168afab94c8..28e5c0416a8f62 100644 --- a/packages/mui-material-next/migration.md +++ b/packages/mui-material-next/migration.md @@ -361,7 +361,7 @@ If you are using the `thumb` or `valueLabel` Slider slots, then make sure the co ``` -This is required in v6 as it's used to apply the overlap styles to these slots. For more info take a look into [Material 3's Slider overlapping handles guidelines](https://m3.material.io/components/sliders/guidelines#ad5ceb95-a690-4ddd-8243-53a8e13bdab6). +This is required in v6 as it's used to apply the overlap styles to these slots. For more info take a look into [M3's Slider overlapping handles guidelines](https://m3.material.io/components/sliders/guidelines#ad5ceb95-a690-4ddd-8243-53a8e13bdab6). ## Divider From 8b83c4f65e0bd0a5fe35b947644a239754016615 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Fri, 2 Feb 2024 14:15:23 -0600 Subject: [PATCH 03/19] prettier --- docs/src/components/productMaterial/MaterialEnd.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/src/components/productMaterial/MaterialEnd.tsx b/docs/src/components/productMaterial/MaterialEnd.tsx index 9f0402ac0be6fc..fb2a270a5bc262 100644 --- a/docs/src/components/productMaterial/MaterialEnd.tsx +++ b/docs/src/components/productMaterial/MaterialEnd.tsx @@ -71,7 +71,8 @@ export default function MaterialEnd() { Does it support Material Design 3? - The adoption of Material Design 3 is tentatively planned for Material UI v7. See the{' '} + The adoption of Material Design 3 is tentatively planned for Material UI v7. See + the{' '} the release schedule {' '} From d8ae436834f4033b39d2b70b0647fd626cebed8a Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Fri, 2 Feb 2024 14:17:02 -0600 Subject: [PATCH 04/19] MD3 --- docs/data/material/components/badges/badges.md | 2 +- docs/data/material/components/button-group/button-group.md | 2 +- docs/data/material/components/buttons/buttons.md | 2 +- docs/data/material/components/chips/chips.md | 2 +- docs/data/material/components/dividers/dividers.md | 2 +- docs/data/material/components/progress/progress.md | 2 +- docs/data/material/components/slider/slider.md | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/data/material/components/badges/badges.md b/docs/data/material/components/badges/badges.md index 300f5619752bb4..c92c9b90b995b4 100644 --- a/docs/data/material/components/badges/badges.md +++ b/docs/data/material/components/badges/badges.md @@ -85,4 +85,4 @@ import Badge from '@mui/material-next/Badge'; {{"demo": "BadgeMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}} -To learn more about Material UI's MD3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). +To learn more about Material UI's M3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). diff --git a/docs/data/material/components/button-group/button-group.md b/docs/data/material/components/button-group/button-group.md index 714c1220fe1530..73f026b74dd4dd 100644 --- a/docs/data/material/components/button-group/button-group.md +++ b/docs/data/material/components/button-group/button-group.md @@ -67,4 +67,4 @@ import ButtonGroup from '@mui/material-next/ButtonGroup'; {{"demo": "ButtonGroupMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}} -To learn more about Material UI's MD3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). +To learn more about Material UI's M3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md index ea7efb97060b6f..0fc1361d6b3144 100644 --- a/docs/data/material/components/buttons/buttons.md +++ b/docs/data/material/components/buttons/buttons.md @@ -210,4 +210,4 @@ import Button from '@mui/material-next/Button'; {{"demo": "ButtonMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}} -To learn more about Material UI's MD3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). +To learn more about Material UI's M3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). diff --git a/docs/data/material/components/chips/chips.md b/docs/data/material/components/chips/chips.md index d8340b278cbe37..848d4381db46f2 100644 --- a/docs/data/material/components/chips/chips.md +++ b/docs/data/material/components/chips/chips.md @@ -110,7 +110,7 @@ import Chip from '@mui/material-next/Chip'; {{"demo": "ChipMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}} -To learn more about Material UI's MD3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). +To learn more about Material UI's M3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). ## Accessibility diff --git a/docs/data/material/components/dividers/dividers.md b/docs/data/material/components/dividers/dividers.md index e8554603a31865..ec36d7a1c12296 100644 --- a/docs/data/material/components/dividers/dividers.md +++ b/docs/data/material/components/dividers/dividers.md @@ -104,4 +104,4 @@ import Divider from '@mui/material-next/Divider'; {{"demo": "DividerMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}} -To learn more about Material UI's MD3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). +To learn more about Material UI's M3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). diff --git a/docs/data/material/components/progress/progress.md b/docs/data/material/components/progress/progress.md index b4dc6089367fd2..ce23277fddb346 100644 --- a/docs/data/material/components/progress/progress.md +++ b/docs/data/material/components/progress/progress.md @@ -165,4 +165,4 @@ import LinearProgress from '@mui/material-next/LinearProgress'; {{"demo": "ProgressMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}} -To learn more about Material UI's MD3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). +To learn more about Material UI's M3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). diff --git a/docs/data/material/components/slider/slider.md b/docs/data/material/components/slider/slider.md index 7daf16b3719481..55d8e737b0acc8 100644 --- a/docs/data/material/components/slider/slider.md +++ b/docs/data/material/components/slider/slider.md @@ -178,4 +178,4 @@ import Slider from '@mui/material-next/Slider'; {{"demo": "SliderMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}} -To learn more about Material UI's MD3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). +To learn more about Material UI's M3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/). From ac315e1b356a8d3384775f51e8baadec107bd1fa Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Fri, 2 Feb 2024 14:30:50 -0600 Subject: [PATCH 05/19] material-next readme, i18n --- docs/pages/blog/mui-product-comparison.md | 2 +- docs/translations/translations.json | 2 +- packages/mui-material-next/README.md | 14 +++----------- 3 files changed, 5 insertions(+), 13 deletions(-) diff --git a/docs/pages/blog/mui-product-comparison.md b/docs/pages/blog/mui-product-comparison.md index 3d52305e8f850d..1ad8176d78d0c9 100644 --- a/docs/pages/blog/mui-product-comparison.md +++ b/docs/pages/blog/mui-product-comparison.md @@ -49,7 +49,7 @@ Get started in the [Material UI docs](/material-ui/getting-started/). #### Key features -- **Material Design:** Your app will look and feel excellent by default, thanks to our meticulous implementation of Material Design (currently MD2; Material You is on the way). +- **Material Design:** Your app will look and feel excellent by default, thanks to our meticulous implementation of Material Design (currently M2; M3 is on the way). - **Comprehensiveness:** With over 50 foundational components and counting, you've got everything you need to ship new features fast. - **Maturity:** Material UI's age and maturity rival that of React itself, with its origins spanning all the way back to 2014. - **Community:** Over 2,500 open-source contributors have made this library what it is today. diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 602d70edbc51b5..da0db93e4bc134 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -458,7 +458,7 @@ "/material-ui/guides/right-to-left": "Right-to-left support", "/material-ui/guides/shadow-dom": "Shadow DOM", "/material-ui/guides/nextjs": "Next.js integration", - "/material-ui/guides/material-3-components": "M3 components", + "/material-ui/guides/material-3-components": "Material Design 3 components", "/material-ui/experimental-api": "Experimental APIs", "/material-ui/experimental-api/classname-generator": "ClassName generator", "CSS theme variables": "CSS theme variables", diff --git a/packages/mui-material-next/README.md b/packages/mui-material-next/README.md index ed674c24fda2a9..3873ce85ca4d45 100644 --- a/packages/mui-material-next/README.md +++ b/packages/mui-material-next/README.md @@ -1,18 +1,10 @@ # @mui/material-next -[Material Design 3](https://m3.material.io/) components built using [@mui/base](https://mui.com/base-ui/getting-started/overview/). +[Material Design 3](https://m3.material.io/) components built using [`@mui/base`](https://mui.com/base-ui/getting-started/overview/) with TypeScript. -This package is a nursery for components that will ultimately replace the @mui/material ones. +This package is a nursery for components that will ultimately replace those found in `@mui/material`. -## Material UI v6 changes - -Material UI v6's notable changes compared to v5 are: - -- Built using [@mui/base](https://mui.com/base-ui/getting-started/overview/) -- Built with TypeScript. -- Implement [M3](https://m3.material.io/) (Material Design 3). - -For migration steps when upgrading from v5, follow the [migration guide](/packages/mui-material-next/migration.md). +Follow the [migration guide](/packages/mui-material-next/migration.md) to migrate from `@mui/material` to `@mui/material-next`. ## Contributing From 0c7159f264f0dbe86fb4dc107d0e2ab3fbc642ee Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Fri, 2 Feb 2024 14:33:11 -0600 Subject: [PATCH 06/19] nbsp --- .../guides/material-3-components/material-3-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/guides/material-3-components/material-3-components.md b/docs/data/material/guides/material-3-components/material-3-components.md index d34e601ec22e44..23348d9f73f948 100644 --- a/docs/data/material/guides/material-3-components/material-3-components.md +++ b/docs/data/material/guides/material-3-components/material-3-components.md @@ -2,7 +2,7 @@

Try out Material UI's implementation of M3 and learn how to contribute to the project.

-## Material UI and M3 +## Material UI and M3 Material Design 3 (M3), also referred to as [Material You](https://m3.material.io), is the latest version of Google's design system. The primary Material UI package (`@mui/material`) currently implements Material Design 2. From a286dd9ff54a5378ca2654f5921729f1503fa7ae Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Fri, 2 Feb 2024 14:38:43 -0600 Subject: [PATCH 07/19] migration guide --- packages/mui-material-next/migration.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/mui-material-next/migration.md b/packages/mui-material-next/migration.md index 28e5c0416a8f62..9ea4a47aebdbaf 100644 --- a/packages/mui-material-next/migration.md +++ b/packages/mui-material-next/migration.md @@ -1,18 +1,18 @@ # Migration -This is a reference guide on how to migrate from Material UI v5 to v6. +This is a reference guide on how to migrate from @mui/material to @mui/material-next. ## Breaking changes: components -This section lists all breaking changes related to components in v6 and how to address them. +This section lists all breaking changes related to Material Design 3 (M3) components and how to address them. ## Overarching changes -These are the changes that apply to all components +These are the changes that apply to all components. ### Remove `components` and `componentsProps` props -The deprecated `components` and `componentsProps` props are removed in v6. +The deprecated `components` and `componentsProps` props are removed in `@mui/material-next`. If you were using these, then you can use `slots` and `slotProps` props instead, which have the same functionality and API. Here's an example of the change using the Badge component: @@ -299,10 +299,10 @@ The following example replaces the `MuiChip-filledPrimary` class using `MuiChip- The `skipFocusWhenDisabled` prop was replaced with `focusableWhenDisabled`, which is `false` by default. Because of this, the default behavior changed: -- In v5, disabled chips were focusable by default -- In v6, disabled chips are not focusable by default +- In `@mui/material`, disabled chips are focusable by default +- In `@mui/material-next`, disabled chips are _not_ focusable by default -If you were using the `skipFocusWhenDisabled` prop to make disabled chips not focusable (which is v6's default behavior), then you can remove the prop as follows: +If you were using the `skipFocusWhenDisabled` prop to make disabled chips not focusable (which is `@mui/material-next`'s default behavior), then you can remove the prop as follows: ```diff ``` -If you wish to maintain v5's default behavior, then you can achieve that as follows: +If you wish to maintain @mui/material's default behavior, then you can achieve that as follows: ```diff ``` -This is required in v6 as it's used to apply the overlap styles to these slots. For more info take a look into [M3's Slider overlapping handles guidelines](https://m3.material.io/components/sliders/guidelines#ad5ceb95-a690-4ddd-8243-53a8e13bdab6). +This is required in `@mui/material-next` as it's used to apply the overlap styles to these slots. For more info take a look into [M3's Slider overlapping handles guidelines](https://m3.material.io/components/sliders/guidelines#ad5ceb95-a690-4ddd-8243-53a8e13bdab6). ## Divider From e47200d81ac8c4f5a8751182299f33610a6381c1 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Fri, 2 Feb 2024 14:42:08 -0600 Subject: [PATCH 08/19] one more v6 --- packages/mui-material-next/migration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material-next/migration.md b/packages/mui-material-next/migration.md index 9ea4a47aebdbaf..f409872beebee7 100644 --- a/packages/mui-material-next/migration.md +++ b/packages/mui-material-next/migration.md @@ -30,7 +30,7 @@ Here's an example of the change using the Badge component: ### Remove composed CSS classes and `styleOverrides` keys -Classes composed of two or more existing classes are removed in v6. +Classes composed of two or more existing classes are removed in `@mui/material-next`. For example, the `MuiChip-filledPrimary` class is removed in favor of the `MuiChip-filled` and `MuiChip-colorPrimary` classes. Composed `styleOverrides` keys are also removed. Following the example above, the chip component's `filledPrimary` `styleOverrides` key is removed. From cec4cf6d213e386bc9845791993549edb0d09e65 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Fri, 2 Feb 2024 14:53:59 -0600 Subject: [PATCH 09/19] fix button demo link --- .../guides/material-3-components/material-3-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/guides/material-3-components/material-3-components.md b/docs/data/material/guides/material-3-components/material-3-components.md index 23348d9f73f948..5c302d535d0819 100644 --- a/docs/data/material/guides/material-3-components/material-3-components.md +++ b/docs/data/material/guides/material-3-components/material-3-components.md @@ -106,7 +106,7 @@ To install Roboto through the Google Web Fonts CDN, add the following code insid After [installation](/material-ui/guides/material-3-components/#installation), you can import any component from `@mui/material-next` just as you would do with the stable Material UI package. -{{"demo": "M3ButtonUsage.js"}} +{{"demo": "MD3ButtonUsage.js"}} :::warning If your application uses the `ThemeProvider` from `@mui/material`, you must include `CssVarsProvider` from `@mui/material-next` in the tree above the M3 components. From 27e39bf09f01f189ab1a6ac56a409c7f0e9dca82 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Fri, 2 Feb 2024 14:55:54 -0600 Subject: [PATCH 10/19] fix theming demo link --- .../guides/material-3-components/material-3-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/guides/material-3-components/material-3-components.md b/docs/data/material/guides/material-3-components/material-3-components.md index 5c302d535d0819..7451249b8b7052 100644 --- a/docs/data/material/guides/material-3-components/material-3-components.md +++ b/docs/data/material/guides/material-3-components/material-3-components.md @@ -121,7 +121,7 @@ Use the `extendTheme` function to modify the default theme. The theme structure follows [M3 specifications](https://m3.material.io/styles/color/system/overview). For example, if you wanted to modify the primary color, you would provide the [color tones](https://m3.material.io/styles/color/system/how-the-system-works#e1e92a3b-8702-46b6-8132-58321aa600bd) via `ref.palette.primary`: -{{"demo": "M3Theming.js"}} +{{"demo": "MD3Theming.js"}} :::success You can use Material Design's [Figma Material Theme Builder](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder) plugin to generate palette tones. From c418e757b8cf49f26bce0af111716302e16309f1 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Mon, 12 Feb 2024 15:01:30 -0600 Subject: [PATCH 11/19] material you comments --- packages/mui-material-next/src/Button/Button.tsx | 2 +- packages/mui-material-next/src/Chip/Chip.test.tsx | 2 +- packages/mui-material-next/src/Select/Select.d.ts | 2 +- packages/mui-material-next/src/Select/Select.js | 2 +- packages/mui-material-next/src/Select/Select.spec.tsx | 2 +- packages/mui-material-next/src/Select/Select.test.js | 2 +- packages/mui-material-next/src/styles/extendTheme.ts | 4 ++-- 7 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/mui-material-next/src/Button/Button.tsx b/packages/mui-material-next/src/Button/Button.tsx index b73377b731947f..724927f3ff6727 100644 --- a/packages/mui-material-next/src/Button/Button.tsx +++ b/packages/mui-material-next/src/Button/Button.tsx @@ -290,7 +290,7 @@ export const ButtonRoot = styled(ButtonBase, { padding: '9px 23px', }), '--Button-gap': '0.5rem', - // Sizes are not specified in Material You, this need to be revised + // Sizes are not specified in Material Design 3, this need to be revised ...(ownerState.size === 'small' && { '--Button-gap': '0.45rem', fontSize: theme.typography.pxToRem(theme.sys.typescale.label.large.size - 1), // the pxToRem should be moved to typescale in the future diff --git a/packages/mui-material-next/src/Chip/Chip.test.tsx b/packages/mui-material-next/src/Chip/Chip.test.tsx index 5656832e68678d..a4802f6ec3b839 100644 --- a/packages/mui-material-next/src/Chip/Chip.test.tsx +++ b/packages/mui-material-next/src/Chip/Chip.test.tsx @@ -20,7 +20,7 @@ import { CssVarsProvider, extendTheme } from '@mui/material-next/styles'; import CheckBox from '../internal/svg-icons/CheckBox'; import { ChipProps } from './Chip.types'; -// TODO: remove after migrating SvgICon to support Material You colors +// TODO: remove after migrating SvgICon to support Material Design 3 colors const MaterialV5DefaultTheme = createTheme(); describe('', () => { diff --git a/packages/mui-material-next/src/Select/Select.d.ts b/packages/mui-material-next/src/Select/Select.d.ts index 914afdb2376c95..d562bab14eaeba 100644 --- a/packages/mui-material-next/src/Select/Select.d.ts +++ b/packages/mui-material-next/src/Select/Select.d.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -// TODO v6: replace material Theme with material-next Theme when Material You design is implemented +// TODO v6: replace material Theme with material-next Theme when Material Design 3 is implemented import { InternalStandardProps as StandardProps, Theme } from '@mui/material'; // TODO v6: replace with material-next Input components props https://github.com/mui/material-ui/pull/39188#discussion_r1339645381 import { InputProps } from '@mui/material/Input'; diff --git a/packages/mui-material-next/src/Select/Select.js b/packages/mui-material-next/src/Select/Select.js index d9d44724534f5a..4c637ca8942744 100644 --- a/packages/mui-material-next/src/Select/Select.js +++ b/packages/mui-material-next/src/Select/Select.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { deepmerge, unstable_useForkRef as useForkRef } from '@mui/utils'; import NativeSelectInput from '@mui/material/NativeSelect/NativeSelectInput'; -// TODO v6: Remove Input component after implementing Material You design +// TODO v6: Remove Input component after implementing Material Design 3 import Input from '@mui/material/Input'; // TODO v6: replace with material-next FilledInput when available https://github.com/mui/material-ui/issues/39052 import FilledInput from '@mui/material/FilledInput'; diff --git a/packages/mui-material-next/src/Select/Select.spec.tsx b/packages/mui-material-next/src/Select/Select.spec.tsx index 0d9dc50b093893..80bc65da3c3936 100644 --- a/packages/mui-material-next/src/Select/Select.spec.tsx +++ b/packages/mui-material-next/src/Select/Select.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; // TODO v6: replace with material-next Menu when available https://github.com/mui/material-ui/pull/38934 import MenuItem from '@mui/material/MenuItem'; -// TODO v6: replace with material-next's extendTheme when implementing Material You design +// TODO v6: replace with material-next's extendTheme when implementing Material Design 3 import { createTheme } from '@mui/material/styles'; import Select, { SelectChangeEvent } from '@mui/material-next/Select'; diff --git a/packages/mui-material-next/src/Select/Select.test.js b/packages/mui-material-next/src/Select/Select.test.js index 3a2fb9f1a52c5c..ee1a82a5147bf3 100644 --- a/packages/mui-material-next/src/Select/Select.test.js +++ b/packages/mui-material-next/src/Select/Select.test.js @@ -10,7 +10,7 @@ import { screen, } from '@mui-internal/test-utils'; import { nativeSelectClasses } from '@mui/material/NativeSelect'; -// TODO v6: replace with material-next's extendTheme and provider when implementing Material You design +// TODO v6: replace with material-next's extendTheme and provider when implementing Material Design 3 import { createTheme, ThemeProvider } from '@mui/material/styles'; // TODO v6: replace with material-next Menu components when available https://github.com/mui/material-ui/pull/38934 import MenuItem, { menuItemClasses } from '@mui/material/MenuItem'; diff --git a/packages/mui-material-next/src/styles/extendTheme.ts b/packages/mui-material-next/src/styles/extendTheme.ts index 790ce6a791c4a4..5729bf7c83a17d 100644 --- a/packages/mui-material-next/src/styles/extendTheme.ts +++ b/packages/mui-material-next/src/styles/extendTheme.ts @@ -84,7 +84,7 @@ export default function extendTheme(options: CssVarsThemeOptions = {}, ...args: ...muiTheme } = createThemeWithoutVars({ ...input, - // Material You specific tokens + // Material Design 3 specific tokens // @ts-ignore - it's fine, everything that is not supported will be spread useMaterialYou: true, ref: { @@ -416,7 +416,7 @@ export default function extendTheme(options: CssVarsThemeOptions = {}, ...args: } }); - // Material You specific channels + // Material Design 3 specific channels if (key === 'light') { colorSchemeSys.color.primaryChannel = colorChannel(colorSchemeRef.palette.primary['40']); colorSchemeSys.color.onPrimaryChannel = colorChannel(colorSchemeRef.palette.primary['100']); From 9b8bdbfbbd5b188da252b431b9ec023151304c6e Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Mon, 12 Feb 2024 15:08:44 -0600 Subject: [PATCH 12/19] cleanup --- docs/pages/experiments/md3/buttons.tsx | 2 +- packages/mui-material-next/src/Chip/Chip.test.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/experiments/md3/buttons.tsx b/docs/pages/experiments/md3/buttons.tsx index 2ccfc177c59306..d36e8616b41e6c 100644 --- a/docs/pages/experiments/md3/buttons.tsx +++ b/docs/pages/experiments/md3/buttons.tsx @@ -199,7 +199,7 @@ function DemoComponents() { ); } -// custom MD3 theme +// custom M3 theme const cssVarsTheme = extendTheme({ ref: { palette: customPalette, diff --git a/packages/mui-material-next/src/Chip/Chip.test.tsx b/packages/mui-material-next/src/Chip/Chip.test.tsx index 906fd8d45aa462..a4802f6ec3b839 100644 --- a/packages/mui-material-next/src/Chip/Chip.test.tsx +++ b/packages/mui-material-next/src/Chip/Chip.test.tsx @@ -32,7 +32,7 @@ describe('', () => { ({ addListener: () => {}, removeListener: () => {}, - }) as unknown as MediaQueryList; + } as unknown as MediaQueryList); }); afterEach(() => { window.matchMedia = originalMatchmedia; From 9b69ec4dff9ca495ee962213274a90895e03f2ba Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Mon, 12 Feb 2024 15:24:28 -0600 Subject: [PATCH 13/19] m2 / m3 --- packages/mui-material-next/src/styles/extendTheme.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-material-next/src/styles/extendTheme.test.ts b/packages/mui-material-next/src/styles/extendTheme.test.ts index 421df8ba06d6f4..b72a952fe7fc2b 100644 --- a/packages/mui-material-next/src/styles/extendTheme.test.ts +++ b/packages/mui-material-next/src/styles/extendTheme.test.ts @@ -15,14 +15,14 @@ describe('extendTheme', () => { it('should have the vars object', () => { const theme = extendTheme(); const keys = [ - // MD2 specific tokens + // M2 specific tokens 'palette', 'shadows', 'zIndex', 'opacity', 'overlays', 'shape', - // MD3 specific tokens + // M3 specific tokens 'ref', 'sys', ]; From 1bb82b3e51e7d2360d8290119dace41945c2fc3d Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 14 Feb 2024 09:09:11 -0600 Subject: [PATCH 14/19] cmon prettier --- packages/mui-material-next/src/Chip/Chip.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material-next/src/Chip/Chip.test.tsx b/packages/mui-material-next/src/Chip/Chip.test.tsx index a4802f6ec3b839..63d805b4150ca4 100644 --- a/packages/mui-material-next/src/Chip/Chip.test.tsx +++ b/packages/mui-material-next/src/Chip/Chip.test.tsx @@ -20,7 +20,7 @@ import { CssVarsProvider, extendTheme } from '@mui/material-next/styles'; import CheckBox from '../internal/svg-icons/CheckBox'; import { ChipProps } from './Chip.types'; -// TODO: remove after migrating SvgICon to support Material Design 3 colors +// TODO: remove after migrating SvgICon to support M3 colors const MaterialV5DefaultTheme = createTheme(); describe('', () => { From d27e890c6c834b75e5ed2e92d493137f3324114b Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 14 Feb 2024 09:14:47 -0600 Subject: [PATCH 15/19] revert Chip test --- packages/mui-material-next/src/Chip/Chip.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-material-next/src/Chip/Chip.test.tsx b/packages/mui-material-next/src/Chip/Chip.test.tsx index 63d805b4150ca4..3bb4afb4919974 100644 --- a/packages/mui-material-next/src/Chip/Chip.test.tsx +++ b/packages/mui-material-next/src/Chip/Chip.test.tsx @@ -20,7 +20,7 @@ import { CssVarsProvider, extendTheme } from '@mui/material-next/styles'; import CheckBox from '../internal/svg-icons/CheckBox'; import { ChipProps } from './Chip.types'; -// TODO: remove after migrating SvgICon to support M3 colors +// TODO: remove after migrating SvgICon to support Material You colors const MaterialV5DefaultTheme = createTheme(); describe('', () => { @@ -32,7 +32,7 @@ describe('', () => { ({ addListener: () => {}, removeListener: () => {}, - } as unknown as MediaQueryList); + }) as unknown as MediaQueryList; }); afterEach(() => { window.matchMedia = originalMatchmedia; From 14f9d37f8568a62587c7af81336992e6ebd90f51 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 14 Feb 2024 09:24:46 -0600 Subject: [PATCH 16/19] docs:i18n --- docs/translations/translations.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/translations/translations.json b/docs/translations/translations.json index ece18d5bbaa4db..c758a0a2daf199 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -445,7 +445,7 @@ "/material-ui/customization/z-index": "z-index", "/material-ui/customization/transitions": "Transitions", "/material-ui/guides": "How-to guides", - "/material-ui/guides/material-3-components": "Material 3 components", + "/material-ui/guides/material-3-components": "Material Design 3 components", "/material-ui/guides/minimizing-bundle-size": "Minimizing bundle size", "/material-ui/guides/server-rendering": "Server rendering", "/material-ui/guides/responsive-ui": "Responsive UI", From 5369d7e88d470695692de9058d56fbdfabcf573d Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 14 Feb 2024 19:36:52 -0600 Subject: [PATCH 17/19] Chip test --- packages/mui-material-next/src/Chip/Chip.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-material-next/src/Chip/Chip.test.tsx b/packages/mui-material-next/src/Chip/Chip.test.tsx index 3bb4afb4919974..95717a4984adb0 100644 --- a/packages/mui-material-next/src/Chip/Chip.test.tsx +++ b/packages/mui-material-next/src/Chip/Chip.test.tsx @@ -20,7 +20,7 @@ import { CssVarsProvider, extendTheme } from '@mui/material-next/styles'; import CheckBox from '../internal/svg-icons/CheckBox'; import { ChipProps } from './Chip.types'; -// TODO: remove after migrating SvgICon to support Material You colors +// TODO: remove after migrating SvgIcon to support Material Design 3 colors const MaterialV5DefaultTheme = createTheme(); describe('', () => { @@ -32,7 +32,7 @@ describe('', () => { ({ addListener: () => {}, removeListener: () => {}, - }) as unknown as MediaQueryList; + } as unknown as MediaQueryList); }); afterEach(() => { window.matchMedia = originalMatchmedia; From 70eac846890b52f740c3f95abe40472475abcf92 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 14 Feb 2024 19:40:01 -0600 Subject: [PATCH 18/19] revert weird prettier thing --- packages/mui-material-next/src/Chip/Chip.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material-next/src/Chip/Chip.test.tsx b/packages/mui-material-next/src/Chip/Chip.test.tsx index 95717a4984adb0..6feffe64d03cca 100644 --- a/packages/mui-material-next/src/Chip/Chip.test.tsx +++ b/packages/mui-material-next/src/Chip/Chip.test.tsx @@ -32,7 +32,7 @@ describe('', () => { ({ addListener: () => {}, removeListener: () => {}, - } as unknown as MediaQueryList); + }) as unknown as MediaQueryList; }); afterEach(() => { window.matchMedia = originalMatchmedia; From b9d21c7b6024946a74f418420c36012c81104239 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 14 Feb 2024 20:04:59 -0600 Subject: [PATCH 19/19] nbsp --- .../guides/material-3-components/material-3-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/guides/material-3-components/material-3-components.md b/docs/data/material/guides/material-3-components/material-3-components.md index 22f93b6a652751..189de8bdfacb69 100644 --- a/docs/data/material/guides/material-3-components/material-3-components.md +++ b/docs/data/material/guides/material-3-components/material-3-components.md @@ -129,5 +129,5 @@ You can use Material Design's [Figma Material Theme Builder](https://www.figma.c ## Stable release -The stable release of the M3 components is tentatively targeted for Q4 2024 in Material UI v7. +The stable release of the M3 components is tentatively targeted for Q4 2024 in Material UI v7. To follow the progress or contribute to the project, check out [the M3 GitHub issue](https://github.com/mui/material-ui/issues/29345).