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 ( angular/material#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