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