Add more components

[nt1m]

http://www.google.com/design/spec

Remaining items : P1 :

• [x] Typography (h1, h2, h3, h4, h5, h6, blockquote, a, ...)
• [x] Subheaders
• [x] Menus
• [ ] More toolbars (especially huge header toolbars)
• [x] Dividers (for lists, sections, ...)
• [x] Rich cards (with pictures for example)
• [x] Grids
• [ ] Progress bars
• [ ] Spinners
• [x] Styled <select>
• [ ] Bottom sheets (http://www.google.com/design/spec/components/bottom-sheets.html#bottom-sheets-content )

P2 :

• [ ] [JS] Better inputs (with sliding placeholder and stuff)
• [ ] [JS] Contact chips
• [x] [JS] Dialogs (.card[z="3"])
• [ ] [JS] Tooltips
• [ ] [JS] Discrete sliders (with number popout)
• [x] [JS] Sidemenus
• [x] [JS] Dropdown menus
• [ ] [JS] Pickers (http://www.google.com/design/spec/components/pickers.html )
• [ ] [JS] Fancybox

[PalmerAL]

The contact chips are really a js component. These are inserted into a text field, so this would need to integrate with some kind of tag field library.

[PalmerAL]

Also, spinners don't really need any js. something like http://codepen.io/kevinfarrugia/pen/EaPQNX/ maybe

[nt1m]

@PalmerAL You're right, fixed. For the spinner, I found this interesting article : https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html

[PalmerAL]

That would probably work. Also, google drive uses a material design spinner that (appears to be) entirely css and might have better browser support (though I haven't really looked into how it works there very much)

[PalmerAL]

If I understand correctly, the sliding placeholder on inputs don't need js either - see http://css-tricks.com/float-labels-css/

[nt1m]

@PalmerAL, for the spinner, I'd like to have the minimum of elements required, not too much children would be nice. I bet Google drive uses lots of children elements.

For the sliding placeholder, I know the technique already, but I'd like to avoid using the :valid hack, since it won't work perfectly in various form validation cases (number inputs, pattern attribute, ...), in those use cases, the label will appear behind the entered text if the input isn't valid. The JS is going to be tiny, but it's needed to get a perfect experience.

[PalmerAL]

I've started working on the sidemenu component, so far, I have this:

However, I can't find anything in the spec about this component. Do you know where the documentation for this is located?

[nt1m]

@PalmerAL Nice work ! Here's the spec from Google : http://www.google.com/design/spec/patterns/navigation-drawer.html Strangely, it's located in Patterns instead of Components.