bug(ALL): The feedback you will ignore; css class names inconsistency in new material - post 15

[Azbesciak]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

15.2.9

Description

I migrate from the legacy material, currently to angular 17. Migration tool does not work, btw - it just throws "no component selected". And I wonder - what has happened there. Previously it was clear - each component is named x, and it has class x also. Now it is either mat-... like mat-icon, there may be mdc inside, there may not be mat before. May be __, may be not.

I just would like to ask once again - what has happened there? https://dev.to/bharathmuppa/complete-angular-mdc-migaration-guide-b3c

Expected Behavior

consistent naming.

Actual Behavior

it is inconsistent. And it crashed the whole app. Why for are these MDC actually? What was wrong with the previous names, which were for last 6 years?

[json-derulo]

When the migration tool throws the "no component selected" error, you need to select the components that you want to migrate with the space bar.

[Azbesciak]

Yeah, that worked - thanks. And only irritated me more. What is the point of that migration if that only adds basic TODO to fix, and makes some really simple replacement? Better effect I would achieve applying regex replacement, than running that migration.

Look - what is the point of that, if you replace some main class, and I need to anyway go into, find for the replacement, and make it?

I think I am not alone... https://www.reddit.com/r/Angular2/comments/zm9w8f/angular_material_on_v15_upgrade_is_a_complete_mess/

What is that guys? https://material.angular.io/components/tabs/api come on, some consistency... Not to mention that this boolean attribute is by default, guess what, set to true. What is a breaking behavior compared to the previous version? But you would say - "HEY, it is just an alias, use the original field name". Yes, I would also say. But it does not work.

Very. Well. Engineered.

In terms of engineering and design, what is that?

Just one example - or multiple on the same screen.

I do not know who approved those changes. Any convention? Good practices? ANY backward compatibility (Yeah, some components did not change class names, nearly at all. Nearly). Maintenance? Predictivity? What did you do with that framework? Not to mention I need to migrate, because otherwise I will not be able to update angular in some time.

TIP:

That would be simplified to 0.

That could be also deduplicated...

[Azbesciak]

What is the point of that variable? It bits me all the time.

[amysorto]

For some context here, the components introduced in v15 are the default commonly referred to as MDC (Material Design Web Components) based components. The ones before were our legacy components that were deprecated in v17.

The MDC based components are built on top of Material’s framework agnostic component library. Advantages for doing so were to share styles and add support for M3. That is the reason for the different prefixes in some of the class names and CSS variables that you are seeing.

The schematic does update your code if there is a clear mapping. Although in some cases the DOM of the component changed that there is no mapping to a new class name. That is when a TODO comment is left behind, to point out that the styles there are now not affecting the MDC based components. Since every app is different, there is no clear way to map otherwise aside from app owners verifying their styles.

We are currently working on making editing these different CSS variables more simple, without having to worry about any prefixes to help avoid confusion.

[Azbesciak]

deprecated in v17.

Actually, removed in v17 - right? These were deprecated in v15.

That is the reason for the different prefixes in some of the class names and CSS variables that you are seeing.

But the problem is I do not see any logic behind it. I can understand there are some material components not reflected in MDC, but what with __ in the text, what with the changed structure? I was migrating for 1.5 weeks, literally ~60 hours. That was a terrible experience.

And in terms of CSS variables, applying them strictly for every component, on that component direct CSS class IMHO does not have any sense if I need to go deeply into that class to override it. For every single component.

Thank you for the answer.

[amysorto]

Yes removed in v17!

Class names with the mdc prefix come are when we needed to interface with the material package (and that's also when you see __ in the text). The mat prefix comes from our package. These new components were a total rewrite and were written to plug into material's primitives, changes to the structure were for Material updates and accessibility improvements. For example as of v17.2, you can switch over (an optional change, we don't want to put users through more migrations) to use M3.

Maybe I am misunderstanding your last point, but in your theme file you set the global values and any global overrides for your app. Then if you have component specific overrides, thats when you would change specific components themselves if needed. I meant in my last response that we are working towards making the overall overriding experience smoother for users, so you wouldn't need to worry about any prefix being correct and all these different customizable variables would be documented on our docs site.

[Azbesciak]

Maybe I am misunderstanding your last point, but in your theme file you set the global values and any global overrides for your app

Below is just one example it is not always true what you claim there, unfortunately.

What is the point of that variable? It bits me all the time.

[angular-automatic-lock-bot[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.}