Skip to content

Guidelines

These guidelines are mainly dedicated to cozy-ui designers and maintainers.

New component

We want to stay as close as possible to MUI components and properties. When we create a new component, we have 4 cases.

  1. A MUI component exists and has every properties and values we want.

=> All right, we just reexport the MUI component.

  1. A MUI component exists but misses some values we want.

=> We add support for missing values to the MUI component.

e.g. We want a Button component with 3 variants contained, outlined and ghost. MUIButton has only contained and outlined variants. So we create a Button component using MUIButton where we add support for ghost variant.

  1. A MUI component exists but misses some properties we want.

=> We add a new property to the MUI component.

e.g. We want a Fab component with 2 variants circular and extended and we want that these variants can be filled or outlined. MUIButton has only circular and outlined variants and no concept of filled or outlined. We do not force filled or outlined in variants because they are not the same. We add a new property which can be filled or outlined.

  1. Nothing exists on MUI

=> We create a new component from scratch.

Generally speaking :

  • color prop changes color (and not shape). Possible values : primary, secondary, success, error, warning, info
  • variant prop changes shape (and not color). Possible values : filled, outlined, ghost, …