Support multi-level density for all components

[jelbourn]

This issue tracks the ability to specify a density level for components. This would include:

• Uniform density API for all components
• Predetermined density levels, configurable via an approach similar to theming
• Configurable default density
• Consistent appearance for components with the same density level

This is planned work for after beta ends.

[JanneHarju]

@JanneHarju

new MDC-based components [emphasis added]

...we're moving over to use MDC

...at the cost of the one-time switchover

They are replacing the underlying implementation, not abandoning Material Components.

Sorry for my last comment. I missundestood that earlier comment. Hopefully our css customization and theming won't need to change when MDC change occures.

[Baffour]

@JanneHarju

new MDC-based components [emphasis added]

...we're moving over to use MDC

...at the cost of the one-time switchover

They are replacing the underlying implementation, not abandoning Material Components.

Sorry for my last comment. I missundestood that earlier comment. Hopefully our css customization and theming won't need to change when MDC change occures.

@JanneHarju It's worth looking into a visual regression solution imo. Something like this or this. That way when it comes to migrating later on you can at least see what breaks without having to eyeball it

[Baffour]

Hey @jelbourn I get you can't give an ETA or anything, but just wondering what the visibility of progress is like? I've seen this project https://github.com/angular/components/projects/25 but doesn't seem to cover your internal rollout + none of them have been updated for a while (or is that just an accurate reflection of progress?)

[jelbourn]

The status today is that most of the components are done and fully functional except for a handful where the MDC version wasn't ready until recently. The tooltip is landing soon (MDC just finished it themselves), slider is in progress (which will include range slider support), list will be worked on soon, and we're waiting for toggle-button to be stable on the MDC before we can tackle that.

As we roll the components out inside Google, we're catching bugs and making small API changes where necessary to cut down on impedance mismatch. For example, one thing that came up recently was that MatFormField has a generic container for prefix/suffix, but MDC has separate prefix/suffix styles for text and icons. So, we're tweaking the API a bit to align more with MDC. It's hard to know all of the little rough edges like this we'll run into without going through the rollout process, which is what makes giving progress difficult.

[Baffour]

Thanks @jelbourn really helpful (and interesting!) to know 😁

[cluen]

@jelbourn Can you please give a quick update on this topic? Your last information is very helpful but 2 months old ;-) Are there any changes. Can't wait to use density with angular-material components.

thanks a lot!

[jelbourn]

I still don't have an ETA on moving everything to stable. We're continuing to push on rolling our mdc-based components in Google, but there's still a ways to go.

[niccolofanton]

@jelbourn how is the project going? Do you have any updates for us?😸 Thank you!

[jelbourn]

Nothing to report yet. We're still working away at moving internal Google apps to the MDC-based components (there are over 2k apps, so it's a long road).

[klemenoslaj]

@jelbourn

Nothing to report yet. We're still working away at moving internal Google apps to the MDC-based components (there are over 2k apps, so it's a long road).

Just for our understanding. You plan to release the new version only after everything at Google is migrated? Could that mean years?

As well I think we'd be happy already if the MDC-based components follow the deprecations (breaking release could be much more frequent than stable version of course), so that we can start slowly migrating as well, component by component.

I am afraid a lot of projects are hacking/overwritting the styles right now so that might be a bang for them.

[jelbourn]

Not all of the applications, just enough that we're satisfied that the components are fully stable and satisfying all use-cases. I know there's a lot of demand for the new versions; we're dedicated to making sure that anything we move to stable is up to our quality standards, which unfortunately takes time.

[jneuhaus20]

How are you providing access during the rollout? E.g. is this an internal package so they can use the same selectors/modules after release, or are they importing experimental modules and committing to another round of code updates post-release?

Given the level of interest, I'm sure a lot of people are in the same boat and would like to follow suit if possible. We added scss to fill this need for example, and can tolerate the risk of using almost-stable components to get ahead on migration and testing. I just don't know the "easy way" to do this that avoids changing all the selectors twice.

On Jun 2, 2021, at 10:43 AM, Jeremy Elbourn @.***> wrote:

 Not all of the applications, just enough that we're satisfied that the components are fully stable and satisfying all use-cases. I know there's a lot of demand for the new versions; we're dedicated to making sure that anything we move to stable is up to our quality standards, which unfortunately takes time.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[jelbourn]

The mdc components live in a separate directory, and we have a migration script that swaps from original component to MDC-based component. Since the APIs are mostly identical, we only really need to update the import paths and the Sass mixin names. (Google doesn't have packages like npm since everything is one one massive monorepo)

When we do move these components from experimental to stable, we'll also have a schematic for switching in the same way.

[niccolofanton]

Is this board (MDC-based components) up to date? @jelbourn

[jelbourn]

For the most part, yeah, but it's also not tracking anything related to our rollout of the MDC-based components inside Google. Once that rollout is further along we'll be moving the MDC components to stable.

[Neutrino-Sunset]

"the joke is that the toolbar at material.angular.io is dense itself"

Yes, it appeared they had to handroll a custom component for their own documentation site instead of using their own library.

I don't see any mention of Toolbar here or in any of the links provided so far. Is Toolbar going to have dense support when this finally comes? That is one the original tickets that was closed in favour of this one, and dense appbar support on desktop has been specifed in Material Design from the outset.

[cluen]

@jelbourn Any news on this topic? What's the current progress for the rollout of the mdc based components inside google?

[MichelReij]

I am also very curious and anxiously waiting for updates on the density.

[Microhive]

I am also eagerly awaiting this feature. Would be great to have an update.

[davidecampello]

me too!

[lebesnec]

is this feature dead? Is anyone still working on Angular Material? it's been >4 years since this ticket was open, and >4 months since the last update from a team member.

[Waterstraal]

@mgechev said the following in the latest State of Angular Ecosystem talk:

"We'll be kicking off our rollout plan around MDC Web, early next year as well"

~ Minko Gechev | https://youtu.be/kZXUFKqWrIY?t=2024

I'm curious to what that exactly means. Could you please provide more details @mgechev?

Thanks!

[mgechev]

We're coordinating the effort with the MDC team at the moment. Looks like we'll be unable to release this work as part of v14. Currently we're looking at v15+ or later.

[stevebor1]

Coming from Quasar Framework (vuejs), which has full Material support with dense and sparse options, to Angular / Material, I am astonished that this is not supported out of the box :/

[talamaska]

This is not the place to hate about angular. Lit is great but I would love to see you making a large scale project with lit, cause I have seen a polymer one and it is not pretty.

[achacofe]

Good Morning, reading this issue I think that the new mdc theme is what I am looking for for a case of Angular applications in which they are displayed in a resolution of 1920px x 1080px at a scale of 125%, 150% and 200%, since With these scales obviously the components look bigger to me, for the reason that the viewport is reduced:

1. 125% -> 1536px x 850px

2. 150% -> 1280px x 690px

3. 200% -> 960px x 490px

This is also due to the need of the application, in my case I have several applications that with these scales do not want a scroll on the screen, that is, they want everything to be seen on the screen at that scale, as if it were 100%, a design of desktop 1920 x 1080, after several investigations we had to make a patch based on media queries to detect this type of screens and reduce both the font size and padding of the components and others. I do not see this as correct, since it should never be designed for these % of zoom and it is always designed at 100%, but it is a problem that we have spent months looking for the best solution since we are not convinced by the one we have applied.

If anyone else is facing this issue could we open a discussion?

On the other hand, do you think that the new mdc that you comment on in this thread would solve my problem? In that case, how could I implement it for a proof of concept? I need to understand this a little more.

Thank you very much!

[lixaotec]

hope it gets solved soon

[jelbourn]

It has shipped!

https://material.angular.io/guide/theming#customizing-density

[stevebor1]

Does anyone know if density along with all appearance types and inputs (mix and match) display the same height/size in 15? ie fit and display inline correctly?

[Baffour]

Amazing, congrats!

[lebesnec]

That's great news! Is there somewhere where we can see this in action? It would be great to be able to select the density in the Angular Material website alongside the theme!

[critchie]

Several controls don't seem to honor the density settings such as Input. No matter what I try the input field does not shrink down like it does in the Material Design demo. And if I apply a density the floating label disappears. https://m2.material.io/design/layout/applying-density.html#components

Did I miss something or is density not fully developed yet?

[JanneHarju]

@critchie Are you using Angular Material 15? If yes then I can tell what I noticed in todays researches. Class definition must be ether in global style files like this:

.test-form-field {
  @include mat.form-field-density(-1);
}

Or decorated with ::ng-deep if used in component. Otherwise it doesn't affect. With value -1 it shrink 4px but as you said if using -2 value label disapears. I think it is bug and someone need to report it. And here is one extra tip I can provide: If you wan't use button density you need to set class definition to upper level element not to button itself.

<div class="shrink-button">
    <button mat-raised-button >Push the button</button>
</div>

and then style can be

.shrink-button {
  @include mat.button-density(-1);
}

So I think it is some kind of css selector problem in many cases.

[cluen]

Maybe @jelbourn can shed some light on this.

Our complete application layout is broken after upgrading angular and material from 13 to 15. All components are larger, missing old defaults (i.e. appearance: fill | outline |none???). Trying to fix it with density ends in no labels for inputs. It's very useless to have 5 inputs among each other, without knownig what to type in?!

[seyfert]

@cluen You can read the migration guide for breaking changes with mat-form-field.

The missing labels are due to a setting in the MDC components which Angular Material now uses.

If you add this to your global SCSS you can override the setting:

@use '@material/textfield' as mdc-textfield;

mdc-textfield.$minimum-height-for-filled-label: 40px;

This may not be officially supported so be aware that this could break in the future.

To get the "none" styling, for form fields inputs, you should read the MDC documentation for styling a text field. You can create your own class to apply to a mat-form-field to format the inputs however you prefer using the defined mixins.

.my-custom-form-field {
    .mdc-text-field--filled {
        @include mdc-textfield.fill-color(transparent);
        @include mdc-textfield.disabled-fill-color(transparent);
        ....
    }
}

[amysorto]

I'm closing this issue since MDC components have been available since v15. For any specific density issues, please file new issues for them, thanks so much!

[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.}