Suggestions

[radkostanev]

A few suggestions that come to mind. Please feel free to add additional topics.

Refrain from hardcoding state-related classes

To give an example, the current DatePicker template internally uses the Calendar spec, which ultimately renders the following cells within its month view:

kendo-themes/packages/html/src/calendar/calendar-table.tsx

Lines 150 to 154 in 8cfe01f

	<CalendarCell text="8" hover />
	<CalendarCell text="9" focus />
	<CalendarCell text="10" selected />
	<CalendarCell text="11" hover focus />
	<CalendarCell text="12" hover selected />

This might be ok as a rendering test, as it tests all states as well as how they work in conjunction with one another but in a real implementation are hard, or in this specific case likely impossible to reproduce with an actual component interaction/configuration.

Provide the output of the tests with their default config

I feel like having the expected output and markup (much like we have it for the rendering tests here https://github.com/telerik/kendo-themes/tree/develop/tests/_output) that the default configuration of a given spec would yield would be beneficial. A rather simple example - the React implementation within the HTML specs might have a Calendar with its showOtherMonths prop defaulting to false. However, a given product might very well have that same value defaulting to true. Ideally the person testing should not have to look into the JSX component as well as all of its children to find out what the default config would yield. Instead, if one is to be able to have direct access to both the HTML and the outputted image, it would save time. The alternative to all of this is to

1. manually inspect individual components to validate what the config is(cumbersome for larger components),
2. run the templates himself,
3. capture the expected markup within his test paste it within a browser for him to look at.

Lastly, an ideal scenario might very well be one where both individual Telerik/Kendo products and the Kendo themes testing against the same expected output.

List all available templates

A full and up-to-date list of all available templates will be most valuable. I was not able to find one if such exists.

[Dimitar-Goshev]

TreeView

• In the spec and tests all nodes have k-treeview-mid class - https://github.com/telerik/kendo-themes/blob/develop/tests/treeview/treeview.html - There are no nodes with k-treeview-top or k-treeview-bot class, which is not following the rendering from Component options for treeview #3059

[Juveniel]

Calendar issue resolved with: #4882

[Dimitar-Goshev]

DropDownTree(MultiSelectTree)

DropdownTreePopup template shows a Check all checkbox inside DropDownTree without checkboxes - https://github.com/telerik/kendo-themes/blob/develop/packages/html/src/dropdowntree/templates/dropdowntree-popup.tsx#L10-L15

I would suggest creating separate templates for DropDownTree with checkboxes and without checkboxes.

[zhpenkov]

Recent changes we have made to the HTML components and templates regarding rendering test adoption.

Calendar - #4882
Dialog - #4903
ButtonGroup - #4904
BottomNav, DropdownTree, Orgchart, Timeline, Treeview - #4907

Changes

Calendar

• refactored calendar spec to be more modular and template-driven
• removed hardcoded state-related classes from spec and templates

Dialog

• made corrections to the spec and templates, adding k-dialog-wrapper element to be rendered by default

ButtonGroup

• added k-group-start / k-group-end classes to the start/end button in a ButtonGroup

Orgchart

• details prop exposed in template

BottomNavigation

• added positionMode property to the component's spec
• added test for different positionMode scenarios (fixed, sticky, absolute)

TimeLine

• added k-focus state on the current TimelineTrackItem in horizontal mode. - accessibility spec
• made the left arrow button of the horizontal mode Timeline always disabled by default.

Treeview

• included k-treeview-top, k-treeview-bot classes in templates and tests.

DropdownTree / MultiSelectTree

• removed checkboxes from DropdownTree templates since the component should not support multi-select.
• added filtering template for DropdownTree.
• removed checked checkboxes from MultiSelectTree templates (state-related classes).

[Dimitar-Goshev]

ColorPicker popup issues:

• The Unified rendering does not mention popup rendering.
  The tests use class k-color-picker-popup - https://github.com/telerik/kendo-themes/blob/develop/tests/colorpicker/colorpicker-opened.html#L42 . But in jQuery and Angular the class of the popup is k-colorpicker-popup. Is this a typo in the tests? Other component names are not separated by - .

• In the ColorPickerPopupPalette, ColorEditorGroup and ColorEditorPaletteGroup template there is k-button-group-solid class of the button group:
  .k-animation-container.k-animation-container-shown .k-child-animation-container .k-popup .k-coloreditor.k-flatcolorpicker .k-coloreditor-header.k-hstack .k-coloreditor-header-actions.k-hstack .k-button-group.k-button-group-solid
  As the buttons inside the button group are flat and as the Unified rendering for FlatColorPicker shows class flat, the class should be .k-button-group.k-button-group-flat

• ColorPickerPopupGradient template shows a state that cannot be achieved - template Dojo - https://dojo.telerik.com/@Dimitar-Goshev/oGEsiQIW - There is .k-input-inner .k-value-icon.k-color-preview.k-no-color, while the .k-coloreditor-current-color.k-color-preview has color. If the ColorPicker has no value to render k-no-color, then the color preview receives k-no-color and in turn does not match the spec
  

• FlatColorPicker - in jQuery and Angular there is a .k-coloreditor-reset class on the reset/clear color button. The class was mentioned in this old Styles revision issue ColorPicker Styles Revision #2202 . But its removal is not mentioned as a change in the Unified rendering issue. Is this class necessary or it should be removed from the rendering in jQuery? Could be inspected in jQuery clearButton. And a screenshot from Angular:
  

[zhpenkov]

I will provide a quick answer for every bullet point you mentioned.

• ColorPicker popup class name should be k-colorpicker-popup. We have a typo in the tests.
• The fillMode of the 'select view' ColorEditor button group should be flat (k-button-group-flat). Its an oversight in the spec.
• We will correct the template state and add options for customization.
• The k-coloreditor-reset class is used in Angular & JQuery for a locator and does not provide any theme styles. This seems to be more of an implementation detail and the difference in tests should be handled with allow extra.

You can follow this PR - #4911 for changes related to this item.

[zhpenkov]

Recent changes we have made to the HTML components and templates regarding rendering test adoption.

Breadcrumb - #4910
Editor, ListBox, ColorPicker, Slider - #4911

Changes

Breadcrumb

• update templates and make them collapseMode-oriented

Editor

• split editor-normal template into editor-responsive-toolbar template and editor-normal template
• add editor-resizable template
• make Redo/Undo buttons disabled by default

ListBox

• add data and actions to the listbox-normal template

ColorPicker

• correct typo in ColorPicker popup class - ( was k-color-picker-popup, should be k-colorpicker-popup)
• change the fillMode of the 'select view' ColorEditor button group to flat (k-button-group-flat)
• make template scenarios achievable, and add additional parameters for customizing templates

Slider

• remove 'k-' prefix from k-range-slider, k-slider-0, k-slider-50, k-slider-100 as they are used only for applying styles in the tests and can be mistaken for actual kendo classes
• remove RangeSlider buttons
• add k-first and k-last classes to slider's tick

[zhpenkov]

Recent changes we have made to the HTML components and templates regarding rendering test adoption.

TreeView, Editor, Checkbox, Radio, Orgchart - #4920

Changes

TreeView

• refactor and add the position classes (k-treeview-top, k-treeview-bot) in their correct place.
  Single root treeview item should have k-treeview-top & k-treeview-bot classes.
  Single treeview item should have k-treeview-bot class.

Editor

• correct initial button states in the Editor's toolbar.

Checkbox

• add additional templates for Checkboxes in group.

Radio

• add additional templates for RadioButtons in group.

Orgchart

• correct the position of k-justify-content-center, k-justify-content-around classes
  of k-orgchart-group element in tests.

[zhpenkov]

Recent changes we have made to the HTML components and templates regarding rendering test adoption.

TreeList - #4946
Gantt - #4950
ScrollView, FloatingLabel, ColumnMenu, Popover, Upload, Grid - #4947

Changes

TreeList

• add treelist templates

Gantt

• add gantt templates

ScrollView

• expose prop for currentView

FloatingLabel

• correct existing template and add floating-label-input-value template.

ColumnMenu

• update ColumnMenu templates to use TabStrip spec

Popover

• add content to popover-normal template
• add k-popup class on k-popover element

Upload

• add empty property to upload-normal template
• add upload-with-action-buttons template

Grid

• remove undefined class coming from grid-with-locked-columns template

[zhpenkov]

Recent changes we have made to the HTML components and templates regarding rendering test adoption.

Chip - #4972
Filter, Upload - #4970
DropDownList, AutoComplete, ComboBox, MultiSelect, TreeView, Skeleton, Pager, PDFViewer, Inputs - #4974
Warnings - #4958

Changes

Chip

• add text to Chip templates
• remove k-text-ellipsis class.

Filter

• expose filter-preview template

Upload

• expose upload-with-action-buttons template

TreeView

• Split TreeView with load-more item into separate template.

DropDownList, AutoComplete, ComboBox, MultiSelect

• Add tests and templates for grouping - modern.

TreeView

• Split TreeView with load-more item into separate template.

Skeleton

• Add test scenario showcasing skeleton-container with animation (for jQuery implementation).

Pager

• Make spec more customizable, expose props for customization. change default props.

PDFViewer

• Update default PDFViewer toolbar items.
• Add disabled button states to the blank template.

Inputs

• Make input separators (separating prefix/suffix from inner-input) toggleable.

Others

Removed Warnings (TextArea, others)

• Remove textarea value warning, as well as unique key template warning.

[zhpenkov]

Recent changes we have made to the HTML components and templates regarding rendering test adoption.

Wizard - #4979
Wizard, ColumnMenu, ColorPalette - #4982
Calendar, MultiViewCalendar, Scheduler - #4980
TabStrip - #4984

Changes

Wizard

• render position classes accordingly
• correct wizard pager text
• remove reset button from default rendering

ColorPalette

• add content to colorpalette-normal template
• add tbody wrapper

ColumnMenu

• update column-menu-normal template

Calendar

• make calendar test/template correspond with the layout of calendar months in real life
• remove primary color of the calendar today button
• make century calendar title button disabled

Scheduler

• add scheduler year view template
• export scheduler HTML module

Others

Remove warnings (ColorPalette)

• Remove ColorPalette unique key warning.