Inversion of control?
ZipBrandon opened this issue · comments
Thank you for your contribution. This is a nicely UXed library that solves a complicated problem -- and is a lovely use of TailwindCSS! My applications current UI library has been backed by downshift which has given me IoC where I can customize the logic or rendering process. I'm attempting to incorporate Turnstone into my UI library but I need the ability to use floating-ui to keep the dropdown in the viewport. Seemingly I cannot do this with Turnstone with my cursory knowledge of it. Possibly with Turnstone plugins?
Thanks for you kind comments. Much appreciated.
IoC is a great pattern for ultimate customisation. My decision not to go that route was partly because downshift already exists and is great. But I think there's also room for something props-based that requires minimal configuration for a basic solution, and yet still allows a lot of customisation if you want it. I'm trying to hit a sweet spot between between super-customisable and super-easy to configure, which I hope some folks might appreciate. With Turnstone that ability to customise markup is mainly aimed at the listbox items. Most other customisation is limited to styling.
Your floating-ui example shows that there are limits to how flexible props-based customisation can be.
That's a long-winded way of saying no, right now (v1.2.3) would not allow positioning of the listbox via floating-ui. I think at a minimum I would need to add props to allow refs to be passed for the input container/control as well as explicit styles for the listbox as well as just classnames.
It would be a really nice enhancement so I'm going to play with this ASAP. A plugin could be nice too.
I'll leave the issue open and add updates as soon as I've made progress with this.
Side note: Worth pointing out that although I used Tailwind for some of the examples - mostly because I really like it - something like CSS Modules would work just as well. Just a matter of passing in the class names you want for each element in the styles prop as per the README.
@ZipBrandon I've had a long look at this. Allowing positioning of the dropdown using floating-ui without baking it into the core functionality would not be at all straightforward. However, I'll add it to the backlog as a possible future enhancement.