When creating new components it is important to use the inbuilt functionality of the Design System. The components, grid system, variables and functions have been created to help to simplify this process. Using the inbuilt functionality ensures changes to the system and changes you make will naturally flow into your own custom components.
If you are in the process of making a new component make sure it is something your user needs. Often times simple solutions are the most usable.
We like to ask these questions before making new components:
If you can’t use or modify an existing component we ask:
We are going to create a card component. So lets answer the questions above.
We could use callout; however, callout should be used for bringing attention to a piece of content. We need a solution that groups content together and the content inside it can be flexible.
We could probably customise the callout component to meet this user need. However, it feels a bit confusing, cards are used for grouping and callouts are used for grouping text and highlighting it to a user. In this situation we will create the component but let the community know that card and callout are very similar but meet different user needs.
For now we will be keeping it simple and not using any components. However, we will use the functionality from core and in the future we can add the headings for the card titles as a dependency.
Yes, we will be focusing on keeping this simple so we can share it with others.