feat(chips): ability to disable chip removal (input)

[JoshSchoen]

Description

PR to to disable chip removal. readOnly overrides this feature, in order for this feature to work readOnly must be false.

What's included?

• modified: src/platform/core/chips/chips.component.ts
• modified: src/platform/core/chips/chips.component.spec.ts
• modified: src/platform/core/chips/README.md
• modified: src/platform/core/chips/chips.component.html
• modified: src/app/components/components/chips/chips.component.html
• modified: src/app/components/components/chips/chips.component.ts

Test Steps

• Checkout Branch
• ng serve
• Navigate to http://localhost:4200/#/components/chips
• Make sure you can remove chips using the "x" along with delete/backspace on the keyboard.
• Make sure you can add chips using the autocomplete input.
• Make sure left/right and up/down arrows on the keyboard still work once you click on a chip.
• Click on Chip removal to turn off chip removal
• Make sure the "x" is removed from all chips.
• Make sure you can still click on the chips and the active chip color displays.
• Makes sure delete/backspace does not remove any chips.
• Make sure left/right and up/down arrows on the keyboard still work.
• Turn on Read only
• Make sure autocomplete input is removed and "x" is removed from all chips. Also make sure you are not able to select a chip (the chip color should not change) and a dotted line appears under the chips.
• Turn off Chip addition.
• Make sure the dotted line is removed.
• Make sure the "x" is removed from all chips and chips are not selectable.
• Turn off Read only, turn on Chip removal
• Make sure the "x" is added to the chips, chips are selectable and the "x" along with the delete/backspace keys remove a chip when triggered.

General Tests for Every PR

• ng serve --aot still works.
• npm run lint passes.
• npm test passes and code coverage is not lower.
• npm run build still works.

Screenshots or link to CodePen/Plunker/JSfiddle

[emoralesb05]

As discussed, if you can add 1 or 2 unit tests that would be awesome! 😄

[JoshSchoen]

Will do, might take me a bit, need to get into unit testing a little more.

[emoralesb05]

No worries, we have time until the next release haha

[emoralesb05]

Merged with develop so it has latest. Also solved the conflicts.

[emoralesb05]

oh btw, we load the README.md file now in the chip docs. Can you add the property and example into the chips README.md?

We should be able to remove all the properties from https://github.com/Teradata/covalent/blob/develop/src/app/components/components/chips/chips.component.ts#L16-L47 since they arent used anymore (forgot to remove them on the other PR)

[JoshSchoen]

Right on @emoralesb05, I can remove the properties and add and example into the chips README.md. Still need unit test for this, correct?

[kyleledbetter]

@JoshSchoen i updated your branch w/ the latest from develop, looking forward to your latest tweaks and getting this merged :)

[JoshSchoen]

@emoralesb05, @kyleledbetter updated the chipRemoval to include unit tests. These are the tests I added, let me know if this is overkill or if you were expecting something else.

chip removal usage, requires readOnly to be false:
should not focus input
should not show cancel button
should focus input, then focus first chip and remove first chip by clicking on the remove button
should focus first chip and remove chip with backspace and delete
should focus around the chips going left
should focus around the chips going right

Also updated the README.md and removed the chipAttrs. There were a few conflicts I resolved so let me know if you see anything wonky.

[emoralesb05]

💥 thanks man! awesome unit tests