Buttonify

[yoshuawuyts]

This implements part of #280,
namely buttons and icons. It creates a slightly more intuitive API to create
elements, and decouples the icons from the buttons itself making them more
flexible. All elements should be accessible and reusable between projects.

The app runs and all event seem to work as expected which means I caught all
instances I think. Thanks!

API

var button = require('./elements/button')
var icon = require('./elements/icon')

icon('exit')                    // render an exit icon
icon('exit', { class: 'pt3' })  // render an exit icon with extra classes

button('some-button')                                      // render a plain button
button.green('my-cool-button', { onclick: handleclick })   // render a green button with an onclick handler
button.icon('my-cooler-button', { icon: icon('exit') })    // render an accessible icon-only button
button('some-button', { class: 'pr2 mt3' })                // render a plain button with extra classes

[yoshuawuyts]

hah, found some beautiful glitches - hold on with the merge for a lil bit ok?

[juliangruber]

what about this syntax?

icon('#link.absolute.top-0.bottom-0.left-0')

[yoshuawuyts]

Oh I kinda like that; very close to hyperscript's class / id shorthand - I think having that at some point would definitely make sense. Nice ✨

I'd probably make sure there'd be full consistency with hyperscript tho:

icon('link.absolute.top-0.bottom-0.left-0#some-id')

but yeah that's nit picking. I like it!

[okdistribute]

I like having the 'class' dict, it also is just as simple and already works.

[yoshuawuyts]

annnnd... package! - https://github.com/yoshuawuyts/parse-class

[yoshuawuyts]

Yeah nah, agree - this would only work for icons right now; buttons is harder - gonna leave this for a bit

[yoshuawuyts]

@Kriesse ran into an SVG styling issue; not sure what changed but could you perhaps take a look - styling SVGs has never been my forte. Once that's fixed this should be ready to merge.

[Kriesse]

@yoshuawuyts the intro screen and a few other small misalignments are fixed, ready to merge from my side! Preview:

[yoshuawuyts]

Awesome, just ran through it and it's looking 💯 - merging!