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. Bootstrap the repo running npm install. It will install and link all themes.
3. In the theme repo, create a new branch for your component with the git checkout -b my-component command.
4. Run npm run bootstrap.
5. Run npm run sass anywhere in the repo to build all themes.
6. Style away!
7. Rebase your branch and make sure there are no merge conflicts.
8. Create a Pull Request:
   1. In the description of the PR, use the following keywords:

      fixes: #1234                ==>    The PR fixes the "1234" issue. When it is merged, the issue will be automatically closed.
      targets: #1234              ==>    The PR fixes the "1234" issue. When it is merged, the person who merges the PR should move the issue to "Ready for test" and a QA must test the fix. 
      related to: #1234           ==>    The PR is related to the "1234" issue. However, it doesn't fix it entirely.
      required: #1234             ==>    In order for another PR to works, this must be merged.
      needed for: #1234           ==>    Same as the above.
      prerequisite for: #1234     ==>    Same as the above.
      requires: #1234             ==>    In order for this to work, another PR must be merged.
      needs: #1234                ==>    Same as the above.
      

   2. 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 sass (or npm run dart) 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 npm run serve-tests 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?theme=material
• tests/visual/{componentName}.html?theme=bootstrap

8. After commit, Travis CI generates an additional commit including binary files for every change in visual tests. To remove the unnecessary commits, run the following commands:

git checkout develop
git pl
git checkout my-branch
git rebase -i origin/develop

Important: pl stands for the following alias
pl = "!f() { git fetch --prune; git rebase --preserve-merges `git tracked` ; }; f"

in the editor of choice drop the unwanted commits by replacing pick command with drop (or just d) and save. Then push the changes with git push -f.

Happy visual test coding!