3
3
In Angular Material v15, many of the components have been refactored to be based on the official
4
4
[ Material Design Components for Web (MDC)] ( https://github.com/material-components/material-components-web ) .
5
5
The components from the following imports have been refactored:
6
- * @angular/material /autocomplete
7
- * @angular/material /button
8
- * @angular/material /card
9
- * @angular/material /checkbox
10
- * @angular/material /chips
11
- * @angular/material /core
12
- * @angular/material /dialog
13
- * @angular/material /form-field
14
- * @angular/material /input
15
- * @angular/material /list
16
- * @angular/material /menu
17
- * @angular/material /paginator
18
- * @angular/material /progress-bar
19
- * @angular/material /progress-spinner
20
- * @angular/material /radio
21
- * @angular/material /select
22
- * @angular/material /slide-toggle
23
- * @angular/material /slider
24
- * @angular/material /snack-bar
25
- * @angular/material /table
26
- * @angular/material /tabs
27
- * @angular/material /tooltip
6
+
7
+ | Import path | Summary of changes |
8
+ | ------------------------------------| ------------------------------------------------------|
9
+ | @angular/material /autocomplete | Style changes only |
10
+ | @angular/material /button | Style changes, API changes |
11
+ | @angular/material /card | Style changes only |
12
+ | @angular/material /checkbox | Style changes, changes to event behavior |
13
+ | @angular/material /chips | Complete rewrite |
14
+ | @angular/material /core | Style changes only |
15
+ | @angular/material /dialog | Style changes, changes to change detection behavior |
16
+ | @angular/material /form-field | Style changes, some appearances removed, API changes |
17
+ | @angular/material /input | Style changes only |
18
+ | @angular/material /list | Style changes, API changes |
19
+ | @angular/material /menu | Style changes, API changes |
20
+ | @angular/material /paginator | Style changes only |
21
+ | @angular/material /progress-bar | Style changes only |
22
+ | @angular/material /progress-spinner | Style changes only |
23
+ | @angular/material /radio | Style changes only |
24
+ | @angular/material /select | Style changes only |
25
+ | @angular/material /slide-toggle | Style changes only |
26
+ | @angular/material /slider | Complete rewrite |
27
+ | @angular/material /snack-bar | Style changes, API changes |
28
+ | @angular/material /table | Style changes only |
29
+ | @angular/material /tabs | Style changes, API changes |
30
+ | @angular/material /tooltip | Style changes only |
28
31
29
32
The refactored components offer several benefits over the old implementations, including:
30
33
* Improved accessibility
@@ -125,6 +128,8 @@ they can be easily identified.
125
128
126
129
To search for all comments left by the migration tool, search for ` TODO(...): ` in your IDE.
127
130
131
+ TODO(amysorto): Can we have the schematic generate a CSV of TODOs that can be imported into Jira
132
+
128
133
### 4. Verify Your Application
129
134
130
135
After running the migration and addressing the TODOs, manually verify that everything is working
@@ -359,14 +364,6 @@ TODO(mmalerba): link to density docs once they exist.
359
364
directives:
360
365
* `matListItemTitle`
361
366
* `matListItemLine`
362
-
363
- * Every list item is supposed to have a title for accessibility. If no explicit title and lines are
364
- provided, the direct content of the `<mat-list-item>` will become the title . You cannot have
365
- multiple line directives without a title .
366
-
367
- ```html
368
- <mat-list-item>This is the title</mat-list-item>
369
- ```
370
367
371
368
* Text outside of a `matListItemLine` (so-called "unscoped content") will result in an additional
372
369
line being acquired (as if the content was put into a line ).
@@ -480,11 +477,6 @@ TODO(mmalerba): link to density docs once they exist.
480
477
);
481
478
```
482
479
483
- Without the density mixin, the touch targets collide (see blue outlined targets below) collide:
484
-
485
- TODO(mmalerba): replace this with a working image or embedded example:
486
- ![ alt_text] ( ../images/slide-toggle-diff.png " Diagram showing overlapping slide-toggle touch targets ")
487
-
488
480
* The label is closer to the enabled toggle
489
481
490
482
### Slider
@@ -497,9 +489,10 @@ TODO(mmalerba): link to density docs once they exist.
497
489
labels (` aria-label ` ) now live on the ` <input> ` elements instead.
498
490
499
491
* Vertical sliders and inverted sliders are no longer supported, as they are no longer part of the
500
- Material Design spec.
492
+ Material Design spec. TODO(jelbourn): should we add a note that vertical sliders are likely to
493
+ return in a future version?
501
494
502
- * Range sliders are now supported. TODO(mmalerba ): add more about this.
495
+ * Range sliders are now supported. TODO(wagnermaciel ): add more about this.
503
496
504
497
### Snack Bar
505
498
@@ -550,7 +543,7 @@ TODO(mmalerba): link to density docs once they exist.
550
543
551
544
* Accessibility: ` MatTabNav ` now throws an error if the ` [tabPanel] ` input is not provided. The
552
545
` [tabPanel] ` input and associated ` mat-tab-nav-panel ` component improve accessibility.
553
- TODO: This point needs further elaboration.
546
+ TODO(crisbeto) : This point needs further elaboration.
554
547
555
548
* The selected tab label now uses a text color from the theme, matching the selection indicator.
556
549
0 commit comments