Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug(checkbox): cannot set low density

See original GitHub issue

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

No response

Description

In the migration guide, it says that “you can match the previous size by using density -5 for the checkbox.” https://material.angular.io/guide/mdc-migration#checkbox

@use '@angular/material' as mat;
@include mat.checkbox-density(-5px);

But when I try to do so, the compiler crashes with error:

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: 40px and -20px*px have incompatible units.
    ╷
111 │     $value: map.get($property-scale-map, default) + $density-scale * $interval;
    │             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  @material\density\_density.scss 111:13                                   prop-value()
  @material\checkbox\_checkbox-theme.scss 310:11                           get-ripple-size()
  @material\checkbox\_checkbox-theme.scss 324:10                           density()
  node_modules\@angular\material\checkbox\_checkbox-theme.scss 92:7        @content
  node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 216:3  disable-mdc-fallback-declarations()
  node_modules\@angular\material\checkbox\_checkbox-theme.scss 90:3        density()
  src\styles\material.scss 55:1                                            @import
  src\styles.scss 2:9                                                      root stylesheet

If I change -5px to -5 I get another error:

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: "mdc-density: size must be between 28px and 40px (inclusive), but received 20px."
    ╷
310 │     @return density-functions.prop-value(
    │ ┌───────────^
311 │ │     $density-config: $density-config,
312 │ │     $density-scale: $density-scale,
313 │ │     $property-name: size
314 │ │   );
    │ └───^
    ╵
  @material\checkbox\_checkbox-theme.scss 310:11                           get-ripple-size()
  @material\checkbox\_checkbox-theme.scss 324:10                           density()
  node_modules\@angular\material\checkbox\_checkbox-theme.scss 92:7        @content
  node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 216:3  disable-mdc-fallback-declarations()
  node_modules\@angular\material\checkbox\_checkbox-theme.scss 90:3        density()
  src\styles\material.scss 55:1                                            @import
  src\styles.scss 2:9                                                      root stylesheet

Reproduction

In the description

Expected Behavior

It should be possible to match the previous size by using density -5 for the checkbox

Actual Behavior

Setting density below -3 results in a error.

Environment

Angular CLI: 15.0.0
Node: 18.12.0
Package Manager: npm 9.1.1
OS: win32 x64

Angular: 15.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.0
@angular-devkit/build-angular   15.0.0
@angular-devkit/core            15.0.0
@angular-devkit/schematics      15.0.0
@schematics/angular             15.0.0
rxjs                            7.5.7
typescript                      4.8.4