bug(COMPONENT): Global density cant be set in angular material 15 mdc

olischmidt123 commented 1 year ago

Is this a regression?

[ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

v14.2.7

Description

New input fields appear super big compared to previous versions.

Setting global density does not work:

@include mat.all-component-densities('maximum'); or @include mat.all-component-densities(-3);

or setting it directly inside the theme.

It all does not have any effect.

Reproduction

Steps to reproduce:

use angular material 15
use any kind of text input
try making it smaller by setting global density higher

Expected Behavior

Form fields scaling up or down in size

Actual Behavior

No effect

Environment

Angular: 15.0.3
CDK/Material: 15.0.2
Browser(s): Chrome
Operating System (e.g. Windows, macOS, Ubuntu): macOS

mrmokwa commented 1 year ago

I'm currently using in v15 and its working.

@include mat.all-component-densities(-2);

But if I set it to -3, then I have compilation errors. Guessing the supported values are 0 | -1 | -2.

If that don't work, try wrapping it around a class in your styles.scss and apply this class in you root component.

mmalerba commented 1 year ago

Density defaults to maximum spacing (which is 0), and should be able to step down to -4. I think what's happening is that some components can't get denser than -2, and those seem to be causing failures when the all-components-densities mixin is set to -3 (that's a bug, they should just be falling back to -2 if they don't go denser).

What you can do for now if you're just trying to adjust form-fields is use the form-field specific mixin which should allow the more dense setting:

@include mat.form-field-density(-3);

Or you could use the minimum value with all-component-densities.

@include mat.all-component-densities(minimum);

The next steps to fix this issue are:

Ensure all density mixins accept any valid density value: maximum, 0, -1, -2, -3, -4, minimum
Document the full list of density values here: https://material.angular.io/guide/theming#customizing-density

JanneHarju commented 1 year ago

I have related problem which you might have experience to say something. I tried to set global density like guide says here https://material.angular.io/guide/theming#customizing-density Only thing what get affected was button size. Although in my example application there is not every possible elements from Angular Material, but at least mat-form-field doesn't shrink. Then I tried also scoped style with mixin like this: .test-form-field { @include mat.form-field-density(-2); } And nothing happend. If I set too big value to function then I get error but for example with value -2 no error and no affect. I also tried scoped density set to one button and it doesn't affect anything. .bigger-button { @include mat.button-density(-1); } Can those be used in component level with ng serve or should those includes be in global styles?

JanneHarju commented 1 year ago

Furter testing it seems that I cannot use @include in component level styles. Maybe that is common knowledge but I didn't know. Form-field is resizing correctly when I move this to globalstyle files. .test-form-field { @include mat.form-field-density(-1); } But when I set density to -2 label disapears. Is that bug or material feature, because it is unusable?

EDIT: few more testing result. I managed to get them work in component level. With button I needed to set "scope"-class to upper level element not directly to button itself. So somekind of css selector is messing there. And with form-field I needed to use ::ng-deep to get it work. So apparentlty @include is wokring in component level also, css selectors were problem. So what we need is better guide for these kind of usage. And maybe fix that label disapear with -2 value.

JanneHarju commented 1 year ago

Here is information for that feature when label disapears https://github.com/angular/components/issues/4597#issuecomment-1413889184 So you can set that value to avoid label to be removed. So it is feature not bug

@use '@material/textfield' as mdc-textfield;
mdc-textfield.$minimum-height-for-filled-label: 40px;

fabianrios commented 1 year ago

is the latest implementation based on angular material 2 or 3? because the default density for example gives and height of 36px for the buttons not 40px like the material 3 design specification says. and if it's 2 is there a roadmap to adapt for version 3? thanks

liesahead commented 1 year ago

Is this still not solved?

ysk3a commented 1 year ago

I was playing around with the density with inputs and I noticed that setting the density to minimum results in misalignment of the input that has mat-icon prefix? https://stackblitz.com/edit/qr8tiz I was not sure if this is the intended behavior or if this issue is related but it seems that density is not applied to the mat-icon prefix directive? So instead of using mat-icon, I used svg directly in a span tag which seems to not look misaligned centered.

javierbaromorales commented 1 year ago

Any solution work to me.

Bullsized commented 8 months ago

When did they change the density values from:

5 to -5 to:
0 to -4 ? Since Angular 15?

tomasdev commented 3 months ago

  @include mat.button-density(-2);
  @include mat.icon-button-density(-2);

Does not seem to work. A few CSS variables get added, but the padding is still stuck at a hard-coded 12px on .mat-mdc-icon-button.mat-mdc-button-base

angular / components