Skip to content

Commit fdf68ba

Browse files
amcdnljelbourn
authored andcommitted
chore(chips): update chip output names for consistency (#7156)
Related to #6677
1 parent 2b61eb6 commit fdf68ba

File tree

4 files changed

+68
-24
lines changed

4 files changed

+68
-24
lines changed

src/lib/chips/chip-list.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,7 @@ export class MdChipList implements MdFormFieldControl<any>, ControlValueAccessor
278278

279279
/** Combined stream of all of the child chips' selection change events. */
280280
get chipSelectionChanges(): Observable<MdChipSelectionChange> {
281-
return merge(...this.chips.map(chip => chip.onSelectionChange));
281+
return merge(...this.chips.map(chip => chip.selectionChange));
282282
}
283283

284284
/** Combined stream of all of the child chips' focus change events. */

src/lib/chips/chip.spec.ts

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ describe('Chips', () => {
121121

122122
expect(chipNativeElement.classList).toContain('mat-chip-selected');
123123
expect(testComponent.chipSelectionChange)
124-
.toHaveBeenCalledWith({source: chipInstance, isUserInput: false});
124+
.toHaveBeenCalledWith({source: chipInstance, isUserInput: false, selected: true});
125125
});
126126

127127
it('allows removal', () => {
@@ -144,7 +144,17 @@ describe('Chips', () => {
144144

145145
it('should selects/deselects the currently focused chip on SPACE', () => {
146146
const SPACE_EVENT: KeyboardEvent = createKeyboardEvent('keydown', SPACE) as KeyboardEvent;
147-
const CHIP_EVENT: MdChipSelectionChange = {source: chipInstance, isUserInput: true};
147+
const CHIP_SELECTED_EVENT: MdChipSelectionChange = {
148+
source: chipInstance,
149+
isUserInput: true,
150+
selected: true
151+
};
152+
153+
const CHIP_DESELECTED_EVENT: MdChipSelectionChange = {
154+
source: chipInstance,
155+
isUserInput: true,
156+
selected: false
157+
};
148158

149159
spyOn(testComponent, 'chipSelectionChange');
150160

@@ -154,15 +164,15 @@ describe('Chips', () => {
154164

155165
expect(chipInstance.selected).toBeTruthy();
156166
expect(testComponent.chipSelectionChange).toHaveBeenCalledTimes(1);
157-
expect(testComponent.chipSelectionChange).toHaveBeenCalledWith(CHIP_EVENT);
167+
expect(testComponent.chipSelectionChange).toHaveBeenCalledWith(CHIP_SELECTED_EVENT);
158168

159169
// Use the spacebar to deselect the chip
160170
chipInstance._handleKeydown(SPACE_EVENT);
161171
fixture.detectChanges();
162172

163173
expect(chipInstance.selected).toBeFalsy();
164174
expect(testComponent.chipSelectionChange).toHaveBeenCalledTimes(2);
165-
expect(testComponent.chipSelectionChange).toHaveBeenCalledWith(CHIP_EVENT);
175+
expect(testComponent.chipSelectionChange).toHaveBeenCalledWith(CHIP_DESELECTED_EVENT);
166176
});
167177

168178
it('should have correct aria-selected', () => {
@@ -280,9 +290,9 @@ describe('Chips', () => {
280290
<div *ngIf="shouldShow">
281291
<md-chip [selectable]="selectable" [removable]="removable"
282292
[color]="color" [selected]="selected" [disabled]="disabled"
283-
(focus)="chipFocus($event)" (destroy)="chipDestroy($event)"
284-
(onSelectionChange)="chipSelectionChange($event)"
285-
(remove)="chipRemove($event)">
293+
(focus)="chipFocus($event)" (destroyed)="chipDestroy($event)"
294+
(selectionChange)="chipSelectionChange($event)"
295+
(removed)="chipRemove($event)">
286296
{{name}}
287297
</md-chip>
288298
</div>

src/lib/chips/chip.ts

Lines changed: 49 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export interface MdChipEvent {
3434

3535
/** Event object emitted by MdChip when selected or deselected. */
3636
export class MdChipSelectionChange {
37-
constructor(public source: MdChip, public isUserInput = false) { }
37+
constructor(public source: MdChip, public selected: boolean, public isUserInput = false) { }
3838
}
3939

4040

@@ -98,7 +98,11 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
9898
get selected(): boolean { return this._selected; }
9999
set selected(value: boolean) {
100100
this._selected = coerceBooleanProperty(value);
101-
this.onSelectionChange.emit({source: this, isUserInput: false});
101+
this.selectionChange.emit({
102+
source: this,
103+
isUserInput: false,
104+
selected: value
105+
});
102106
}
103107

104108
/** The value of the chip. Defaults to the content inside <md-chip> tags. */
@@ -132,13 +136,25 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
132136
_onBlur = new Subject<MdChipEvent>();
133137

134138
/** Emitted when the chip is selected or deselected. */
135-
@Output() onSelectionChange = new EventEmitter<MdChipSelectionChange>();
139+
@Output() selectionChange = new EventEmitter<MdChipSelectionChange>();
136140

137141
/** Emitted when the chip is destroyed. */
138-
@Output() destroy = new EventEmitter<MdChipEvent>();
142+
@Output() destroyed = new EventEmitter<MdChipEvent>();
143+
144+
/**
145+
* Emitted when the chip is destroyed.
146+
* @deprecated Use 'destroyed' instead.
147+
*/
148+
@Output() destroy = this.destroyed;
139149

140150
/** Emitted when a chip is to be removed. */
141-
@Output('remove') onRemove = new EventEmitter<MdChipEvent>();
151+
@Output() removed = new EventEmitter<MdChipEvent>();
152+
153+
/**
154+
* Emitted when a chip is to be removed.
155+
* @deprecated Use `removed` instead.
156+
*/
157+
@Output('remove') onRemove = this.removed;
142158

143159
get ariaSelected(): string | null {
144160
return this.selectable ? this.selected.toString() : null;
@@ -149,32 +165,50 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
149165
}
150166

151167
ngOnDestroy(): void {
152-
this.destroy.emit({chip: this});
168+
this.destroyed.emit({chip: this});
153169
}
154170

155171
/** Selects the chip. */
156172
select(): void {
157173
this._selected = true;
158-
this.onSelectionChange.emit({source: this, isUserInput: false});
174+
this.selectionChange.emit({
175+
source: this,
176+
isUserInput: false,
177+
selected: true
178+
});
159179
}
160180

161181
/** Deselects the chip. */
162182
deselect(): void {
163183
this._selected = false;
164-
this.onSelectionChange.emit({source: this, isUserInput: false});
184+
this.selectionChange.emit({
185+
source: this,
186+
isUserInput: false,
187+
selected: false
188+
});
165189
}
166190

167191
/** Select this chip and emit selected event */
168-
selectViaInteraction() {
192+
selectViaInteraction(): void {
169193
this._selected = true;
170194
// Emit select event when selected changes.
171-
this.onSelectionChange.emit({source: this, isUserInput: true});
195+
this.selectionChange.emit({
196+
source: this,
197+
isUserInput: true,
198+
selected: true
199+
});
172200
}
173201

174202
/** Toggles the current selected state of this chip. */
175203
toggleSelected(isUserInput: boolean = false): boolean {
176204
this._selected = !this.selected;
177-
this.onSelectionChange.emit({source: this, isUserInput});
205+
206+
this.selectionChange.emit({
207+
source: this,
208+
isUserInput,
209+
selected: this._selected
210+
});
211+
178212
return this.selected;
179213
}
180214

@@ -192,7 +226,7 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
192226
*/
193227
remove(): void {
194228
if (this.removable) {
195-
this.onRemove.emit({chip: this});
229+
this.removed.emit({chip: this});
196230
}
197231
}
198232

@@ -210,7 +244,7 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
210244
}
211245

212246
/** Handle custom key presses. */
213-
_handleKeydown(event: KeyboardEvent) {
247+
_handleKeydown(event: KeyboardEvent): void {
214248
if (this.disabled) {
215249
return;
216250
}
@@ -235,7 +269,7 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
235269
}
236270
}
237271

238-
_blur() {
272+
_blur(): void {
239273
this._hasFocus = false;
240274
this._onBlur.next({chip: this});
241275
}
@@ -266,7 +300,7 @@ export class MdChipRemove {
266300
constructor(protected _parentChip: MdChip) {}
267301

268302
/** Calls the parent chip's public `remove()` method if applicable. */
269-
_handleClick() {
303+
_handleClick(): void {
270304
if (this._parentChip.removable) {
271305
this._parentChip.remove();
272306
}

src/lib/chips/chips.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ Chips can be selected via the `selected` property. Selection can be disabled by
2323
`selectable` to `false` on the `<md-chip-list>`.
2424

2525
Whenever the selection state changes, a `ChipSelectionChange` event will be emitted via
26-
`(onSelectionChange)`.
26+
`(selectionChange)`.
2727

2828
### Disabled chips
2929
Individual chips may be disabled by applying the `disabled` attribute to the chip. When disabled,

0 commit comments

Comments
 (0)