feat(Material): Material You Support

[intellix]

Feature Description

"Material You" was announced a couple of days ago: https://material.io/blog/announcing-material-you which looks to be a visual redesign of the Material design system. It appears to be arriving this Fall

It looks like it's going to become a little less opinionated in various aspects and that'd be great for those currently using Material today as a UI Library and having to hack the hell out of it to make it deviate slightly.

Quote from the description:

We’re introducing a new visual redesign that gives you the power to customize the look and feel of your phone across the whole system. With smoother animations, more intuitive notifications, quick settings and new widgets for your favorite people, Android will feel more personal and alive than ever before.

My guess is that this'll arrive upstream via MDC which is already being implemented. Will this be considered?

[crisbeto]

We should get this automatically once we've finished the transition to MDC components.

[ciriousjoker]

Will this be "opt in" in any way? Not that I dislike it, but for my web app it's perhaps not as fitting and I'd rather not stay on an old version just to keep the design

[HaidarZ]

Any progress on this issue or is there any roadmap for this upgrade ?

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[aastrouski]

Any updates here?

[keatkeat87]

from issue: When is Material Web 3 Coming?

I am really confused about that. can someone give a clear answer here?

1. Angular Material mdc is depend on material-components-web?
2. Material Team is not focused on material-components-web anymore, they turn to material-web?
3. Will Angular Material turn to material-web also or not going to have a Material You?

[jelbourn]

We're working directly with the Material Design group inside Google towards supporting design updates. No ETA just at this moment, but it's definitely something we're working towards.

[aastrouski]

MDC components were already outdated while Angular team were working on integration. Let's start to integrate new MWC (material-web) components :)

[hillin]

Glad to see I'm not the only one who's confused. I've been watching and waiting for a design update, literally for years - mainly for the density feature, but M3 is surely a welcome addition.

From what I've read:

• The Angular material team has been working on integrating with the MDC components for over three years and still actively working on it, known as the experiment components. They were planning to stablize and release them in version 14 but since v14 is imminent I doubt it's still on track;
• MDC is based on Material Design 2 (M2) and is not gonna be updated for Material You (M3) (Set up roadmap for v1.0.0 (When is Material Web 3 Coming?) material-components/material-web#3050 (comment))
• A new set of web components, known as the MWC, is based on M3, which will launch later this year;
• It doesn't seem Angular material has started to integrate with MWC yet, or it's still in a very early stage
• as @crisbeto stated, we'll get M3 when the transition to MDC is complete, seemingly contradicts with the facts above

Based on all these, can I assume we are not getting M3 in the near future?

[MikaStark]

Angular Material MDC migration has been a running gag in my company for years. Some kind of "When are you planning to release this feature ? -- Oh you know, when Angular Material will use MDC".
It's a gentle joke but actually it's a sad situation because I feel (and I guess not to be the only one) like Angular Material will never propose real new features anymore (like two-direction drag-n-drop, more theming customization, more card capabilities or even time picker) and every real improvment are only reserved for Android and, more generally, for mobile devs. I'm aware that it's an open source project and the team has limited resource (just like every company) but it's hard to not feel impatience and frustration. That said, I will keep supporting and using Angular/Material because I love it. But guys please, do not let us down.

[CnxYankoNikolov]

Is there any new information on the confusion in this thread? There doesn't seem to be any indication that Angular Material will support Material You (Material Design 3) from the fact that it references the old MDC implementation. We are looking into building a design on top of Material Design 3 and Angular Material, so I was wondering if this would be possible in the near future or if we should scrap that idea for the next year or 2?

[siva636]

The Material components offered now with Angular is the legacy components, which was released before Material 2 specification was out.

According to unofficial rumours the Material 2 components might be made available with Angular 15 release latter this year, but still it is not confirmed.

Having Material 3 components with Angular may not be a reality for the next several years. It might not happen at all.

[michaelfaith]

According to unofficial rumours the Material 2 components might be made available with Angular 15 release latter this year, but still it is not confirmed.

Looking at v15 "next" release notes would suggest it's very likely they'll be rolled out with the release. Now, that's not to say it won't go through a "Developer Preview" period like some of the big new features that've been released recently, but even in that case, it seems very close to seeing the light of day: https://github.com/angular/components/releases/tag/15.0.0-next.0

[jelbourn]

v15 will promote the MDC-based components ot stable. These components are a stepping stone to future iterations of the design system (M3). If you peek on ongoing PRs, you'll see the theming mixins for many of the components transitioning to design tokens, which is the basis for M3.

[michaelfaith]

I noticed that! I'm excited to see a greater use of CSS Custom props. Do you foresee that impacting how teams configure the overall theme using the Sass theming API?

[jelbourn]

Yeah, any support for M3 will be part of a larger update to Angular Material's theming system. While the design isn't fully complete, it will likely involve a lot more customization options.

[zarghamkhandev]

@jelbourn is there any way that one could contribute to moving forward with this change?

[jelbourn]

Unfortunately no, we're still waiting on deliverables from the Material Design folks to be able to move forward on the Angular side.

[alex737876]

@jelbourn Thanks, Are there already specific issue(s) on the Material Design side that we can point to here?
Maybe the community wants to support them to speed things up here :)

[naveedahmed1]

MWC is 1.0 and ready to use in production!

https://twitter.com/materialdesign/status/1714378297696461160?t=hDBDncKLA-qWuXPBBL6PCA&s=19

[ciriousjoker]

Can someone please explain the relation between Angular Material and Material Web? Is Angular Material going to transition from Material Components Web -> Material Web next or will those be kept completely separate? What's the plan here?

[SerkanSipahi]

cc @ciriousjoker

Material Web uses the Lit Framework as the core engine and Angular Material uses the Angular Framework as the core engine.

[ciriousjoker]

@SerkanSipahi You can use web components (which lit produces afaik) in Angular as well though. I'm assuming the benefit is therefore mostly in the convenience of using them and probably a better integration?

Given the speed at which Material Web seems(!!) to have been implemented relative to MDC, is that project a higher priority at Google?

I'm trying to figure out if it makes sense to use Material Web in Angular even though the readme currently suggests using Angular Material. I'm essentially speculating that Google might pull the plug on Angular Material and/or the MDC it's built on in the future and the overhead of using Material Web in Angular might therefore be worthwhile.

[seriouz]

Feels like Angular is the next on https://killedbygoogle.com/

[fromsomnia]

During the Angular Special Event on Nov 6, 2023, @mmalerba of the Angular team mentioned that we might see Material 3 as soon as a minor version of v17. Later during the same event @simonaco of the Angular team also confirmed that Material 3 is one of the Angular team's priorities moving beyond v17 (Nov 8) and the advent of angular.dev.

[Luiza-CR]

Any updates?

[hillin]

Apparently recent releases have shown some great progress towards M3. It's just I didn't find an instruction of how to use or opt-in these new features.

[danielalexis]

Apparently recent releases have shown some great progress towards M3. It's just I didn't find an instruction of how to use or opt-in these new features.

Run npm i @angular/material@17.1.0-next.2 or npm i @angular/material@next in your project. This will install the version with the M3 components, should be noted that this is obviously not a stable version

[ChrTall]

Are the new design tokens replacing the sass api or are there going to be breaking changes in the sass api?
I have some components that are styled based on the provided material theme and use partial scss files.

[BastianRa]

Is there a roadmap or educated guess when the available parts of M3 web are integrated with @angular/material?

[morfees]

Run npm i @angular/material@17.1.0-next.2 or npm i @angular/material@next in your project. This will install the version with the M3 components, should be noted that this is obviously not a stable version

Thanks for the tip. Do you know if there is an entry point for the M3 components ? because I just installed the latest pre-release version (angular/material@17.1.0-next.3) and it still has the old design by default.

[danielalexis]

Instructions to use Material 3 are listed in material-experimental:
https://github.com/angular/components/tree/main/src/material-experimental

[aastrouski]

Instructions to use Material 3 are listed in material-experimental: https://github.com/angular/components/tree/main/src/material-experimental

These are instructions for Material 2 MDC components, which have been released with Angular 15.

[dbesiryan]

Hey folks,
any instruction/update on how to use the M3 components in Angular (RC)??

[miguelmoya1]

Hi everyone,

I'm writing to follow up on the release of angular/components version 17.1.0 yesterday. While this version introduces support for M3, it seems to default to M2.

Could you shed some light on how to enable and utilize M3 with this new release? Any guidance or documentation would be greatly appreciated.

Thanks in advance,

[shimonsalamon]

As per this README.md we need to add the theme and typography mixins to the Sass.

I wasn't able to get it to work.

  @use '@angular/material' as mat;
  @use '@angular/material-experimental' as mat-experimental;

  $my-primary: mat.define-palette(mat.$indigo-palette);
  $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
  $my-theme: mat.define-light-theme((
    color: (
      primary: $my-primary,
      accent: $my-accent
    ),
    // Using `define-mdc-typography-config` rather than `define-typography-config` generates a
    // typography config directly from the official Material Design styles. This includes using
    // `rem`-based measurements rather than `px`-based ones as the spec recommends.
    typography: mat-experimental.define-mdc-typography-config(),
    // The density level to use in this theme, defaults to 0 if not specified.
    density: 0
  ));

  @include mat-experimental.all-mdc-component-themes($my-theme);

[aastrouski]

There are no M3 components in 17.1.

[eneajaho]

As per this README.md we need to add the theme and typography mixins to the Sass.

I wasn't able to get it to work.

  @use '@angular/material' as mat;
  @use '@angular/material-experimental' as mat-experimental;

  $my-primary: mat.define-palette(mat.$indigo-palette);
  $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
  $my-theme: mat.define-light-theme((
    color: (
      primary: $my-primary,
      accent: $my-accent
    ),
    // Using `define-mdc-typography-config` rather than `define-typography-config` generates a
    // typography config directly from the official Material Design styles. This includes using
    // `rem`-based measurements rather than `px`-based ones as the spec recommends.
    typography: mat-experimental.define-mdc-typography-config(),
    // The density level to use in this theme, defaults to 0 if not specified.
    density: 0
  ));

  @include mat-experimental.all-mdc-component-themes($my-theme);

I opened an issue for it: #28465

There has been a lot of work going on for M3

Check out the demo app: click on Use M3 theme and scroll on components to see what they look like.
https://ng-comp-devapp.web.app/button

[rsi21]

Hi all,

Just for info, as pointed by @eneajaho , readme is not ready but looking at theme-m3.scss it is posible to test M3.

I just wanted to ask, as question comes often, is there a way to follow the advancement and tasks remaining around M3 (components migrated, in progress or not started)? Something like in material web project for example:

It could help for visibility and also to have may be feedbacks around components fully migrated.

It is just a question :)

[eneajaho]

Hi all,

Just for info, as pointed by @eneajaho , readme is not ready but looking at theme-m3.scss it is posible to test M3.

I just wanted to ask, as question comes often, is there a way to follow the advancement and tasks remaining around M3 (components migrated, in progress or not started)? Something like in material web project for example:

It could help for visibility and also to have may be feedbacks around components fully migrated.

It is just a question :)

Hi
I managed to get it working

• Repo: https://github.com/eneajaho/material-3-demo
• Commit eneajaho/material-3-demo@3f8e742

Screen.Recording.2024-01-24.at.12.22.35.PM.mov

[rsi21]

Hi,

Since version 17.2.0, we have Material 3 and all the guides to migrate and that's great :) (But in experimental of course.)

But i was just wondering, if as said in the M3 migration guide " The team plans to stabilize support for M3 after a brief period in experimental in order to get feedback on the design and API."

Do we know if it is still plan for a final delivery in next version 17.3? Otherwise i imagine it won't be available until Angular 18 ?
(As i assume 17.3 will be the latest in Angular 17)

Thanks

[hillin]

Is there a project for tracking the progress of m3 implementation?
For instance I found the slider component is still in m2 style, as of version 17.3.5. I would like to know which components are m3-ready.

I found an old project for MDC but apparently it's not for m3.

[amysorto]

Closing this issue since M3 is available in experimental as of 17.2 and will be stable soon. Here is the guide for migrating to M3.

@hillin this is the M3 project board we are using

[hillin]

Thanks @amysorto, but the project board link is broken (404). Do I need certain priviledge to see it?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}