bug(theme): applying density "mat.all-component-densities(-3);" and "mat.chips-density(-3)" crashes compilation

[CrlsMrls]

Description

In version 15 Angular Material Components, it is not possible to apply density globally for values lower than -2. Based on the error, the chips generate this crash.

The Sass compilation crashes when adding any of the following two lines:

• @include mat.chips-density(-3)
• @include mat.all-component-densities(-3)

Reproduction

Use material theming as described in https://material.angular.io/guide/theming and apply density to all components with -3 or lower values.

I created an application to check how densities affect the Angular Material Components.
Source code: https://github.com/CrlsMrls/angular-material-component-densities
Application running at: https://angular-material-density.netlify.app/

This repository currently uses the latest version 15.1.4 (I will try to keep it updated).

Steps to reproduce:

1. git clone https://github.com/CrlsMrls/angular-material-component-densities.git
2. cd angular-material-component-densities && npm install
3. npx ng serve
4. Open your browser on http://localhost:4200/ -> application works as expected
5. Change file ./src/styles.scss line 34 from @include mat.all-component-densities(0); to @include mat.all-component-densities(-3); -> application crashes

Expected Behavior

Application does not crash when applying lower density values to chips or to all components.

Actual Behavior

Any of those settings generates the following error:

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: "mdc-density: height must be between 24px and 32px (inclusive), but received 20px."
    ╷
632 │     $height: density.prop-value(
    │ ┌────────────^
633 │ │     $density-config: $density-config,
634 │ │     $density-scale: $density-scale,
635 │ │     $property-name: height,
636 │ │   );
    │ └───^
    ╵
  @material/chips/_chip-theme.scss 632:12                      density()
  node_modules/@angular/material/chips/_chips-theme.scss 97:5  density()
  src/styles.scss 42:3                                         root stylesheet

And application does not work.

Environment

Angular: 15.1.4
CDK/Material: 15.1.4
Browser(s): Chrome Version 110.0.5481.77 (Official Build) (arm64) and Safari Version 16.2
Operating System: macOS

[tomicarsk6]

More about density you can read in the Material Design guide, from there it should be clear to you why you receive that error.

[CrlsMrls]

@tomicarsk6, thanks for your feedback.

I checked the guide and it clearly says the -3 value is a valid option:

Density scale

The density scale allows you to control the density of individual components when needed. The density scale is numbered, starting at 0 for a component’s...

The density scale is numbered, starting at 0 for a component’s default density. The scale moves to negative numbers (-1, -2, -3) as space decreases, creating higher density. Each increment represents a decrease in the height of a component by 4dps.

Please correct me if I am wrong, but based on these guidelines, I continue thinking the issue is still valid and we should not receive the error.

[tomicarsk6]

It is, but not on all components, that's the point, you can use density but not below the point which will break your component.

[zarend]

Hello folks,

I can chime in on this and confirm what the expected behavior is. The lowest density for some components is -2. Setting a density of -3 is expected to give the same appearance as -2. That said, setting a density of -3 is never supposed to produce an error or break compilation.

-Zach

[shamilmehdi]

I can also confirm that I also receive the error @CrlsMrls pointed out. Setting density lower than -2 breaks compilation.

[shamilmehdi]

@zarend it breaks compilation and web page crashes.

[CrlsMrls]

Material documentation about Density scale: says The scale moves to negative numbers (-1, -2, -3) as space decreases, creating higher density. Therefore -3 is a valid density value.

When the density is applied individually with value -4, there are many components (button, checkbox, expansion panel, etc.) that crash compilation. Based on previous paragraph, I do not expect the behaviour to work properly when the value is -4, and IMHO it is acceptable the application crashes.

But the application should not crash when density value is -3. I checked all components individually and only the mat.chips-density crash when value is -3.

You can try yourself adding these lines:

@mixin apply-all-components-density($density) {
  @include mat.core-density($density);
  @include mat.option-density($density);
  @include mat.optgroup-density($density);
  @include mat.autocomplete-density($density);
  @include mat.badge-density($density);
  @include mat.bottom-sheet-density($density);
  @include mat.button-density($density);
  @include mat.fab-density($density);
  @include mat.icon-button-density($density);
  @include mat.button-toggle-density($density);
  @include mat.card-density($density);
  @include mat.checkbox-density($density);
  @include mat.chips-density($density);
  @include mat.datepicker-density($density);
  @include mat.dialog-density($density);
  @include mat.divider-density($density);
  @include mat.expansion-density($density);
  @include mat.form-field-density($density);
  @include mat.grid-list-density($density);
  @include mat.icon-density($density);
  @include mat.input-density($density);
  @include mat.list-density($density);
  @include mat.menu-density($density);
  @include mat.paginator-density($density);
  @include mat.progress-bar-density($density);
  @include mat.progress-spinner-density($density);
  @include mat.radio-density($density);
  @include mat.select-density($density);
  @include mat.sidenav-density($density);
  @include mat.slide-toggle-density($density);
  @include mat.slider-density($density);
  @include mat.snack-bar-density($density);
  @include mat.sort-density($density);
  @include mat.stepper-density($density);
  @include mat.table-density($density);
  @include mat.tabs-density($density);
  @include mat.toolbar-density($density);
  @include mat.tooltip-density($density);
  @include mat.tree-density($density);
}

Once you create this mixin, the following line crashes the compilation

@include apply-all-components-density(-3); 

By commenting or removing the line @include mat.chips-density($density);, then it works again.

You can find the source code of a full application here: https://github.com/CrlsMrls/angular-material-component-densities

[shamilmehdi]

@CrlsMrls it fails compilation even on density -3.

Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: "mdc-density: height must be between 24px and 32px (inclusive), but received 20px."
╷
632 │ $height: density.prop-value(
│ ┌────────────^
633 │ │ $density-config: $density-config,
634 │ │ $density-scale: $density-scale,
635 │ │ $property-name: height,
636 │ │ );
│ └───^

[shamilmehdi]

I suppose button defaults to halfway between 24px and 32px which is 28px. And it fails when under 24px which is only -2 density away.

[CrlsMrls]

@shamilmehdi, setting the button density to -3 (mat.buttons-density(-3)) does not fail in my app. You can check it here: https://angular-material-density.netlify.app/

These two fail: mat.all-component-densities(-3); and mat.chips-density(-3) though

[shamilmehdi]

@CrlsMrls that is even worse )) I had to do someting like this to exclude buttons from density -3. If I remove last line it fails.

`@use '@angular/material' as mat;
@use "@material/button";
@use '@material/textfield' as mdc-textfield;

@include mat.core();

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$my-theme: mat.define-light-theme((
color: (
primary: $my-primary,
accent: $my-accent,
),
typography: mat.define-typography-config(),
density: -3,
));

mdc-textfield.$minimum-height-for-filled-label: 40px;
@include mat.all-component-themes($my-theme);
@include mat.button-density(-2);`

[CrlsMrls]

@shamilmehdi, does density: -3 work for chips? this is so confusing.

[shamilmehdi]

@CrlsMrls no it doesn't work for chips I have mistakenly provided code for failing case.

[shamilmehdi]

I see it is not the button that fails compilation.
I tested the mixin you provided it works but list is not complete so some components doesnt appear as intended, forexample text fields doesnt show labels etc.

How can we exclude only chips from general denisty -3 ? Without providing exhaustive list?

[CrlsMrls]

@shamilmehdi, OK. Then you confirm chips fail with value -3

AFAIK, there is no complete list from the official documentation. I collected that list from the Angular component source code.

Answering your two last questions: The all-component-densities is a Sass mixin. You cannot "exclude" some component using that mixin. The only way is to create your own mixin, as I showed in the example.

[CrlsMrls]

@mmalerba thank you for fixing this issue :)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}