Adopt Material Design 3 / Material You

[NawarA]

I'm sure you're tracking the pulse of material design standards like me and others. That being said, material ui version 3 is out.

We should track MUI being migrated from Material Design v2 to Material Design version v3.

I'm sure they'll be a few tickets that come out requesting the adoption, so I figured this ticket could act as a stub and catch-all for MUI support for the design language's latest update.

Cheers

References

• MD 3 Docs https://m3.material.io/
• MD 2 Docs https://m2.material.io/
• Ionic's discussion on the problem feat: Add Material Design 3 (Material You) support ionic-team/ionic-framework#24282
• Vuetify's discussion on the problem Material Design 3 (Material You) vuetifyjs/vuetify#14332
• Quasar's discussion on the problem Adopt Material Design 3 specs quasarframework/quasar#11139
• Google's discussion on the problem Implement Material You material-components/material-web#2441
• The docs traffic on MD 3 vs MD 2: https://www.similarweb.com/website/m3.material.io/?competitors=material.io
• Material Design traction on Figma MD 2 Figma file vs. MD 3 Figma file
  • January 12, 2022: MD2 4.8k stars 256k copies, MD3 1.9k stars 39.6k copies
  • March 24, 2022: MD2 5.6k stars 277k copies, MD3 4.2k stars 91k copies
  • August 23, 2022: MD2 6.5k stars 307k copies, MD3 5.8k stars 132k copies
  • October 6, 2022: MD2 6.8k stars 315k copies, MD3 6.6k stars 155k copies
  • December 20, 2022: MD2 7.2k stars 327k copies, MD3 8.9k stars 214k copies
• React Native Paper: Material Design 3 callstack/react-native-paper#3126
• Flutter Update text fields to support Material 3 flutter/flutter#103537
• Angular Material: feat(Material): Material You Support angular/components#22738

Design kits

• [figma] Add support for Material Design v3 mui-design-kits#135
• Material Design v3 mui-design-kits#103

Real adoptions of Material You in the wild?

Desktop

• https://relay.material.io/
• https://httpie.io/app feels inspired by it
• Gmail partially, which feels relatively yolo
• Others?

Mobile

• Google Pixel Phones. "Canalys puts Google fifth in U.S. phone market share, with just a 1.7% in Q3 2022." source. It's insignificant. All the other phone manufacturers skin Android, so don't use Material Design 3.
• Others?

Migration

If you wish to contribute, start with the contributing guide

Progress

List of components and their current migration status

✅ Done

• Badges: Playground | Issue | Specs
• Chips: Playground | Issue | Specs
• Circular Progress Indicator: Playground | Issue | Specs
• Common Buttons: Playground | Issue | Specs
• Dividers: Playground | Issue | Specs
• Linear Progress Indicator: Playground | Issue | Specs
• Sliders: Playground | Issue | Specs

⏳ In progress

• List: Issue | Specs
• Menu: Issue | Specs
• Select: Issue | Specs
• Snackbar: Issue | Specs
• Switch: Issue | Specs
• TextField: Issue | Specs
  • InputBase: [InputBase][material-next] Add InputBase component #38372
  • FormControl: [FormControl][material-next] Add FormControl component #38411
• Buttons
  • Button Group (named Segmented Button in the specs): Issue | Specs
  • Icon Button: Issue | Specs

⭐ Ready to take

• Bottom App Bar (Previously included in App Bar)
• Bottom Sheet (Previously included in Drawer)
• Buttons:
  • FAB
  • Extended FAB
• Card
• Dialog
• Navigation Bar (Previously named Bottom Navigation)
• Navigation Drawer (Previously included in Drawer)
• Navigation Rail (Previously Drawer “Mini” variant)
• Search (New component)
• Side sheet (Previously included in Drawer)
• Tab
• Top App Bar (Previously included in App Bar)
• Typography

✋🏼 On hold

• Blocked
  • Autocomplete: Issue | Specs
• Waiting for Base UI’s hook:
  • Checkbox
  • Radio Button
  • Tooltips

[mnajdova]

Thanks for creating the issue. Let's use it as a stub 👌

[jpmtrabbold]

is this being considered?

[cryptoAlgorithm]

Hi, I was about to start my own feature request, but found this. I think material v3 does look way more expressive and vivid than v2, and Google's own material web components is also in the progress of implementing Material You (material-components/material-web#2441).

If nobody wants to take up this task, I can plan and gradually migrate some mui components to material v3 standards. @mnajdova, is there anything blocking that needs to be completed before migration can start? If not, I think we can start with a checklist of components in order of importance and visual difference from material v2 -> v3.

[mnajdova]

Hi, if nobody wants to take up this task, I can plan and gradually migrate some mui components to material v3 standards. @mnajdova, is there anything blocking that needs to be completed before migration can start? If not, I think we can start with a checklist of components in order of importance and visual difference from material v2 -> v3.

It is a breaking change, so I am not sure that we can start with it right away (at least we cannot update the components which are part of @mui/material). We could try to adopt the styles to some of the components that we have inside @mui/material-next - this is our experimental package that depends on @mui/base that we envision will be the replacement for @mui/material v6. In my opinion this should be a good start. @mui-org/core what do you think?

@cryptoAlgorithm feel free to kick off this effort if you want to. Check first which components we already have in the @mui/material-next package and try to experiment with some of those if you want to.

[cryptoAlgorithm]

Ok, great. Maybe this can be introduced as part of the material-ui v6 update? Since by then, material v3 styles should be quite common across sites using material design. We might want to wait and see how Google handles this in their own Material Web Components library, and how they actually look.

[michaldudak]

We could try to adopt the styles to some of the components that we have inside @mui/material-next - this is our experimental package that depends on @mui/base that we envision will be the replacement for @mui/material v6. In my opinion this should be a good start. @mui-org/core what do you think?

Agree. Just note that material-next is our experimental (playground) package. We intend to test different shapes of the API there and introduce breaking changes without notice, so it's not safe to depend on it in production.

[leonardorafael]

Hello my friends, if you need MATERIAL DESIGN 3 how about https://www.beercss.com?