Skip to content

Commit fb681c0

Browse files
committed
fixup! docs: add an MDC migration guide
1 parent d933a96 commit fb681c0

File tree

1 file changed

+31
-38
lines changed

1 file changed

+31
-38
lines changed

guides/v15-mdc-migration.md

Lines changed: 31 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,31 @@
33
In Angular Material v15, many of the components have been refactored to be based on the official
44
[Material Design Components for Web (MDC)](https://github.com/material-components/material-components-web).
55
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 |
2831

2932
The refactored components offer several benefits over the old implementations, including:
3033
* Improved accessibility
@@ -125,6 +128,8 @@ they can be easily identified.
125128

126129
To search for all comments left by the migration tool, search for `TODO(...):` in your IDE.
127130

131+
TODO(amysorto): Can we have the schematic generate a CSV of TODOs that can be imported into Jira
132+
128133
### 4. Verify Your Application
129134

130135
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.
359364
directives:
360365
* `matListItemTitle`
361366
* `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-
```
370367

371368
* Text outside of a `matListItemLine` (so-called "unscoped content") will result in an additional
372369
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.
480477
);
481478
```
482479

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-
488480
* The label is closer to the enabled toggle
489481

490482
### Slider
@@ -497,9 +489,10 @@ TODO(mmalerba): link to density docs once they exist.
497489
labels (`aria-label`) now live on the `<input>` elements instead.
498490

499491
* 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?
501494

502-
* Range sliders are now supported. TODO(mmalerba): add more about this.
495+
* Range sliders are now supported. TODO(wagnermaciel): add more about this.
503496

504497
### Snack Bar
505498

@@ -550,7 +543,7 @@ TODO(mmalerba): link to density docs once they exist.
550543

551544
* Accessibility: `MatTabNav` now throws an error if the `[tabPanel]` input is not provided. The
552545
`[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.
554547

555548
* The selected tab label now uses a text color from the theme, matching the selection indicator.
556549

0 commit comments

Comments
 (0)