Custom inputs?

[camertron]

It used to be you could define a custom input by adding a partial to app/views/lookbook/previews/inputs, but that doesn't seem to work anymore for Lookbook v1.x. The docs mention custom tags, but it's unclear to me how to specify a partial or component to render. Are custom inputs still a thing?

[allmarkedup]

Hey @camertron - I actually had no idea that anyone was creating custom inputs like that! As you probably know it was never a documented feature, mostly because I wasn't really 100% sure that I had the implementation right yet.

As of v1.0 that won't work anymore unfortunately. But being able to add custom @param inputs is definitely on my list of things to do. I'm actually just finishing up some work on making @param options more powerful, so it would make sense to revisit the custom inputs idea at the same time. It should be relatively straightforward, it's really just making sure all the JS plays nicely with whatever custom inputs people decide to add.

What kind of inputs are you looking to add (or have added in the past), out of interest?

[DRBragg]

👀

[camertron]

Ah right, it wasn't documented, that's true 😅

I'm on the Design Eng team at GitHub working on primer/view_components. I had added an _octicons.html.erb partial to our Lookbook that rendered a select dropdown with the names of all the available Octicons. Doing so made it easy to do things like

# @param leading_visual_icon [Symbol] octicon

There are quite a few Octicons, so listing them all in the @param tag isn't really an option. Long story short: all I really need is a way to programmatically provide a list of dropdown options 😄

[allmarkedup]

@camertron yes I'm familiar with you from my stalking on the ViewComponent repo :-) And coincidentally was just checking out your Rux repo the other day, looking forward to having a bit more of a play with that.

So in this case I think that the changes in #160 should solve your problem? It's a pretty common issue for people so was definitely something I wanted to solve.

I'll be putting a release out in the next couple of days will include that and a few other bits, but it's merged into main now if you wanted to test it out. I still need to do a bit more testing on it myself but let me know if you run into any issues!

[allmarkedup]

@camertron Joel actually pointed me to the Primer ViewComponent Lookbook the other day - is that what you are working on? Very cool to see all the Primer components in there. If there is anything else I can do help out with any issues you run into while setting it all up please do just let me know and I'll do my best to help!

[camertron]

Yes I'm familiar with you from my stalking on the ViewComponent repo

😆

And coincidentally was just checking out your Rux repo the other day, looking forward to having a bit more of a play with that.

Oh cool!

So in this case I think that the changes in #160 should solve your problem? It's a pretty common issue for people so was definitely something I wanted to solve.

Amazing! Yes this will help quite a bit. I would still love the option to declare a custom param, since that'll be shorter/less verbose than the technique presented in #160.

It's merged into main now if you wanted to test it out. I still need to do a bit more testing on it myself but let me know if you run into any issues!

Awesome, thanks, will do 😄

[allmarkedup]

@camertron yep definitely, custom inputs are definitely still going to happen soon.

Oh and just in case you need the docs for the new @param options stuff before I get the proper release out you can find them here: https://deploy-preview-160--lookbook-docs.netlify.app/guide/previews/params/#param-options

Have a good weekend :-)

[camertron]

Sweet thank you! Have a great weekend 😄

[allmarkedup]

@camertron just a quick follow up on this - the recent v1.1 release includes proper support for custom param inputs (docs here) which will hopefully give you a better way to implement the icon dropdown.

If you run into any difficulties just let me know but hopefully the docs will give you enough to go on.

[camertron]

That's awesome news, thanks @allmarkedup! Will take a look at the docs.

[camertron]

Just circling back to say custom inputs worked like a charm! I've got a custom Octicons select list working in the primer/view_components Lookbook, and it was super easy to hook up. Thanks so much!

[allmarkedup]

Great! Thanks for letting me know @camertron 😊