Adopt Material Design 3 / Material You

NawarA commented 2 years ago

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 https://github.com/ionic-team/ionic-framework/issues/24282
Vuetify's discussion on the problem https://github.com/vuetifyjs/vuetify/issues/14332
Quasar's discussion on the problem https://github.com/quasarframework/quasar/issues/11139
Google's discussion on the problem https://github.com/material-components/material-web/issues/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: https://github.com/callstack/react-native-paper/issues/3126
Flutter https://github.com/flutter/flutter/issues/103537
Angular Material: https://github.com/angular/components/issues/22738

Design kits

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

- [x] Badges: [Playground](https://mui.com/material-ui/react-badge/#material-you-version) | [Issue](https://github.com/mui/material-ui/issues/37835) | [Specs](https://m3.material.io/components/badges/overview) - [x] Chips: [Playground](https://mui.com/material-ui/react-chip/#material-you-version) | [Issue](https://github.com/mui/material-ui/issues/38024) | [Specs](https://m3.material.io/components/chips/overview) - [x] Circular Progress Indicator: [Playground](https://mui.com/material-ui/react-progress/#material-you-version) | [Issue](https://github.com/mui/material-ui/issues/39770) | [Specs](https://m3.material.io/components/progress-indicators/overview) - [x] Common Buttons: [Playground](https://mui.com/material-ui/react-button/#material-you-version) | [Issue](https://github.com/mui/material-ui/pull/34650) | [Specs](https://m3.material.io/components/buttons/overview) - [x] Dividers: [Playground](https://mui.com/material-ui/react-divider/#material-you-version) | [Issue](https://github.com/mui/material-ui/issues/39007) | [Specs](https://m3.material.io/components/divider/overview) - [x] Linear Progress Indicator: [Playground](https://mui.com/material-ui/react-progress/#material-you-version) | [Issue](https://github.com/mui/material-ui/issues/39778) | [Specs](https://m3.material.io/components/progress-indicators/overview) - [x] Sliders: [Playground](https://mui.com/material-ui/react-slider/#material-you-version) | [Issue](https://github.com/mui/material-ui/issues/37527) | [Specs](https://m3.material.io/components/sliders/overview)

⏳ In progress

- [ ] List: [Issue](https://github.com/mui/material-ui/issues/40368) | [Specs](https://m3.material.io/components/lists/overview) - [ ] Menu: [Issue](https://github.com/mui/material-ui/issues/39521) | [Specs](https://m3.material.io/components/menus/overview) - [ ] Select: [Issue](https://github.com/mui/material-ui/issues/38972) | [Specs](https://m3.material.io/components/menus/specs) - [ ] Snackbar: [Issue](https://github.com/mui/material-ui/issues/39207) | [Specs](https://m3.material.io/components/snackbar/overview) - [ ] Switch: [Issue](https://github.com/mui/material-ui/issues/39886) | [Specs](https://m3.material.io/components/switch/overview) - [ ] TextField: [Issue](https://github.com/mui/material-ui/issues/38374) | [Specs](https://m3.material.io/components/text-fields/overview) - [x] InputBase: https://github.com/mui/material-ui/issues/38372 - [x] FormControl: https://github.com/mui/material-ui/issues/38411 - [ ] Buttons - [ ] Button Group (named Segmented Button in the specs): [Issue](https://github.com/mui/material-ui/issues/39686) | [Specs](https://m3.material.io/components/segmented-buttons/overview) - [ ] Icon Button: [Issue](https://github.com/mui/material-ui/issues/39943) | [Specs](https://m3.material.io/components/icon-buttons/overview)

⭐ Ready to take

- [ ] [Bottom App Bar](https://m3.material.io/components/bottom-app-bar/overview) (Previously included in App Bar) - [ ] [Bottom Sheet](https://m3.material.io/components/bottom-sheets/overview) (Previously included in Drawer) - [ ] [Buttons](https://m3.material.io/components/all-buttons): - [ ] [FAB](https://m3.material.io/components/floating-action-button/overview) - [ ] [Extended FAB](https://m3.material.io/components/extended-fab/overview) - [ ] [Card](https://m3.material.io/components/cards/overview) - [ ] [Dialog](https://m3.material.io/components/dialogs/overview) - [ ] [Navigation Bar](https://m3.material.io/components/navigation-bar/overview) (Previously named Bottom Navigation) - [ ] [Navigation Drawer](https://m3.material.io/components/navigation-drawer/overview) (Previously included in Drawer) - [ ] [Navigation Rail](https://m3.material.io/components/navigation-rail/overview) (Previously Drawer “Mini” variant) - [ ] [Search](https://m3.material.io/components/search/overview) (New component) - [ ] [Side sheet](https://m3.material.io/components/side-sheets/overview) (Previously included in Drawer) - [ ] [Tab](https://m3.material.io/components/tabs/overview) - [ ] [Top App Bar](https://m3.material.io/components/top-app-bar/overview) (Previously included in App Bar) - [ ] [Typography](https://m3.material.io/styles/typography/overview)

✋🏼 On hold

- Blocked - [ ] Autocomplete: [Issue](https://github.com/mui/material-ui/issues/39963) | [Specs](https://m3.material.io/components/menus/specs) - Waiting for Base UI’s hook: - [ ] [Checkbox](https://m3.material.io/components/checkbox/overview) - [ ] [Radio Button](https://m3.material.io/components/radio-button/overview) - [ ] [Tooltips](https://m3.material.io/components/tooltips/overview)

singerbj commented 2 months ago

@o-alexandrov, thanks for linking this. Honestly, I wasn't aware of it. It has valuable insights. The community leans towards separate packages and smaller bundle sizes. Having a legacy Material Design 2 package makes sense as an option.

This makes sense to me and will be relatively easy to adapt our company's design system to use the MD2 packages if we need them.

As Material Design goes through its versions in the future, Is there any direction on whether old versions of the design that are made into legacy packages will become deprecated? Are users expected to be on the latest version of the designs to ensure they are getting the proper security/accessibility/defect fixes/updates? Or will all design versions be maintained going forward?

Basically I am wondering if my company needs to plan to switch to material design 3 components at some point in the future.

DiegoAndai commented 2 months ago

Basically I am wondering if my company needs to plan to switch to material design 3 components at some point in the future.

My answer would be essentially the same: It still needs to be decided. The "legacy" package is an option, but I don't know whether that package would be maintained or deprecated and eventually removed. I can say that we want to provide the best experience for current users so they can continue shipping their apps with as little friction as possible.

Your feedback (and anyone in a similar situation) is key to coming up with the best solution. If you could answer these questions, that would be great:

How did you customize the components?
How much customization does your app have? Is it closer to a custom design system, or is it closer to a Material Design 2 look?
If it's closer or exactly a Material Design 2 look, are you (or your team) okay with it? Or do you have plans to move to a custom look? Or moving away from Material Design?
What are your (or your team's) opinions on Material Design 3? Would you like or be willing to adopt it?

Feel free to reply in a comment. If anyone is willing, we can also schedule a call to discuss these questions. If you're interested, please reach out to diego@mui.com. This would be very helpful in determining the best path forward.

I'm sorry I don't have any more information at the moment. We're working on getting v6 ready, but soon, we will begin planning v7 and how to deal with Material Design's different versions.

singerbj commented 2 months ago

Makes sense! Just want to get as much information as possible. It still feels "early" to me, but I will note down your email in case we do wish to reach out directly! Thanks!

Here's some answers to your questions:

How did you customize the components?

We don't have many customizations at all actually, we mainly "forward" the components on in our own package. We set it up this way with the idea that if we did want to customize anything, we could. One thing we did do was limit the exposure of the documentation of props for each component to ensure that devs use the components properly - but thats more of a docs thing that a component thing.

How much customization does your app have? Is it closer to a custom design system, or is it closer to a Material Design 2 look?

It is almost exactly a MD2 look with some minor modifications basically all modified via a theme.

If it's closer or exactly a Material Design 2 look, are you (or your team) okay with it? Or do you have plans to move to a custom look? Or moving away from Material Design? What are your (or your team's) opinions on Material Design 3? Would you like or be willing to adopt it?

Not sure on either of these yet. We as the "UX Dev Team" focus mainly on maintaining our library and design system docs and are guided by our UX design team on decisions like this. A big change might be detrimental to our company efforts of UX alignment, but I could also see our design team not wanting to get stuck in the past. There are some complexities too, one being that we recently introduced a complimentary angular library based on angular-material. I will have to discuss further with our greater UX team - I planned to anyway, I just happened to start here to gather information :)

fiorins commented 1 month ago

The Material 3 components guide has been released: https://mui.com/material-ui/guides/material-3-components/

That link is broken

DiegoAndai commented 3 weeks ago

Hey, @fiorins! Yes, sorry for the inconvenience. The guide has been pulled down while we determine the best approach for delivering the Material 3 components in a backward-compatible way. We should have updates on this by June. It will take until June because right now we're focusing on the development of v6. But I'll comment on this issue as soon as possible.

NawarA commented 3 weeks ago

Not sure, if it's helpful to mention, but I overhauled our MUI5 to Material 3 manually.

I did it by

Creating a MUI 3 theme, and copying the palette into my theme.js file, which also imports Roboto-Flex, and sets up the MUI 3 typography variants (headline, display, title, body, label, etc), sets up the correct "shapes" (for border radiuses) and "motion" (for transitions).
I created each component by following the MUI 3 specs.
I used Box a lot, lol

The key is the theme is comprehensive, and your MUI 3 Component specs follow 1-to-1 with the MUI 3 specs. I also have a dark theme, which looks dope, but I dont currently have enabled on my site.

Here's my site for reference on MUI 5 easily migrated to MUI 3:

https://bytez.com/

bpappin commented 1 day ago

Lots of comments here about what kind of traction M3 will get , or if its too early for M3, so I'd like to just jump in here. My own team/peers are exclusively M3 now, and have been for at least a year, plus some.

It's pretty important for us, that native and mui screens look at least somewhat similar.

FYI in native code, the M3 is almost a drop in replacement for the most part. We simply use a Button, and depending on which version we are using under the covers, our UI will update. We do need to import the right version of the components, but other than that, it just works.

mui / material-ui