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

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:

git clone https://github.com/CrlsMrls/angular-material-component-densities.git
cd angular-material-component-densities && npm install
npx ng serve
Open your browser on http://localhost:4200/ -> application works as expected
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

About this issue

Original URL
State: closed
Created a year ago
Comments: 17 (3 by maintainers)

Most upvoted comments

@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 on Feb 27, 2023

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

CrlsMrls on Feb 22, 2023

@zarend it breaks compilation and web page crashes.

shamilmehdi on Feb 16, 2023

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

shamilmehdi on Feb 16, 2023