Why this approach?
Box is an atom, the
Module component is a micro-extension of a
Box which you might consider a molecule. It's implementing some of the common patterns we've noticed across all these modules that should help us from repeating ourselves and allow us to build out screens faster. Very similar to
Card which might be a more familiar concept, but even simpler with less variations for things like media.
Why this approach?
Composability. Breaking up what might seem like a single concept of a
Module into multiple components like this helps us to maintain AND test them more easily.
It also provides the consumer developers & applications the flexibility they need to build out screens the way they want to without having a single massive component made up of many components, which we need to control through schemas, or passing nested props, or having tons of slots. All of which creates complexities in testing and maintaining a component without breaking things.
ModuleFooter can be separate components. Not every
Module implemented needs to use all of them. Some modules don't have headers or footers, etc. This is a very powerful composability pattern used by popular UI component libraries to improve testability and maintainability while giving end users the a lot of flexibility in the cleanest possible way. The resulting usage becomes much clearer, as opposed to a single component with many props, slots and/or schemas, you've got a very declarative composition of components.
- Optional expand/collapse.
- The resulting usage becomes much clearer, as opposed to a single component with many props, slots and/or schemas, you've got a very declarative composition of components.
<Module expandable closed> <ModuleHeader>Some Header Here</ModuleHeader> <ModuleContent> <p>Anything you want here</p> </ModuleContent> <ModuleFooter>Something here?</ModuleFooter> </Module>
- Each component will have it's own props and focus. Make the most common patterns be the defaults so users don't need to specify anything in those scenarios.