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.

[code-tree]

Just a note for icons that Material guidelines specifies:

Clearance area (non-dense) Icon: 24dp Touch target: 48dp

Clearance area for dense icons Icon: 20dp Touch target: 40dp

Angular Material seems to currently use a hybrid for icon buttons of 24px icon size (non-dense) and 40px touch target (dense).

On top of that, the official Material icons seem to only come in 24px (non-dense) size anyway? Is it worth switching consistently to just non-dense now, even before a density API is created?

[jaa1982]

Any update on ETA for this ? As a developer of enterprise apps, 95% of our usage is on the desktop, and spacing / density has been our users primary concern since first adopting the material spec with angular material v1.0.

“Dense mode” features had been previously scheduled for angular-material v1.2 but later fell out of scope, as momentum shifted to this repo ( https://github.com/angular/material/issues/9201 ) . Now as we make the transition to material v2, it would be nice to have confirmation that “dense mode” is still a priority item and slated for work.

[jaa1982]

Hi @jelbourn , can you please provide some update on plans for high-density features? I notice the post-beta label was removed on this ticket around the same time as v5.0 was being released. Was removing the label a housekeeping change, or does that imply something more significant (i.e. scope change/delay) ? As an enterprise developer targeting 95% usage on the desktop, I'd very much appreciate some insight as I've been closely monitoring this ticket since it was first opened

[dhniels]

@jaa1982 did you ever get any updates on this? I'd like to follow this issue as well. having a dense table option would be nice. seems like the default rows are slightly on the airy side for some of our larger data-filled tables.

[jaa1982]

Hi @dhniels , no, no updates from the team on this as of yet. Our own team has considered overriding some of the default styles ourselves, but we're reluctant because of potential for breaking changes down the road and/or just not getting it right.

I'm wondering if @jelbourn or others on the material team might have a recommendation for what we might do in the meantime. For example, for denser forms and tables, should we be overriding default typography sizes?

The spec's not clear on typography sizes for dense layouts , but you can refer to the current defaults here:

https://github.com/angular/material2/blob/master/src/lib/core/typography/_typography.scss#L30

We're thinking we might scale it down a bit like this:

$body-2: mat-typography-level(12px, 20px, 500), $body-1: mat-typography-level(12px, 18px, 400), $caption: mat-typography-level(10px, 18px, 400), $button: mat-typography-level(12px, 12px, 500), // Line-height must be unit-less fraction of the font-size. $input: mat-typography-level(12px, 1.125, 400)

Of course any and all advice would be appreciated

[palpatine1991]

We would appreciate too some estimated timeline. We are also tight on the schedules and thinking about creating some implementation of dense mode by ourselves (but also concerning about breaking changes)

[adoris]

Many enterprise developers extremely waitig for high-density features in material components! Can you please provide some update on plans for high-density features? Thanks!

[jelbourn]

Still something we want to do, but hasn't been as high of a priority as other features.

[adoris]

there are some roadmap for "not high priority" features like this?

[dhniels]

this can be easily accomplished with custom css. thanks @jelbourn and team for considering the feature - great work on the project so far. Looking forward to continued progress in the repo.

[jelbourn]

We typically decide what to work on on a quarterly basis

[tsuyoshi-nishikawa]

Is this still “not high priority”?

[amitoj]

If this is not considered very soon, or provided a work around with example, I’ll have no option but to move away from material design to either Bootstrap or a 3rd party UI components provider. Sad this simple request is lingering on for this long.

[jaa1982]

We are now multiple releases past beta . Can we get some indication of when this can be expected?

Below a summary of feature requests for dense mode on components that have all been historically closed in favor of this one. Its frustrating to review

• dense menus - #4463
• dense toolbars - #11878 and #4553
• dense layouts for inputs - #6319
• dense spacing for text fields - #7104
• dense buttons - #9099
• dense mat-table - #7995

As @amitoj notes, any comment on release date , or suggested workaround would be very welcome .

[jrovny]

I'd also like to voice my desire for dense properties for Material controls. At my company we have large, complex forms so dense, tight controls with minimal padding/margins is very important to us.

[amitoj]

Managed dense mat-table with folloing in styles.scss .mat-table > .mat-header-row, .mat-table > .mat-row { min-height: 34px; }

[zakdances]

Simply overriding the styles of a subcomponents like mat-row isn't a great workaround because it leaves other subcomponents with disproportionate dimensions/padding/font sizes/etc. For example, you can change the table rows to 34px but that leaves the header row at 56px which now looks comically large in comparison. So now you have to change the header row. But to what? Should you try to maintain the same proportion? Which would mean the header now needs to be a 38.8571428572px. So now does the table's bottom pagination row need to be changed too? The button spacing?

It's even worse with components whose many children depend on negative margins and custom padding (like mat-card).

It'd be really great to have at least 3 official density options (default, lowDense, highDense) on all top-level components. (especially mat-card! There's so much styling there that needs to be overridden)

edit as a reference, the Google Play Music website features many low density components.

[thw0rted]

I wouldn't expect support for anything that isn't in the spec. If you want a particular component to support high/low density, you might need to take it up with Google{'s Material Design team}.

[zakdances]

@thw0rted angular/material2 is an official Google repo, but I think you meant take it up with the Material Design team specifically. True, a low density mode isn't in spec, I just think it'd be very useful. High density should be very much in the pipeline though.

[Nodarii]

@jelbourn ,

Is it possible to increase priority for this issue? I see that you have initiated this discussion before it appeared in official material design spec (probably that's why it had low priority). Now it is part of material 2.0 specification and I guess you should increase priority for issues that aligns angular-material to the material specification.

[jelbourn]

The current status is that some component define ad-hoc densities in the spec. We're like to get the designers to unify on a consistent scheme for density that spans all of the components. It's something we're talking about, but still no ETA on implementation.

[igorkemack]

Is there any updates?

[jelbourn]

We hope to have something here in early 2020.

[jneuhaus20]

The Material Design spec says (high) density should apply somewhat narrowly, e.g. form fields, list rows, buttons change, but date pickers, dialogs, and anything that could be a touch target shouldn't. Those are nice boundaries with design philosophy support for saying "you're on your own" outside of them.

Honestly, I think a lot of us would be happy if we could at least apply some mixins (a la angular-material-theme.) Material's use of variables is really well architected, and from looking at _form-field-outline-theme.scss and form-field-outline.scss, most (but not all) of what we need is already in there.

Even just guidance on how (if) we can close the gap on our own while we wait for proper all-encompassing mixins would be a huge boon.

[the-ult]

@jelbourn what is the status of the dense variants? (Since your comment on the 13th of june? )

Is it gonna be part of the MDC specs (new material-experimental), or is it gonna be implemented before that in the current Angular Material?

[jelbourn]

It will be part of the new MDC-based versions of the components

[Robinyo]

Ref:

• https://material-density.glitch.me/
• https://github.com/material-components/material-components-web/tree/master/packages/mdc-density
• https://material.io/design/layout/applying-density.html#

[HunderlineK]

I created a ticket for this about three years ago and I was about to create it again now that I am Angular giving another go until I found my own issue about it: https://github.com/angular/components/issues/4553

And still not a high priority... the joke is that the toolbar at material.angular.io is dense itself.

Good job listening to the community lol

Despite the fact that I like Angular from a technical perspective, the way your team manages community requests is borderline passive-aggressive

[talamaska]

It will be part of the new MDC-based versions of the components

I see a bunch of components in the experimental folder, still missing a few, but still can't see anything related to the dense mode.

[JohnnyQQQQ]

The angular components team is actively working on this right now https://github.com/angular/components/tree/density-api

[Robinyo]

Some additional links:

• Using Material Density on the Web
• Integrating MDC Web into Frameworks
• Material Components Web (MDC Web) - Density

[thw0rted]

I don't fully grok the relationship between material-components and this project. Aren't both supported by Google? And the former has a third-party Angular adapter?

[jelbourn]

The MDC primitives are created by the Material Design team, whereas Angular Material is made by the Angular team. MDC started much after Angular Material was created, so now we're working on integrating that work into the Angular version, but rolling this out without just completely breaking everyone is a lot of work.

[thw0rted]

Thanks Jeremy, that helps. Is the end goal for one of the projects to get rolled into the other? Does it make sense for end-users to start looking at migrating? It's probably not worth the hassle just for one feature like first-class density support.

[jelbourn]

MDC Web is really just a set of primitives- they don't come with a "component" construct. Angular Material composes those primitives into a component that participates in Angular's framework idioms. Density is just the flashiest feature- the main benefit is that the Material Design team will take on ownership of making sure everything is on-spec and up-to-date with the spec (which is difficult for us because there's no actual changelog or update channel for the spec).

[coder925]

If Angular Material will compose/wrap MDC Web primitives, will I be able to directly reference the styles from MDC Web (e.g. <div class="mdc-data-table">) ?

I’m using Angular Material but need to build one custom data table from scratch with specific behaviour (cannot use Table component). Still, I want to reuse the table styles. Can this be done solely with Angular Material or do I need to bring in MDC Web as well?

[jelbourn]

The CSS will be present, but I can't say now how much of it will be brought in.

[awallat]

I saw in the changelog for version 10.0.0 the following features for material-experimental:

mdc-form-field: support density scaling ...

I thought this would close this issue.

Is there any documentation how to use this density scaling? I want to easily change the size of input fields, buttons, and so on.

[benelliott]

@awallat That commit is specific to the new implementation of components that are based on MDC. These new components are still under active development so they aren't referred to in docs yet. But I expect that the density features will be documented when the MDC components eventually reach production.

[brmc]

@benelliott, do you have a rough estimation of when it might be released? I'm in the process of vetting component libraries and the low density is one of the major strikes against material. it's very pleasant to use, but the low density is a no-go for our use case

[benelliott]

@brmc I don't work on the team so can only point you to the README which still lists it as a high-priority item for Q3.

[jobinjamez]

@jelbourn How realistic are the plans to release this by Q2? We are building our design system using Angular material as the base. We are theming it quite much and I would like to test if our theming would break when density in released. Is there some documentation on how to use it from the experimental branch?

[jelbourn]

I don't think we've ever set a concrete ETA. The mdc components that support density are usable from the material-experimental package, though these are not yet considered stable. We're working on rolling the new versions out internally inside Google, and using the feedback from that to fix bugs and inconsistencies before we get to that stable milestone. We don't know 100% what kinds of issues we'll run into as we do the rollout, so we can't say when exactly the process will be done.

[jobinjamez]

Thank you @jelbourn, Did I understand correctly that you have density support implemented both for Angular components (e.g Tree) and the Angular MDC components? Which version do you plan to work on further? Is the density usage for MDC components the same as in the angular components? i.e passing density value (-1,-2 & -3) to the theme.

[jelbourn]

The density system will only apply to the new MDC-based components plus a few other components that don't have MDC equivalents (like expansion panel). This is because we based our density APIs on top of the density system built by the MDC team rather than making something from scratch. This is part of the reason why we're moving over to use MDC in the first place- it lets us take advantage of a larger pool of work at the cost of the one-time switchover.

[JanneHarju]

So is angular material components just ditched? So never density support or any kind of better material design support? Or is it just in low priority even it has P2 label on in it (Important issue that should be resolved as soon as possible). This has been waited for too long. Almost very first steps with Angular Material when I started with it about 3 years ago I started suspect was decision correct to choose Material over Bootstrap. Or will threre be somekind of Angular(11) MDC library coming?

[albyrock87]

@jelbourn when MCD-based components will be merged into master, will current components/scss be still available? We made a lot of effort on customizing current components (via CSS overrides). Thanks

[jneuhaus20]

@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.

[jneuhaus20]

@albyrock87 They're already in master, just in a different package.

We made a number of customizations as well, including relying on some internal variable values we re-exposed (for consistency) and altering the density somewhat. I imagine there will be little disruption when completing the switch, because that would break a lot of theming, but it would still behoove us to test first.

[cgatian]

@jelbourn You and your team are doing amazing work. I can imagine how difficult this must be. Thank you! 🙏