Expose/hide nested instances -> at component property level

Forum|Forum|3 years ago
September 22, 2022
381 replies
20389 views

With the new update, we have a great new feature, but unfortunately, it’s not usable with our component structure.
Exposing all props of a nested instance also exposes props that we don’t want in the context of the consuming component.

What if we could also select which properties to expose? This would lead to a cleaner sidebar with only valid props.

Show previous replies

Schweiss_Kelly

New Member

This is a very critical feature for design systems trying to utilize an atomic approach to their design system. If teams want to provide highly configured patterns for quick use or to provide more guidance and control over the patterns teams are using, there needs to be a way to control EXACTLY what the end-user designer can configure.

I work on a team that consumes our design system to build pattern-level components for the teams we support. We DON’T control the design system, but instead the reusable patterns built with it. In some scenarios, we may want to allow users to make changes to certain text or instance swap functionality that is inherited from the original “atom” component, and other times we want to limit what is used.

For example, if we build a pattern for something (say a card) with an icon button, we may allow users to swap both the button and edit the text. In other patterns, we may want to allow them to edit the text only, but restrict usage to a single icon.

The all-or-nothing approach to exposing nested component properties leads to bad practices like detatching atoms to re-create a more limited set of properties, or relying on documentation to let end-user designers know what they should and should not modify. (And let’s face it, many don’t like to read documentation)