Kendo Themes HTML Components

A collection of HTML helpers used for developing Kendo UI themes.

Basic Usage

Authoring Tests

Reference Rendering

Create tests for the reference rendering for components and their features in /src/[component]/tests by using the HTML components to remove repetition:

• Create the TSX test and use the respective HTML component src/[component]/tests/[component]-[scenario]-[platform].tsx (see reference)
• Create the HTML template src/[component]/tests/[component]-[scenario]-[platform].html (see reference)
• Make sure the compiled script is referenced in the HTML page ( see reference)

The output (.html) is updated as part of the CI build and committed automatically. Review the output in PRs for correctness.

Per-Suite Rendering

Follow the process established by your team to create and update reference tests. The test pages are typically created from live examples with some formatting and filtering applied.

The workflow can look like this:

1. Create a runnable example, either for a new scenario or an existing reference demo.
2. Wrap the actual example in a <div id="test-area" class="grid"> (see reference).
3. Copy and reference the styles.css stylesheet in your example.
4. Run the demo and copy the source code of the page.
   1. Either manually, by using the Pretty HTML tool or an existing page as a template.
   2. Or as part of the E2E test suite of the component using the snapshotMarkup helper from @progress/kendo-e2e.
5. Create a new file following this name template: packages/html/src/[component]/[component]/[component]-[scenario]-[platform].html
6. Create a PR and submit the new example.