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 start
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.
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.
-
In the
eui
folder, runyarn link
to create the@elastic/eui
link package. -
In the
kibana
folder (and potentially thex-pack
sub-folder as well, if you are working in x-pack code), runyarn link @elastic/eui
to install the link package you just created. -
Start up the Kibana server.
-
Back in the
eui
folder, runyarn build
. Repeat (just) this step any time you make changes to your EUI component.
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.