feat(Material): Material You Support

intellix commented 2 years ago

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 commented 2 years ago

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

ciriousjoker commented 2 years ago

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 commented 2 years ago

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

angular-robot[bot] commented 2 years ago

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 commented 1 year ago

Any updates here?

keatkeat87 commented 1 year ago

from issue: When is Material Web 3 Coming?

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

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

jelbourn commented 1 year ago

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 commented 1 year ago

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

hillin commented 1 year ago

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) (https://github.com/material-components/material-web/issues/3050#issuecomment-1011464627)
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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

jelbourn commented 1 year ago

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

alex737876 commented 1 year ago

@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 :)

jelbourn commented 1 year ago

I don't think so, since the changes relate to the underlying Material Design token definitions for web which I don't think have been formally published anywhere.

floinay commented 1 year ago

Any updates?

fromsomnia commented 1 year ago

Some incremental work transitioning to design tokens is associated with the Angular 16 release.

I also spotted the barest of hopeful hints from @mgechev of the Angular team on the general Material You development arc (along with further context that may be of interest).

Additionally, in the broader context of Angular 16, a brief Angular 16 release summary I found insightful also notes this Material You development.

isaiaseg commented 11 months ago

Are we getting Material 3 styles in Angular Material?

haskelcurry commented 9 months ago

Any updates?

ansarizafar commented 9 months ago

Is there any update on Angular Material 3 support?

shivarajnaidu commented 8 months ago

Any update about Material 3 ?

fromsomnia commented 8 months ago

In a recent tweet @SerkanSipahi mentioned a PR for the initial implementation of Material 3 theme objects that has since been merged as part of a current Angular Material benchmark in the Angular Roadmap towards enabling Material 3 capabilities. As another marker of progress also note that legacy Angular Material components (pre-MDC) will be dropped in Angular 17.

naveedahmed1 commented 6 months ago

MWC is 1.0 and ready to use in production!

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

ciriousjoker commented 6 months ago

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 commented 6 months ago

cc @ciriousjoker

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

ciriousjoker commented 6 months ago

@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 commented 6 months ago

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

ciriousjoker commented 6 months ago

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

Felt like it a while ago when react had that huge jump with SSR and hooks and all the other shiny things popped up (shelter, solid, ...), but v15+ seems like Google actually puts in resources again, so I wouldn't worry about that.

off topic though...

fromsomnia commented 6 months ago

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 commented 5 months ago

Any updates?

hillin commented 5 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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

morfees commented 4 months ago

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 commented 4 months ago

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

aastrouski commented 4 months ago

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 commented 3 months ago

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

miguelmoya1 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

There are no M3 components in 17.1.

eneajaho commented 3 months ago

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: https://github.com/angular/components/issues/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 commented 3 months ago

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 commented 3 months ago

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

https://github.com/angular/components/assets/25394362/36962f4a-ba6c-4523-94cb-98fce405fd1a

rsi21 commented 1 month ago

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

angular / components

feat(Material): Material You Support #22738

Feature Description