Skip to content

Commit 4429ce1

Browse files
zarendzarend
authored
docs(material/chips): migrate examples to MDC (#25661)
Migrate chips examples to use mdc-based components. Add documentation overview for mdc-based chips component.
1 parent cce4d44 commit 4429ce1

30 files changed

+765
-558
lines changed

‎.github/CODEOWNERS‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@
163163
/src/dev-app/cdk-listbox/** @jelbourn
164164
/src/dev-app/cdk-menu/** @mmalerba @crisbeto
165165
/src/dev-app/checkbox/** @jelbourn @devversion
166-
/src/dev-app/chips/** @andrewseguin
166+
/src/dev-app/chips/** @mmalerba
167167
/src/dev-app/clipboard/** @andrewseguin
168168
/src/dev-app/column-resize/** @andrewseguin
169169
/src/dev-app/connected-overlay/** @jelbourn @crisbeto
@@ -186,6 +186,7 @@
186186
/src/dev-app/layout/** @andrewseguin
187187
/src/dev-app/legacy-card/** @mmalerba
188188
/src/dev-app/legacy-checkbox/** @mmalerba
189+
/src/dev-app/legacy-chips/** @andrewseguin
189190
/src/dev-app/legacy-datepicker/** @mmalerba
190191
/src/dev-app/legacy-dialog/** @devversion
191192
/src/dev-app/legacy-input/** @mmalerba
@@ -204,7 +205,6 @@
204205
/src/dev-app/legacy-autocomplete/** @crisbeto
205206
/src/dev-app/mdc-button/** @andrewseguin
206207
/src/dev-app/legacy-button/** @andrewseguin
207-
/src/dev-app/mdc-chips/** @mmalerba
208208
/src/dev-app/legacy-progress-bar/** @crisbeto
209209
/src/dev-app/legacy-progress-spinner/** @mmalerba
210210
/src/dev-app/legacy-slider/** @devversion

‎src/components-examples/material/chips/BUILD.bazel‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@ ng_module(
1616
"//src/cdk/drag-drop",
1717
"//src/cdk/testing",
1818
"//src/cdk/testing/testbed",
19+
"//src/material/autocomplete",
20+
"//src/material/button",
21+
"//src/material/chips",
22+
"//src/material/chips/testing",
23+
"//src/material/form-field",
1924
"//src/material/icon",
20-
"//src/material/legacy-autocomplete",
21-
"//src/material/legacy-button",
22-
"//src/material/legacy-chips",
23-
"//src/material/legacy-chips/testing",
24-
"//src/material/legacy-form-field",
2525
"@npm//@angular/forms",
2626
"@npm//@angular/platform-browser",
2727
"@npm//@angular/platform-browser-dynamic",
@@ -45,8 +45,8 @@ ng_test_library(
4545
":chips",
4646
"//src/cdk/testing",
4747
"//src/cdk/testing/testbed",
48-
"//src/material/legacy-chips",
49-
"//src/material/legacy-chips/testing",
48+
"//src/material/chips",
49+
"//src/material/chips/testing",
5050
"@npm//@angular/platform-browser",
5151
"@npm//@angular/platform-browser-dynamic",
5252
],

‎src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.html‎

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,22 @@
1-
<mat-form-field class="example-chip-list" appearance="fill">
2-
<mat-label>Favorite Fruits</mat-label>
3-
<mat-chip-list #chipList aria-label="Fruit selection">
4-
<mat-chip
5-
*ngFor="let fruit of fruits"
6-
(removed)="remove(fruit)">
7-
{{fruit}}
8-
<button matChipRemove>
9-
<mat-icon>cancel</mat-icon>
10-
</button>
11-
</mat-chip>
12-
<input
13-
placeholder="New fruit..."
14-
#fruitInput
15-
[formControl]="fruitCtrl"
16-
[matAutocomplete]="auto"
17-
[matChipInputFor]="chipList"
1+
<form>
2+
<mat-form-field class="example-chip-list" appearance="fill">
3+
<mat-label>Favorite Fruits</mat-label>
4+
<mat-chip-grid #chipGrid aria-label="Fruit selection">
5+
<mat-chip-row *ngFor="let fruit of fruits" (removed)="remove(fruit)">
6+
{{fruit}}
7+
<button matChipRemove [attr.aria-label]="'remove ' + fruit">
8+
<mat-icon>cancel</mat-icon>
9+
</button>
10+
</mat-chip-row>
11+
</mat-chip-grid>
12+
<input placeholder="New Fruit..." #fruitInput [formControl]="fruitCtrl"
13+
[matChipInputFor]="chipGrid" [matAutocomplete]="auto"
1814
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
19-
(matChipInputTokenEnd)="add($event)">
20-
</mat-chip-list>
21-
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
22-
<mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
23-
{{fruit}}
24-
</mat-option>
25-
</mat-autocomplete>
26-
</mat-form-field>
15+
(matChipInputTokenEnd)="add($event)"/>
16+
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
17+
<mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
18+
{{fruit}}
19+
</mat-option>
20+
</mat-autocomplete>
21+
</mat-form-field>
22+
</form>

‎src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import {COMMA, ENTER} from '@angular/cdk/keycodes';
22
import {Component, ElementRef, ViewChild} from '@angular/core';
33
import {FormControl} from '@angular/forms';
4-
import {MatLegacyAutocompleteSelectedEvent} from '@angular/material/legacy-autocomplete';
5-
import {MatLegacyChipInputEvent} from '@angular/material/legacy-chips';
4+
import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
5+
import {MatChipInputEvent} from '@angular/material/chips';
66
import {Observable} from 'rxjs';
77
import {map, startWith} from 'rxjs/operators';
88

@@ -30,7 +30,7 @@ export class ChipsAutocompleteExample {
3030
);
3131
}
3232

33-
add(event: MatLegacyChipInputEvent): void {
33+
add(event: MatChipInputEvent): void {
3434
const value = (event.value || '').trim();
3535

3636
// Add our fruit
@@ -52,7 +52,7 @@ export class ChipsAutocompleteExample {
5252
}
5353
}
5454

55-
selected(event: MatLegacyAutocompleteSelectedEvent): void {
55+
selected(event: MatAutocompleteSelectedEvent): void {
5656
this.fruits.push(event.option.viewValue);
5757
this.fruitInput.nativeElement.value = '';
5858
this.fruitCtrl.setValue(null);

‎src/components-examples/material/chips/chips-avatar/chips-avatar-example.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<mat-chip-list aria-label="Dog selection">
1+
<mat-chip-listbox aria-label="Dog selection">
22
<mat-chip>
33
<img matChipAvatar src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Photo of a Shiba Inu"/>
44
Dog one
@@ -11,4 +11,4 @@
1111
<img matChipAvatar src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Photo of a Shiba Inu"/>
1212
Dog three
1313
</mat-chip>
14-
</mat-chip-list>
14+
</mat-chip-listbox>

‎src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<mat-chip-list
1+
<mat-chip-set
22
class="example-chip"
33
cdkDropList
44
cdkDropListOrientation="horizontal"
@@ -9,4 +9,4 @@
99
*ngFor="let vegetable of vegetables">
1010
{{vegetable.name}}
1111
</mat-chip>
12-
</mat-chip-list>
12+
</mat-chip-set>

‎src/components-examples/material/chips/chips-form-control/chips-form-control-example.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.example-chip-list {
1+
.example-form-field {
22
width: 100%;
33
}
44

‎src/components-examples/material/chips/chips-form-control/chips-form-control-example.html‎

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,24 @@
22
<button mat-raised-button (click)="formControl.disable()">Disable form control</button>
33
<button mat-raised-button (click)="formControl.enable()">Enable form control</button>
44
</div>
5-
65
<p>
7-
<i>Select a focused chip by pressing <code>SPACE</code></i>
6+
<i>Enter video keywords</i>
87
</p>
9-
10-
<mat-form-field class="example-chip-list" appearance="fill">
8+
<mat-form-field appearance="fill" class="example-form-field">
119
<mat-label>Video keywords</mat-label>
12-
<mat-chip-list #chipList aria-label="Video keywords" multiple [formControl]="formControl">
13-
<mat-chip
14-
*ngFor="let keyword of keywords"
15-
[selected]="keyword"
16-
[value]="keyword"
17-
(removed)="removeKeyword(keyword)">
10+
<mat-chip-grid #chipGrid aria-label="Enter keywords" [formControl]="formControl" >
11+
<mat-chip-row *ngFor="let keyword of keywords" (removed)="removeKeyword(keyword)">
1812
{{keyword}}
19-
</mat-chip>
20-
<input
21-
placeholder="New keyword..."
22-
[matChipInputFor]="chipList"
23-
(matChipInputTokenEnd)="addKeywordFromInput($event)">
24-
</mat-chip-list>
13+
<button matChipRemove aria-label="'remove ' + keyword">
14+
<mat-icon>cancel</mat-icon>
15+
</button>
16+
</mat-chip-row>
17+
</mat-chip-grid>
18+
<input placeholder="New keyword..."
19+
[matChipInputFor]="chipGrid"
20+
(matChipInputTokenEnd)="add($event)"/>
2521
</mat-form-field>
2622

2723
<p>
28-
<b>The following keywords are selected:</b> {{formControl.value}}
29-
</p>
24+
<b>The following keywords are entered:</b> {{formControl.value}}
25+
</p>

‎src/components-examples/material/chips/chips-form-control/chips-form-control-example.ts‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {Component} from '@angular/core';
22
import {FormControl} from '@angular/forms';
3-
import {MatLegacyChipInputEvent} from '@angular/material/legacy-chips';
3+
import {MatChipInputEvent} from '@angular/material/chips';
44

55
/**
66
* @title Chips with form control
@@ -11,17 +11,25 @@ import {MatLegacyChipInputEvent} from '@angular/material/legacy-chips';
1111
styleUrls: ['chips-form-control-example.css'],
1212
})
1313
export class ChipsFormControlExample {
14-
keywords = new Set(['angular', 'how-to', 'tutorial']);
14+
keywords = ['angular', 'how-to', 'tutorial', 'accessibility'];
1515
formControl = new FormControl(['angular']);
1616

17-
addKeywordFromInput(event: MatLegacyChipInputEvent) {
18-
if (event.value) {
19-
this.keywords.add(event.value);
20-
event.chipInput!.clear();
17+
removeKeyword(keyword: string) {
18+
const index = this.keywords.indexOf(keyword);
19+
if (index >= 0) {
20+
this.keywords.splice(index, 1);
2121
}
2222
}
2323

24-
removeKeyword(keyword: string) {
25-
this.keywords.delete(keyword);
24+
add(event: MatChipInputEvent): void {
25+
const value = (event.value || '').trim();
26+
27+
// Add our keyword
28+
if (value) {
29+
this.keywords.push(value);
30+
}
31+
32+
// Clear the input value
33+
event.chipInput!.clear();
2634
}
2735
}

‎src/components-examples/material/chips/chips-harness/chips-harness-example.html‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
<mat-chip-list
1+
<mat-chip-listbox
22
[disabled]="isDisabled"
33
[aria-orientation]="'horizontal'">
4-
<mat-chip (removed)="remove()">Chip 1</mat-chip>
5-
<mat-chip (removed)="remove()">Chip 2 <span matChipRemove>remove_icon</span></mat-chip>
6-
<mat-chip (removed)="remove()"><mat-chip-avatar>C</mat-chip-avatar>Chip 4</mat-chip>
7-
</mat-chip-list>
4+
<mat-chip-option (removed)="remove()">Chip 1</mat-chip-option>
5+
<mat-chip-option (removed)="remove()">
6+
Chip 2
7+
<button matChipRemove aria-label="remove Chip 2"><mat-icon>remove_icon</mat-icon></button>
8+
</mat-chip-option>
9+
<mat-chip-option (removed)="remove()"><mat-chip-avatar>C</mat-chip-avatar>Chip 4</mat-chip-option>
10+
</mat-chip-listbox>

0 commit comments

Comments
 (0)