Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support multi-level density for all components #4597

Open
jelbourn opened this issue May 16, 2017 · 24 comments

Comments

@jelbourn
Copy link
Member

commented May 16, 2017

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

This comment has been minimized.

Copy link
Contributor

commented Oct 10, 2017

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

This comment has been minimized.

Copy link

commented Oct 20, 2017

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

This comment has been minimized.

Copy link

commented Jan 4, 2018

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

@angular angular deleted a comment from ganeshkantu Jan 31, 2018

@dhniels

This comment has been minimized.

Copy link

commented Feb 7, 2018

@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

This comment has been minimized.

Copy link

commented Feb 8, 2018

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

This comment has been minimized.

Copy link

commented Feb 21, 2018

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

This comment has been minimized.

Copy link

commented Mar 15, 2018

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

This comment has been minimized.

Copy link
Member Author

commented Mar 15, 2018

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

@adoris

This comment has been minimized.

Copy link

commented Mar 15, 2018

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

@dhniels

This comment has been minimized.

Copy link

commented Mar 15, 2018

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

This comment has been minimized.

Copy link
Member Author

commented Mar 15, 2018

We typically decide what to work on on a quarterly basis

@cony029

This comment has been minimized.

Copy link

commented Jun 29, 2018

Is this still “not high priority”?

@amitoj

This comment has been minimized.

Copy link

commented Jul 24, 2018

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

This comment has been minimized.

Copy link

commented Oct 25, 2018

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

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

@jrovny

This comment has been minimized.

Copy link

commented Oct 30, 2018

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

This comment has been minimized.

Copy link

commented Oct 31, 2018

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

@zakdances

This comment has been minimized.

Copy link

commented Jan 31, 2019

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

This comment has been minimized.

Copy link

commented Jan 31, 2019

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

This comment has been minimized.

Copy link

commented Jan 31, 2019

@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

This comment has been minimized.

Copy link

commented Feb 19, 2019

@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

This comment has been minimized.

Copy link
Member Author

commented Feb 19, 2019

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

This comment has been minimized.

Copy link

commented Jun 13, 2019

Is there any updates?

@jelbourn

This comment has been minimized.

Copy link
Member Author

commented Jun 13, 2019

We hope to have something here in early 2020.

@jneuhaus20

This comment has been minimized.

Copy link

commented Sep 11, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.