Skip to content

Files

61 lines (42 loc) · 1.87 KB

DOCUMENTATION.md

File metadata and controls

61 lines (42 loc) · 1.87 KB

Development Documentation

Notes on how we've developed things in this project.

Visual customizability

One of our most important features is the ability to customize the UI of the Components. We currently support 2 implementations of this:

  1. CSS Variable Fallbacks

CSS variables are the simplest way for developers to add UI customizability to the Component's. When defining an aesthetic style (color, border, etc), simply write it as an CSS variable with a fallback:

main {
  background-color: var(--component-background-color, blue);
}

Leaving the variable undefined will allow it to be defined by the user like so:

<nylas-component style="--component-background-color: black" />
  1. theme Property

Some Components also have a theme property to let us define multiple default themes but still allow the user to create a custom theme.

<main class={theme ?? "a-default-theme"}>
main.a-default-theme {
  background-color: var(--component-background-color, blue);
}

The user can redefine the style by replacing the theme property (and therefore removing the class name) and defining new values for the variables.

<nylas-component theme="custom" style="--component-background-color: black" />

properties.json

All Components have a properties.json file to help keep track of Component's properties for the Nylas Docs and Nylas Dashboard.

When adding a new property, make sure to define the property's label (actual property name), title (name in written English), type, and default value. Most types have a number of options associated with them as well.

Some properties can be flagged with noPreview to signify that this property is not to be edited or shown for certain cases

{
  "label": "theme",
  "title": "Theme",
  "type": "string",
  "options": ["theme-1", "theme-2", "theme-3", "theme-4", "theme-5"],
  "value": "theme-1"
},