I suggest that Variants be “dropped” in favor of “Presets”. (Or “Presets” should be offered in addition.)
I love the experience of Variants (how very easily you can define them, see how they look instantly, and preview them separately in the preview mode.)
However, I find variants too simple. It’s just a single prop. I find it useful only in simple components (e.g. a button), but not anywhere else. In 90% of situations I have to use props and dynamic code conditions to steer logic.
For example, let’s say I have a EventList component that accepts events: Event[]. It should look differently in the following three scenarios:
• 0 events
• 1-3 events
• 4+ events
Furthermore, maybe there’s another prop saying editMode: boolean. It may impact how the “1-3 events” and “4+ events” scenarios look like.
Currently I can do it all, but to see how it works in reality, I either have to click through my app (like in e2e tests) to see how this component works in all scenarios.
Or, I have to change the “Preview value” of the props there-and-back (which is a manual, tedious and error-prone process, especially in props that accept complex array/object jsons as the value).
Instead, it’d be great if I could say that I’d like to have presets of my EventList component, that have following prop combinations:
• “0 events” - events: []
• “2 events” - events: [1,2]
• “4 events” - events: [1,2,3,4]
• “2 events, edit mode” - events: [1,2], editMode: true
And while editing/previewing the component, I could control which preset is currently used for the props preview values.
I already saw it in action in one front-end no-code framework. Unfortunately it was internally built and used in my previous company, so I can’t show how it worked exactly - but I gave you the idea above.
