developing

Component development & architecture

Before working with EUI components or creating new ones, you will want to run a local development server. This is where we demonstrate how the components in our design system work.

Once the server boots up, you can visit it on your browser at: http://localhost:8030/. The development server watches for changes to the source code files and will automatically recompile the components for you when you make changes.

Component creation

There are four steps to creating a new component:

1. Create the React portion of the component
   • See Component file & folder architecture for more detailed steps on how to spin up new files
2. Create the styles
   • See Writing styles with Emotion
3. Write tests
   • All components should have at minimum unit tests
   • For more, see the dedicated testing wiki docs
4. Document it with examples in src-docs
   • See the dedicated documentation wiki guidelines

Component patterns

We use a number of patterns and conventions throughout our components for naming, props, refs, and icons that should be followed whenever possible.