'Subcomponents' isn't a new idea, and effectively is [[20210412143336-compound-components]].
Subcomponent: an independently composable UI component with a well-defined API intended for use only within a specific parent component or context.
They aim to offer composition and flexibility. They make the 'uncommon' designs possible, the designs not on the happy path. The user needs a bit more work to get there, but they can still be within the design system rather than bespoke.
Subcomponents can act as a facade, locking down props as needed. For example a CardImage
component can exist just to restrict the props of the more generic Image
component. This can help remove footguns, improve the ergonomics, etc.
Subcomponents are often prefixed with a similar name, e.g. Menu
and MenuItem
.
Pros:
Most cons are less cons, and more tradeoffs
Cons:
https://medium.com/eightshapes-llc/subcomponents-753ce9f6600a
[[20210908151101-component-design]] [[20220801105616-break-out-design-system]]
[[components]] [[componentapi]] [[designsystem]] [[designsystemapi]]