Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

md-chips #120

Closed
jelbourn opened this issue Feb 27, 2016 · 23 comments
Closed

md-chips #120

jelbourn opened this issue Feb 27, 2016 · 23 comments
Assignees
Labels
feature This issue represents a new feature or feature request rather than a bug or bug fix new component This issue is tracking a new component to be added to the library
Milestone

Comments

@jelbourn
Copy link
Member

Blocked on #117

@jelbourn jelbourn added the feature This issue represents a new feature or feature request rather than a bug or bug fix label Feb 27, 2016
@jelbourn jelbourn added this to the before beta milestone Feb 27, 2016
@jelbourn jelbourn changed the title mdChips md-chips Feb 27, 2016
@jelbourn jelbourn added the new component This issue is tracking a new component to be added to the library label Feb 27, 2016
@bastienJS
Copy link

@jelbourn Does that mean this component will still be released in the alpha version (before beta)?

@ollwenjones
Copy link

Chips seem sort of general purpose. It's not clear to me why their implementation would be blocked by autocomplete? Seems like it could be the other way around.

@topherfangio
Copy link
Contributor

@ollwenjones Still need to discuss with the team, but my goal is indeed to create a very basic version of the chips before we introduce the autocomplete functionality.

@ollwenjones
Copy link

I'm not even sure understood what was meant by "Blocked on" - "Blocks" or "Blocked by" ? 😜

topherfangio added a commit to profoundry-us/material2 that referenced this issue Nov 14, 2016
Create the initial Chips skeleton with a very basic working demo
of static, styled chips.

References angular#120.
topherfangio added a commit to profoundry-us/material2 that referenced this issue Nov 14, 2016
Create the initial Chips skeleton with a very basic working demo
of static, styled chips.

References angular#120.
topherfangio added a commit to profoundry-us/material2 that referenced this issue Nov 14, 2016
Create the initial Chips skeleton with a very basic working demo
of static, styled chips.

References angular#120.
topherfangio added a commit to profoundry-us/material2 that referenced this issue Nov 15, 2016
Create the initial Chips skeleton with a very basic working demo
of static, styled chips.

References angular#120.
topherfangio added a commit to profoundry-us/material2 that referenced this issue Nov 17, 2016
Create the initial Chips skeleton with a very basic working demo
of static, styled chips.

References angular#120.
topherfangio added a commit to profoundry-us/material2 that referenced this issue Nov 17, 2016
Create the initial Chips skeleton with a very basic working demo
of static, styled chips.

References angular#120.
@jelbourn jelbourn removed the blocked label Nov 22, 2016
topherfangio added a commit to profoundry-us/material2 that referenced this issue Nov 28, 2016
 - Up/down arrows navigate chips.
 - Clicking a chip properly focuses it for subsequent keyboard
   navigation.
 - More demos.

References angular#120.
topherfangio added a commit to profoundry-us/material2 that referenced this issue Nov 28, 2016
Add basic focus/keyboard support for chips.

 - Up/down arrows navigate chips.
 - Clicking a chip properly focuses it for subsequent keyboard
   navigation.
 - More demos.

References angular#120.
tinayuangao pushed a commit that referenced this issue Nov 29, 2016
Create the initial Chips skeleton with a very basic working demo
of static, styled chips.

References #120.
topherfangio added a commit to profoundry-us/material2 that referenced this issue Nov 29, 2016
Add basic focus/keyboard support for chips.

 - Up/down arrows navigate chips.
 - Clicking a chip properly focuses it for subsequent keyboard
   navigation.
 - More demos.

References angular#120.
topherfangio added a commit to profoundry-us/material2 that referenced this issue Nov 30, 2016
Add basic focus/keyboard support for chips.

 - Up/down arrows navigate chips.
 - Clicking a chip properly focuses it for subsequent keyboard
   navigation.
 - More demos.

References angular#120.
topherfangio added a commit to profoundry-us/material2 that referenced this issue Dec 1, 2016
Add basic focus/keyboard support for chips.

 - Up/down arrows navigate chips.
 - Clicking a chip properly focuses it for subsequent keyboard
   navigation.
 - More demos.

References angular#120.
topherfangio added a commit to profoundry-us/material2 that referenced this issue Dec 1, 2016
Add basic focus/keyboard support for chips.

 - Up/down arrows navigate chips.
 - Clicking a chip properly focuses it for subsequent keyboard
   navigation.
 - More demos.

Additionally, update ListKeyManager to prevent default for
key presses so page does not scroll with up/down keys.

References angular#120.
topherfangio added a commit to profoundry-us/material2 that referenced this issue Dec 1, 2016
Add basic focus/keyboard support for chips.

 - Up/down arrows navigate chips.
 - Clicking a chip properly focuses it for subsequent keyboard
   navigation.
 - More demos.

Additionally, update ListKeyManager to prevent default for
key presses so page does not scroll with up/down keys.

Confirmed AoT compatibility.

References angular#120.
topherfangio added a commit to profoundry-us/material2 that referenced this issue Dec 1, 2016
Add basic focus/keyboard support for chips.

 - Up/down arrows navigate chips.
 - Clicking a chip properly focuses it for subsequent keyboard
   navigation.
 - More demos.

Confirmed AoT compatibility.

References angular#120.
@jshoudy11
Copy link
Contributor

Are there plans to add delete functionality to chips? A little 'x' icon on each chip for example that will remove it from the chip list.

@Irauan
Copy link

Irauan commented Feb 21, 2017

There is an error in mixin md-chips-theme, it is only getting 500 colors, even if I set another pallet

&.mat-primary {
background-color: mat-color($primary, 500);
color: mat-contrast($primary, 500);
}

&.mat-accent {
  background-color: mat-color($accent, 500);
  color: mat-contrast($accent, 500);
}

&.mat-warn {
  background-color: mat-color($warn, 500);
  color: mat-contrast($warn, 500);
}

@topherfangio
Copy link
Contributor

@Irauan It should be getting the 500 colors from the appropriate palette. What are you getting instead and/or what are you expecting?

topherfangio added a commit to profoundry-us/material2 that referenced this issue Feb 22, 2017
Add events, styling and keyboard controls to allow removable chips.

 - Add basic styling for a user-provided remove icon.
 - Add keyboard controls for backspace/delete.
 - Add `(remove)` event which is emitted when the remove icon or
   one of the delete keys is pressed.
 - Add `md-chip-remove` directive which can be applied to `<md-icon>`
   (or others) to inform the chip of the remove request.

Add new directive `mdChipInput` for controlling:
 - `(chipAdded)` - Event fired when a chip should be added.
 - `[separatorKeys]` - The list of keycodes that will fire the
   `(chipAdded)` event.
 - `[addOnBlur]` - Whether or not to fire the `(chipAdded)` event
   when the input is blurred.

Additionally, fix some issues with dark theme and add styling/support
for usage inside the `md-input-container` and add styling for focused
chips.

BREAKING CHANGE - The `selectable` property of the `md-chip-list` has
now been moved to `md-chip` to maintain consistency with the new
`removable` option.

If you used the following code,

```html
<md-chip-list [selectable]="selectable">
  <md-chip>My Chip</md-chip>
</md-chip-list>
```

you should switch it to

```html
<md-chip-list>
  <md-chip [selectable]="selectable">My Chip</md-chip>
</md-chip-list>
```

References angular#120. Closes angular#3143.
topherfangio added a commit to profoundry-us/material2 that referenced this issue Feb 22, 2017
Add events, styling and keyboard controls to allow removable chips.

 - Add basic styling for a user-provided remove icon.
 - Add keyboard controls for backspace/delete.
 - Add `(remove)` event which is emitted when the remove icon or
   one of the delete keys is pressed.
 - Add `md-chip-remove` directive which can be applied to `<md-icon>`
   (or others) to inform the chip of the remove request.

Add new directive `mdChipInput` for controlling:
 - `(chipAdded)` - Event fired when a chip should be added.
 - `[separatorKeys]` - The list of keycodes that will fire the
   `(chipAdded)` event.
 - `[addOnBlur]` - Whether or not to fire the `(chipAdded)` event
   when the input is blurred.

Additionally, fix some issues with dark theme and add styling/support
for usage inside the `md-input-container` and add styling for focused
chips.

BREAKING CHANGE - The `selectable` property of the `md-chip-list` has
now been moved to `md-chip` to maintain consistency with the new
`removable` option.

If you used the following code,

```html
<md-chip-list [selectable]="selectable">
  <md-chip>My Chip</md-chip>
</md-chip-list>
```

you should switch it to

```html
<md-chip-list>
  <md-chip [selectable]="selectable">My Chip</md-chip>
</md-chip-list>
```

References angular#120. Closes angular#3143.

Hat tip to @willshowell for suggestion to use secondary-text
for focus color :-)
@Irauan
Copy link

Irauan commented Feb 25, 2017

@topherfangio I'm defining the accent color as Cyan a400 and when I'm setting the accent color It returns Cyan 500

@topherfangio
Copy link
Contributor

@Irauan Gotcha. I'll talk to the team and look at how to fix this. Thanks!

@willshowell
Copy link
Contributor

@topherfangio, if I'm not mistaken, you can just omit the 500 and mat-color will default to whatever the theme color is defined as.

@jshoudy11
Copy link
Contributor

@topherfangio I never got an answer to my previous question:

"Are there plans to add delete functionality to chips? A little 'x' icon on each chip for example that will remove it from the chip list."

@willshowell
Copy link
Contributor

@jshoudy11, if you try out #2476, the following example has been added to the demo app. It's unclear what the current status of the PR is, but it looks like the 'x' icons will be included.

screen shot 2017-02-27 at 3 13 50 pm

@topherfangio
Copy link
Contributor

@jshoudy11 Indeed; we are planning to add the md-chip-remove directive, just need to get the PR finished/approved.

topherfangio added a commit to profoundry-us/material2 that referenced this issue Mar 9, 2017
Add events, styling and keyboard controls to allow removable chips.

 - Add basic styling for a user-provided remove icon.
 - Add keyboard controls for backspace/delete.
 - Add `(remove)` event which is emitted when the remove icon or
   one of the delete keys is pressed.
 - Add `md-chip-remove` directive which can be applied to `<md-icon>`
   (or others) to inform the chip of the remove request.

Add new directive `mdChipInput` for controlling:
 - `(chipAdded)` - Event fired when a chip should be added.
 - `[separatorKeys]` - The list of keycodes that will fire the
   `(chipAdded)` event.
 - `[addOnBlur]` - Whether or not to fire the `(chipAdded)` event
   when the input is blurred.

Additionally, fix some issues with dark theme and add styling/support
for usage inside the `md-input-container` and add styling for focused
chips.

BREAKING CHANGE - The `selectable` property of the `md-chip-list` has
now been moved to `md-chip` to maintain consistency with the new
`removable` option.

If you used the following code,

```html
<md-chip-list [selectable]="selectable">
  <md-chip>My Chip</md-chip>
</md-chip-list>
```

you should switch it to

```html
<md-chip-list>
  <md-chip [selectable]="selectable">My Chip</md-chip>
</md-chip-list>
```

References angular#120. Closes angular#3143.

Hat tip to @willshowell for suggestion to use secondary-text
for focus color :-)
topherfangio added a commit to profoundry-us/material2 that referenced this issue Mar 9, 2017
Add events, styling and keyboard controls to allow removable chips.

 - Add basic styling for a user-provided remove icon.
 - Add keyboard controls for backspace/delete.
 - Add `(remove)` event which is emitted when the remove icon or
   one of the delete keys is pressed.
 - Add `md-chip-remove` directive which can be applied to `<md-icon>`
   (or others) to inform the chip of the remove request.

Add new directive `mdChipInput` for controlling:
 - `(chipAdded)` - Event fired when a chip should be added.
 - `[separatorKeys]` - The list of keycodes that will fire the
   `(chipAdded)` event.
 - `[addOnBlur]` - Whether or not to fire the `(chipAdded)` event
   when the input is blurred.

Additionally, fix some issues with dark theme and add styling/support
for usage inside the `md-input-container` and add styling for focused
chips.

BREAKING CHANGE - The `selectable` property of the `md-chip-list` has
now been moved to `md-chip` to maintain consistency with the new
`removable` option.

If you used the following code,

```html
<md-chip-list [selectable]="selectable">
  <md-chip>My Chip</md-chip>
</md-chip-list>
```

you should switch it to

```html
<md-chip-list>
  <md-chip [selectable]="selectable">My Chip</md-chip>
</md-chip-list>
```

References angular#120. Closes angular#3143.

Hat tip to @willshowell for suggestion to use secondary-text
for focus color :-)
@BenRacicot
Copy link

BenRacicot commented Apr 10, 2017

Hey @topherfangio just came across this thread after writing a remove function for these chips... Hope this helps someone seeing as I just got beta-3 with no remove chip features.

 removeSkill(event){ // chip click event
        for(var i = 0, j = this.chips.length; i < j; i++ ){
            if( event.target.innerText.trim() == this.chips[i].name.trim()){ 
                this.chips.splice(i, 1);
            }
        }
    }

Specifically:
I'm wondering how others are adding the chips info to NgForm for submission?

tomasvoj pushed a commit to tomasvoj/material2 that referenced this issue Apr 26, 2017
Add events, styling and keyboard controls to allow removable chips.

 - Add basic styling for a user-provided remove icon.
 - Add keyboard controls for backspace/delete.
 - Add `(remove)` event which is emitted when the remove icon or
   one of the delete keys is pressed.
 - Add `md-chip-remove` directive which can be applied to `<md-icon>`
   (or others) to inform the chip of the remove request.

Add new directive `mdChipInput` for controlling:
 - `(chipAdded)` - Event fired when a chip should be added.
 - `[separatorKeys]` - The list of keycodes that will fire the
   `(chipAdded)` event.
 - `[addOnBlur]` - Whether or not to fire the `(chipAdded)` event
   when the input is blurred.

Additionally, fix some issues with dark theme and add styling/support
for usage inside the `md-input-container` and add styling for focused
chips.

BREAKING CHANGE - The `selectable` property of the `md-chip-list` has
now been moved to `md-chip` to maintain consistency with the new
`removable` option.

If you used the following code,

```html
<md-chip-list [selectable]="selectable">
  <md-chip>My Chip</md-chip>
</md-chip-list>
```

you should switch it to

```html
<md-chip-list>
  <md-chip [selectable]="selectable">My Chip</md-chip>
</md-chip-list>
```

References angular#120. Closes angular#3143.

Hat tip to @willshowell for suggestion to use secondary-text
for focus color :-)
topherfangio added a commit to profoundry-us/material2 that referenced this issue May 12, 2017
Add events, styling and keyboard controls to allow removable chips.

 - Add basic styling for a user-provided remove icon.
 - Add keyboard controls for backspace/delete.
 - Add `(remove)` event which is emitted when the remove icon or
   one of the delete keys is pressed.
 - Add `md-chip-remove` directive which can be applied to `<md-icon>`
   (or others) to inform the chip of the remove request.

Add new directive `mdChipInput` for controlling:
 - `(chipAdded)` - Event fired when a chip should be added.
 - `[separatorKeys]` - The list of keycodes that will fire the
   `(chipAdded)` event.
 - `[addOnBlur]` - Whether or not to fire the `(chipAdded)` event
   when the input is blurred.

Additionally, fix some issues with dark theme and add styling/support
for usage inside the `md-input-container` and add styling for focused
chips.

BREAKING CHANGE - The `selectable` property of the `md-chip-list` has
now been moved to `md-chip` to maintain consistency with the new
`removable` option.

If you used the following code,

```html
<md-chip-list [selectable]="selectable">
  <md-chip>My Chip</md-chip>
</md-chip-list>
```

you should switch it to

```html
<md-chip-list>
  <md-chip [selectable]="selectable">My Chip</md-chip>
</md-chip-list>
```

References angular#120. Closes angular#3143.

Hat tip to @willshowell for suggestion to use secondary-text
for focus color :-)
tinayuangao pushed a commit to tinayuangao/material2 that referenced this issue Jun 1, 2017
Add events, styling and keyboard controls to allow removable chips.

 - Add basic styling for a user-provided remove icon.
 - Add keyboard controls for backspace/delete.
 - Add `(remove)` event which is emitted when the remove icon or
   one of the delete keys is pressed.
 - Add `md-chip-remove` directive which can be applied to `<md-icon>`
   (or others) to inform the chip of the remove request.

Add new directive `mdChipInput` for controlling:
 - `(chipAdded)` - Event fired when a chip should be added.
 - `[separatorKeys]` - The list of keycodes that will fire the
   `(chipAdded)` event.
 - `[addOnBlur]` - Whether or not to fire the `(chipAdded)` event
   when the input is blurred.

Additionally, fix some issues with dark theme and add styling/support
for usage inside the `md-input-container` and add styling for focused
chips.

BREAKING CHANGE - The `selectable` property of the `md-chip-list` has
now been moved to `md-chip` to maintain consistency with the new
`removable` option.

If you used the following code,

```html
<md-chip-list [selectable]="selectable">
  <md-chip>My Chip</md-chip>
</md-chip-list>
```

you should switch it to

```html
<md-chip-list>
  <md-chip [selectable]="selectable">My Chip</md-chip>
</md-chip-list>
```

References angular#120. Closes angular#3143.

Hat tip to @willshowell for suggestion to use secondary-text
for focus color :-)
tinayuangao pushed a commit to tinayuangao/material2 that referenced this issue Jun 5, 2017
Add events, styling and keyboard controls to allow removable chips.

 - Add basic styling for a user-provided remove icon.
 - Add keyboard controls for backspace/delete.
 - Add `(remove)` event which is emitted when the remove icon or
   one of the delete keys is pressed.
 - Add `md-chip-remove` directive which can be applied to `<md-icon>`
   (or others) to inform the chip of the remove request.

Add new directive `mdChipInput` for controlling:
 - `(chipAdded)` - Event fired when a chip should be added.
 - `[separatorKeys]` - The list of keycodes that will fire the
   `(chipAdded)` event.
 - `[addOnBlur]` - Whether or not to fire the `(chipAdded)` event
   when the input is blurred.

Additionally, fix some issues with dark theme and add styling/support
for usage inside the `md-input-container` and add styling for focused
chips.

BREAKING CHANGE - The `selectable` property of the `md-chip-list` has
now been moved to `md-chip` to maintain consistency with the new
`removable` option.

If you used the following code,

```html
<md-chip-list [selectable]="selectable">
  <md-chip>My Chip</md-chip>
</md-chip-list>
```

you should switch it to

```html
<md-chip-list>
  <md-chip [selectable]="selectable">My Chip</md-chip>
</md-chip-list>
```

References angular#120. Closes angular#3143.

Hat tip to @willshowell for suggestion to use secondary-text
for focus color :-)
@jelbourn
Copy link
Member Author

jelbourn commented Jun 6, 2017

Closing this, as chips have been around for a while and #4912 adds the last of the basic functionality. We can track further work in more specific issues.

@jelbourn jelbourn closed this as completed Jun 6, 2017
tinayuangao pushed a commit to tinayuangao/material2 that referenced this issue Jun 12, 2017
Add events, styling and keyboard controls to allow removable chips.

 - Add basic styling for a user-provided remove icon.
 - Add keyboard controls for backspace/delete.
 - Add `(remove)` event which is emitted when the remove icon or
   one of the delete keys is pressed.
 - Add `md-chip-remove` directive which can be applied to `<md-icon>`
   (or others) to inform the chip of the remove request.

Add new directive `mdChipInput` for controlling:
 - `(chipAdded)` - Event fired when a chip should be added.
 - `[separatorKeys]` - The list of keycodes that will fire the
   `(chipAdded)` event.
 - `[addOnBlur]` - Whether or not to fire the `(chipAdded)` event
   when the input is blurred.

Additionally, fix some issues with dark theme and add styling/support
for usage inside the `md-input-container` and add styling for focused
chips.

BREAKING CHANGE - The `selectable` property of the `md-chip-list` has
now been moved to `md-chip` to maintain consistency with the new
`removable` option.

If you used the following code,

```html
<md-chip-list [selectable]="selectable">
  <md-chip>My Chip</md-chip>
</md-chip-list>
```

you should switch it to

```html
<md-chip-list>
  <md-chip [selectable]="selectable">My Chip</md-chip>
</md-chip-list>
```

References angular#120. Closes angular#3143.

Hat tip to @willshowell for suggestion to use secondary-text
for focus color :-)
tinayuangao pushed a commit to tinayuangao/material2 that referenced this issue Jun 12, 2017
Add events, styling and keyboard controls to allow removable chips.

 - Add basic styling for a user-provided remove icon.
 - Add keyboard controls for backspace/delete.
 - Add `(remove)` event which is emitted when the remove icon or
   one of the delete keys is pressed.
 - Add `md-chip-remove` directive which can be applied to `<md-icon>`
   (or others) to inform the chip of the remove request.

Add new directive `mdChipInput` for controlling:
 - `(chipAdded)` - Event fired when a chip should be added.
 - `[separatorKeys]` - The list of keycodes that will fire the
   `(chipAdded)` event.
 - `[addOnBlur]` - Whether or not to fire the `(chipAdded)` event
   when the input is blurred.

Additionally, fix some issues with dark theme and add styling/support
for usage inside the `md-input-container` and add styling for focused
chips.

BREAKING CHANGE - The `selectable` property of the `md-chip-list` has
now been moved to `md-chip` to maintain consistency with the new
`removable` option.

If you used the following code,

```html
<md-chip-list [selectable]="selectable">
  <md-chip>My Chip</md-chip>
</md-chip-list>
```

you should switch it to

```html
<md-chip-list>
  <md-chip [selectable]="selectable">My Chip</md-chip>
</md-chip-list>
```

References angular#120. Closes angular#3143.

Hat tip to @willshowell for suggestion to use secondary-text
for focus color :-)
tinayuangao pushed a commit to tinayuangao/material2 that referenced this issue Jun 26, 2017
Add events, styling and keyboard controls to allow removable chips.

 - Add basic styling for a user-provided remove icon.
 - Add keyboard controls for backspace/delete.
 - Add `(remove)` event which is emitted when the remove icon or
   one of the delete keys is pressed.
 - Add `md-chip-remove` directive which can be applied to `<md-icon>`
   (or others) to inform the chip of the remove request.

Add new directive `mdChipInput` for controlling:
 - `(chipAdded)` - Event fired when a chip should be added.
 - `[separatorKeys]` - The list of keycodes that will fire the
   `(chipAdded)` event.
 - `[addOnBlur]` - Whether or not to fire the `(chipAdded)` event
   when the input is blurred.

Additionally, fix some issues with dark theme and add styling/support
for usage inside the `md-input-container` and add styling for focused
chips.

BREAKING CHANGE - The `selectable` property of the `md-chip-list` has
now been moved to `md-chip` to maintain consistency with the new
`removable` option.

If you used the following code,

```html
<md-chip-list [selectable]="selectable">
  <md-chip>My Chip</md-chip>
</md-chip-list>
```

you should switch it to

```html
<md-chip-list>
  <md-chip [selectable]="selectable">My Chip</md-chip>
</md-chip-list>
```

References angular#120. Closes angular#3143.

Hat tip to @willshowell for suggestion to use secondary-text
for focus color :-)
tinayuangao pushed a commit to tinayuangao/material2 that referenced this issue Jul 12, 2017
Add events, styling and keyboard controls to allow removable chips.

 - Add basic styling for a user-provided remove icon.
 - Add keyboard controls for backspace/delete.
 - Add `(remove)` event which is emitted when the remove icon or
   one of the delete keys is pressed.
 - Add `md-chip-remove` directive which can be applied to `<md-icon>`
   (or others) to inform the chip of the remove request.

Add new directive `mdChipInput` for controlling:
 - `(chipAdded)` - Event fired when a chip should be added.
 - `[separatorKeys]` - The list of keycodes that will fire the
   `(chipAdded)` event.
 - `[addOnBlur]` - Whether or not to fire the `(chipAdded)` event
   when the input is blurred.

Additionally, fix some issues with dark theme and add styling/support
for usage inside the `md-input-container` and add styling for focused
chips.

BREAKING CHANGE - The `selectable` property of the `md-chip-list` has
now been moved to `md-chip` to maintain consistency with the new
`removable` option.

If you used the following code,

```html
<md-chip-list [selectable]="selectable">
  <md-chip>My Chip</md-chip>
</md-chip-list>
```

you should switch it to

```html
<md-chip-list>
  <md-chip [selectable]="selectable">My Chip</md-chip>
</md-chip-list>
```

References angular#120. Closes angular#3143.

Hat tip to @willshowell for suggestion to use secondary-text
for focus color :-)
jelbourn pushed a commit that referenced this issue Jul 13, 2017
Add events, styling and keyboard controls to allow removable chips.

 - Add basic styling for a user-provided remove icon.
 - Add keyboard controls for backspace/delete.
 - Add `(remove)` event which is emitted when the remove icon or
   one of the delete keys is pressed.
 - Add `md-chip-remove` directive which can be applied to `<md-icon>`
   (or others) to inform the chip of the remove request.

Add new directive `mdChipInput` for controlling:
 - `(chipAdded)` - Event fired when a chip should be added.
 - `[separatorKeys]` - The list of keycodes that will fire the
   `(chipAdded)` event.
 - `[addOnBlur]` - Whether or not to fire the `(chipAdded)` event
   when the input is blurred.

Additionally, fix some issues with dark theme and add styling/support
for usage inside the `md-input-container` and add styling for focused
chips.

BREAKING CHANGE - The `selectable` property of the `md-chip-list` has
now been moved to `md-chip` to maintain consistency with the new
`removable` option.

If you used the following code,

```html
<md-chip-list [selectable]="selectable">
  <md-chip>My Chip</md-chip>
</md-chip-list>
```

you should switch it to

```html
<md-chip-list>
  <md-chip [selectable]="selectable">My Chip</md-chip>
</md-chip-list>
```

References #120. Closes #3143.

Hat tip to @willshowell for suggestion to use secondary-text
for focus color :-)
jelbourn pushed a commit that referenced this issue Jul 14, 2017
* feat(chips): Add remove functionality/styling.

Add events, styling and keyboard controls to allow removable chips.

 - Add basic styling for a user-provided remove icon.
 - Add keyboard controls for backspace/delete.
 - Add `(remove)` event which is emitted when the remove icon or
   one of the delete keys is pressed.
 - Add `md-chip-remove` directive which can be applied to `<md-icon>`
   (or others) to inform the chip of the remove request.

Add new directive `mdChipInput` for controlling:
 - `(chipAdded)` - Event fired when a chip should be added.
 - `[separatorKeys]` - The list of keycodes that will fire the
   `(chipAdded)` event.
 - `[addOnBlur]` - Whether or not to fire the `(chipAdded)` event
   when the input is blurred.

Additionally, fix some issues with dark theme and add styling/support
for usage inside the `md-input-container` and add styling for focused
chips.

BREAKING CHANGE - The `selectable` property of the `md-chip-list` has
now been moved to `md-chip` to maintain consistency with the new
`removable` option.

If you used the following code,

```html
<md-chip-list [selectable]="selectable">
  <md-chip>My Chip</md-chip>
</md-chip-list>
```

you should switch it to

```html
<md-chip-list>
  <md-chip [selectable]="selectable">My Chip</md-chip>
</md-chip-list>
```

References #120. Closes #3143.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feature This issue represents a new feature or feature request rather than a bug or bug fix new component This issue is tracking a new component to be added to the library
Projects
None yet
Development

No branches or pull requests