Description
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