Skip to content

Commit 04b7d0b

Browse files
authored
docs: address incorrect density in migration guide (#26065)
Fixes the following incorrect information in the migration guide: * The density was being specified in pixels which is incorrect. It doesn't have a unit. * There is no -5 density.
1 parent e34ad72 commit 04b7d0b

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

guides/v15-mdc-migration.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -226,12 +226,12 @@ DOM and CSS of the components, you may need to tweak some of your application's
226226
* `<mat-card-content>` no longer sets any typography styles, users are free to add whatever
227227
typography styles make sense for their application, either to `<mat-card-content>` itself or any
228228
child elements as appropriate. For example:
229-
229+
230230
```scss
231231
@use '@angular/material' as mat;
232232
@include mat.typography-hierarchy();
233233
```
234-
234+
235235
```html
236236
<mat-card>
237237
<mat-card-content class="mat-body-1">...</mat-card-content>
@@ -246,12 +246,12 @@ DOM and CSS of the components, you may need to tweak some of your application's
246246

247247
* Checkbox touch targets are larger, now 40px instead of 16px, which is more accessible. Be sure to
248248
allow enough space in your layout so that the touch target does not overlap other components. If
249-
you are not concerned with accessibility you can match the previous size by using density -5 for
249+
you are not concerned with accessibility you can match the previous size by using density -1 for
250250
the checkbox.
251-
251+
252252
```scss
253253
@use '@angular/material' as mat;
254-
@include mat.checkbox-density(-5px);
254+
@include mat.checkbox-density(-1);
255255
```
256256

257257
* Checkbox color may be changed to white or black due to a change in heuristics based on the
@@ -461,11 +461,11 @@ DOM and CSS of the components, you may need to tweak some of your application's
461461

462462
* The touch target is now much larger and more accessible. Be sure to allow enough space in your
463463
layout so that the touch target does not overlap other components. If you are not concerned with
464-
accessibility you can match the previous size by using density -5 for the radio.
464+
accessibility you can match the previous size by using density -1 for the radio.
465465

466466
```scss
467467
@use '@angular/material' as mat;
468-
@include mat.radio-density(-5px);
468+
@include mat.radio-density(-1);
469469
```
470470

471471
### Select
@@ -491,11 +491,11 @@ DOM and CSS of the components, you may need to tweak some of your application's
491491

492492
* The touch target is much larger and more accessible. Be sure to allow enough space in your
493493
layout so that the touch target does not overlap other components. If you are not concerned with
494-
accessibility you can match the previous size by using density -5 for the slide-toggle.
494+
accessibility you can match the previous size by using density -1 for the slide-toggle.
495495

496496
```scss
497497
@use '@angular/material' as mat;
498-
@include mat.slide-toggle-density(-5px);
498+
@include mat.slide-toggle-density(-1);
499499
```
500500

501501
* The label is closer to the enabled toggle
@@ -532,7 +532,7 @@ DOM and CSS of the components, you may need to tweak some of your application's
532532
<input matSliderThumb>
533533
</mat-slider>
534534
```
535-
535+
536536
* The `tickInterval` property has been removed. To switch to the new API, use `showTickMarks` to
537537
create a slider with tick marks, and the interval for your tick marks will match your slider's
538538
`step`. The `tickInterval` property is under consideration to be added back in future releases.

0 commit comments

Comments
 (0)