Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Material): Material You Support #22738

Closed
intellix opened this issue May 20, 2021 · 54 comments
Closed

feat(Material): Material You Support #22738

intellix opened this issue May 20, 2021 · 54 comments
Labels
area: theming feature This issue represents a new feature or feature request rather than a bug or bug fix P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@intellix
Copy link

intellix commented May 20, 2021

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?

@intellix intellix added feature This issue represents a new feature or feature request rather than a bug or bug fix needs triage This issue needs to be triaged by the team labels May 20, 2021
@crisbeto
Copy link
Member

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

@crisbeto crisbeto added Fixed in MDC and removed needs triage This issue needs to be triaged by the team labels May 21, 2021
@ciriousjoker
Copy link

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
Copy link

HaidarZ commented Dec 14, 2021

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

@angular-robot
Copy link
Contributor

angular-robot bot commented Mar 13, 2022

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
Copy link

Any updates here?

@keatkeat87
Copy link

image
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
Copy link
Member

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
Copy link

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

@hillin
Copy link

hillin commented May 17, 2022

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:

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

@MikaStark
Copy link

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
Copy link

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
Copy link

siva636 commented Sep 25, 2022

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
Copy link

michaelfaith commented Sep 25, 2022

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
Copy link
Member

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
Copy link

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
Copy link
Member

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
Copy link

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

@jelbourn
Copy link
Member

jelbourn commented Oct 4, 2022

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

@alex737876
Copy link

@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
Copy link

naveedahmed1 commented Oct 29, 2023

MWC is 1.0 and ready to use in production!

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

@ciriousjoker
Copy link

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
Copy link
Contributor

cc @ciriousjoker

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

@ciriousjoker
Copy link

@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
Copy link

seriouz commented Nov 1, 2023

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

@ciriousjoker

This comment has been minimized.

@fromsomnia
Copy link

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
Copy link

Luiza-CR commented Dec 1, 2023

Any updates?

@hillin
Copy link

hillin commented Dec 4, 2023

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
Copy link

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/[email protected] 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
Copy link

ChrTall commented Dec 13, 2023

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
Copy link

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

@morfees
Copy link

morfees commented Dec 22, 2023

Run npm i @angular/[email protected] 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/[email protected]) and it still has the old design by default.

@danielalexis
Copy link

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

@aastrouski
Copy link

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
Copy link

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

@miguelmoya1
Copy link

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
Copy link

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
Copy link

There are no M3 components in 17.1.

@eneajaho
Copy link
Contributor

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
Copy link

rsi21 commented Jan 24, 2024

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:

image

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

It is just a question :)

@eneajaho
Copy link
Contributor

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:

image

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

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

@rsi21
Copy link

rsi21 commented Mar 6, 2024

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
Copy link

hillin commented Apr 25, 2024

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
Copy link
Contributor

amysorto commented May 7, 2024

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

@amysorto amysorto closed this as completed May 7, 2024
@hillin
Copy link

hillin commented May 11, 2024

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

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jun 11, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: theming feature This issue represents a new feature or feature request rather than a bug or bug fix P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Development

No branches or pull requests