Front End Workflow

This article demonstrates the workflow for the Kendo UI themes generation, management, and support, and shares general front-end development resources for the Kendo UI suites.

In This Article

• The Procedure
• Themes Development with Visual Tests

The Procedure

When improving a theme to support a new component:

1. Clone the themes repository into the kendo-themes folder.
2. In the component repo, link the theme through NPM by running the npm link ../kendo-themes/packages/{themeName} command, where themeName is default, bootstrap, or material.
3. Run the component demos with the gulp start or gulp docs command.
4. In the theme repo, create a new branch for your component with the git checkout -b my-component command.
5. Run npm run watch in the theme directory (kendo-themes/packages/{themeName}) to build the theme whenever you make changes.
6. Style away!
7. Rebase your branch and make sure there are no merge conflicts.
8. Create a Pull Request and assign it to a reviewer.

• Themes documentation (kendo-themes repository)

Themes Development with Visual Tests

If a certain component or any of its states (for example, disabled input) lack visual tests, feel free to contribute. If the visual tests differ, make sure that you provide the template markups for both the jQuery and Angular component.

Visual tests help you to fix bugs or add RTL styles.

To guard against regressions and make pull request reviews easier, the CI build automatically creates screenshots of the sample pages in tests/visual/{componentname}.html for all feature branches.

To use visual tests when developing themes:

1. In the root themes folder, run npm run build to build all themes.
2. In kendo-themes/packages/{themeName}, where themeName is default, bootstrap, or material, execute npm run watch. The command runs the built theme and adds watchers for your local changes and theme output.
3. Globally install http-server.
4. In the kendo-themes directory, run http-server and follow the serving URL.
5. Open tests/visual/{componentName}.html and make your changes in the code.
6. Reload the browser. Your updates will be applied in the visual tests of the component.
7. To apply and visualize your changes across all themes, run npm run watch in each theme directory and add a query parameter to the serving URL as follows:

• tests/visual/{componentName}.html?material
• tests/visual/{componentName}.html?bootstrap

Happy visual test coding!