akleiner2
commented
3 years ago Closing this out for inactivity - sorry it's been so long 😅 . In general, we're supportive of adding new components to Evergreen, but we typically do so based on our internal needs first. I think we likely could ship an Evergreen-like ColorPicker at some point in the future, but until then, we'll defer to consumers to build their own. These are excellent suggestions, though!
Problem
Hey, so I've just started using Evergreen for everything w/ Gatsby. I am a creative coder and I often make mathematical explanation tools that update some visualization in real time upon change in some control input component. An example of pure frontend tool using control components: Spring, Bob and Hinge System.
Evergreen lacks some essential components like a sliders ,range pickers, etc. And current alternatives lack the flexibility and atom-like behavior that comes with separate components such as Evergreen. I can use Evergreen components inside a blog post with MDX but I can't use components that come with control libraries inside it because they are not available in isolation. (such as DAT.gui, ControlKitJS)
The solution that I would like
I feel that Evergreen, being an easy to use isolated set of components could improve these control based tools a lot. If Evergreen could support some more beautiful evergreen-y control components such as sliders, grid based pickers, pad controllers, color pickers, range pickers and grid containers, it would be a dream come true. Evergreen is super easy to compose and work with, except it lacks some componets like (from ControlKit's documentation):
1) Color Picker:
2) Control Pad:
3) Function Plotters
4) Value Trackers
5) Sliders
Normal sliders would look good as well, but a variant could be this as well:
6) Split Containers - Horizontal and Vertical.
Split containers are most often used in Godot gaming engine to build layouts. You can control the width of two separations of a vertical split container (Vsplit), and height of a horizontal split container (HSplit) with mouse. I've shown a vertical split container below (focus only on how I'm changing width of two containers, rest is noise), a horizontal one would have controllable height of its two parts:
7) Grid Containers
It's kind of very easy to build grid based layouts with CSS Grids, but many of us are trying to have less CSS in our projects, and it would be great if some Grid based components that bring out the power to CSS Grids exist natively with Evergreen.
Alternatives that I've considered
The library that I usually use for playground tools like Spring, Bob and Hinge System is ControlKit JS that has some really cool components for reactive programs like this. It's heavily coupled though and doesn't contain individual components in isolation unlike Evergreen. Plus it only works well with Vanilla JS, not with reactive frameworks. Also they're not theme-able like Evergreen. And for containers - I've been taking advantage of Pane, but composing grid layouts and split containers are comparitively difficult, if there were extendable components for those it would help out a lot.