For information on how to design components, see the component design docs.
Before working with EUI components or creating new ones, you may want to run a local server for the documentation site. This is where we demonstrate how the components in our design system work.
To view interactive documentation, start the development server using the command below.
yarn
yarn startOnce 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.
There are four steps to creating a new component:
- Create the SCSS for the component in
src/components - Create the React portion of the component
- Write tests
- Document it with examples in
src-docs
You can do this using Yeoman, or you can do it manually if you prefer.
yarn run test-unit runs the Jest unit tests once.
yarn run test-unit button will run tests with "button" in the spec name. You can pass other
Jest CLI arguments by just adding them to the
end of the command like this:
yarn run test-unit -- -u will update your snapshots. To pass flags or other options you'll need
to follow the format of yarn run test-unit -- [arguments].
yarn run test-unit -- --watch watches for changes and runs the tests as you code.
yarn run test-unit -- --coverage generates a code coverage report showing you how
fully-tested the code is, located at reports/jest-coverage.
Refer to the testing guide for guidelines on writing and designing your tests.
If a component has subcomponents (<EuiToolBar> and <EuiToolBarSearch>), tightly-coupled components (<EuiButton> and <EuiButtonGroup>), or you just want to group some related components together (<EuiTextInput>, <EuiTextArea>, and <EuiCheckBox>), then they belong in the same logical grouping. In this case, you can create additional SCSS files for these components in the same component directory.
We follow Kibana's CSS style guide and SCSS style guide.