API Formats

Overview

Topic	Guidelines
Boolean	Try to use the predefined boolean words
String	Use the predefined conventions for levels and hierarchy
Value of None	Don't use null and undefined

Boolean

Try to use the following when creating booleans.

Positive Boolean	Negative Boolean	Neutral Boolean
		indeterminate
loop	unloop
autoplay	noautoplay
checked	unchecked
enabled	disabled
active	inactive
selected	unselected
toggled	untoggled
interactive	nointeractive
styled	unstyled
clicked	unclicked
rounded	unrounded

String

Don't Use String For Something Boolean

If it's boolean, use boolean. If it's more than just true or false, use string.

Don't do this:

{% include "@bolt/component-name.twig" with {
  rounded: "rounded"
} %}

Color and Size Levels

Use x to indicate levels.

For theme names, we use a range of light and dark:

• xlight
• light
• dark
• xdark

For size or breakpoint names, we use a range of small and large:

• xxsmall
• xsmall
• small
• medium
• large
• xlarge
• xxlarge

Information Hierarchy

Use the following to indicate hierarchy:

• color: primary
• color: secondary
• color: tertiary

Responsive Behavior

Use @ to indicate responsive behaviors.

Example

• width: full
• width: full@small
• width: full@medium
• width: full@large

Value of None:

theme:
  type: string
  title: 'Theme'
  description: 'Color theme options.'
  default: xlight
  enum:
    - xlight
    - light
    - dark
    - xdark
    - none

In the above example, to truly remove theme, one has to explicitly set it to none. Since that's not boolean, true, false, and null would not work, only values from the schema would work. But these values won't be invalid, they will just return the schema default.

Never use null or undefined

The following is invalid, don't do it.

{% include "@bolt/component-name.twig" with {
  prop1: null,
  prop2: ""
} %}