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 ee170ff60ad407..c92c9b90b995b4 100644 --- a/docs/data/material/components/badges/badges.md +++ b/docs/data/material/components/badges/badges.md @@ -74,10 +74,10 @@ 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. +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 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 97ba5869c02eca..73f026b74dd4dd 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 [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"}} -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 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 c72b9061eea1e9..35089bd278cab9 100644 --- a/docs/data/material/components/buttons/buttons.md +++ b/docs/data/material/components/buttons/buttons.md @@ -199,10 +199,10 @@ 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. +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 M3 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 b589b25492fcbd..848d4381db46f2 100644 --- a/docs/data/material/components/chips/chips.md +++ b/docs/data/material/components/chips/chips.md @@ -99,10 +99,10 @@ 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. +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 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 7fa00cf3263bc9..ec36d7a1c12296 100644 --- a/docs/data/material/components/dividers/dividers.md +++ b/docs/data/material/components/dividers/dividers.md @@ -93,10 +93,10 @@ 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. +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 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 438420fca50891..ce23277fddb346 100644 --- a/docs/data/material/components/progress/progress.md +++ b/docs/data/material/components/progress/progress.md @@ -153,10 +153,10 @@ 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. +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 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 5e637904b8ff90..e2ef612eeb4765 100644 --- a/docs/data/material/components/slider/slider.md +++ b/docs/data/material/components/slider/slider.md @@ -168,10 +168,10 @@ 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. +To use the [M3](https://m3.material.io/) version, install the experimental `@mui/material-next` package. ```js import Slider from '@mui/material-next/Slider'; @@ -179,4 +179,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 M3 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 446b425c450b22..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 @@ -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 @@ -109,7 +109,7 @@ After [installation](/material-ui/guides/material-3-components/#installation), y {{"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 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"}} :::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. -To follow the progress or contribute to the project, check out [the Material 3 GitHub issue](https://github.com/mui/material-ui/issues/29345). +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). diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts index 58d683618690c6..f8b1c0914d34cb 100644 --- a/docs/data/material/pages.ts +++ b/docs/data/material/pages.ts @@ -197,7 +197,7 @@ const pages: MuiPage[] = [ children: [ { pathname: '/material-ui/guides/material-3-components', - title: 'Material 3 components', + title: 'Material Design 3 components', newFeature: true, }, { pathname: '/material-ui/guides/minimizing-bundle-size' }, 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/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/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/docs/src/components/productMaterial/MaterialEnd.tsx b/docs/src/components/productMaterial/MaterialEnd.tsx index 22c69b1242ba58..fb2a270a5bc262 100644 --- a/docs/src/components/productMaterial/MaterialEnd.tsx +++ b/docs/src/components/productMaterial/MaterialEnd.tsx @@ -68,10 +68,11 @@ 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/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", diff --git a/packages/mui-material-next/CONTRIBUTING.md b/packages/mui-material-next/CONTRIBUTING.md index 44bdd82f1365a2..de6a9e7132fb68 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)). @@ -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 40f5948e44e8e8..3873ce85ca4d45 100644 --- a/packages/mui-material-next/README.md +++ b/packages/mui-material-next/README.md @@ -1,18 +1,10 @@ # @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/) 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 [Material 3](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 diff --git a/packages/mui-material-next/migration.md b/packages/mui-material-next/migration.md index 1ca0322d107c35..f409872beebee7 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: @@ -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. @@ -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 @@ -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 [Material 3'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 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 3bb4afb4919974..6feffe64d03cca 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.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', ]; 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']);