mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
refactor(chips): remove 6.0.0 deletion targets (#10311)
Removes the deletion targets for 6.0.0 in the `material/chips` entry point. BREAKING CHANGES: * `remove` which was deprecated in 5.0.0 has been removed. Use `removed` instead. * `destroy` which was deprecated in 5.0.0 has been removed. Use `destroyed` instead.
This commit is contained in:
committed by
mmalerba
parent
88abd9edee
commit
1a8106de24
@@ -23,7 +23,7 @@
|
||||
|
||||
<mat-form-field>
|
||||
<mat-chip-list matPrefix #chipList>
|
||||
<mat-chip *ngFor="let person of people" [color]="color" (remove)="remove(person)">
|
||||
<mat-chip *ngFor="let person of people" [color]="color" (removed)="remove(person)">
|
||||
{{person.name}}
|
||||
<mat-icon matChipRemove>cancel</mat-icon>
|
||||
</mat-chip>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
<mat-chip color="accent" selected="true">Selected/Colored</mat-chip>
|
||||
|
||||
<mat-chip color="warn" selected="true" *ngIf="visible"
|
||||
(destroy)="displayMessage('chip destroyed')" (remove)="toggleVisible()">
|
||||
(destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()">
|
||||
With Events
|
||||
<mat-icon matChipRemove>cancel</mat-icon>
|
||||
</mat-chip>
|
||||
@@ -101,7 +101,7 @@
|
||||
<mat-form-field class="has-chip-list">
|
||||
<mat-chip-list [tabIndex]="tabIndex" #chipList1 [(ngModel)]="selectedPeople" required>
|
||||
<mat-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
|
||||
[removable]="removable" (remove)="remove(person)">
|
||||
[removable]="removable" (removed)="remove(person)">
|
||||
{{person.name}}
|
||||
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
|
||||
</mat-chip>
|
||||
@@ -123,7 +123,7 @@
|
||||
<mat-form-field>
|
||||
<mat-chip-list [tabIndex]="tabIndex" #chipList2 [(ngModel)]="selectedPeople" required>
|
||||
<mat-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
|
||||
[removable]="removable" (remove)="remove(person)">
|
||||
[removable]="removable" (removed)="remove(person)">
|
||||
{{person.name}}
|
||||
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
|
||||
</mat-chip>
|
||||
@@ -143,7 +143,7 @@
|
||||
<mat-form-field class="has-chip-list">
|
||||
<mat-chip-list #chipList3>
|
||||
<mat-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
|
||||
[removable]="removable" (remove)="remove(person)">
|
||||
[removable]="removable" (removed)="remove(person)">
|
||||
{{person.name}}
|
||||
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
|
||||
</mat-chip>
|
||||
@@ -180,7 +180,7 @@
|
||||
<h4>NgModel with chip list</h4>
|
||||
<mat-chip-list [multiple]="true" [(ngModel)]="selectedColors">
|
||||
<mat-chip *ngFor="let aColor of availableColors" color="{{aColor.color}}"
|
||||
[value]="aColor.name" (remove)="removeColor(aColor)">
|
||||
[value]="aColor.name" (removed)="removeColor(aColor)">
|
||||
{{aColor.name}}
|
||||
<mat-icon matChipRemove>cancel</mat-icon>
|
||||
</mat-chip>
|
||||
@@ -191,7 +191,7 @@
|
||||
<h4>NgModel with single selection chip list</h4>
|
||||
<mat-chip-list [(ngModel)]="selectedColor">
|
||||
<mat-chip *ngFor="let aColor of availableColors" color="{{aColor.color}}"
|
||||
[value]="aColor.name" (remove)="removeColor(aColor)">
|
||||
[value]="aColor.name" (removed)="removeColor(aColor)">
|
||||
{{aColor.name}}
|
||||
<mat-icon matChipRemove>cancel</mat-icon>
|
||||
</mat-chip>
|
||||
|
||||
@@ -306,7 +306,7 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
|
||||
|
||||
/** Combined stream of all of the child chips' remove change events. */
|
||||
get chipRemoveChanges(): Observable<MatChipEvent> {
|
||||
return merge(...this.chips.map(chip => chip.destroy));
|
||||
return merge(...this.chips.map(chip => chip.destroyed));
|
||||
}
|
||||
|
||||
/** Event emitted when the selected chip list value has been changed by the user. */
|
||||
|
||||
@@ -36,7 +36,7 @@ describe('Chip Remove', () => {
|
||||
expect(hrefElement.classList).toContain('mat-chip-remove');
|
||||
});
|
||||
|
||||
it('should emits (remove) on click', () => {
|
||||
it('should emits (removed) on click', () => {
|
||||
let hrefElement = chipNativeElement.querySelector('a')!;
|
||||
|
||||
testChip.removable = true;
|
||||
@@ -53,7 +53,7 @@ describe('Chip Remove', () => {
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<mat-chip [removable]="removable" (remove)="didRemove()"><a matChipRemove></a></mat-chip>
|
||||
<mat-chip [removable]="removable" (removed)="didRemove()"><a matChipRemove></a></mat-chip>
|
||||
`
|
||||
})
|
||||
class TestChip {
|
||||
|
||||
@@ -215,7 +215,7 @@ describe('Chips', () => {
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('DELETE emits the (remove) event', () => {
|
||||
it('DELETE emits the (removed) event', () => {
|
||||
const DELETE_EVENT = createKeyboardEvent('keydown', DELETE) as KeyboardEvent;
|
||||
|
||||
spyOn(testComponent, 'chipRemove');
|
||||
@@ -227,7 +227,7 @@ describe('Chips', () => {
|
||||
expect(testComponent.chipRemove).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('BACKSPACE emits the (remove) event', () => {
|
||||
it('BACKSPACE emits the (removed) event', () => {
|
||||
const BACKSPACE_EVENT = createKeyboardEvent('keydown', BACKSPACE) as KeyboardEvent;
|
||||
|
||||
spyOn(testComponent, 'chipRemove');
|
||||
@@ -246,7 +246,7 @@ describe('Chips', () => {
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('DELETE does not emit the (remove) event', () => {
|
||||
it('DELETE does not emit the (removed) event', () => {
|
||||
const DELETE_EVENT = createKeyboardEvent('keydown', DELETE) as KeyboardEvent;
|
||||
|
||||
spyOn(testComponent, 'chipRemove');
|
||||
@@ -258,7 +258,7 @@ describe('Chips', () => {
|
||||
expect(testComponent.chipRemove).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('BACKSPACE does not emit the (remove) event', () => {
|
||||
it('BACKSPACE does not emit the (removed) event', () => {
|
||||
const BACKSPACE_EVENT = createKeyboardEvent('keydown', BACKSPACE) as KeyboardEvent;
|
||||
|
||||
spyOn(testComponent, 'chipRemove');
|
||||
|
||||
+1
-15
@@ -183,7 +183,7 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
|
||||
protected _selectable: boolean = true;
|
||||
|
||||
/**
|
||||
* Determines whether or not the chip displays the remove styling and emits (remove) events.
|
||||
* Determines whether or not the chip displays the remove styling and emits (removed) events.
|
||||
*/
|
||||
@Input()
|
||||
get removable(): boolean { return this._removable; }
|
||||
@@ -205,23 +205,9 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
|
||||
/** Emitted when the chip is destroyed. */
|
||||
@Output() readonly destroyed: EventEmitter<MatChipEvent> = new EventEmitter<MatChipEvent>();
|
||||
|
||||
/**
|
||||
* Emitted when the chip is destroyed.
|
||||
* @deprecated Use 'destroyed' instead.
|
||||
* @deletion-target 6.0.0
|
||||
*/
|
||||
@Output() readonly destroy: EventEmitter<MatChipEvent> = this.destroyed;
|
||||
|
||||
/** Emitted when a chip is to be removed. */
|
||||
@Output() readonly removed: EventEmitter<MatChipEvent> = new EventEmitter<MatChipEvent>();
|
||||
|
||||
/**
|
||||
* Emitted when a chip is to be removed.
|
||||
* @deprecated Use `removed` instead.
|
||||
* @deletion-target 6.0.0
|
||||
*/
|
||||
@Output('remove') onRemove: EventEmitter<MatChipEvent> = this.removed;
|
||||
|
||||
/** The ARIA selected applied to the chip. */
|
||||
get ariaSelected(): string | null {
|
||||
return this.selectable ? this.selected.toString() : null;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<mat-form-field class="demo-chip-list">
|
||||
<mat-chip-list #chipList>
|
||||
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
|
||||
[removable]="removable" (remove)="remove(fruit)">
|
||||
[removable]="removable" (removed)="remove(fruit)">
|
||||
{{fruit.name}}
|
||||
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
|
||||
</mat-chip>
|
||||
|
||||
Reference in New Issue
Block a user