Documenting

Guidelines around patterns must be concise and clear. When documenting a pattern in Solar please provide the following, in this order:

Always:

• Pattern name
• Short description (one or two sentences, typically "X does this" or "X allows users to do this")
• Live example + code
• (Optional) Make sure the images used in live example code are not in webp format since it isn't supported in all the browsers.

If available:

• Research insights and additional guidelines (e.g. "use when", "don't use when")
• Variants
• Behaviour, such as validation
• Configurations
• Editorial
• Implementation
• If there are related patterns include links in the "see also" section

See Date Input as an example.

Stateful examples

If you need to document a component that will require some sort of state being passed to it you can use the DocStateProvider component.

This component uses the function as children pattern. You'll have access to a state object which can be pre-populated and a function for setting a new state.

Below is an example of usage:

<DocStateProvider initialState={{ clicked: false }}>
  {({ state, setState }) => (
    <button onClick={() => setState(state => ({ clicked: !state.clicked }))}>
      {state.clicked ? 'clicked' : 'click me'}
    </button>
  )}
</DocStateProvider>