[Chip] New component

[mbrookes]

• [x] PR has tests / docs demo, and is linted.
• [x] Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
• [x] Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

New Chip component.

Features:

• Text only and "Contact" avatars.
• Contact Avatars can be image, icon (svg or font) or text.
• Optional delete icon.
• Focus shadow, click shading.
• Touch and keyboard events supported.

Still to do:

• Agree the API - currently supports both props and composability for label and Avatar. As a new component we might want to only support composability.
• Decide on required event callbacks. I took a kitchen sink approach, but we might want to narrow it down (or add others, such as drag events).
• PropTypeDescription is refusing to work, and I'm not sure why, so Ive removed it from the docs Page.js for now.
• Refactoring based on @callemall/material-ui review :sweat_smile:
• Tests. (Thanks @nathanmarks!)
• Delete button not working in Firefox. (zIndex?) (Thanks @newoga!)

Closes #1119.

[nathanmarks]

@mbrookes I'll create a separate issue for it.

[nathanmarks]

@mbrookes this is the pretty severe bug I mentioned: https://github.com/callemall/material-ui/issues/4149

[nathanmarks]

@mbrookes Something I just realised:

  handleMouseEnter = (event) => {
    this.handleFocus();
    this.props.onMouseEnter(event);
  };

This fires the handleFocus() function, which then fires the props.onFocus handler. The problem here is that we are telling the user that the element has been focussed, when in fact it has just been hovered.

We should try to keep the two event handlers separate -- and use another function if they need to share behaviour.

[newoga]

Just making a note here based on discussion in gitter:

Aside from whether or not hover should trigger shadow by default, the only suggestion I have is to change the font size and weight to 14px and normal/400.

[mbrookes]

Fixed all the things. :)

[mbrookes]

Just playing with this again, and something still doesn't feel right with the "no onTouchTap event" chips.

Should deletable chips have hover state, even though they have no click handler, (i.e. have everything except shadow on click?) I have no clue! 😄

Current behaviour is that they don't change appearance (or pointer) on hover, but they can by focused with the mouse or keyboard, and change color to the focused color.

Other implementations: http://materializecss.com/chips.html No states at all.

https://material.angularjs.org/latest/demo/chips No hover state. Changes color on focus. No shadow when clicked. No pointer change.

http://react-toolbox.com/#/components/chip Only the delete icon has hover state and pointer.

So I think Chip behaves better than all of those...

Edit: Missing (

[nathanmarks]

@mbrookes wanna squash the 3 chip commits into 1?

[mbrookes]

Done.

[nathanmarks]

@callemall/material-ui can we get another set of eyes to review this (properly)? Then we can merge IMO.

[oliviertassinari]

@mbrookes I have only see minor issues. That's a great PR 👍.

[mbrookes]

@oliviertassinari Thanks!

Let me know if that looks okay, and I'll squash.

[zachguo]

Is this going to work with Autocomplete, like rendering Chips in text field at least?

[mbrookes]

@zachguo This is just the chip itself, but an input component would be a natural place to use it.

[keremciu]

@mbrookes @zachguo is there any plan to build an example using autocomplete with chips? I think it is really important for chip component, I will try to build multiple selectable autocomplete with chips maybe we can talk on that?

[nathanmarks]

@keremciu yes, just not immediately

[nathanmarks]

@mbrookes squash the fix all the things

[mbrookes]

@keremciu You could open an issue for that with relevant screenshots, links to other implementations etc.

[mbrookes]

@nathanmarks Done.

[mbrookes]

Any idea why Chip doesn't show in the default coverage report? (Also do we need a couple more tests?)

[nathanmarks]

@mbrookes https://coveralls.io/builds/6118507/source?filename=src%2FChip%2FChip.js

[mbrookes]

@nathanmarks Yeah, I found that - that's why I asked about adding tests (for those last couple of functions).

The question was why Chip doesn't show in the default coverage report. https://coveralls.io/builds/6118507 Just seems odd not to include new modules, tested or otherwise.

[nathanmarks]

@mbrookes must be a little bug -- will report it

[oliviertassinari]

@mbrookes That looks us some time. That worth it 🎉 .

[Petergatsby]

This is great- well needed! Thanks @tim

[MikeMuxika]

@mbrookes @nathanmarks, in reference to @keremciu's comment on May 10th:

is there any plan to build an example using autocomplete with chips? I think it is really important for chip component, I will try to build multiple selectable autocomplete with chips maybe we can talk on that?

Is there any update on when examples with Autocomplete and Chips will be made? This use case is of particular interest to myself and I presume many others as well.

[mbrookes]

@muxica I don't believe anyone is working on it.

[elodszopos]

+1 on the Autocomplete chips integration.

[mbrookes]

For anyone still looking that hasn't spotted it in related projects: https://github.com/TeamWertarbyte/material-ui-chip-input