Skip to content
This repository has been archived by the owner on Apr 27, 2022. It is now read-only.

The component I'm about to build is similar to an existing one, what should I do?

Xavier Via edited this page Aug 23, 2016 · 1 revision

Build a new one if your component either:

  • Has a different role than the one you are comparing to. For example, there are several selectors, but some of them are meant to select payment methods, some of them are meant to select installment options, so their role differs and that makes them need to be separate components.
  • Has a distinct meaning than the one you are comparing to. For example, a Secondary Title is visually rather similar to a Primary Title, but is semantically a different thing.
  • It's technically hard to implement as a small variation of the component you are comparing to. Components should be kept small, so creating a new one is a valid solution to avoid bloating them with logic.
  • The variation that you want to represent can't be described with a boolean prop (such as borderless)

Good reasons to implement your component as a variation enabled with a prop is:

  • It is simply a color variation with no semantic meaning (ie. you need a white Tooltip to use with blue backgrounds).
  • It is a small contextual adaptation of some other kind (ie. removing the borders).