bug(COMPONENT): mat.datepicker-density not working like mat.form-field-density

[probfacile]

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

mat.datepicker-density not working like mat.form-field-density and datepicker is bigger than form field.

Reproduction

StackBlitz link: https://stackblitz.com/edit/unglus?file=src%2Fexample%2Fdatepicker-overview-example.html
Steps to reproduce:

1. add density to a form and inline fields with a date picker
2. they will be different

Expected Behavior

same density should match

Actual Behavior

density of picker doesn't match input density

Environment

"@angular/animations": "^17.0.0-rc.0",
"@angular/cdk": "16.2.11",
"@angular/common": "^17.0.0-rc.0",
"@angular/compiler": "^17.0.0-rc.0",
"@angular/core": "^17.0.0-rc.0",
"@angular/forms": "^17.0.0-rc.0",
"@angular/material": "16.2.11",
"@angular/material-moment-adapter": "16.2.11",
"@angular/platform-browser": "^17.0.0-rc.0",
"@angular/platform-browser-dynamic": "^17.0.0-rc.0",
"@angular/router": "^17.0.0-rc.0",
"@angular/ssr": "^17.0.0-rc.0",
"moment": "^2.18.1",

[json-derulo]

You use the following styles for your dense form field:

.dense-form-field {
  @include mat.form-field-density(-5);
  @include mat.button-toggle-density(-3);
  @include mat.datepicker-density(-5);
}

What makes the second form field bigger is the datepicker toggle, it's still the default size. Internally the datepicker toggle uses an icon button. To make it smaller, you can use the mat.icon-button-density mixin. Not sure why you are using mat.button-toggle-density, it's a completely different component. Updated code:

.dense-form-field {
  @include mat.form-field-density(-5);
  @include mat.icon-button-density(-5);
  @include mat.datepicker-density(-5);
}

[probfacile]

Thank you and sorry because it's not well documented how to use these useful density mixins. Shame on this.

[probfacile]

There is a similar problem when you use a field with a <mat-icon matPrefix> or suffix: the icon will enlarge the field and @include mat.icon-density(-5); doesn't do anything
@json-derulo Do you have a list of usable density mixins?
Updated snippet https://stackblitz.com/edit/unglus-mg9uns?file=src%2Fexample%2Fdatepicker-overview-example.ts