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>